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

style: ligher dark-theme complement color

Browse source
This commit is contained in:
Ayo Ayco 2024-06-11 17:15:57 +02:00
parent 4f88907821
commit afe5bb3ac9
2 changed files with 65 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
assets/main.scss
View file

@ -32,11 +32,7 @@ body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
a:visited { a, a:visited, a:hover {
color: var(--color-brand-complement);
}
a {
color: var(--color-brand-complement); color: var(--color-brand-complement);
text-decoration: underline; text-decoration: underline;
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
@ -324,13 +320,7 @@ iframe.mastodon-embed {
&__header { &__header {
&__category { &__category {
span { span {
a:hover { a, a:hover {
color: var(--color-brand-complement);
border-bottom: solid 3px var(--color-brand-complement);
text-decoration: none;
}
a {
text-transform: uppercase; text-transform: uppercase;
padding: 3px; padding: 3px;
width: auto; width: auto;
@ -443,12 +433,11 @@ iframe.mastodon-embed {
#rss-sign-up a { #rss-sign-up a {
text-decoration: underline; text-decoration: underline;
text-decoration-thickness: 1px; text-decoration-thickness: 1px;
color: #ee4a03;
} }
#reply-by-email a:hover, #reply-by-email a:hover,
#fedi-link a:hover { #fedi-link a:hover {
border: 1px solid #ee4a03; border: 1px solid var(--color-brand-complement);
} }
#reply-by-email a, #reply-by-email a,
@ -681,12 +670,56 @@ iframe.mastodon-embed {
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html, body, html, body{
.blog-post__content p, background: var(--bg-darker);
.blog-post__content ol li, color: var(--text-color-light);
.blog-post__content ul li{
background: var(--bg-darker); summary,
color: var(--text-color-light); a, a:visited, a:hover
{
color: var(--color-brand-complement-dark);
}
}
.blog-post{
&__header {
&__category {
span {
a, a:hover {
color: var(--color-brand-complement-dark);
border-bottom: solid 3px var(--color-brand-complement-dark);
}
}
}
}
&__content {
div.highlight, pre.highlight, code {
background: var(--bg-dark);
color: var(--text-color-light-faded);
border: 0px;
}
p, ol li, ul li {
background: var(--bg-darker);
color: var(--text-color-light);
}
a, a:visited {
color: var(--color-brand-complement-dark);
}
}
&__after-content {
#reply-by-email a,
#fedi-link a {
background-color: var(--bg-dark);
border: 1px solid var(--bg-darker);
color: var(--color-brand-complement-dark);
}
#reply-by-email a:hover,
#fedi-link a:hover {
border: 1px solid var(--color-brand-complement-dark);
}
}
} }
.blog-home { .blog-home {
@ -694,15 +727,23 @@ iframe.mastodon-embed {
background: var(--bg-dark); background: var(--bg-dark);
color: var(--text-color-light); color: var(--text-color-light);
&__header__title a { &__header__title {
color: var(--text-color-light); color: var(--color-brand-complement-dark) !important;
&:visited {
a,
a:visited {
color: var(--text-color-light); color: var(--text-color-light);
text-decoration-color: var(--color-brand-complement-dark) !important;
}
a:hover {
color: var(--color-brand-complement-dark) !important;
} }
} }
} }
} }
footer.site-footer { footer.site-footer {
border-color: var(--bg-dark) border-color: var(--bg-dark)
} }

1
assets/variables.css
View file

@ -15,6 +15,7 @@
--color-brand-blue-5: #3964e6; --color-brand-blue-5: #3964e6;
--color-brand-complement: #bb4a03; --color-brand-complement: #bb4a03;
--color-brand-complement-dark: orange;
--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff); --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
--text-color-dark: #232323; --text-color-dark: #232323;