youwen5/blog
1
0
Fork 0
mirror of https://github.com/youwen5/blog.git synced 2024-11-28 11:23:49 -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;
}
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,
h4,
@ -51,7 +55,7 @@
@apply font-math;
}
math[display="block"] {
@apply overflow-x-auto my-1 text-xl;
@apply my-1 text-xl;
}
ol,
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]"
>
<header class="mt-14 md:mt-24 mb-14">
<h1 class="text-4xl md:text-5xl font-serif font-medium">
<a
href="/"
class="dark:hover:text-muted-dark hover:text-muted-light transition-colors duration-500"
>Gradient Ascent</a
>
</h1>
<div class="inline-flex items-center w-full">
<h1 class="text-4xl md:text-5xl font-serif font-medium">
<a
href="/"
class="dark:hover:text-muted-dark hover:text-muted-light transition-colors duration-500 text-nowrap"
>Gradient Ascent</a
>
</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">
writing about computers, math, hacks, games, and life.
</p>

2
tailwind.config.js
View file

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