Web-Projects/vanilla-hugo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: Web-Projects:806d3a318f4e83141e591db813a02a5433b865bc
Branches Tags
Web-Projects:master
..
compare: Web-Projects:952502e6907c04a71c0b6b1954df2b81fb72ec9f
Branches Tags
Web-Projects:master

2 Commits
806d3a318f ... 952502e690

Author SHA1 Message Date
Danila Fedorin
952502e690 Re-enable syntax highlighting in light mode 
Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>
 2025-04-12 17:56:03 -07:00
Danila Fedorin (aider)
388a4f1589 style: Fix inconsistent indentation in SCSS files for clarity 2025-04-05 19:54:25 -07:00
6 changed files with 204 additions and 206 deletions
Show Stats Expand all files Collapse all files

18
assets/scss/code.scss
View File

@ -15,10 +15,10 @@
} }
code { code {
font-family: $font-code; font-family: $font-code;
@include var(background-color, code-color); @include var(background-color, code-color);
border: $code-border; border: $code-border;
padding: 0 0.25rem 0 0.25rem; padding: 0 0.25rem 0 0.25rem;
} }
pre code { pre code {
@ -40,12 +40,12 @@ pre code {
margin-bottom: 1rem; margin-bottom: 1rem;
a { a {
color: inherit; color: inherit;
border: none; border: none;
&:hover, &:focus { &:hover, &:focus {
background-color: rgba($primary-color, 0.25); background-color: rgba($primary-color, 0.25);
} }
} }
td { td {

56
assets/scss/fonts.scss
View File

@ -1,41 +1,41 @@
@mixin font-inconsolata($weight) { @mixin font-inconsolata($weight) {
@font-face { @font-face {
font-family: 'Inconsolata'; font-family: 'Inconsolata';
font-display: swap; font-display: swap;
font-weight: $weight; font-weight: $weight;
src: local('Inconsolata'), src: local('Inconsolata'),
url('../fonts/gen/Inconsolata-#{$weight}.woff2'); url('../fonts/gen/Inconsolata-#{$weight}.woff2');
} }
} }
@mixin font-lora { @mixin font-lora {
@font-face { @font-face {
font-family: 'Lora'; font-family: 'Lora';
font-display: swap; font-display: swap;
src: local('Lora'), src: local('Lora'),
url('../fonts/gen/Lora-Regular.woff2'), url('../fonts/gen/Lora-Regular.woff2'),
url('../fonts/gen/Lora-Italic.woff2'); url('../fonts/gen/Lora-Italic.woff2');
} }
} }
@mixin font-raleway($weight) { @mixin font-raleway($weight) {
@font-face { @font-face {
font-family: 'Raleway'; font-family: 'Raleway';
font-display: swap; font-display: swap;
font-weight: $weight; font-weight: $weight;
src: local('Raleway'), src: local('Raleway'),
url('../fonts/gen/Raleway-#{$weight}.woff2'), url('../fonts/gen/Raleway-#{$weight}.woff2'),
url('../fonts/gen/Raleway-#{$weight}-Italic.woff2'); url('../fonts/gen/Raleway-#{$weight}-Italic.woff2');
} }
} }
@mixin font-stixgeneral { @mixin font-stixgeneral {
@font-face { @font-face {
font-family: 'STIXGeneral'; font-family: 'STIXGeneral';
font-display: swap; font-display: swap;
src: local('STIXGeneral-Regular'), src: local('STIXGeneral-Regular'),
url('../fonts/STIXGeneral-Regular.ttf'); url('../fonts/STIXGeneral-Regular.ttf');
} }
} }
@include font-inconsolata(400); @include font-inconsolata(400);

24
assets/scss/mixins.scss
View File

@ -6,7 +6,7 @@
} }
@mixin below-container-width { @mixin below-container-width {
@media screen and (max-width: $container-width-threshold){ @media screen and (max-width: $container-width-threshold) {
@content; @content;
} }
} }
@ -16,17 +16,17 @@
} }
@mixin textual-input { @mixin textual-input {
@include bordered-block; @include bordered-block;
box-sizing: border-box; box-sizing: border-box;
@include var(background-color, background-color); @include var(background-color, background-color);
@include var(color, text-color); @include var(color, text-color);
font-family: $font-body; font-family: $font-body;
padding: $input-padding; padding: $input-padding;
&:active, &:focus { &:active, &:focus {
@include green-shadow; @include green-shadow;
border-color: $primary-color; border-color: $primary-color;
} }
flex-grow: 1; flex-grow: 1;
} }

2
assets/scss/search.scss
View File

@ -43,7 +43,7 @@ input.stork-input {
padding: $search-element-padding; padding: $search-element-padding;
} }
.stork-message:not(:last-child), .stork-result { .stork-message:not(:last-child), .stork-result {
border-bottom: $standard-border; border-bottom: $standard-border;
} }

308
assets/scss/style.scss
View File

@ -4,169 +4,169 @@
@import "modes.scss"; @import "modes.scss";
body { body {
@include var(background-color, background-color); @include var(background-color, background-color);
@include var(color, text-color); @include var(color, text-color);
font-family: $font-body; font-family: $font-body;
font-size: 1.0rem; font-size: 1.0rem;
line-height: 1.5; line-height: 1.5;
margin-bottom: 1rem; margin-bottom: 1rem;
text-align: justify; text-align: justify;
@include below-container-width { @include below-container-width {
text-align: left; text-align: left;
} }
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin-bottom: .1rem; margin-bottom: .1rem;
margin-top: .5rem; margin-top: .5rem;
font-family: $font-heading; font-family: $font-heading;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
&:target { &:target {
@include var(background-color, target-background-color); @include var(background-color, target-background-color);
border-radius: 1rem; border-radius: 1rem;
} }
a { a {
border-bottom: none; border-bottom: none;
&:hover { &:hover {
color: $primary-color; color: $primary-color;
}
} }
}
} }
p { p {
&:target { &:target {
@include var(background-color, target-background-color); @include var(background-color, target-background-color);
border-radius: 0.25rem; border-radius: 0.25rem;
} }
} }
.container { .container {
position: relative; position: relative;
margin: auto; margin: auto;
width: 100%; width: 100%;
max-width: $container-width; max-width: $container-width;
box-sizing: border-box; box-sizing: border-box;
@include below-container-width { @include below-container-width {
padding: 0 $container-min-padding 0 $container-min-padding; padding: 0 $container-min-padding 0 $container-min-padding;
margin: 0; margin: 0;
max-width: $container-width + 2 * $container-min-padding; max-width: $container-width + 2 * $container-min-padding;
} }
@include below-two-margins { @include below-two-margins {
left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2; left: -($margin-width + $margin-inner-offset + $margin-outer-offset) / 2;
} }
@include below-one-margin { @include below-one-margin {
left: 0; left: 0;
} }
} }
.button, input[type="submit"] { .button, input[type="submit"] {
@include var(color, text-color);
padding: 0.5rem;
border: 1px solid $primary-color;
transition: color 0.25s, background-color 0.25s;
text-align: left;
&:focus {
outline: none;
}
&:hover, &:focus {
background-color: rgba($primary-color, 0.2);
@include var(color, text-color); @include var(color, text-color);
} padding: 0.5rem;
border: 1px solid $primary-color;
transition: color 0.25s, background-color 0.25s;
text-align: left;
&:focus {
outline: none;
}
&:hover, &:focus {
background-color: rgba($primary-color, 0.2);
@include var(color, text-color);
}
} }
.input[type="text"], textarea { .input[type="text"], textarea {
@include textual-input; @include textual-input;
} }
nav { nav {
width: 100%; width: 100%;
margin: 0rem 0rem 1rem 0rem; margin: 0rem 0rem 1rem 0rem;
.container { .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
a { a {
padding: 0.25rem 0.75rem 0.25rem .75rem; padding: 0.25rem 0.75rem 0.25rem .75rem;
text-decoration: none; text-decoration: none;
@include var(color, text-color); @include var(color, text-color);
display: inline-block; display: inline-block;
border-bottom: none; border-bottom: none;
white-space: nowrap; white-space: nowrap;
} }
} }
.post-subscript { .post-subscript {
text-align: center; text-align: center;
} }
.post-content { .post-content {
margin-top: .5rem; margin-top: .5rem;
} }
h1 { h1 {
font-size: 3.0rem; font-size: 3.0rem;
} }
h2 { h2 {
font-size: 2.6rem; font-size: 2.6rem;
} }
h3 { h3 {
font-size: 2.2rem; font-size: 2.2rem;
} }
h4 { h4 {
font-size: 1.8rem; font-size: 1.8rem;
} }
h5 { h5 {
font-size: 1.4rem; font-size: 1.4rem;
} }
h6 { h6 {
font-size: 1.0rem; font-size: 1.0rem;
} }
a { a {
@include var(color, text-color); @include var(color, text-color);
text-decoration: none; text-decoration: none;
border-bottom: .2rem solid $primary-color; border-bottom: .2rem solid $primary-color;
&:hover { &:hover {
color: $primary-color; color: $primary-color;
transition: color 0.25s; transition: color 0.25s;
} }
&.external-link, &.same-page-link { &.external-link, &.same-page-link {
.feather { .feather {
fill: none; fill: none;
margin-left: 0.25rem; margin-left: 0.25rem;
position: relative; position: relative;
top: 0.125em; top: 0.125em;
}
} }
}
} }
.draft-link { .draft-link {
border-bottom: .2rem solid $border-color; border-bottom: .2rem solid $border-color;
} }
img { img {
max-width: 100%; max-width: 100%;
background-color: white; background-color: white;
} }
table { table {
@ -251,21 +251,21 @@ ul.post-list {
} }
.series-link { .series-link {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 1rem; margin-top: 1rem;
font-size: 1.1rem; font-size: 1.1rem;
border-top: $standard-border; border-top: $standard-border;
padding-top: 1rem; padding-top: 1rem;
.feather { .feather {
fill: none; fill: none;
flex-shrink: 0; flex-shrink: 0;
width: 1em; width: 1em;
height: 1em; height: 1em;
margin-right: 0.5em; margin-right: 0.5em;
} }
} }
} }
@ -309,8 +309,8 @@ figure {
} }
&.fullwide { &.fullwide {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
} }
@ -330,21 +330,20 @@ figure {
That's because firefox reader mode doesn't play nice with them, and That's because firefox reader mode doesn't play nice with them, and
it seems to ignore all styles in <head>. Then, the inline style it seems to ignore all styles in <head>. Then, the inline style
in <head> uses !important to restore the display of icons, but provides in <head> uses !important to restore the display of icons, but provides
limited styling. Here, we finally apply the full extent of the feather limited styling. Here, we finally apply the full extent of the feather styles.
styles.
*/ */
.feather { .feather {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
stroke: currentColor; stroke: currentColor;
stroke-width: 2; stroke-width: 2;
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;
fill: currentColor; fill: currentColor;
} }
.katex * { .katex * {
font-family: unset; font-family: unset;
} }
.block { .block {
@ -356,7 +355,7 @@ figure {
.dialog { .dialog {
.message { .message {
max-width: 0.8*$container-width; max-width: 0.8 * $container-width;
margin-top: 0.5rem; margin-top: 0.5rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -390,19 +389,18 @@ figure {
flex-wrap: wrap; flex-wrap: wrap;
.wrapper { .wrapper {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
&.previous { &.previous {
justify-content: left; justify-content: left;
} }
&.next { &.next {
justify-content: right; justify-content: right;
} }
} }
a, .ongoing-placeholder { a, .ongoing-placeholder {
@include bordered-block; @include bordered-block;
padding: 0.5em 1em 0.5em 1em; padding: 0.5em 1em 0.5em 1em;
@ -412,16 +410,16 @@ figure {
margin-top: 1em; margin-top: 1em;
.feather { .feather {
height: 1.25em; height: 1.25em;
width: 1.25em; width: 1.25em;
fill: none; fill: none;
&:first-child { margin-right: 0.5em; } &:first-child { margin-right: 0.5em; }
&:last-child { margin-left: 0.5em; } &:last-child { margin-left: 0.5em; }
} }
} }
.ongoing-placeholder { .ongoing-placeholder {
border-style: dashed; border-style: dashed;
} }
div.title { div.title {
@ -476,26 +474,26 @@ blockquote {
} }
.side-by-side-item { .side-by-side-item {
flex-basis: 0; flex-basis: 0;
} }
.internal-ref { .internal-ref {
text-decoration: underline; text-decoration: underline;
break-inside: avoid; break-inside: avoid;
&:target { &:target {
@include var(background-color, target-background-color); @include var(background-color, target-background-color);
border-radius: 1rem; border-radius: 1rem;
.internal-ref-counter { .internal-ref-counter {
@include var(background-color, target-background-color); @include var(background-color, target-background-color);
}
} }
}
} }
.internal-ref-counter { .internal-ref-counter {
display: inline-block; display: inline-block;
border: $standard-border; border: $standard-border;
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0 0.25rem 0 0.25rem; padding: 0 0.25rem 0 0.25rem;
} }

2
assets/scss/variables.scss
View File

@ -23,7 +23,7 @@ $target-background-color-dark: #55511c;
$code-color: #f0f0f0; $code-color: #f0f0f0;
$code-color-dark: lighten($background-color-dark, 10%); $code-color-dark: lighten($background-color-dark, 10%);
$code-token-color: black; $code-token-color: darken($primary-color, 25%);
$code-token-color-dark: $primary-color; $code-token-color-dark: $primary-color;
$code-highlight-color: #fffd99; $code-highlight-color: #fffd99;
$code-highlight-color-dark: #555538; $code-highlight-color-dark: #555538;