zaaarf/friendenstein
1
0
Fork 0
mirror of https://github.com/zaaarf/friendenstein.git synced 2024-11-22 15:34:50 +01:00
Code Issues Projects Releases Packages Wiki Activity

feat: converted to scss

Browse source
This commit is contained in:
zaaarf 2023-12-24 18:29:23 +01:00
parent c26ad60409
commit 40d66de6ee
No known key found for this signature in database
GPG key ID: 102E445F4C3F829B
9 changed files with 392 additions and 354 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
sass/_code.scss Normal file
View 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
View 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
View 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;
}

0
sass/logo.scss → sass/_logo.scss
View file

251
sass/_main.scss Normal file
View 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
View 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
View file

@ -0,0 +1,6 @@
@import 'colors';
@import 'main';
@import 'home';
@import 'code';
@import 'table';
@import 'logo';

352
static/css/style.css
View file

@ -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;
}
}

3
templates/head.html
View file

@ -95,8 +95,7 @@
{% endblock feed %}
{% endif %}
{% block css %}
<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
<link rel="stylesheet" href="{{ get_url(path='logo.css', trailing_slash=false) | safe }}"/>
<link rel="stylesheet" href="{{ get_url(path='style.css', trailing_slash=false) | safe }}"/>
{% endblock css %}
<script>
const setTheme = (theme) => {