youwen5/blog
1
0
Fork 0
mirror of https://github.com/youwen5/blog.git synced 2024-11-24 18:03:50 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: some visual elements for headers

Browse source
This commit is contained in:
Youwen Wu 2024-05-25 13:21:53 -07:00
parent 0a9c7bff9e
commit c3457ea258
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
4 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/css/default.css
View file

@ -30,7 +30,11 @@
@apply text-2xl font-bold; @apply text-2xl font-bold;
} }
h2 { h2 {
@apply text-2xl font-medium mt-8; @apply text-2xl font-medium mt-8 relative w-fit;
}
h2::after {
@apply block w-12 h-1 bg-muted-light absolute left-0 dark:bg-muted-dark mt-2 rounded-sm;
content: "";
} }
h3, h3,
h4, h4,
@ -51,7 +55,7 @@
@apply font-math; @apply font-math;
} }
math[display="block"] { math[display="block"] {
@apply overflow-x-auto my-1 text-xl; @apply my-1 text-xl;
} }
ol, ol,
ul { ul {

2
src/out/bundle.css
View file

File diff suppressed because one or more lines are too long

19
src/templates/default.html
View file

@ -84,13 +84,18 @@
class="container max-w-3xl mx-auto px-4 transition-colors duration-[2s]" class="container max-w-3xl mx-auto px-4 transition-colors duration-[2s]"
> >
<header class="mt-14 md:mt-24 mb-14"> <header class="mt-14 md:mt-24 mb-14">
<h1 class="text-4xl md:text-5xl font-serif font-medium"> <div class="inline-flex items-center w-full">
<a <h1 class="text-4xl md:text-5xl font-serif font-medium">
href="/" <a
class="dark:hover:text-muted-dark hover:text-muted-light transition-colors duration-500" href="/"
>Gradient Ascent</a class="dark:hover:text-muted-dark hover:text-muted-light transition-colors duration-500 text-nowrap"
> >Gradient Ascent</a
</h1> >
</h1>
<div
class="w-full flex-grow flex-shrink rounded-lg h-1 bg-muted-light dark:bg-muted-dark mx-4"
></div>
</div>
<p class="mt-8 mb-3 px-1 italic"> <p class="mt-8 mb-3 px-1 italic">
writing about computers, math, hacks, games, and life. writing about computers, math, hacks, games, and life.
</p> </p>

2
tailwind.config.js
View file

@ -15,7 +15,7 @@ module.exports = {
light: "#44403c", light: "#44403c",
}, },
secondary: { secondary: {
dark: "#2e1065", dark: "#4c1d95",
light: "#4338ca", light: "#4338ca",
}, },
accent: { accent: {