diff --git a/styles/notion.css b/styles/notion.css index 65c6786..6c1d9f4 100644 --- a/styles/notion.css +++ b/styles/notion.css @@ -10,12 +10,6 @@ .notion { --notion-max-width: 720px; --notion-header-height: 54px; - @apply bg-gray-100; - font-family: var(--base-font-family); -} - -.dark-mode .notion { - @apply bg-black; } .notion-page { @@ -55,12 +49,9 @@ } .notion-gallery-grid { - /* grid-template-columns: repeat(auto-fill, minmax(720, 1fr)); */ - + grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); /* only one column in a row. */ - grid-template-columns: 1fr; - /* remove padding below the card */ - grid-auto-rows: auto; + /* grid-template-columns: 1fr; */ grid-gap: 6vmin; gap: 6vmin; } @@ -77,7 +68,6 @@ .notion-gallery-grid .notion-collection-card-property { white-space: unset; text-overflow: unset; - margin-top: 2em; } .notion-gallery-grid .notion-property-text { @@ -85,63 +75,31 @@ } .notion-collection-card { - border-radius: 5px; - overflow: hidden; - padding: 0px 0px 0px 0px; - /*box-shadow: none;*/ - /*@apply nm-flat-white;*/ + border-radius: 16px; + box-shadow: none; } .notion-collection-card-cover img { - border-radius: 4px 4px 0px 0px; + border-radius: 16px; } .notion-collection-card { overflow: visible; - @apply bg-white transition-all duration-500 ease-in-out; -} - -.dark-mode .notion-collection-card-body { - @apply bg-blue-800; -} - -.dark-mode .notion-collection-card-cover .notion-collection-card-cover-empty { - @apply bg-gray-700; } .notion-collection-card-cover { - border-radius: 5px 5px 0px 0px ; - overflow: hidden; - @apply bg-white transition-all duration-500 ease-in-out; - /*box-shadow: 2px 2px 8px 4px rgba(15, 15, 15, 0.1);*/ -} - -.notion-collection-card-cover .notion-collection-card-cover-empty { - @apply bg-white; -} - -.notion-collection-card:hover .notion-collection-card-cover { + border-radius: 16px; + box-shadow: 2px 2px 8px 4px rgba(15, 15, 15, 0.1); } .notion-collection-card-cover { border-bottom: 0 none; + transition: filter 150ms linear; filter: none; } -.notion-collection-card:hover { - background: none; - @apply bg-white dark:bg-blue-700; - /*@apply nm-flat-white-lg;*/ -} - -.notion-collection-card:focus { -} .notion-collection-card:hover .notion-collection-card-cover { - /*filter: brightness(120%);*/ -} - -.notion-collection-card .notion { - margin-top: 10px; + filter: brightness(120%); } .notion-collection-card-body { @@ -374,13 +332,13 @@ } .notion-header { - background: hsla(0, 0%, 100%, 0.2); + background: hsla(0, 0%, 100%, 0.8); backdrop-filter: saturate(180%) blur(16px); } .dark-mode .notion-header { background: transparent; - box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2); + box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); backdrop-filter: saturate(180%) blur(8px); }