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 style

Browse Source
This commit is contained in:
Gabriel Arazas 2023-11-09 14:28:44 +08:00
parent e5e2b0789b
commit 029e610153
No known key found for this signature in database
GPG Key ID: ADE0C41DAB221FCC
3 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
assets/scss/asciidoctor.scss
View File

@ -2,7 +2,10 @@
@import "roles"; @import "roles";
:root { :root {
--mark-border-style: 0.5em var(--base05) solid; --side-accent-color: var(--base05);
--side-accent-color-text: var(--base00);
--border-style: 1px var(--side-accent-color) solid;
--mark-border-style: 0.5em var(--side-accent-color) solid;
} }
.anchor { .anchor {
@ -59,8 +62,8 @@ p.tableblock {
*:not(.listingblock, .literalblock, .openblock) { *:not(.listingblock, .literalblock, .openblock) {
> .attribution, > .attribution,
> .title { > .title {
background: var(--foreground); background: var(--side-accent-color);
color: var(--base00); color: var(--side-accent-color-text);
font-size: 0.9em; font-size: 0.9em;
padding: 0.5em; padding: 0.5em;
word-break: break-word; word-break: break-word;
@ -76,8 +79,8 @@ p.tableblock {
position: relative; position: relative;
> .title { > .title {
background: var(--foreground); background: var(--side-accent-color);
color: var(--background); color: var(--side-accent-color-text);
font-size: 0.9em; font-size: 0.9em;
padding: 0.5em; padding: 0.5em;
word-wrap: break-word; word-wrap: break-word;
@ -241,17 +244,15 @@ p {
// Custom Asciidoctor components. // Custom Asciidoctor components.
.dialogblock { .dialogblock {
&__box { align-items: center;
align-items: center; border: var(--border-style);
border: var(--border-style); border-left: var(--mark-border-style);
border-left: var(--mark-border-style); display: flex;
display: flex; flex-flow: row nowrap;
flex-flow: row nowrap; gap: 1em;
gap: 1em; padding: 0.5em;
padding: 0.5em; max-width: 60ch;
max-width: 55ch; width: fit-content;
width: fit-content;
}
&__avatar { &__avatar {
--size: 4em; --size: 4em;
@ -279,10 +280,6 @@ p {
} }
} }
&__avatar-name {
font-weight: bolder;
}
// Roles/modifiers. // Roles/modifiers.
&.reversed { &.reversed {
flex-direction: row-reverse; flex-direction: row-reverse;
@ -290,6 +287,11 @@ p {
border-left: var(--border-style); border-left: var(--border-style);
border-right: var(--mark-border-style); border-right: var(--mark-border-style);
} }
&.full {
max-width: unset;
width: unset;
}
} }
@media all and (max-width: 860px) { @media all and (max-width: 860px) {

18
assets/scss/extend.scss
View File

@ -18,6 +18,8 @@ table tr td > p {
margin-top: 1em; margin-top: 1em;
} }
a:hover { color: var(--base0B); }
ul, ul,
ol { ol {
margin: 1em 0 0; margin: 1em 0 0;
@ -27,10 +29,6 @@ pre {
margin-bottom: 0; margin-bottom: 0;
} }
a:hover {
color: var(--base0B);
}
button { button {
border: var(--border-style); border: var(--border-style);
} }
@ -48,18 +46,13 @@ main > article {
} }
// Layouts // Layouts
.site__title {
--size: 2rem;
margin-bottom: unset;
font-size: var(--size);
line-height: unset;
}
.site__socials { .site__socials {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
} }
.site__social-icon:hover { color: var(--base0B); }
.site__links--content, .site__links--content,
.site__socials--content { .site__socials--content {
margin: 1em 0 0; margin: 1em 0 0;
@ -74,9 +67,6 @@ main > article {
.site__links--content > * { .site__links--content > * {
flex-basis: 20; flex-basis: 20;
} }
.site__socials--content > * {
flex-basis: 15%;
}
article.post { article.post {
padding: 0.5em; padding: 0.5em;

6
assets/scss/roles.scss
View File

@ -1,4 +1,10 @@
// Asciidoctor roles (e.g., [.text-center]) on a block. // Asciidoctor roles (e.g., [.text-center]) on a block.
.error {
--side-accent-color: var(--base08);
--side-accent-color-text: var(--base05);
--border-style: 2px var(--side-accent-color) solid;
}
.inline-block { .inline-block {
display: inline-block; display: inline-block;
} }