malte70/hugo-paper
1
0
Fork 0
Code Activity

update ui

Browse source
This commit is contained in:
nanxiaobei 2023-07-06 02:03:28 +08:00
parent 7d3c730e86
commit 88f7841577
5 changed files with 34 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/app.css
View file

@ -29,7 +29,7 @@
@layer components { @layer components {
.btn { .btn {
@apply rounded-full bg-black px-7 py-4 text-sm text-white no-underline shadow-sm duration-100 active:scale-95 dark:bg-white dark:text-black; @apply rounded-full bg-black px-7 py-4 text-sm text-white no-underline shadow duration-100 active:scale-95 dark:bg-white dark:text-black;
} }
.link { .link {
@ -76,7 +76,7 @@
} }
article pre { article pre {
@apply -mx-8 !p-8 shadow-sm; @apply -mx-8 !p-8 shadow;
} }
article blockquote { article blockquote {

43
assets/main.css
View file

@ -1053,8 +1053,8 @@ body {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
text-decoration-line: none; text-decoration-line: none;
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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);
transition-duration: 100ms; transition-duration: 100ms;
} }
@ -1178,18 +1178,14 @@ body {
margin-bottom: 0.375rem; margin-bottom: 0.375rem;
} }
.mb-16 {
margin-bottom: 4rem;
}
.mb-2 { .mb-2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.mb-20 {
margin-bottom: 5rem;
}
.mb-24 {
margin-bottom: 6rem;
}
.ml-1 { .ml-1 {
margin-left: 0.25rem; margin-left: 0.25rem;
} }
@ -1206,6 +1202,10 @@ body {
margin-left: auto; margin-left: auto;
} }
.ml-px {
margin-left: 1px;
}
.mr-1 { .mr-1 {
margin-right: 0.25rem; margin-right: 0.25rem;
} }
@ -1438,10 +1438,6 @@ body {
padding-bottom: 0.625rem; padding-bottom: 0.625rem;
} }
.pb-24 {
padding-bottom: 6rem;
}
.pl-3 { .pl-3 {
padding-left: 0.75rem; padding-left: 0.75rem;
} }
@ -1450,8 +1446,8 @@ body {
padding-right: 0.75rem; padding-right: 0.75rem;
} }
.pt-16 { .pt-12 {
padding-top: 4rem; padding-top: 3rem;
} }
.text-center { .text-center {
@ -1536,6 +1532,11 @@ body {
text-decoration-line: none; text-decoration-line: none;
} }
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.opacity-60 { .opacity-60 {
opacity: 0.6; opacity: 0.6;
} }
@ -1544,9 +1545,9 @@ body {
opacity: 0.7; opacity: 0.7;
} }
.shadow-sm { .shadow {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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);
} }
@ -1627,8 +1628,8 @@ article pre {
margin-left: -2rem; margin-left: -2rem;
margin-right: -2rem; margin-right: -2rem;
padding: 2rem !important; padding: 2rem !important;
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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);
} }

2
layouts/_default/baseof.html
View file

@ -42,7 +42,7 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main <main
class="prose prose-neutral relative mx-auto min-h-[calc(100%-10rem)] max-w-3xl px-8 pb-24 pt-16 dark:prose-invert" class="prose prose-neutral relative mx-auto min-h-[calc(100%-10rem)] max-w-3xl px-8 pb-16 pt-12 dark:prose-invert"
> >
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</main> </main>

10
layouts/_default/list.html
View file

@ -2,7 +2,7 @@
<!-- Tag Title --> <!-- Tag Title -->
{{ if and .Title (eq .Type "tags") }} {{ if and .Title (eq .Type "tags") }}
<h1 class="mb-24">#{{ .Title }}</h1> <h1 class="mb-16">#{{ .Title }}</h1>
{{ end }} {{ end }}
<!-- $pages --> <!-- $pages -->
@ -20,10 +20,10 @@
{{ $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-2 mb-20 flex items-center"> <div class="-mt-2 mb-16 flex items-center">
{{ if $avatar_url }} {{ if $avatar_url }}
<div <div
class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/50 p-3 shadow-sm dark:bg-white/[15%]" class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/50 p-3 shadow dark:bg-white/[15%]"
> >
<img <img
class="my-0 aspect-square w-16 rounded-full !bg-black/5 hover:animate-spin dark:!bg-black/80" class="my-0 aspect-square w-16 rounded-full !bg-black/5 hover:animate-spin dark:!bg-black/80"
@ -49,12 +49,12 @@
<section 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">
{{ if gt .Weight 0 }} {{ if gt .Weight 0 }}
<span <span
class="mb-2 inline-block text-[0.8rem] font-medium uppercase tracking-wider text-[#ff3b2d] opacity-70" class="mb-2 ml-px inline-block text-[0.8rem] font-medium uppercase tracking-wider text-[#ff3b2d] opacity-70"
>Featured</span >Featured</span
> >
{{ end }} {{ end }}
<h2 class="!my-0 pb-1 font-bold !leading-none">{{ .Title }}</h2> <h2 class="!my-0 pb-1 font-bold !leading-none">{{ .Title }}</h2>
<time class="text-sm opacity-60" <time class="text-sm antialiased opacity-60"
>{{ .Date | time.Format ":date_medium" }}</time >{{ .Date | time.Format ":date_medium" }}</time
> >
<a class="absolute inset-0 text-[0]" href="{{ .Permalink }}">{{ .Title }}</a> <a class="absolute inset-0 text-[0]" href="{{ .Permalink }}">{{ .Title }}</a>

8
layouts/_default/single.html
View file

@ -1,11 +1,11 @@
{{ define "main" }} {{ define "main" }}
<article> <article>
<header class="mb-20"> <header class="mb-16">
<h1 class="!my-0 pb-2.5">{{ .Title }}</h1> <h1 class="!my-0 pb-2.5">{{ .Title }}</h1>
{{ if ne .Type "page" }} {{ if ne .Type "page" }}
<div class="text-sm opacity-60"> <div class="text-sm antialiased opacity-60">
{{ if .Date }} {{ if .Date }}
<time>{{ .Date | time.Format ":date_medium" }}</time> <time>{{ .Date | time.Format ":date_medium" }}</time>
{{ end }}<!----> {{ end }}<!---->
@ -40,14 +40,14 @@
<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 <a
class="flex w-1/2 items-center rounded-l-md p-6 pr-3 no-underline hover:bg-black/[2%] dark:hover:bg-white/[3%]" class="flex w-1/2 items-center rounded-l-md p-6 pr-3 font-semibold no-underline hover:bg-black/[2%] dark:hover:bg-white/[3%]"
href="{{ .Permalink }}" 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 rounded-r-md p-6 pl-3 no-underline hover:bg-black/[2%] dark:hover:bg-white/[3%]" class="ml-auto flex w-1/2 items-center justify-end rounded-r-md p-6 pl-3 font-semibold no-underline hover:bg-black/[2%] dark:hover:bg-white/[3%]"
href="{{ .Permalink }}" href="{{ .Permalink }}"
><span>{{ .Name }}</span><span class="ml-1.5">→</span></a ><span>{{ .Name }}</span><span class="ml-1.5">→</span></a
> >