1
0
Fork 0

refine css

This commit is contained in:
nanxiaobei 2022-07-20 02:21:00 +08:00
parent 997baa23da
commit f74f283ca8
4 changed files with 202 additions and 338 deletions

View file

@ -10,72 +10,68 @@
@tailwind components;
@tailwind utilities;
html,
body {
height: 100%;
}
@layer base {
html,
body {
@apply h-full;
}
:root {
--light-bg: #fbfbfb;
--dark-bg: #000;
}
body {
body {
-webkit-tap-highlight-color: transparent;
background: var(--light-bg);
background: #fbfbfb;
@apply dark:bg-black;
}
}
.dark body {
background: var(--dark-bg);
}
.not-ready,
.not-ready * {
transition: none !important;
}
.btn {
@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 {
.link {
@apply duration-200 hover:text-black dark:hover:text-white;
}
}
.btn-menu::before,
.btn-menu::after {
@layer utilities {
.not-ready * {
@apply !transition-none;
}
.btn-menu::before,
.btn-menu::after {
@apply block h-[2px] w-5 bg-black duration-200 content-[''] dark:invert;
}
}
.nav-wrapper {
background: var(--light-bg);
}
.nav-wrapper {
background: #fbfbfb;
}
.open {
.open {
@apply overflow-hidden;
}
}
.open .btn-menu::before {
.open .btn-menu::before {
@apply w-6 translate-y-[5.5px] rotate-45;
}
}
.open .btn-menu::after {
.open .btn-menu::after {
@apply w-6 -translate-y-[5.5px] -rotate-45;
}
}
.open .nav-wrapper {
.open .nav-wrapper {
@apply top-0;
}
}
article pre {
@apply shadow-lg;
article pre {
@apply -mx-8 !p-8 shadow-lg;
}
padding: theme('space.8') !important;
margin-inline: calc(theme('space.8') * -1);
}
article blockquote {
padding-left: calc(theme('space.8') - 3px) !important;
margin-left: calc(theme('space.8') * -1) !important;
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;
}
}

View file

@ -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%);
}

View file

@ -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>

View file

@ -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
>