diff options
author | nanxiaobei <nanxiaobei@gmail.com> | 2022-07-24 18:57:13 +0300 |
---|---|---|
committer | nanxiaobei <nanxiaobei@gmail.com> | 2022-07-24 18:57:13 +0300 |
commit | 738b99ee39c60fc4c24b9155ef1e7213eca4a9fb (patch) | |
tree | 4ad3731ab6bde703634d8b06d9cbbc5ca8718f22 | |
parent | adbe5fcda65c8ac8c4ff1638cf640fa083df6382 (diff) |
update ui
-rw-r--r-- | assets/app.css | 4 | ||||
-rw-r--r-- | assets/main.css | 77 | ||||
-rw-r--r-- | layouts/_default/list.html | 25 | ||||
-rw-r--r-- | layouts/_default/single.html | 10 |
4 files changed, 82 insertions, 34 deletions
diff --git a/assets/app.css b/assets/app.css index d655957..c549c02 100644 --- a/assets/app.css +++ b/assets/app.css @@ -64,6 +64,10 @@ @apply top-0; } + article { + @apply text-lg leading-[1.9] text-black dark:text-white; + } + article pre { @apply -mx-8 !p-8 shadow-lg; } diff --git a/assets/main.css b/assets/main.css index 0830d7c..22dec80 100644 --- a/assets/main.css +++ b/assets/main.css @@ -1361,14 +1361,18 @@ body { margin-right: 1.25rem; } -.mt-1 { - margin-top: 0.25rem; +.mt-1\.5 { + margin-top: 0.375rem; } .mb-3 { margin-bottom: 0.75rem; } +.mt-1 { + margin-top: 0.25rem; +} + .mt-24 { margin-top: 6rem; } @@ -1425,8 +1429,8 @@ body { display: flex; } -.h-20 { - height: 5rem; +.h-14 { + height: 3.5rem; } .h-\[5rem\] { @@ -1449,8 +1453,8 @@ body { min-height: calc(100% - 10rem); } -.w-20 { - width: 5rem; +.w-14 { + width: 3.5rem; } .w-1\/2 { @@ -1511,6 +1515,10 @@ body { flex-wrap: wrap; } +.items-start { + align-items: flex-start; +} + .items-center { align-items: center; } @@ -1537,6 +1545,10 @@ body { margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse))); } +.break-words { + overflow-wrap: break-word; +} + .rounded-full { border-radius: 9999px; } @@ -1545,8 +1557,8 @@ body { border-radius: 0.5rem; } -.border { - border-width: 1px; +.border-\[0\.5px\] { + border-width: 0.5px; } .border-black\/10 { @@ -1557,6 +1569,10 @@ body { background-color: rgb(255 255 255 / 0.8); } +.\!bg-black\/5 { + background-color: rgb(0 0 0 / 0.05) !important; +} + .bg-black\/\[3\%\] { background-color: rgb(0 0 0 / 3%); } @@ -1574,9 +1590,9 @@ body { padding-right: 2rem; } -.px-4 { - padding-left: 1rem; - padding-right: 1rem; +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; } .py-2 { @@ -1596,6 +1612,10 @@ body { padding-bottom: 0.25rem; } +.pb-2\.5 { + padding-bottom: 0.625rem; +} + .pb-2 { padding-bottom: 0.5rem; } @@ -1631,15 +1651,15 @@ body { line-height: 2.25rem; } -.text-\[0\.9em\] { - font-size: 0.9em; -} - .text-lg { font-size: 1.125rem; line-height: 1.75rem; } +.text-\[0\.9em\] { + font-size: 0.9em; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -1667,10 +1687,6 @@ body { text-decoration-line: none; } -.opacity-70 { - opacity: 0.7; -} - .opacity-60 { opacity: 0.6; } @@ -1681,6 +1697,12 @@ body { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .duration-200 { transition-duration: 200ms; } @@ -1737,6 +1759,19 @@ body { top: 0px; } +article { + font-size: 1.125rem; + line-height: 1.75rem; + line-height: 1.9; + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.dark article { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + article pre { margin-left: -2rem; margin-right: -2rem; @@ -1813,6 +1848,10 @@ article blockquote { --tw-prose-td-borders: var(--tw-prose-invert-td-borders); } +.dark .dark\:\!bg-black\/80 { + background-color: rgb(0 0 0 / 0.8) !important; +} + .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 bb1a238..cf2bf11 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,7 +1,7 @@ {{ define "main" }} -<!-- Main Title --> -{{ if .Title }} +<!-- Tag Title --> +{{ if and .Title (eq .Type "tags") }} <h1 class="mb-24">{{ .Title }}</h1> {{ end }} @@ -19,16 +19,21 @@ {{ $avatar_url := $.Scratch.Get `avatar_url` }}<!----> {{ if or $avatar_url site.Params.name }} -<div class="-mt-4 mb-20 flex"> +<div class="-mt-4 mb-20 flex items-start"> {{ if $avatar_url }} - <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 class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/80 p-3 shadow-xl"> + <img + class="my-0 h-14 w-14 rounded-full !bg-black/5 hover:animate-spin dark:!bg-black/80" + src="{{ $avatar_url }}" + /> </div> {{ end }}<!----> {{ if site.Params.name }} <div> - <h1 class="mt-1 mb-3 text-3xl font-bold">{{ site.Params.name }}</h1> - <div class="">{{ site.Params.bio | default (print "Personal blog by " site.Params.name) }}</div> + <h1 class="mt-1.5 mb-3 text-3xl font-bold">{{ site.Params.name }}</h1> + <div class="break-words"> + {{ site.Params.bio | default (print "Personal blog by " site.Params.name) }} + </div> </div> {{ end }} </div> @@ -36,11 +41,11 @@ {{ end }} -<article class="relative my-10 first-of-type:mt-0 last-of-type:mb-0"> +<section class="relative my-10 first-of-type:mt-0 last-of-type:mb-0"> <h2 class="!my-0 pb-1 !leading-none">{{ .Title }}</h2> - <time class="text-sm opacity-70">{{ .Date | time.Format ":date_medium" }}</time> + <time class="text-sm opacity-60">{{ .Date | time.Format ":date_medium" }}</time> <a class="absolute inset-0" href="{{ .Permalink }}"></a> -</article> +</section> {{ end }} <!-- Main Nav --> diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 0d84a6e..64bda7b 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -2,10 +2,10 @@ <article> <header class="mb-20"> - <h1 class="!my-0 pb-2">{{ .Title }}</h1> + <h1 class="!my-0 pb-2.5">{{ .Title }}</h1> {{ if ne .Type "page" }} - <div class="text-[0.9em] opacity-70"> + <div class="text-sm opacity-60"> {{ if .Date }} <time>{{ .Date | time.Format ":date_medium" }}</time> {{ end }}<!----> @@ -24,7 +24,7 @@ <footer class="mt-12 flex flex-wrap"> {{ range .Params.tags }} {{ $href := print (absURL "tags/") (urlize .) }} <a - class="mr-1.5 mb-1.5 rounded-lg bg-black/[3%] px-4 py-2 no-underline dark:bg-white/[8%]" + class="mr-1.5 mb-1.5 rounded-lg bg-black/[3%] px-5 py-2 no-underline dark:bg-white/[8%]" href="{{ $href }}" >{{ . }}</a > @@ -37,13 +37,13 @@ {{ if and (gt (len $pages) 1) (in $pages . ) }} <nav class="mt-24 flex rounded-lg bg-black/[3%] text-lg dark:bg-white/[8%]"> {{ with $pages.Next . }} - <a class="flex w-1/2 items-center p-6 pr-3 font-bold no-underline" href="{{ .Permalink }}" + <a class="flex w-1/2 items-center p-6 pr-3 no-underline" href="{{ .Permalink }}" ><span class="mr-1.5">←</span><span>{{ .Name }}</span></a > {{ end }}<!----> {{ with $pages.Prev . }} <a - class="ml-auto flex w-1/2 items-center justify-end p-6 pl-3 font-bold no-underline" + class="ml-auto flex w-1/2 items-center justify-end p-6 pl-3 no-underline" href="{{ .Permalink }}" ><span>{{ .Name }}</span><span class="ml-1.5">→</span></a > |