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 components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
html,
|
@layer base {
|
||||||
body {
|
html,
|
||||||
height: 100%;
|
body {
|
||||||
|
@apply h-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
background: #fbfbfb;
|
||||||
|
|
||||||
|
@apply dark:bg-black;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
@layer components {
|
||||||
--light-bg: #fbfbfb;
|
.btn {
|
||||||
--dark-bg: #000;
|
@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 {
|
@layer utilities {
|
||||||
-webkit-tap-highlight-color: transparent;
|
.not-ready * {
|
||||||
background: var(--light-bg);
|
@apply !transition-none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark body {
|
.btn-menu::before,
|
||||||
background: var(--dark-bg);
|
.btn-menu::after {
|
||||||
}
|
@apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
|
||||||
|
}
|
||||||
|
|
||||||
.not-ready,
|
.nav-wrapper {
|
||||||
.not-ready * {
|
background: #fbfbfb;
|
||||||
transition: none !important;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
.open {
|
||||||
@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;
|
@apply overflow-hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.open .btn-menu::before {
|
||||||
@apply duration-200 hover:text-black dark:hover:text-white;
|
@apply w-6 translate-y-[5.5px] rotate-45;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-menu::before,
|
.open .btn-menu::after {
|
||||||
.btn-menu::after {
|
@apply w-6 -translate-y-[5.5px] -rotate-45;
|
||||||
@apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.nav-wrapper {
|
.open .nav-wrapper {
|
||||||
background: var(--light-bg);
|
@apply top-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.open {
|
article pre {
|
||||||
@apply overflow-hidden;
|
@apply -mx-8 !p-8 shadow-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.open .btn-menu::before {
|
article blockquote {
|
||||||
@apply w-6 translate-y-[5.5px] rotate-45;
|
padding-left: calc(theme('space.8') - 3px) !important;
|
||||||
}
|
margin-left: calc(theme('space.8') * -1) !important;
|
||||||
|
|
||||||
.open .btn-menu::after {
|
@apply !border-black;
|
||||||
@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;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
424
assets/main.css
424
assets/main.css
|
|
@ -425,6 +425,21 @@ video {
|
||||||
height: auto;
|
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 {
|
*, ::before, ::after {
|
||||||
--tw-border-spacing-x: 0;
|
--tw-border-spacing-x: 0;
|
||||||
--tw-border-spacing-y: 0;
|
--tw-border-spacing-y: 0;
|
||||||
|
|
@ -1204,39 +1219,51 @@ video {
|
||||||
--tw-prose-invert-td-borders: #404040;
|
--tw-prose-invert-td-borders: #404040;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prose-stone {
|
.btn {
|
||||||
--tw-prose-body: #44403c;
|
border-radius: 9999px;
|
||||||
--tw-prose-headings: #1c1917;
|
--tw-bg-opacity: 1;
|
||||||
--tw-prose-lead: #57534e;
|
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||||
--tw-prose-links: #1c1917;
|
padding-top: 1rem;
|
||||||
--tw-prose-bold: #1c1917;
|
padding-bottom: 1rem;
|
||||||
--tw-prose-counters: #78716c;
|
padding-left: 1.5rem;
|
||||||
--tw-prose-bullets: #d6d3d1;
|
padding-right: 1.5rem;
|
||||||
--tw-prose-hr: #e7e5e4;
|
font-size: 0.875rem;
|
||||||
--tw-prose-quotes: #1c1917;
|
line-height: 1.25rem;
|
||||||
--tw-prose-quote-borders: #e7e5e4;
|
--tw-text-opacity: 1;
|
||||||
--tw-prose-captions: #78716c;
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||||
--tw-prose-code: #1c1917;
|
-webkit-text-decoration-line: none;
|
||||||
--tw-prose-pre-code: #e7e5e4;
|
text-decoration-line: none;
|
||||||
--tw-prose-pre-bg: #292524;
|
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||||
--tw-prose-th-borders: #d6d3d1;
|
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||||
--tw-prose-td-borders: #e7e5e4;
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||||
--tw-prose-invert-body: #d6d3d1;
|
transition-duration: 100ms;
|
||||||
--tw-prose-invert-headings: #fff;
|
}
|
||||||
--tw-prose-invert-lead: #a8a29e;
|
|
||||||
--tw-prose-invert-links: #fff;
|
.btn:active {
|
||||||
--tw-prose-invert-bold: #fff;
|
--tw-scale-x: .95;
|
||||||
--tw-prose-invert-counters: #a8a29e;
|
--tw-scale-y: .95;
|
||||||
--tw-prose-invert-bullets: #57534e;
|
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));
|
||||||
--tw-prose-invert-hr: #44403c;
|
}
|
||||||
--tw-prose-invert-quotes: #f5f5f4;
|
|
||||||
--tw-prose-invert-quote-borders: #44403c;
|
.dark .btn {
|
||||||
--tw-prose-invert-captions: #a8a29e;
|
--tw-bg-opacity: 1;
|
||||||
--tw-prose-invert-code: #fff;
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||||
--tw-prose-invert-pre-code: #d6d3d1;
|
--tw-text-opacity: 1;
|
||||||
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
|
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||||
--tw-prose-invert-th-borders: #57534e;
|
}
|
||||||
--tw-prose-invert-td-borders: #44403c;
|
|
||||||
|
.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 {
|
.fixed {
|
||||||
|
|
@ -1272,18 +1299,14 @@ video {
|
||||||
top: 0px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-16 {
|
.bottom-20 {
|
||||||
bottom: 4rem;
|
bottom: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-full {
|
.top-full {
|
||||||
top: 100%;
|
top: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-20 {
|
|
||||||
bottom: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.z-50 {
|
.z-50 {
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
|
|
@ -1292,6 +1315,11 @@ video {
|
||||||
z-index: 40;
|
z-index: 40;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx-auto {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.my-0 {
|
.my-0 {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
|
|
@ -1307,11 +1335,6 @@ video {
|
||||||
margin-bottom: 0px !important;
|
margin-bottom: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx-auto {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx-1 {
|
.mx-1 {
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.25rem;
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
|
|
@ -1322,6 +1345,14 @@ video {
|
||||||
margin-right: 1.5rem;
|
margin-right: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mb-24 {
|
||||||
|
margin-bottom: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.-mt-4 {
|
||||||
|
margin-top: -1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.mb-20 {
|
.mb-20 {
|
||||||
margin-bottom: 5rem;
|
margin-bottom: 5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1330,26 +1361,22 @@ video {
|
||||||
margin-right: 1.25rem;
|
margin-right: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-0\.5 {
|
.mt-1 {
|
||||||
margin-bottom: 0.125rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-0 {
|
.mb-3 {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-20 {
|
.mt-24 {
|
||||||
margin-top: 5rem;
|
margin-top: 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ml-auto {
|
.ml-auto {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-16 {
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-12 {
|
.mt-12 {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1370,10 +1397,6 @@ video {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-16 {
|
|
||||||
margin-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ml-1\.5 {
|
.ml-1\.5 {
|
||||||
margin-left: 0.375rem;
|
margin-left: 0.375rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1394,26 +1417,6 @@ video {
|
||||||
margin-right: -2rem;
|
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 {
|
.block {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
@ -1422,8 +1425,8 @@ video {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.\!h-16 {
|
.h-20 {
|
||||||
height: 4rem !important;
|
height: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-\[5rem\] {
|
.h-\[5rem\] {
|
||||||
|
|
@ -1442,16 +1445,12 @@ video {
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.\!h-20 {
|
|
||||||
height: 5rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.min-h-\[calc\(100\%-10rem\)\] {
|
.min-h-\[calc\(100\%-10rem\)\] {
|
||||||
min-height: calc(100% - 10rem);
|
min-height: calc(100% - 10rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.\!w-16 {
|
.w-20 {
|
||||||
width: 4rem !important;
|
width: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-1\/2 {
|
.w-1\/2 {
|
||||||
|
|
@ -1470,10 +1469,6 @@ video {
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.\!w-20 {
|
|
||||||
width: 5rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.max-w-3xl {
|
.max-w-3xl {
|
||||||
max-width: 48rem;
|
max-width: 48rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1554,55 +1549,24 @@ video {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-2 {
|
|
||||||
border-width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-black\/10 {
|
.border-black\/10 {
|
||||||
border-color: rgb(0 0 0 / 0.1);
|
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 {
|
.bg-white\/80 {
|
||||||
background-color: rgb(255 255 255 / 0.8);
|
background-color: rgb(255 255 255 / 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-6 {
|
.bg-black\/\[3\%\] {
|
||||||
padding: 1.5rem;
|
background-color: rgb(0 0 0 / 3%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-3 {
|
.p-3 {
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-2 {
|
.p-6 {
|
||||||
padding: 0.5rem;
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-8 {
|
.px-8 {
|
||||||
|
|
@ -1620,18 +1584,18 @@ video {
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pt-20 {
|
||||||
|
padding-top: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb-32 {
|
||||||
|
padding-bottom: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
.pb-1 {
|
.pb-1 {
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-16 {
|
|
||||||
padding-top: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-40 {
|
|
||||||
padding-bottom: 10rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-2 {
|
.pb-2 {
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1648,25 +1612,13 @@ video {
|
||||||
padding-bottom: 4rem;
|
padding-bottom: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-20 {
|
|
||||||
padding-top: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-20 {
|
|
||||||
padding-bottom: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-32 {
|
|
||||||
padding-bottom: 8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-3xl {
|
.text-9xl {
|
||||||
font-size: 1.875rem;
|
font-size: 8rem;
|
||||||
line-height: 2.25rem;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-sm {
|
.text-sm {
|
||||||
|
|
@ -1674,9 +1626,9 @@ video {
|
||||||
line-height: 1.25rem;
|
line-height: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-9xl {
|
.text-3xl {
|
||||||
font-size: 8rem;
|
font-size: 1.875rem;
|
||||||
line-height: 1;
|
line-height: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-\[0\.9em\] {
|
.text-\[0\.9em\] {
|
||||||
|
|
@ -1692,10 +1644,6 @@ video {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-medium {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.\!leading-none {
|
.\!leading-none {
|
||||||
line-height: 1 !important;
|
line-height: 1 !important;
|
||||||
}
|
}
|
||||||
|
|
@ -1722,34 +1670,12 @@ video {
|
||||||
opacity: 0.6;
|
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 {
|
.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: 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);
|
--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);
|
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 {
|
.duration-200 {
|
||||||
transition-duration: 200ms;
|
transition-duration: 200ms;
|
||||||
}
|
}
|
||||||
|
|
@ -1758,99 +1684,12 @@ video {
|
||||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
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 * {
|
.not-ready * {
|
||||||
transition: none !important;
|
transition-property: 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));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-menu::before,
|
.btn-menu::before,
|
||||||
.btn-menu::after {
|
.btn-menu::after {
|
||||||
display: block;
|
display: block;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
width: 1.25rem;
|
width: 1.25rem;
|
||||||
|
|
@ -1862,13 +1701,13 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .btn-menu::before, .dark
|
.dark .btn-menu::before, .dark
|
||||||
.btn-menu::after {
|
.btn-menu::after {
|
||||||
--tw-invert: invert(100%);
|
--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);
|
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 {
|
.nav-wrapper {
|
||||||
background: var(--light-bg);
|
background: #fbfbfb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.open {
|
.open {
|
||||||
|
|
@ -1894,17 +1733,35 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
article pre {
|
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: 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);
|
--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);
|
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 {
|
article blockquote {
|
||||||
padding: 0 0 0 calc(2rem - 3px) !important;
|
padding-left: calc(2rem - 3px) !important;
|
||||||
margin: 0 0 0 calc(2rem * -1) !important;
|
margin-left: calc(2rem * -1) !important;
|
||||||
border-color: #27272a !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 {
|
.first-of-type\:mt-0:first-of-type {
|
||||||
|
|
@ -1915,6 +1772,23 @@ article blockquote {
|
||||||
margin-bottom: 0px;
|
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 {
|
.dark .dark\:prose-invert {
|
||||||
--tw-prose-body: var(--tw-prose-invert-body);
|
--tw-prose-body: var(--tw-prose-invert-body);
|
||||||
--tw-prose-headings: var(--tw-prose-invert-headings);
|
--tw-prose-headings: var(--tw-prose-invert-headings);
|
||||||
|
|
@ -1934,10 +1808,6 @@ article blockquote {
|
||||||
--tw-prose-td-borders: var(--tw-prose-invert-td-borders);
|
--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\%\] {
|
.dark .dark\:bg-white\/\[8\%\] {
|
||||||
background-color: rgb(255 255 255 / 8%);
|
background-color: rgb(255 255 255 / 8%);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,11 +21,9 @@
|
||||||
{{ if or $avatar_url site.Params.name }}
|
{{ if or $avatar_url site.Params.name }}
|
||||||
<div class="-mt-4 mb-20 flex">
|
<div class="-mt-4 mb-20 flex">
|
||||||
{{ if $avatar_url }}
|
{{ if $avatar_url }}
|
||||||
<img
|
<div class="mr-5 h-20 w-20 rounded-full border border-black/10 bg-white/80 p-3 shadow-xl">
|
||||||
class="my-0 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" />
|
||||||
src="{{ $avatar_url }}"
|
</div>
|
||||||
alt="avatar"
|
|
||||||
/>
|
|
||||||
{{ end }}<!---->
|
{{ end }}<!---->
|
||||||
{{ if site.Params.name }}
|
{{ if site.Params.name }}
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@
|
||||||
<nav class="lg:ml-12 lg:flex lg:flex-row lg:items-center lg:space-x-6">
|
<nav class="lg:ml-12 lg:flex lg:flex-row lg:items-center lg:space-x-6">
|
||||||
{{ range . }}
|
{{ range . }}
|
||||||
<a
|
<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 }}"
|
href="{{ .URL }}"
|
||||||
>{{ .Name }}</a
|
>{{ .Name }}</a
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue