ayo/blog
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: respect system theme preference

Browse source
This commit is contained in:
Ayo Ayco 2024-06-11 16:40:04 +02:00
parent 9d461cedae
commit 4f88907821
8 changed files with 149 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Gemfile.lock
View file

@ -4,14 +4,13 @@ GEM
addressable (2.8.6) addressable (2.8.6)
public_suffix (>= 2.0.2, < 6.0) public_suffix (>= 2.0.2, < 6.0)
colorator (1.1.0) colorator (1.1.0)
concurrent-ruby (1.3.1) concurrent-ruby (1.3.3)
em-websocket (0.5.3) em-websocket (0.5.3)
eventmachine (>= 0.12.9) eventmachine (>= 0.12.9)
http_parser.rb (~> 0) http_parser.rb (~> 0)
eventmachine (1.2.7) eventmachine (1.2.7)
eventmachine (1.2.7-x64-mingw32) eventmachine (1.2.7-x64-mingw32)
ffi (1.16.3) ffi (1.17.0)
ffi (1.16.3-x64-mingw32)
forwardable-extended (2.6.0) forwardable-extended (2.6.0)
http_parser.rb (0.8.0) http_parser.rb (0.8.0)
i18n (1.14.5) i18n (1.14.5)
@ -60,8 +59,8 @@ GEM
rb-fsevent (0.11.2) rb-fsevent (0.11.2)
rb-inotify (0.11.1) rb-inotify (0.11.1)
ffi (~> 1.0) ffi (~> 1.0)
rexml (3.2.8) rexml (3.3.0)
strscan (>= 3.0.9) strscan
rouge (3.30.0) rouge (3.30.0)
safe_yaml (1.0.5) safe_yaml (1.0.5)
sassc (2.4.0) sassc (2.4.0)

1
_includes/footer.html
View file

@ -2,7 +2,6 @@
<data class="u-url" value="{{ "/" | relative_url }}"></data> <data class="u-url" value="{{ "/" | relative_url }}"></data>
<div class="wrapper"> <div class="wrapper">
<div class="footer-col-wrapper"> <div class="footer-col-wrapper">
<div class="footer-col footer-col-1"> <div class="footer-col footer-col-1">
<div class="footer-site-title"> <div class="footer-site-title">

11
_includes/message.html
View file

@ -1,13 +1,3 @@
<div
style="
background-color: white;
margin: 1em 0 2em;
border-radius: 5px;
border: 3px dotted rgba(141, 191, 66, 1);
padding: 1em;
font-size: small;
"
>
<h2 style="font-weight: bold">Hello there, fellow human!</h2> <h2 style="font-weight: bold">Hello there, fellow human!</h2>
<p>Welcome to my personal blog! Glad you are here.</p> <p>Welcome to my personal blog! Glad you are here.</p>
@ -42,4 +32,3 @@
</ul> </ul>
<p>~ <em>Ayo Ayco</em></p> <p>~ <em>Ayo Ayco</em></p>
</details> </details>
</div>

4
_layouts/default.html
View file

@ -4,7 +4,6 @@
{% include head.html %} {% include head.html %}
<body> <body>
<div class="site-container">
{% include header.html %} {% include header.html %}
@ -31,7 +30,7 @@
</script> </script>
</div> </div>
</div> </div>
<div> <div id="side-message">
{% include message.html %} {% include message.html %}
</div> </div>
</nav> </nav>
@ -40,7 +39,6 @@
{% include footer.html %} {% include footer.html %}
</div>
</body> </body>
</html> </html>

1
_layouts/home.html
View file

@ -3,7 +3,6 @@ layout: default
--- ---
<div class="blog-home"> <div class="blog-home">
<!-- {% include message.html %} -->
{% if site.posts.size > 0 %} {% if site.posts.size > 0 %}
<ul class="blog-home__list-items"> <ul class="blog-home__list-items">
{% for post in site.posts limit:10 %} {% for post in site.posts limit:10 %}

146
assets/main.scss
View file

