From f74f283ca8b5f32b63c1c41efbe1d81e15e3c155 Mon Sep 17 00:00:00 2001 From: nanxiaobei Date: Wed, 20 Jul 2022 02:21:00 +0800 Subject: [PATCH] refine css --- assets/app.css | 106 +++++---- assets/main.css | 424 ++++++++++++----------------------- layouts/_default/list.html | 8 +- layouts/partials/header.html | 2 +- 4 files changed, 202 insertions(+), 338 deletions(-) diff --git a/assets/app.css b/assets/app.css index 25ab921..d655957 100644 --- a/assets/app.css +++ b/assets/app.css @@ -10,72 +10,68 @@ @tailwind components; @tailwind utilities; -html, -body { - height: 100%; +@layer base { + html, + body { + @apply h-full; + } + + body { + -webkit-tap-highlight-color: transparent; + background: #fbfbfb; + + @apply dark:bg-black; + } } -:root { - --light-bg: #fbfbfb; - --dark-bg: #000; +@layer components { + .btn { + @apply rounded-full bg-black py-4 px-6 text-sm text-white no-underline shadow-lg duration-100 active:scale-95 dark:bg-white dark:text-black; + } + + .link { + @apply duration-200 hover:text-black dark:hover:text-white; + } } -body { - -webkit-tap-highlight-color: transparent; - background: var(--light-bg); -} +@layer utilities { + .not-ready * { + @apply !transition-none; + } -.dark body { - background: var(--dark-bg); -} + .btn-menu::before, + .btn-menu::after { + @apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert; + } -.not-ready, -.not-ready * { - transition: none !important; -} + .nav-wrapper { + background: #fbfbfb; + } -.btn { - @apply rounded-full bg-black py-4 px-6 text-sm text-white no-underline shadow-lg duration-100 active:scale-95 dark:bg-white dark:text-black; -} + .open { + @apply overflow-hidden; + } -.link { - @apply duration-200 hover:text-black dark:hover:text-white; -} + .open .btn-menu::before { + @apply w-6 translate-y-[5.5px] rotate-45; + } -.btn-menu::before, -.btn-menu::after { - @apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert; -} + .open .btn-menu::after { + @apply w-6 -translate-y-[5.5px] -rotate-45; + } -.nav-wrapper { - background: var(--light-bg); -} + .open .nav-wrapper { + @apply top-0; + } -.open { - @apply overflow-hidden; -} + article pre { + @apply -mx-8 !p-8 shadow-lg; + } -.open .btn-menu::before { - @apply w-6 translate-y-[5.5px] rotate-45; -} + article blockquote { + padding-left: calc(theme('space.8') - 3px) !important; + margin-left: calc(theme('space.8') * -1) !important; -.open .btn-menu::after { - @apply w-6 -translate-y-[5.5px] -rotate-45; -} - -.open .nav-wrapper { - @apply top-0; -} - -article pre { - @apply shadow-lg; - - padding: theme('space.8') !important; - margin-inline: calc(theme('space.8') * -1); -} - -article blockquote { - padding: 0 0 0 calc(theme('space.8') - 3px) !important; - margin: 0 0 0 calc(theme('space.8') * -1) !important; - border-color: theme('colors.zinc.800') !important; + @apply !border-black; + } } diff --git a/assets/main.css b/assets/main.css index b9ea39d..f3b23a6 100644 --- a/assets/main.css +++ b/assets/main.css @@ -425,6 +425,21 @@ video { height: auto; } +html, + body { + height: 100%; +} + +body { + -webkit-tap-highlight-color: transparent; + background: #fbfbfb; +} + +.dark body { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; @@ -1204,39 +1219,51 @@ video { --tw-prose-invert-td-borders: #404040; } -.prose-stone { - --tw-prose-body: #44403c; - --tw-prose-headings: #1c1917; - --tw-prose-lead: #57534e; - --tw-prose-links: #1c1917; - --tw-prose-bold: #1c1917; - --tw-prose-counters: #78716c; - --tw-prose-bullets: #d6d3d1; - --tw-prose-hr: #e7e5e4; - --tw-prose-quotes: #1c1917; - --tw-prose-quote-borders: #e7e5e4; - --tw-prose-captions: #78716c; - --tw-prose-code: #1c1917; - --tw-prose-pre-code: #e7e5e4; - --tw-prose-pre-bg: #292524; - --tw-prose-th-borders: #d6d3d1; - --tw-prose-td-borders: #e7e5e4; - --tw-prose-invert-body: #d6d3d1; - --tw-prose-invert-headings: #fff; - --tw-prose-invert-lead: #a8a29e; - --tw-prose-invert-links: #fff; - --tw-prose-invert-bold: #fff; - --tw-prose-invert-counters: #a8a29e; - --tw-prose-invert-bullets: #57534e; - --tw-prose-invert-hr: #44403c; - --tw-prose-invert-quotes: #f5f5f4; - --tw-prose-invert-quote-borders: #44403c; - --tw-prose-invert-captions: #a8a29e; - --tw-prose-invert-code: #fff; - --tw-prose-invert-pre-code: #d6d3d1; - --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); - --tw-prose-invert-th-borders: #57534e; - --tw-prose-invert-td-borders: #44403c; +.btn { + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + padding-top: 1rem; + padding-bottom: 1rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + -webkit-text-decoration-line: none; + text-decoration-line: none; + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + transition-duration: 100ms; +} + +.btn:active { + --tw-scale-x: .95; + --tw-scale-y: .95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.dark .btn { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.link { + transition-duration: 200ms; +} + +.link:hover { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.dark .link:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } .fixed { @@ -1272,18 +1299,14 @@ video { top: 0px; } -.bottom-16 { - bottom: 4rem; +.bottom-20 { + bottom: 5rem; } .top-full { top: 100%; } -.bottom-20 { - bottom: 5rem; -} - .z-50 { z-index: 50; } @@ -1292,6 +1315,11 @@ video { z-index: 40; } +.mx-auto { + margin-left: auto; + margin-right: auto; +} + .my-0 { margin-top: 0px; margin-bottom: 0px; @@ -1307,11 +1335,6 @@ video { margin-bottom: 0px !important; } -.mx-auto { - margin-left: auto; - margin-right: auto; -} - .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; @@ -1322,6 +1345,14 @@ video { margin-right: 1.5rem; } +.mb-24 { + margin-bottom: 6rem; +} + +.-mt-4 { + margin-top: -1rem; +} + .mb-20 { margin-bottom: 5rem; } @@ -1330,26 +1361,22 @@ video { margin-right: 1.25rem; } -.mb-0\.5 { - margin-bottom: 0.125rem; +.mt-1 { + margin-top: 0.25rem; } -.mb-0 { - margin-bottom: 0px; +.mb-3 { + margin-bottom: 0.75rem; } -.mt-20 { - margin-top: 5rem; +.mt-24 { + margin-top: 6rem; } .ml-auto { margin-left: auto; } -.mb-16 { - margin-bottom: 4rem; -} - .mt-12 { margin-top: 3rem; } @@ -1370,10 +1397,6 @@ video { margin-bottom: 0.25rem; } -.mt-16 { - margin-top: 4rem; -} - .ml-1\.5 { margin-left: 0.375rem; } @@ -1394,26 +1417,6 @@ video { margin-right: -2rem; } -.mb-24 { - margin-bottom: 6rem; -} - -.mt-24 { - margin-top: 6rem; -} - -.mt-1 { - margin-top: 0.25rem; -} - -.mb-3 { - margin-bottom: 0.75rem; -} - -.-mt-4 { - margin-top: -1rem; -} - .block { display: block; } @@ -1422,8 +1425,8 @@ video { display: flex; } -.\!h-16 { - height: 4rem !important; +.h-20 { + height: 5rem; } .h-\[5rem\] { @@ -1442,16 +1445,12 @@ video { height: 2rem; } -.\!h-20 { - height: 5rem !important; -} - .min-h-\[calc\(100\%-10rem\)\] { min-height: calc(100% - 10rem); } -.\!w-16 { - width: 4rem !important; +.w-20 { + width: 5rem; } .w-1\/2 { @@ -1470,10 +1469,6 @@ video { width: 2rem; } -.\!w-20 { - width: 5rem !important; -} - .max-w-3xl { max-width: 48rem; } @@ -1554,55 +1549,24 @@ video { border-width: 1px; } -.border-2 { - border-width: 2px; -} - .border-black\/10 { border-color: rgb(0 0 0 / 0.1); } -.border-black\/20 { - border-color: rgb(0 0 0 / 0.2); -} - -.border-purple-600 { - --tw-border-opacity: 1; - border-color: rgb(147 51 234 / var(--tw-border-opacity)); -} - -.border-purple-200 { - --tw-border-opacity: 1; - border-color: rgb(233 213 255 / var(--tw-border-opacity)); -} - -.border-purple-400 { - --tw-border-opacity: 1; - border-color: rgb(192 132 252 / var(--tw-border-opacity)); -} - -.border-black\/5 { - border-color: rgb(0 0 0 / 0.05); -} - -.bg-black\/\[3\%\] { - background-color: rgb(0 0 0 / 3%); -} - .bg-white\/80 { background-color: rgb(255 255 255 / 0.8); } -.p-6 { - padding: 1.5rem; +.bg-black\/\[3\%\] { + background-color: rgb(0 0 0 / 3%); } .p-3 { padding: 0.75rem; } -.p-2 { - padding: 0.5rem; +.p-6 { + padding: 1.5rem; } .px-8 { @@ -1620,18 +1584,18 @@ video { padding-bottom: 0.5rem; } +.pt-20 { + padding-top: 5rem; +} + +.pb-32 { + padding-bottom: 8rem; +} + .pb-1 { padding-bottom: 0.25rem; } -.pt-16 { - padding-top: 4rem; -} - -.pb-40 { - padding-bottom: 10rem; -} - .pb-2 { padding-bottom: 0.5rem; } @@ -1648,25 +1612,13 @@ video { padding-bottom: 4rem; } -.pt-20 { - padding-top: 5rem; -} - -.pb-20 { - padding-bottom: 5rem; -} - -.pb-32 { - padding-bottom: 8rem; -} - .text-center { text-align: center; } -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; +.text-9xl { + font-size: 8rem; + line-height: 1; } .text-sm { @@ -1674,9 +1626,9 @@ video { line-height: 1.25rem; } -.text-9xl { - font-size: 8rem; - line-height: 1; +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; } .text-\[0\.9em\] { @@ -1692,10 +1644,6 @@ video { font-weight: 700; } -.font-medium { - font-weight: 500; -} - .\!leading-none { line-height: 1 !important; } @@ -1722,34 +1670,12 @@ video { opacity: 0.6; } -.shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - -.shadow-2xl { - --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); - --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.drop-shadow-2xl { - --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -.drop-shadow-xl { - --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .duration-200 { transition-duration: 200ms; } @@ -1758,99 +1684,12 @@ video { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } -.\[background\:url\(\.\/theme\.svg\)_left_center\/cover_no-repeat\] { - background: url(./theme.svg) left center/cover no-repeat; -} - -.\[background\:url\(\.\/theme\.png\)_left_\/_auto_theme\(\'spacing\.6\'\)_no-repeat\] { - background: url(./theme.png) left / auto 1.5rem no-repeat; -} - -.\[transition\:_background-position_0\.4s_steps\(5\)\] { - transition: background-position 0.4s steps(5); -} - -.\[background\:var\(--url\)_center_center\/cover_no-repeat\] { - background: var(--url) center center/cover no-repeat; -} - -.\[background\:url\(\.\/theme\.png\)_left_center\/_auto_theme\(\'spacing\.6\'\)_no-repeat\] { - background: url(./theme.png) left center/ auto 1.5rem no-repeat; -} - -html, -body { - height: 100%; -} - -:root { - --light-bg: #fbfbfb; - --dark-bg: #000; -} - -body { - -webkit-tap-highlight-color: transparent; - background: var(--light-bg); -} - -.dark body { - background: var(--dark-bg); -} - -.not-ready, .not-ready * { - transition: none !important; -} - -.btn { - border-radius: 9999px; - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); - padding-top: 1rem; - padding-bottom: 1rem; - padding-left: 1.5rem; - padding-right: 1.5rem; - font-size: 0.875rem; - line-height: 1.25rem; - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); - -webkit-text-decoration-line: none; - text-decoration-line: none; - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - transition-duration: 100ms; -} - -.btn:active { - --tw-scale-x: .95; - --tw-scale-y: .95; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.dark .btn { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - -.link { - transition-duration: 200ms; -} - -.link:hover { - --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); -} - -.dark .link:hover { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + transition-property: none !important; } .btn-menu::before, -.btn-menu::after { + .btn-menu::after { display: block; height: 2px; width: 1.25rem; @@ -1862,13 +1701,13 @@ body { } .dark .btn-menu::before, .dark -.btn-menu::after { + .btn-menu::after { --tw-invert: invert(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .nav-wrapper { - background: var(--light-bg); + background: #fbfbfb; } .open { @@ -1894,17 +1733,35 @@ body { } article pre { + margin-left: -2rem; + margin-right: -2rem; + padding: 2rem !important; --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - padding: 2rem !important; - margin-inline: calc(2rem * -1); } article blockquote { - padding: 0 0 0 calc(2rem - 3px) !important; - margin: 0 0 0 calc(2rem * -1) !important; - border-color: #27272a !important; + padding-left: calc(2rem - 3px) !important; + margin-left: calc(2rem * -1) !important; + --tw-border-opacity: 1 !important; + border-color: rgb(0 0 0 / var(--tw-border-opacity)) !important; +} + +.\[background\:url\(\.\/theme\.svg\)_left_center\/cover_no-repeat\] { + background: url(./theme.svg) left center/cover no-repeat; +} + +.\[background\:url\(\.\/theme\.png\)_left_center\/_auto_theme\(\'spacing\.6\'\)_no-repeat\] { + background: url(./theme.png) left center/ auto 1.5rem no-repeat; +} + +.\[transition\:_background-position_0\.4s_steps\(5\)\] { + transition: background-position 0.4s steps(5); +} + +.\[background\:var\(--url\)_center_center\/cover_no-repeat\] { + background: var(--url) center center/cover no-repeat; } .first-of-type\:mt-0:first-of-type { @@ -1915,6 +1772,23 @@ article blockquote { margin-bottom: 0px; } +@-webkit-keyframes spin { + to { + transform: rotate(360deg); + } +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.hover\:animate-spin:hover { + -webkit-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} + .dark .dark\:prose-invert { --tw-prose-body: var(--tw-prose-invert-body); --tw-prose-headings: var(--tw-prose-invert-headings); @@ -1934,10 +1808,6 @@ article blockquote { --tw-prose-td-borders: var(--tw-prose-invert-td-borders); } -.dark .dark\:border-white\/20 { - border-color: rgb(255 255 255 / 0.2); -} - .dark .dark\:bg-white\/\[8\%\] { background-color: rgb(255 255 255 / 8%); } diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 7b82f8a..bb1a238 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -21,11 +21,9 @@ {{ if or $avatar_url site.Params.name }}
{{ if $avatar_url }} - avatar +
+ avatar +
{{ end }} {{ if site.Params.name }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 6cdf05e..4c68936 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -54,7 +54,7 @@