style: Fix inconsistent indentation in SCSS files for clarity
This commit is contained in:
parent
806d3a318f
commit
388a4f1589
@ -15,10 +15,10 @@
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: $font-code;
|
||||
@include var(background-color, code-color);
|
||||
border: $code-border;
|
||||
padding: 0 0.25rem 0 0.25rem;
|
||||
font-family: $font-code;
|
||||
@include var(background-color, code-color);
|
||||
border: $code-border;
|
||||
padding: 0 0.25rem 0 0.25rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
@ -40,12 +40,12 @@ pre code {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
border: none;
|
||||
color: inherit;
|
||||
border: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: rgba($primary-color, 0.25);
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background-color: rgba($primary-color, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
|
||||
@ -1,41 +1,41 @@
|
||||
@mixin font-inconsolata($weight) {
|
||||
@font-face {
|
||||
font-family: 'Inconsolata';
|
||||
font-display: swap;
|
||||
font-weight: $weight;
|
||||
src: local('Inconsolata'),
|
||||
url('../fonts/gen/Inconsolata-#{$weight}.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inconsolata';
|
||||
font-display: swap;
|
||||
font-weight: $weight;
|
||||
src: local('Inconsolata'),
|
||||
url('../fonts/gen/Inconsolata-#{$weight}.woff2');
|
||||
}
|
||||
}
|
||||
|
||||
@mixin font-lora {
|
||||
@font-face {
|
||||
font-family: 'Lora';
|
||||
font-display: swap;
|
||||
src: local('Lora'),
|
||||
url('../fonts/gen/Lora-Regular.woff2'),
|
||||
url('../fonts/gen/Lora-Italic.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Lora';
|
||||
font-display: swap;
|
||||
src: local('Lora'),
|
||||
url('../fonts/gen/Lora-Regular.woff2'),
|
||||
url('../fonts/gen/Lora-Italic.woff2');
|
||||
}
|
||||
}
|
||||
|
||||
@mixin font-raleway($weight) {
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-display: swap;
|
||||
font-weight: $weight;
|
||||
src: local('Raleway'),
|
||||
url('../fonts/gen/Raleway-#{$weight}.woff2'),
|
||||
url('../fonts/gen/Raleway-#{$weight}-Italic.woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-display: swap;
|
||||
font-weight: $weight;
|
||||
src: local('Raleway'),
|
||||
url('../fonts/gen/Raleway-#{$weight}.woff2'),
|
||||
url('../fonts/gen/Raleway-#{$weight}-Italic.woff2');
|
||||
}
|
||||
}
|
||||
|
||||
@mixin font-stixgeneral {
|
||||
@font-face {
|
||||
font-family: 'STIXGeneral';
|
||||
font-display: swap;
|
||||
src: local('STIXGeneral-Regular'),
|
||||
url('../fonts/STIXGeneral-Regular.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'STIXGeneral';
|
||||
font-display: swap;
|
||||
src: local('STIXGeneral-Regular'),
|
||||
url('../fonts/STIXGeneral-Regular.ttf');
|
||||
}
|
||||
}
|
||||
|
||||
@include font-inconsolata(400);
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
@mixin below-container-width {
|
||||
@media screen and (max-width: $container-width-threshold){
|
||||
@media screen and (max-width: $container-width-threshold) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@ -16,17 +16,17 @@
|
||||
}
|
||||
|
||||
@mixin textual-input {
|
||||
@include bordered-block;
|
||||
box-sizing: border-box;
|
||||
@include var(background-color, background-color);
|
||||
@include var(color, text-color);
|
||||
font-family: $font-body;
|
||||
padding: $input-padding;
|
||||
@include bordered-block;
|
||||
box-sizing: border-box;
|
||||
@include var(background-color, background-color);
|
||||
@include var(color, text-color);
|
||||
font-family: $font-body;
|
||||
padding: $input-padding;
|
||||
|
||||
&:active, &:focus {
|
||||
@include green-shadow;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
&:active, &:focus {
|
||||
@include green-shadow;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@ input.stork-input {
|
||||
padding: $search-element-padding;
|
||||
}
|
||||
|
||||
.stork-message:not(:last-child), .stork-result {
|
||||
.stork-message:not(:last-child), .stork-result {
|
||||
border-bottom: $standard-border;
|
||||
}
|
||||
|
||||
|
||||
@ -4,169 +4,169 @@
|
||||
@import "modes.scss";
|
||||
|
||||
body {
|
||||
@include var(background-color, background-color);
|
||||
@include var(color, text-color);
|
||||
font-family: $font-body;
|
||||
font-size: 1.0rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1rem;
|
||||
text-align: justify;
|
||||
@include var(background-color, background-color);
|
||||
@include var(color, text-color);
|
||||
font-family: $font-body;
|
||||
font-size: 1.0rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1rem;
|
||||
text-align: justify;
|
||||
|
||||
@include below-container-width {
|
||||
text-align: left;
|
||||
}
|
||||
@include below-container-width {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: .1rem;
|
||||
margin-top: .5rem;
|
||||
font-family: $font-heading;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
margin-bottom: .1rem;
|
||||
margin-top: .5rem;
|
||||
font-family: $font-heading;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
|
||||
&:target {
|
||||
@include var(background-color, target-background-color);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: none;
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
&:target {
|
||||
@include var(background-color, target-background-color);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: none;
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
&:target {
|
||||
@include var(background-color, target-background-color);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
&:target {
|
||||
@include var(background-color, target-background-color);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: $container-width;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: $container-width;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include below-container-width {
|
||||
padding: 0 $container-min-padding 0 $container-min-padding;
|
||||
margin: 0;
|
||||
max-width: $container-width + 2 * $container-min-padding;
|
||||
}
|
||||
@include below-container-width {
|
||||
padding: 0 $container-min-padding 0 $container-min-padding;
|
||||
margin: 0;
|
||||
max-width: $container-width + 2 * $container-min-padding;
|
||||
}
|
||||
|
||||
@include below-two-margins {
|
||||
left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2;
|
||||
}
|
||||
@include below-two-margins {
|
||||
left: -($margin-width + $margin-inner-offset + $margin-outer-offset) / 2;
|
||||
}
|
||||
|
||||
@include below-one-margin {
|
||||
left: 0;
|
||||
}
|
||||
@include below-one-margin {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
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 {
|
||||
@include textual-input;
|
||||
@include textual-input;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
margin: 0rem 0rem 1rem 0rem;
|
||||
width: 100%;
|
||||
margin: 0rem 0rem 1rem 0rem;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0.25rem 0.75rem 0.25rem .75rem;
|
||||
text-decoration: none;
|
||||
@include var(color, text-color);
|
||||
display: inline-block;
|
||||
border-bottom: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
a {
|
||||
padding: 0.25rem 0.75rem 0.25rem .75rem;
|
||||
text-decoration: none;
|
||||
@include var(color, text-color);
|
||||
display: inline-block;
|
||||
border-bottom: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.post-subscript {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-top: .5rem;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.0rem;
|
||||
font-size: 3.0rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.6rem;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.2rem;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.0rem;
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
|
||||
a {
|
||||
@include var(color, text-color);
|
||||
text-decoration: none;
|
||||
border-bottom: .2rem solid $primary-color;
|
||||
@include var(color, text-color);
|
||||
text-decoration: none;
|
||||
border-bottom: .2rem solid $primary-color;
|
||||
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
&.external-link, &.same-page-link {
|
||||
.feather {
|
||||
fill: none;
|
||||
margin-left: 0.25rem;
|
||||
position: relative;
|
||||
top: 0.125em;
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
&.external-link, &.same-page-link {
|
||||
.feather {
|
||||
fill: none;
|
||||
margin-left: 0.25rem;
|
||||
position: relative;
|
||||
top: 0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.draft-link {
|
||||
border-bottom: .2rem solid $border-color;
|
||||
border-bottom: .2rem solid $border-color;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
background-color: white;
|
||||
max-width: 100%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
table {
|
||||
@ -251,21 +251,21 @@ ul.post-list {
|
||||
}
|
||||
|
||||
.series-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin-top: 1rem;
|
||||
font-size: 1.1rem;
|
||||
border-top: $standard-border;
|
||||
padding-top: 1rem;
|
||||
margin-top: 1rem;
|
||||
font-size: 1.1rem;
|
||||
border-top: $standard-border;
|
||||
padding-top: 1rem;
|
||||
|
||||
.feather {
|
||||
fill: none;
|
||||
flex-shrink: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.feather {
|
||||
fill: none;
|
||||
flex-shrink: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -309,8 +309,8 @@ figure {
|
||||
}
|
||||
|
||||
&.fullwide {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -330,21 +330,20 @@ figure {
|
||||
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
|
||||
in <head> uses !important to restore the display of icons, but provides
|
||||
limited styling. Here, we finally apply the full extent of the feather
|
||||
styles.
|
||||
limited styling. Here, we finally apply the full extent of the feather styles.
|
||||
*/
|
||||
.feather {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: currentColor;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.katex * {
|
||||
font-family: unset;
|
||||
font-family: unset;
|
||||
}
|
||||
|
||||
.block {
|
||||
@ -356,7 +355,7 @@ figure {
|
||||
|
||||
.dialog {
|
||||
.message {
|
||||
max-width: 0.8*$container-width;
|
||||
max-width: 0.8 * $container-width;
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -390,19 +389,18 @@ figure {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.wrapper {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
|
||||
&.previous {
|
||||
justify-content: left;
|
||||
}
|
||||
&.previous {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
&.next {
|
||||
justify-content: right;
|
||||
}
|
||||
&.next {
|
||||
justify-content: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
a, .ongoing-placeholder {
|
||||
@include bordered-block;
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
@ -412,16 +410,16 @@ figure {
|
||||
margin-top: 1em;
|
||||
|
||||
.feather {
|
||||
height: 1.25em;
|
||||
width: 1.25em;
|
||||
fill: none;
|
||||
&:first-child { margin-right: 0.5em; }
|
||||
&:last-child { margin-left: 0.5em; }
|
||||
height: 1.25em;
|
||||
width: 1.25em;
|
||||
fill: none;
|
||||
&:first-child { margin-right: 0.5em; }
|
||||
&:last-child { margin-left: 0.5em; }
|
||||
}
|
||||
}
|
||||
|
||||
.ongoing-placeholder {
|
||||
border-style: dashed;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
div.title {
|
||||
@ -476,26 +474,26 @@ blockquote {
|
||||
}
|
||||
|
||||
.side-by-side-item {
|
||||
flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
.internal-ref {
|
||||
text-decoration: underline;
|
||||
break-inside: avoid;
|
||||
text-decoration: underline;
|
||||
break-inside: avoid;
|
||||
|
||||
&:target {
|
||||
@include var(background-color, target-background-color);
|
||||
border-radius: 1rem;
|
||||
&:target {
|
||||
@include var(background-color, target-background-color);
|
||||
border-radius: 1rem;
|
||||
|
||||
.internal-ref-counter {
|
||||
@include var(background-color, target-background-color);
|
||||
.internal-ref-counter {
|
||||
@include var(background-color, target-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.internal-ref-counter {
|
||||
display: inline-block;
|
||||
border: $standard-border;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0 0.25rem 0 0.25rem;
|
||||
display: inline-block;
|
||||
border: $standard-border;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0 0.25rem 0 0.25rem;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user