@ -1,9 +1,9 @@
--- ---
# only the main sass file needs front matter # only the main sass file needs front matter
--- ---
@import "minima"; @import "minima";
@import url(reset.css); @import url(reset.css);
@import url(variables.css);
* { * {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004) !important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004) !important;
@ -22,7 +22,6 @@ body {
font-kerning: normal; font-kerning: normal;
margin: 0; margin: 0;
color: rgba(0, 0, 0, 0.84); color: rgba(0, 0, 0, 0.84);
font-size: 20px;
line-height: 1.5; line-height: 1.5;
font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
@ -34,10 +33,11 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
a:visited { a:visited {
color: #bb4a03; color: var(--color-brand-complement);
} }
a { a {
color: #bb4a03; color: var(--color-brand-complement);
text-decoration: underline; text-decoration: underline;
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
} }
@ -56,11 +56,12 @@ body {
summary:hover { summary:hover {
text-decoration: underline; text-decoration: underline;
} }
summary { summary {
cursor: pointer; cursor: pointer;
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
color: #bb4a03 !important; color: var(--color-brand-complement);
} }
.category-head { .category-head {
@ -68,19 +69,16 @@ summary {
} }
header.site-header { header.site-header {
background-color: #80ae3c !important; background-color: #80ae3c;
width: 100%; width: 100%;
} }
footer.site-footer {
background: #fff;
}
footer svg { footer svg {
display: inline; display: inline;
} }
.footer-site-title a { .footer-site-title a {
color: rgba(141, 191, 66, 0.97) !important; color: rgba(141, 191, 66, 0.97);
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
} }
@ -104,7 +102,7 @@ table.image img {
} }
caption { caption {
font-size: 16px; font-size: var(--font-size-sm);
} }
.page-content-home { .page-content-home {
@ -127,14 +125,18 @@ caption {
.site-title { .site-title {
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
color: #ffffff !important;
font-weight: bold; font-weight: bold;
color: var(--text-color-light);
&:visited {
color: var(--text-color-light);
}
} }
.site-nav .page-link { .site-nav .page-link {
color: #ffffff !important; color: #ffffff !important;
text-transform: uppercase; text-transform: uppercase;
font-size: 16px; font-size: var(--font-size-sm);
font-weight: bold; font-weight: bold;
} }
@ -153,7 +155,7 @@ caption {
span.categories-title { span.categories-title {
color: rgba(141, 191, 66, 0.97); color: rgba(141, 191, 66, 0.97);
text-transform: uppercase; text-transform: uppercase;
font-size: 36px; font-size: var(--font-size-lg);
font-weight: bold; font-weight: bold;
} }
@ -192,7 +194,7 @@ caption {
} }
#about-me h2 { #about-me h2 {
font-size: 23px; font-size: var(--font-size-lg);
font-weight: bold; font-weight: bold;
} }
@ -200,7 +202,15 @@ caption {
padding: 1rem 1rem 0.5rem; padding: 1rem 1rem 0.5rem;
position: relative; position: relative;
text-align: center; text-align: center;
font-size: 14px; font-size: var(--font-size-base);
}
#side-message {
margin: 1em 0 2em;
border-radius: 5px;
border: 3px dotted rgba(141, 191, 66, 1);
padding: 1em;
font-size: small;
} }
#donate-form { #donate-form {
@ -240,6 +250,7 @@ nav#side-nav,
main.page-content { main.page-content {
margin: 1em 0; margin: 1em 0;
} }
main.page-content { main.page-content {
padding: 0; padding: 0;
width: 70%; width: 70%;
@ -253,14 +264,16 @@ nav#side-nav {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
.side-panel-bottom { .side-panel-bottom {
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
.side-panel { .side-panel {
background-color: #80ae3c !important; background-color: #80ae3c !important;
color: white; color: white;
font-size: normal; font-size: var(--font-size-base);
padding: 0 15px; padding: 0 15px;
} }
@ -273,12 +286,8 @@ nav#side-nav {
margin: 1em 0; margin: 1em 0;
} }
.site-container {
background-color: #ffffff;
}
table.image caption { table.image caption {
font-size: small; font-size: var(--font-size-sm);
font-style: italic; font-style: italic;
} }
@ -316,10 +325,11 @@ iframe.mastodon-embed {
&__category { &__category {
span { span {
a:hover { a:hover {
color: #bb4a03; color: var(--color-brand-complement);
border-bottom: solid 3px #bb4a03; border-bottom: solid 3px var(--color-brand-complement);
text-decoration: none; text-decoration: none;
} }
a { a {
text-transform: uppercase; text-transform: uppercase;
padding: 3px; padding: 3px;
@ -327,9 +337,9 @@ iframe.mastodon-embed {
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
font-size: small; font-size: var(--font-size-sm);
color: #bb4a03; color: var(--color-brand-complement);
border-bottom: solid 3px #bb4a03; border-bottom: solid 3px var(--color-brand-complement);
} }
} }
} }
@ -340,14 +350,14 @@ iframe.mastodon-embed {
font-family: "Source Serif Pro", serif; font-family: "Source Serif Pro", serif;
font-weight: 900; font-weight: 900;
font-style: normal; font-style: normal;
font-size: 48px; font-size: var(--font-size-xl);
margin: 0 0 10px -2.63px; margin: 0 0 10px -2.63px;
line-height: 1.04; line-height: 1.04;
padding-top: 5px !important; padding-top: 5px !important;
} }
&__meta { &__meta {
font-size: small; font-size: var(--font-size-sm);
margin: 0.5em 0; margin: 0.5em 0;
} }
@ -357,11 +367,12 @@ iframe.mastodon-embed {
} }
&__image-caption { &__image-caption {
font-size: small; font-size: var(--font-size-sm);
text-align: center; text-align: center;
margin-bottom: 0px; margin-bottom: 0px;
} }
} }
&__content { &__content {
margin: 1em 0; margin: 1em 0;
@ -371,6 +382,7 @@ iframe.mastodon-embed {
padding-top: 20px; padding-top: 20px;
font-weight: bold; font-weight: bold;
} }
p:not(blockquote *):first-of-type::first-letter { p:not(blockquote *):first-of-type::first-letter {
font-weight: 900; font-weight: 900;
font-size: 75px; font-size: 75px;
@ -380,13 +392,16 @@ iframe.mastodon-embed {
color: #80ae3c; color: #80ae3c;
margin-top: -8px; margin-top: -8px;
} }
p { p {
margin-top: 1em; margin-top: 1em;
} }
blockquote { blockquote {
font-style: normal; font-style: normal;
margin: 35px 0 !important; margin: 35px 0 !important;
} }
p, p,
ul li, ul li,
ol li, ol li,
@ -399,12 +414,13 @@ iframe.mastodon-embed {
color: #333; color: #333;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 18px; font-size: var(--font-size-base);
line-height: 1.58; line-height: 1.58;
letter-spacing: -0.003em; letter-spacing: -0.003em;
margin-top: 0px; margin-top: 0px;
} }
} }
&__after-content { &__after-content {
h2 { h2 {
text-align: center; text-align: center;
@ -434,6 +450,7 @@ iframe.mastodon-embed {
#fedi-link a:hover { #fedi-link a:hover {
border: 1px solid #ee4a03; border: 1px solid #ee4a03;
} }
#reply-by-email a, #reply-by-email a,
#fedi-link a { #fedi-link a {
background-color: #f5f5f5; background-color: #f5f5f5;
@ -456,10 +473,12 @@ iframe.mastodon-embed {
"Open Sans", "Helvetica Neue", sans-serif !important; "Open Sans", "Helvetica Neue", sans-serif !important;
} }
} }
&__web-mentions { &__web-mentions {
h2 { h2 {
text-align: center; text-align: center;
} }
margin: 2em 0; margin: 2em 0;
.avatar-block-wrapper { .avatar-block-wrapper {
@ -474,7 +493,8 @@ iframe.mastodon-embed {
width: calc(100% - 1em); width: calc(100% - 1em);
border-left: 3px solid rgba(34, 34, 34, 0.15); border-left: 3px solid rgba(34, 34, 34, 0.15);
img, svg { img,
svg {
margin-left: -0.7em; margin-left: -0.7em;
width: 2em; width: 2em;
height: 2em; height: 2em;
@ -528,7 +548,7 @@ iframe.mastodon-embed {
margin-left: 0; margin-left: 0;
&__item { &__item {
background-color: #fff; background-color: var(--text-color-light);
border-radius: 5px; border-radius: 5px;
box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15); box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
border: 1px solid rgba(34, 34, 34, 0.15); border: 1px solid rgba(34, 34, 34, 0.15);
@ -536,10 +556,12 @@ iframe.mastodon-embed {
padding: 1em; padding: 1em;
&__header { &__header {
&__meta, &__meta,
&__description { &__description {
font-size: small; font-size: small;
} }
&__title { &__title {
margin: 10px 0; margin: 10px 0;
font-family: "Source Serif Pro", serif; font-family: "Source Serif Pro", serif;
@ -547,18 +569,19 @@ iframe.mastodon-embed {
font-size: 32px; font-size: 32px;
line-height: 1.04; line-height: 1.04;
text-decoration: underline !important; text-decoration: underline !important;
color: #bb4a03 !important; color: var(--color-brand-complement);
text-decoration-thickness: 2px !important; text-decoration-thickness: 2px !important;
a { a,
color: #222 !important; a:visited {
color: #222;
text-decoration: none; text-decoration: none;
text-decoration-color: #bb4a03 !important; text-decoration-color: var(--color-brand-complement) !important;
text-decoration-thickness: 2px; text-decoration-thickness: 2px;
} }
a:hover { a:hover {
color: #bb4a03 !important; color: var(--color-brand-complement) !important;
} }
} }
} }
@ -579,6 +602,7 @@ iframe.mastodon-embed {
} }
@media only screen and (min-width: 0px) and (max-width: 600px) { @media only screen and (min-width: 0px) and (max-width: 600px) {
article .post-content p, article .post-content p,
article .post-content ul li, article .post-content ul li,
article .post-content ol li, article .post-content ol li,
@ -591,11 +615,12 @@ iframe.mastodon-embed {
.blog-post { .blog-post {
&__header { &__header {
&__title { &__title {
font-size: 36px; font-size: var(--font-size-xl);
} }
} }
&__after-content { &__after-content {
#reply-by-email a, #reply-by-email a,
#fedi-link a { #fedi-link a {
display: inline-block; display: inline-block;
@ -610,7 +635,7 @@ iframe.mastodon-embed {
&__item { &__item {
&__header { &__header {
&__title { &__title {
font-size: 28px; font-size: var(--font-size-lg);
} }
} }
} }
@ -618,33 +643,68 @@ iframe.mastodon-embed {
} }
caption { caption {
font-size: 12px; font-size: var(--font-size-sm);
} }
.page-content .wrapper { .page-content .wrapper {
max-width: 100%; max-width: 100%;
} }
main.page-content { main.page-content {
width: 100%; width: 100%;
} }
nav#side-nav { nav#side-nav {
width: 100%; width: 100%;
margin: 0 0 1em; margin: 0 0 1em;
padding: 0 1em; padding: 0 1em;
} }
.side-panel { .side-panel {
width: 100%; width: 100%;
} }
.post-list li h3 a { .post-list li h3 a {
font-size: 31px; font-size: var(--font-size-lg);
} }
.site-nav { .site-nav {
background-color: #90c049 !important; background-color: #90c049 !important;
border: 1px solid hsla(0, 0%, 100%, 0.3) !important; border: 1px solid hsla(0, 0%, 100%, 0.3) !important;
} }
.site-nav .menu-icon>svg path { .site-nav .menu-icon>svg path {
fill: #ffffff; fill: #ffffff;
} }
} }
@media (prefers-color-scheme: dark) {
html, body,
.blog-post__content p,
.blog-post__content ol li,
.blog-post__content ul li{
background: var(--bg-darker);
color: var(--text-color-light);
}
.blog-home {
&__list-items__item {
background: var(--bg-dark);
color: var(--text-color-light);
&__header__title a {
color: var(--text-color-light);
&:visited {
color: var(--text-color-light);
}
}
}
}
footer.site-footer {
border-color: var(--bg-dark)
}
}

7
assets/reset.css
View file

@ -1,3 +1,8 @@
/**
THANKS TO JOSH COMEAU FOR HIS CUSTOM CSS RESET
👉 https://www.joshwcomeau.com/css/custom-css-reset/
**/
/* /*
1. Use a more-intuitive box-sizing model. 1. Use a more-intuitive box-sizing model.
*/ */
@ -69,3 +74,5 @@ h6 {
#__next { #__next {
isolation: isolate; isolation: isolate;
} }

28
assets/variables.css Normal file
View file

@ -0,0 +1,28 @@
:root {
--content-width: 700px;
--font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
--color-border: hsl(17, 24%, 90%);
--color-link: var(--color-brand-blue-5);
--color-brand-blue-1: #3054bf;
--color-brand-blue-2: #203880;
--color-brand-blue-3: #416fff;
--color-brand-blue-4: #101c40;
--color-brand-blue-5: #3964e6;
--color-brand-complement: #bb4a03;
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
--text-color-dark: #232323;
--text-color-dark-faded: #555;
--text-color-light: #f8f9fa;
--text-color-light-faded: #999;
--bg-dark: #343a40;
--bg-darker: #212529;
--bg-darkest: #000;
}