update ui
This commit is contained in:
parent
adbe5fcda6
commit
738b99ee39
4 changed files with 82 additions and 34 deletions
|
@ -64,6 +64,10 @@
|
||||||
@apply top-0;
|
@apply top-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
@apply text-lg leading-[1.9] text-black dark:text-white;
|
||||||
|
}
|
||||||
|
|
||||||
article pre {
|
article pre {
|
||||||
@apply -mx-8 !p-8 shadow-lg;
|
@apply -mx-8 !p-8 shadow-lg;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1361,14 +1361,18 @@ body {
|
||||||
margin-right: 1.25rem;
|
margin-right: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-1 {
|
.mt-1\.5 {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-3 {
|
.mb-3 {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mt-1 {
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.mt-24 {
|
.mt-24 {
|
||||||
margin-top: 6rem;
|
margin-top: 6rem;
|
||||||
}
|
}
|
||||||
|
@ -1425,8 +1429,8 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-20 {
|
.h-14 {
|
||||||
height: 5rem;
|
height: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-\[5rem\] {
|
.h-\[5rem\] {
|
||||||
|
@ -1449,8 +1453,8 @@ body {
|
||||||
min-height: calc(100% - 10rem);
|
min-height: calc(100% - 10rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-20 {
|
.w-14 {
|
||||||
width: 5rem;
|
width: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-1\/2 {
|
.w-1\/2 {
|
||||||
|
@ -1511,6 +1515,10 @@ body {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.items-start {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
.items-center {
|
.items-center {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
@ -1537,6 +1545,10 @@ body {
|
||||||
margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
|
margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.break-words {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
.rounded-full {
|
.rounded-full {
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
}
|
}
|
||||||
|
@ -1545,8 +1557,8 @@ body {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border {
|
.border-\[0\.5px\] {
|
||||||
border-width: 1px;
|
border-width: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-black\/10 {
|
.border-black\/10 {
|
||||||
|
@ -1557,6 +1569,10 @@ body {
|
||||||
background-color: rgb(255 255 255 / 0.8);
|
background-color: rgb(255 255 255 / 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.\!bg-black\/5 {
|
||||||
|
background-color: rgb(0 0 0 / 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.bg-black\/\[3\%\] {
|
.bg-black\/\[3\%\] {
|
||||||
background-color: rgb(0 0 0 / 3%);
|
background-color: rgb(0 0 0 / 3%);
|
||||||
}
|
}
|
||||||
|
@ -1574,9 +1590,9 @@ body {
|
||||||
padding-right: 2rem;
|
padding-right: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-4 {
|
.px-5 {
|
||||||
padding-left: 1rem;
|
padding-left: 1.25rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.py-2 {
|
.py-2 {
|
||||||
|
@ -1596,6 +1612,10 @@ body {
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pb-2\.5 {
|
||||||
|
padding-bottom: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
.pb-2 {
|
.pb-2 {
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
@ -1631,15 +1651,15 @@ body {
|
||||||
line-height: 2.25rem;
|
line-height: 2.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-\[0\.9em\] {
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-lg {
|
.text-lg {
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
line-height: 1.75rem;
|
line-height: 1.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-\[0\.9em\] {
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
.text-2xl {
|
.text-2xl {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
|
@ -1667,10 +1687,6 @@ body {
|
||||||
text-decoration-line: none;
|
text-decoration-line: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.opacity-70 {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.opacity-60 {
|
.opacity-60 {
|
||||||
opacity: 0.6;
|
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);
|
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 {
|
.duration-200 {
|
||||||
transition-duration: 200ms;
|
transition-duration: 200ms;
|
||||||
}
|
}
|
||||||
|
@ -1737,6 +1759,19 @@ body {
|
||||||
top: 0px;
|
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 {
|
article pre {
|
||||||
margin-left: -2rem;
|
margin-left: -2rem;
|
||||||
margin-right: -2rem;
|
margin-right: -2rem;
|
||||||
|
@ -1813,6 +1848,10 @@ article blockquote {
|
||||||
--tw-prose-td-borders: var(--tw-prose-invert-td-borders);
|
--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\%\] {
|
.dark .dark\:bg-white\/\[8\%\] {
|
||||||
background-color: rgb(255 255 255 / 8%);
|
background-color: rgb(255 255 255 / 8%);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
|
|
||||||
<!-- Main Title -->
|
<!-- Tag Title -->
|
||||||
{{ if .Title }}
|
{{ if and .Title (eq .Type "tags") }}
|
||||||
<h1 class="mb-24">{{ .Title }}</h1>
|
<h1 class="mb-24">{{ .Title }}</h1>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
@ -19,16 +19,21 @@
|
||||||
|
|
||||||
{{ $avatar_url := $.Scratch.Get `avatar_url` }}<!---->
|
{{ $avatar_url := $.Scratch.Get `avatar_url` }}<!---->
|
||||||
{{ 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 items-start">
|
||||||
{{ if $avatar_url }}
|
{{ if $avatar_url }}
|
||||||
<div class="mr-5 h-20 w-20 rounded-full border border-black/10 bg-white/80 p-3 shadow-xl">
|
<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 rounded-full hover:animate-spin" src="{{ $avatar_url }}" alt="avatar" />
|
<img
|
||||||
|
class="my-0 h-14 w-14 rounded-full !bg-black/5 hover:animate-spin dark:!bg-black/80"
|
||||||
|
src="{{ $avatar_url }}"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}<!---->
|
{{ end }}<!---->
|
||||||
{{ if site.Params.name }}
|
{{ if site.Params.name }}
|
||||||
<div>
|
<div>
|
||||||
<h1 class="mt-1 mb-3 text-3xl font-bold">{{ site.Params.name }}</h1>
|
<h1 class="mt-1.5 mb-3 text-3xl font-bold">{{ site.Params.name }}</h1>
|
||||||
<div class="">{{ site.Params.bio | default (print "Personal blog by " site.Params.name) }}</div>
|
<div class="break-words">
|
||||||
|
{{ site.Params.bio | default (print "Personal blog by " site.Params.name) }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -36,11 +41,11 @@
|
||||||
|
|
||||||
{{ end }}
|
{{ 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>
|
<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>
|
<a class="absolute inset-0" href="{{ .Permalink }}"></a>
|
||||||
</article>
|
</section>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<!-- Main Nav -->
|
<!-- Main Nav -->
|
||||||
|
|
|
@ -2,10 +2,10 @@
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<header class="mb-20">
|
<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" }}
|
{{ if ne .Type "page" }}
|
||||||
<div class="text-[0.9em] opacity-70">
|
<div class="text-sm opacity-60">
|
||||||
{{ if .Date }}
|
{{ if .Date }}
|
||||||
<time>{{ .Date | time.Format ":date_medium" }}</time>
|
<time>{{ .Date | time.Format ":date_medium" }}</time>
|
||||||
{{ end }}<!---->
|
{{ end }}<!---->
|
||||||
|
@ -24,7 +24,7 @@
|
||||||
<footer class="mt-12 flex flex-wrap">
|
<footer class="mt-12 flex flex-wrap">
|
||||||
{{ range .Params.tags }} {{ $href := print (absURL "tags/") (urlize .) }}
|
{{ range .Params.tags }} {{ $href := print (absURL "tags/") (urlize .) }}
|
||||||
<a
|
<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 }}"
|
href="{{ $href }}"
|
||||||
>{{ . }}</a
|
>{{ . }}</a
|
||||||
>
|
>
|
||||||
|
@ -37,13 +37,13 @@
|
||||||
{{ if and (gt (len $pages) 1) (in $pages . ) }}
|
{{ if and (gt (len $pages) 1) (in $pages . ) }}
|
||||||
<nav class="mt-24 flex rounded-lg bg-black/[3%] text-lg dark:bg-white/[8%]">
|
<nav class="mt-24 flex rounded-lg bg-black/[3%] text-lg dark:bg-white/[8%]">
|
||||||
{{ with $pages.Next . }}
|
{{ 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
|
><span class="mr-1.5">←</span><span>{{ .Name }}</span></a
|
||||||
>
|
>
|
||||||
{{ end }}<!---->
|
{{ end }}<!---->
|
||||||
{{ with $pages.Prev . }}
|
{{ with $pages.Prev . }}
|
||||||
<a
|
<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 }}"
|
href="{{ .Permalink }}"
|
||||||
><span>{{ .Name }}</span><span class="ml-1.5">→</span></a
|
><span>{{ .Name }}</span><span class="ml-1.5">→</span></a
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue