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

style: Fix inconsistent indentation in SCSS files for clarity

Browse Source
This commit is contained in:
Danila Fedorin 2025-04-05 19:54:25 -07:00
parent 806d3a318f
commit 388a4f1589
5 changed files with 203 additions and 205 deletions
Show Stats Download Patch File Download Diff File 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;
} }