mirror of
https://github.com/zaaarf/friendenstein.git
synced 2024-11-12 18:49:22 +01:00
feat: converted to scss
This commit is contained in:
parent
c26ad60409
commit
40d66de6ee
9 changed files with 392 additions and 354 deletions
25
sass/_code.scss
Normal file
25
sass/_code.scss
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
pre {
|
||||||
|
margin-top: 25px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
border: 1px solid var(--metaColor);
|
||||||
|
padding: 1rem;
|
||||||
|
font-style: monospace;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
|
||||||
|
code {
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
color: inherit;
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p code,
|
||||||
|
li code,
|
||||||
|
div code {
|
||||||
|
padding: 0 .2rem 0 .2rem;
|
||||||
|
border-radius: .3rem;
|
||||||
|
color: var(--bgColor);
|
||||||
|
background-color: var(--linkColor);
|
||||||
|
}
|
62
sass/_colors.scss
Normal file
62
sass/_colors.scss
Normal file
|
@ -0,0 +1,62 @@
|
||||||
|
:root,
|
||||||
|
:root.light {
|
||||||
|
--bgColor: #EEEEEE;
|
||||||
|
--fgColor: #41474E;
|
||||||
|
--metaColor: var(--orange);
|
||||||
|
--headColor: #;
|
||||||
|
--linkColor: var(--blue);
|
||||||
|
--dimLinkcolor: var(--dimBlue);
|
||||||
|
--hovColor: var(--dimGreen);
|
||||||
|
--bgSelect: var(--yellow);
|
||||||
|
--bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
|
||||||
|
/* veqev colors */
|
||||||
|
--red: #D26878;
|
||||||
|
--dimRed: #623039;
|
||||||
|
--orange: #e08f67;
|
||||||
|
--dimOrange: #926048;
|
||||||
|
--yellow: #FFFAE1;
|
||||||
|
--dimYellow: #D5C5A1;
|
||||||
|
--green: #56AFA0;
|
||||||
|
--dimGreen: #22453F;
|
||||||
|
--blue: #5690AF;
|
||||||
|
--dimBlue: #223844;
|
||||||
|
--purple: #9271D6;
|
||||||
|
--dimPurple: #47356C;
|
||||||
|
--grey: #CBCDCD;
|
||||||
|
--dimGrey: #646868;
|
||||||
|
/* ftbsc colors (TODO: come up with variants) */
|
||||||
|
--ftbscGreen: #2E8757;
|
||||||
|
--ftbscOrange: #FF4D17;
|
||||||
|
--ftbscReddish: #BF616A;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark {
|
||||||
|
--bgColor: #222529;
|
||||||
|
--fgColor: #D6D6D6;
|
||||||
|
--metaColor: var(--ftbscOrange);
|
||||||
|
--headColor: #;
|
||||||
|
--linkColor: var(--yellow);
|
||||||
|
--dimLinkColor: var(--dimYellow);
|
||||||
|
--hovColor: var(--orange);
|
||||||
|
--bgSelect: var(--dimGrey);
|
||||||
|
--bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
|
||||||
|
/* veqev colors */
|
||||||
|
--red: #CD909B;
|
||||||
|
--dimRed: #684249;
|
||||||
|
--orange: #E2AEA2;
|
||||||
|
--dimOrange: #704941;
|
||||||
|
--yellow: #DBD5BC;
|
||||||
|
--dimYellow: #6F6847;
|
||||||
|
--green: #78B6AD;
|
||||||
|
--dimGreen: #3E615C;
|
||||||
|
--blue: #87C9E5;
|
||||||
|
--dimBlue: #38494F;
|
||||||
|
--purple: #CEA7DE;
|
||||||
|
--dimPurple: #5E406A;
|
||||||
|
--grey: #CBCDCD;
|
||||||
|
--dimGrey: #464949;
|
||||||
|
/* ftbsc colors */
|
||||||
|
--ftbscGreen: #2E8757;
|
||||||
|
--ftbscOrange: #FF4D17;
|
||||||
|
--ftbscReddish: #BF616A;
|
||||||
|
}
|
21
sass/_home.scss
Normal file
21
sass/_home.scss
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
div.home {
|
||||||
|
margin-top: 35%;
|
||||||
|
margin-bottom: 15%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 4rem;
|
||||||
|
color: var(--fgColor);
|
||||||
|
background-color: var(--bgColor);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a.socialIcon {
|
||||||
|
padding: .2em .3em 0 .3em;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
251
sass/_main.scss
Normal file
251
sass/_main.scss
Normal file
|
@ -0,0 +1,251 @@
|
||||||
|
::-moz-selection, ::selection {
|
||||||
|
color: var(--bgColor);
|
||||||
|
background: var(--fgCOlor);
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 62.5%;
|
||||||
|
scrollbar-color: var(--metaColor) var(--bgColor);
|
||||||
|
scrollbar-width: thin;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
line-height: 1.35;
|
||||||
|
max-width: 50%;
|
||||||
|
margin: auto;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
background: var(--bgColor);
|
||||||
|
color: var(--fgColor);
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
color: var(--bgColor);
|
||||||
|
background-color: var(--metaColor);
|
||||||
|
text-align: center;
|
||||||
|
text-wrap: balance;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
color: var(--bgColor);
|
||||||
|
content: '# ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3, h4, h5, h6 {
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
color: var(--metaColor);
|
||||||
|
content: '# ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0 .2rem 0 .2rem;
|
||||||
|
border-radius: .3rem;
|
||||||
|
color: var(--linkColor);
|
||||||
|
|
||||||
|
&:focus , &:hover {
|
||||||
|
background-color: var(--linkColor);
|
||||||
|
color: var(--bgColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
span.postDate {
|
||||||
|
color: var(--dimLinkColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin-top: .5rem;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
|
||||||
|
li::marker {
|
||||||
|
content: '» ';
|
||||||
|
color: var(--metaColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
li:hover::marker {
|
||||||
|
content: '# ';
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--linkColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-left: .5rem solid var(--metaColor);
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 0 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
border: 2px dotted;
|
||||||
|
outline: 0;
|
||||||
|
resize: none;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: var(--bgColor);
|
||||||
|
color: var(--metaColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: 1px dashed;
|
||||||
|
color: var(--metaColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 90%;
|
||||||
|
height: auto;
|
||||||
|
margin: .2rem;
|
||||||
|
padding: .2rem;
|
||||||
|
border: dashed .2rem var(--metaColor);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metaData, .themeButton {
|
||||||
|
color: var(--metaColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Site Specific Styling */
|
||||||
|
.wrapper {
|
||||||
|
min-height: 100vh;
|
||||||
|
min-height: 100svh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icons settings */
|
||||||
|
.icons {
|
||||||
|
width: 2.0rem;
|
||||||
|
height: 2.0rem;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
color: var(--fgColor);
|
||||||
|
fill: var(--fgColor);
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons__background:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--metaColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navBar {
|
||||||
|
padding: 1rem 0 0 0;
|
||||||
|
gap: .4rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navBar a {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.themeButton {
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .themeButton.dark,
|
||||||
|
.themeButton.light {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .themeButton.light {
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagsData {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-start;
|
||||||
|
align-content: flex-end
|
||||||
|
}
|
||||||
|
|
||||||
|
.titleList li {
|
||||||
|
margin-bottom: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnote-definition {
|
||||||
|
margin: 0 0 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnote-definition-label {
|
||||||
|
color: var(--metaColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footnote-definition p {
|
||||||
|
display: inline;
|
||||||
|
padding: 0 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noStyle {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.textCenter {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatRight {
|
||||||
|
float: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.floatLeft {
|
||||||
|
float: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.webring {
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.toc {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add Padding */
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
body {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
}
|
26
sass/_table.scss
Normal file
26
sass/_table.scss
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
table {
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border: none;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
line-height: 1.1
|
||||||
|
}
|
||||||
|
|
||||||
|
thead th:first-child {
|
||||||
|
width: 20%
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: 400
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: .5rem;
|
||||||
|
border: dashed .1rem var(--metaColor);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
6
sass/style.scss
Normal file
6
sass/style.scss
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
@import 'colors';
|
||||||
|
@import 'main';
|
||||||
|
@import 'home';
|
||||||
|
@import 'code';
|
||||||
|
@import 'table';
|
||||||
|
@import 'logo';
|
|
@ -1,352 +0,0 @@
|
||||||
:root,
|
|
||||||
:root.light {
|
|
||||||
--bgColor: #EEEEEE;
|
|
||||||
--fgColor: #41474E;
|
|
||||||
--metaColor: #D26878;
|
|
||||||
--headColor: #;
|
|
||||||
--linkColor: #5690AF;
|
|
||||||
--hovColor: #22453F;
|
|
||||||
--bgSelect: #FFFAE1;
|
|
||||||
--bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
|
|
||||||
--red: #D26878;
|
|
||||||
--dimRed: #623039;
|
|
||||||
--orange: #e08f67;
|
|
||||||
--dimOrange: #926048;
|
|
||||||
--yellow: #FFFAE1;
|
|
||||||
--dimYellow: #D5C5A1;
|
|
||||||
--green: #56AFA0;
|
|
||||||
--dimGreen: #22453F;
|
|
||||||
--blue: #5690AF;
|
|
||||||
--dimBlue: #223844;
|
|
||||||
--purple: #9271D6;
|
|
||||||
--dimPurple: #47356C;
|
|
||||||
--grey: #CBCDCD;
|
|
||||||
--dimGrey: #646868
|
|
||||||
}
|
|
||||||
|
|
||||||
:root.dark {
|
|
||||||
--bgColor: #222529;
|
|
||||||
--fgColor: #D6D6D6;
|
|
||||||
--metaColor: #78B6AD;
|
|
||||||
--headColor: #;
|
|
||||||
--linkColor: #DBD5BC;
|
|
||||||
--hovColor: #E2AEA2;
|
|
||||||
--bgSelect: #464949;
|
|
||||||
--bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
|
|
||||||
--red: #CD909B;
|
|
||||||
--dimRed: #684249;
|
|
||||||
--orange: #E2AEA2;
|
|
||||||
--dimOrange: #704941;
|
|
||||||
--yellow: #DBD5BC;
|
|
||||||
--dimYellow: #6F6847;
|
|
||||||
--green: #78B6AD;
|
|
||||||
--dimGreen: #3E615C;
|
|
||||||
--blue: #87C9E5;
|
|
||||||
--dimBlue: #38494F;
|
|
||||||
--purple: #CEA7DE;
|
|
||||||
--dimPurple: #5E406A;
|
|
||||||
--grey: #CBCDCD;
|
|
||||||
--dimGrey: #464949
|
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-selection {
|
|
||||||
color: var(--bgColor);
|
|
||||||
background: var(--metaColor)
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
|
||||||
color: var(--bgColor);
|
|
||||||
background: var(--metaColor)
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 62.5%;
|
|
||||||
scrollbar-color: var(--metaColor) var(--bgColor);
|
|
||||||
scrollbar-width: thin;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
line-height: 1.35;
|
|
||||||
max-width: 64rem;
|
|
||||||
margin: auto;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
background: var(--bgColor);
|
|
||||||
color: var(--fgColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.4rem;
|
|
||||||
color: var(--bgColor);
|
|
||||||
background-color: var(--metaColor);
|
|
||||||
text-align: center;
|
|
||||||
text-wrap: balance;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1::before {
|
|
||||||
color: var(--bgColor);
|
|
||||||
content: '# '
|
|
||||||
}
|
|
||||||
|
|
||||||
h2::before,
|
|
||||||
h3::before,
|
|
||||||
h4::before,
|
|
||||||
h5::before,
|
|
||||||
h6::before {
|
|
||||||
color: var(--metaColor);
|
|
||||||
content: '# '
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0 .2rem 0 .2rem;
|
|
||||||
border-radius: .3rem;
|
|
||||||
color: var(--linkColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:focus,
|
|
||||||
a:hover {
|
|
||||||
background-color: var(--linkColor);
|
|
||||||
color: var(--bgColor)
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
margin-top: .5rem;
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul li::marker {
|
|
||||||
content: '» ';
|
|
||||||
color: var(--metaColor)
|
|
||||||
}
|
|
||||||
|
|
||||||
ul li:hover::marker {
|
|
||||||
content: '# ';
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--linkColor)
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
border-left: .5rem solid var(--metaColor);
|
|
||||||
margin: 1rem;
|
|
||||||
padding: 0 0 0 1rem
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
border: 2px dotted;
|
|
||||||
outline: 0;
|
|
||||||
resize: none;
|
|
||||||
overflow: auto;
|
|
||||||
background-color: var(--bgColor)
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border: 1px dashed
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 90%;
|
|
||||||
height: auto;
|
|
||||||
margin: .2rem;
|
|
||||||
padding: .2rem;
|
|
||||||
border: dashed .2rem var(--metaColor);
|
|
||||||
border-radius: 15px
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
border: 1px solid var(--metaColor);
|
|
||||||
padding: 1rem;
|
|
||||||
overflow-x: auto;
|
|
||||||
font-style: monospace;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
p code,
|
|
||||||
li code,
|
|
||||||
div code {
|
|
||||||
padding: 0 .2rem 0 .2rem;
|
|
||||||
border-radius: .3rem;
|
|
||||||
color: var(--bgColor);
|
|
||||||
background-color: var(--fgColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
pre code {
|
|
||||||
padding: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
color: inherit;
|
|
||||||
background-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
max-width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
table-layout: fixed;
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border: none;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
line-height: 1.1
|
|
||||||
}
|
|
||||||
|
|
||||||
thead th:first-child {
|
|
||||||
width: 20%
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
font-weight: 400
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
padding: .5rem;
|
|
||||||
border: dashed .1rem var(--metaColor)
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
clear: both;
|
|
||||||
color: var(--footColor)
|
|
||||||
}
|
|
||||||
|
|
||||||
footer,
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
text-align: left
|
|
||||||
}
|
|
||||||
|
|
||||||
.metaData,
|
|
||||||
.themeButton,
|
|
||||||
hr,
|
|
||||||
textarea {
|
|
||||||
color: var(--metaColor)
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Site Specific Styling */
|
|
||||||
.wrapper {
|
|
||||||
min-height: 100vh;
|
|
||||||
min-height: 100svh;
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: auto 1fr auto;
|
|
||||||
gap: 2rem;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Icons settings */
|
|
||||||
.icons {
|
|
||||||
width: 2.0rem;
|
|
||||||
height: 2.0rem;
|
|
||||||
aspect-ratio: 1/1;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
color: var(--fgColor);
|
|
||||||
fill: var(--fgColor);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons__background:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--metaColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navBar {
|
|
||||||
padding: 1rem 0 0 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: .4rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
align-content: flex-end
|
|
||||||
}
|
|
||||||
|
|
||||||
.themeButton {
|
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
background-color: transparent
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .themeButton.dark,
|
|
||||||
.themeButton.light {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .themeButton.light {
|
|
||||||
display: block
|
|
||||||
}
|
|
||||||
|
|
||||||
.tagsData {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: flex-start;
|
|
||||||
align-content: flex-end
|
|
||||||
}
|
|
||||||
|
|
||||||
.titleList li {
|
|
||||||
margin-bottom: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footnote-definition {
|
|
||||||
margin: 0 0 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footnote-definition-label {
|
|
||||||
color: var(--metaColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footnote-definition p {
|
|
||||||
display: inline;
|
|
||||||
padding: 0 0 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footContainer {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noStyle {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.textCenter {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.floatRight {
|
|
||||||
float: right
|
|
||||||
}
|
|
||||||
|
|
||||||
.floatLeft {
|
|
||||||
float: left
|
|
||||||
}
|
|
||||||
|
|
||||||
.webring {
|
|
||||||
margin: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add Padding */
|
|
||||||
@media (max-width: 650px) {
|
|
||||||
.wrapper {
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -95,8 +95,7 @@
|
||||||
{% endblock feed %}
|
{% endblock feed %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% block css %}
|
{% block css %}
|
||||||
<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
|
<link rel="stylesheet" href="{{ get_url(path='style.css', trailing_slash=false) | safe }}"/>
|
||||||
<link rel="stylesheet" href="{{ get_url(path='logo.css', trailing_slash=false) | safe }}"/>
|
|
||||||
{% endblock css %}
|
{% endblock css %}
|
||||||
<script>
|
<script>
|
||||||
const setTheme = (theme) => {
|
const setTheme = (theme) => {
|
||||||
|
|
Loading…
Reference in a new issue