refine css
This commit is contained in:
nanxiaobei
parent
997baa23da
commit
f74f283ca8
4 changed files with 202 additions and 338 deletions
106
assets/app.css
106
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
424
assets/main.css
424
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%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,11 +21,9 @@
|
|||
{{ if or $avatar_url site.Params.name }}
|
||||
<div class="-mt-4 mb-20 flex">
|
||||
{{ if $avatar_url }}
|
||||
<img
|
||||
class="my-0 mr-5 !h-20 !w-20 rounded-full border border-black/10 bg-white/80 p-3 shadow-xl"
|
||||
src="{{ $avatar_url }}"
|
||||
alt="avatar"
|
||||
/>
|
||||
<div class="mr-5 h-20 w-20 rounded-full border border-black/10 bg-white/80 p-3 shadow-xl">
|
||||
<img class="my-0 rounded-full hover:animate-spin" src="{{ $avatar_url }}" alt="avatar" />
|
||||
</div>
|
||||
{{ end }}<!---->
|
||||
{{ if site.Params.name }}
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
<nav class="lg:ml-12 lg:flex lg:flex-row lg:items-center lg:space-x-6">
|
||||
{{ range . }}
|
||||
<a
|
||||
class="block font-medium lg:font-normal text-center leading-[5rem] text-3xl lg:text-base {{ if eq .URL $url }}active{{ end }}"
|
||||
class="block text-center text-3xl leading-[5rem] lg:text-base lg:font-normal"
|
||||
href="{{ .URL }}"
|
||||
>{{ .Name }}</a
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue