foodogsquared/website
1
0
Fork 0
mirror of https://github.com/foo-dogsquared/website.git synced 2025-01-31 04:58:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update site styling

Browse Source
This commit is contained in:
Gabriel Arazas 2023-02-27 18:21:58 +08:00
parent 810d1180e8
commit 7f29b8ad56
No known key found for this signature in database
GPG Key ID: ADE0C41DAB221FCC
2 changed files with 23 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/rouge.scss
View File

@ -4,13 +4,7 @@
*/ */
.rouge.highlight { .rouge.highlight {
color: var(--base05); color: var(--base05);
background-color: var(--base00); background: var(--base00);
pre {
color: var(--base05);
background-color: var(--base00);
margin: 0px;
}
code { code {
background: unset; background: unset;

101
assets/scss/extend.scss
View File

@ -3,32 +3,18 @@ $tooltip-size: 5em;
$line-height: 1.45; $line-height: 1.45;
:root { :root {
--accented-border-style: var(--content-color) solid .1vw; --accented-border-style: var(--foreground) solid .1vw;
--content-color: var(--base05);
--selection-color: var(--base04);
--body-family: "Source Serif Pro", "IBM Plex Serif", "Noto Serif", serif; --body-family: "Source Serif Pro", "IBM Plex Serif", "Noto Serif", serif;
--header-family: "Source Sans Pro", "IBM Plex Sans", "Noto Sans", sans-serif; --header-family: "Source Sans Pro", "IBM Plex Sans", "Noto Sans", sans-serif;
--mono-family: "Source Code Pro", "IBM Plex Mono", "Noto Mono", monospace; --mono-family: "Source Code Pro", "IBM Plex Mono", "Noto Mono", monospace;
color: var(--base05);
}
// Hugo-specific blocks.
#TableOfContents {
> ul { margin-bottom: unset; }
} }
// Base styles. // Base styles.
code { a:hover { color: var(--base0B); }
background: var(--base01);
}
hr { hr {
border-color: var(--content-color); border-color: var(--foreground);
}
pre {
background: var(--base00);
} }
main > article { main > article {
@ -43,27 +29,11 @@ main > article {
line-height: unset; line-height: unset;
} }
.site__socials {
margin-top: 1em;
}
.site__social-icon svg {
fill: currentColor;
}
article.post { article.post {
padding: 0.5em; padding: 0.5em;
background: var(--base01); background: var(--base01);
} }
.post__meta--single {
p > span:first-child {
white-space: nowrap;
}
&:empty { display: none; }
}
// Asciidoctor roles (e.g., [.text-center]) on a block. // Asciidoctor roles (e.g., [.text-center]) on a block.
.text-center { .text-center {
text-align: center; text-align: center;
@ -137,12 +107,6 @@ article.post {
} }
} }
// Prism CSS
code[class*="language-"], pre[class*="language-"] {
color: var(--base05);
}
// Asciidoctor-specific styles // Asciidoctor-specific styles
sup.footnote { sup.footnote {
vertical-align: baseline; vertical-align: baseline;
@ -189,8 +153,7 @@ sup.footnote {
} }
} }
#footnotes > *:not(hr) { #footnotes > :not(hr) {
line-height: $line-height;
margin: 1em; margin: 1em;
} }
@ -198,26 +161,6 @@ sup.footnote {
margin: var(--vertical-rhythm) 0; margin: var(--vertical-rhythm) 0;
} }
table.tableblock {
border: var(--border-style);
margin: var(--vertical-rhythm) auto;
caption { margin: unset; }
thead tr {
background: var(--base05);
color: var(--base00);
}
th, td { padding: 0.5em; }
th::selection { background: var(--selection-color); }
tbody {
tr + tr, tr:first-child { border-top: var(--border-style); }
}
}
p.tableblock { p.tableblock {
margin: unset; margin: unset;
} }
@ -225,14 +168,10 @@ p.tableblock {
*:not(.listingblock, .openblock) { *:not(.listingblock, .openblock) {
> .attribution, > .attribution,
> .title { > .title {
background: var(--content-color); background: var(--foreground);
color: var(--base00); color: var(--base00);
font-size: 0.9em; font-size: 0.9em;
padding: 0.5em; padding: 0.5em;
&::selection {
background: var(--selection-color);
}
} }
> .content { > .content {
@ -245,20 +184,16 @@ p.tableblock {
position: relative; position: relative;
> *.title { > *.title {
background: var(--content-color); background: var(--foreground);
color: var(--base00); color: var(--background);
font-size: 0.9em; font-size: 0.9em;
padding: 0.5em; padding: 0.5em;
code { background: unset; } code { background: unset; }
&::selection {
background: var(--selection-color);
}
} }
pre { > *.content pre {
margin: 0; margin-top: unset;
} }
> .listingblock__btn-row { > .listingblock__btn-row {
@ -275,12 +210,12 @@ p.tableblock {
right: 0; right: 0;
> button { > button {
background: var(--base02); background: var(--base01);
padding: $gap; padding: $gap;
&:hover { &:hover {
background: var(--base06); background: var(--selection-color);
color: var(--base00); color: var(--base05);
} }
&:active { &:active {
@ -306,8 +241,16 @@ p.tableblock {
} }
.admonitionblock { .admonitionblock {
table {
border: unset;
tbody {
tr + tr, tr:first-child { border-top: unset; }
}
}
.icon { .icon {
background: var(--content-color); background: var(--foreground);
vertical-align: middle; vertical-align: middle;
width: 12%; width: 12%;
@ -362,7 +305,7 @@ p {
// This setup will use asciidoctor-rouge. // This setup will use asciidoctor-rouge.
.rouge.highlight, code[data-lang] { .rouge.highlight, code[data-lang] {
&::selection, ::selection { &::selection, ::selection {
background: var(--base02); background: var(--selection-color);
color: unset; color: unset;
} }
} }