mirror of
https://github.com/zaaarf/friendenstein.git
synced 2024-11-22 23:44:53 +01:00
added sticky footer, new SVG icons, and some minor fixes to the layout
This commit is contained in:
Speyll
parent
de633ec8f2
commit
d27284fecb
13 changed files with 367 additions and 345 deletions
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 59 KiB |
|
|
@ -1,94 +1,94 @@
|
||||||
:root,
|
:root,
|
||||||
:root.light {
|
:root.light {
|
||||||
--bgColor: #EEEEEE;
|
--bgColor: #EEEEEE;
|
||||||
--fgColor: #41474E;
|
--fgColor: #41474E;
|
||||||
--metaColor: #D26878;
|
--metaColor: #D26878;
|
||||||
--headColor: #;
|
--headColor: #;
|
||||||
--linkColor: #5690AF;
|
--linkColor: #5690AF;
|
||||||
--hovColor: #22453F;
|
--hovColor: #22453F;
|
||||||
--bgSelect: #FFFAE1;
|
--bgSelect: #FFFAE1;
|
||||||
--bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
|
--bgUrl: url(https://i.ibb.co/Qpkrw4V/tile-Light.webp) repeat;
|
||||||
--red: #D26878;
|
--red: #D26878;
|
||||||
--dimRed: #623039;
|
--dimRed: #623039;
|
||||||
--orange: #e08f67;
|
--orange: #e08f67;
|
||||||
--dimOrange: #926048;
|
--dimOrange: #926048;
|
||||||
--yellow: #FFFAE1;
|
--yellow: #FFFAE1;
|
||||||
--dimYellow: #D5C5A1;
|
--dimYellow: #D5C5A1;
|
||||||
--green: #56AFA0;
|
--green: #56AFA0;
|
||||||
--dimGreen: #22453F;
|
--dimGreen: #22453F;
|
||||||
--blue: #5690AF;
|
--blue: #5690AF;
|
||||||
--dimBlue: #223844;
|
--dimBlue: #223844;
|
||||||
--purple: #9271D6;
|
--purple: #9271D6;
|
||||||
--dimPurple: #47356C;
|
--dimPurple: #47356C;
|
||||||
--grey: #CBCDCD;
|
--grey: #CBCDCD;
|
||||||
--dimGrey: #646868
|
--dimGrey: #646868
|
||||||
}
|
}
|
||||||
|
|
||||||
:root.dark {
|
:root.dark {
|
||||||
--bgColor: #222529;
|
--bgColor: #222529;
|
||||||
--fgColor: #D6D6D6;
|
--fgColor: #D6D6D6;
|
||||||
--metaColor: #78B6AD;
|
--metaColor: #78B6AD;
|
||||||
--headColor: #;
|
--headColor: #;
|
||||||
--linkColor: #DBD5BC;
|
--linkColor: #DBD5BC;
|
||||||
--hovColor: #E2AEA2;
|
--hovColor: #E2AEA2;
|
||||||
--bgSelect: #464949;
|
--bgSelect: #464949;
|
||||||
--bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
|
--bgUrl: url(https://i.ibb.co/LzrFBFJ/tileDark.webp) repeat;
|
||||||
--red: #CD909B;
|
--red: #CD909B;
|
||||||
--dimRed: #684249;
|
--dimRed: #684249;
|
||||||
--orange: #E2AEA2;
|
--orange: #E2AEA2;
|
||||||
--dimOrange: #704941;
|
--dimOrange: #704941;
|
||||||
--yellow: #DBD5BC;
|
--yellow: #DBD5BC;
|
||||||
--dimYellow: #6F6847;
|
--dimYellow: #6F6847;
|
||||||
--green: #78B6AD;
|
--green: #78B6AD;
|
||||||
--dimGreen: #3E615C;
|
--dimGreen: #3E615C;
|
||||||
--blue: #87C9E5;
|
--blue: #87C9E5;
|
||||||
--dimBlue: #38494F;
|
--dimBlue: #38494F;
|
||||||
--purple: #CEA7DE;
|
--purple: #CEA7DE;
|
||||||
--dimPurple: #5E406A;
|
--dimPurple: #5E406A;
|
||||||
--grey: #CBCDCD;
|
--grey: #CBCDCD;
|
||||||
--dimGrey: #464949
|
--dimGrey: #464949
|
||||||
}
|
}
|
||||||
|
|
||||||
::-moz-selection {
|
::-moz-selection {
|
||||||
color: var(--bgColor);
|
color: var(--bgColor);
|
||||||
background: var(--metaColor)
|
background: var(--metaColor)
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: var(--bgColor);
|
color: var(--bgColor);
|
||||||
background: var(--metaColor)
|
background: var(--metaColor)
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 62.5%
|
font-size: 62.5%;
|
||||||
|
scrollbar-color: var(--metaColor) var(--bgColor);
|
||||||
|
scrollbar-width: thin;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
max-width: 64rem;
|
max-width: 64rem;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 1rem;
|
overflow-wrap: break-word;
|
||||||
overflow-wrap: break-word;
|
background: var(--bgColor);
|
||||||
background: var(--bgColor);
|
color: var(--fgColor);
|
||||||
color: var(--fgColor);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 2.4rem;
|
font-size: 2.4rem;
|
||||||
margin: 1rem 1rem 1.5rem 0;
|
color: var(--bgColor);
|
||||||
color: var(--bgColor);
|
background-color: var(--metaColor);
|
||||||
background-color: var(--metaColor);
|
text-align: center;
|
||||||
text-align: center;
|
text-wrap: balance;
|
||||||
text-wrap: balance;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1::before {
|
h1::before {
|
||||||
color: var(--bgColor);
|
color: var(--bgColor);
|
||||||
content: '# '
|
content: '# '
|
||||||
}
|
}
|
||||||
|
|
||||||
h2::before,
|
h2::before,
|
||||||
|
|
@ -96,230 +96,250 @@ h3::before,
|
||||||
h4::before,
|
h4::before,
|
||||||
h5::before,
|
h5::before,
|
||||||
h6::before {
|
h6::before {
|
||||||
color: var(--metaColor);
|
color: var(--metaColor);
|
||||||
content: '# '
|
content: '# '
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--linkColor);
|
text-decoration: none;
|
||||||
|
padding: 0 .2rem 0 .2rem;
|
||||||
|
border-radius: .3rem;
|
||||||
|
color: var(--linkColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
a:focus,
|
a:focus,
|
||||||
a:hover {
|
a:hover {
|
||||||
background-color: var(--linkColor);
|
background-color: var(--linkColor);
|
||||||
color: var(--bgColor)
|
color: var(--bgColor)
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-top: .5rem;
|
margin-top: .5rem;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
line-height: 1.45;
|
line-height: 1.45;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li::marker {
|
ul li::marker {
|
||||||
content: '» ';
|
content: '» ';
|
||||||
color: var(--metaColor)
|
color: var(--metaColor)
|
||||||
}
|
}
|
||||||
|
|
||||||
ul li:hover::marker {
|
ul li:hover::marker {
|
||||||
content: '# ';
|
content: '# ';
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--linkColor)
|
color: var(--linkColor)
|
||||||
}
|
|
||||||
|
|
||||||
li:hover {
|
|
||||||
transform: scale(1.02);
|
|
||||||
-webkit-transition: .1s ease-in;
|
|
||||||
-moz-transition: .1s ease-in;
|
|
||||||
-o-transition: .1s ease-in;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
border-left: 5px solid var(--metaColor);
|
border-left: 5px solid var(--metaColor);
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
padding: 0 0 0 1rem
|
padding: 0 0 0 1rem
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
border: 2px dotted;
|
border: 2px dotted;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
resize: none;
|
resize: none;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background-color: var(--bgColor)
|
background-color: var(--bgColor)
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: 1px dashed
|
border: 1px dashed
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: .2rem;
|
margin: .2rem;
|
||||||
padding: .2rem;
|
padding: .2rem;
|
||||||
border: dashed 2px var(--metaColor);
|
border: dashed 2px var(--metaColor);
|
||||||
border-radius: 15px
|
border-radius: 15px
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
border: 1px solid var(--metaColor);
|
border: 1px solid var(--metaColor);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
font-style: monospace;
|
font-style: monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
p code,
|
p code,
|
||||||
li code,
|
li code,
|
||||||
div code {
|
div code {
|
||||||
color: var(--bgColor);
|
padding: 0 .2rem 0 .2rem;
|
||||||
background-color: var(--fgColor);
|
border-radius: .3rem;
|
||||||
|
color: var(--bgColor);
|
||||||
|
background-color: var(--fgColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre code {
|
pre code {
|
||||||
color: inherit;
|
padding: 0;
|
||||||
background-color: inherit;
|
border-radius: 0;
|
||||||
|
color: inherit;
|
||||||
|
background-color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
iframe {
|
iframe {
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border: none;
|
border: none;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
line-height: 1.1
|
line-height: 1.1
|
||||||
}
|
}
|
||||||
|
|
||||||
thead th:first-child {
|
thead th:first-child {
|
||||||
width: 20%
|
width: 20%
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font-weight: 400
|
font-weight: 400
|
||||||
}
|
}
|
||||||
|
|
||||||
td,
|
td,
|
||||||
th {
|
th {
|
||||||
padding: .5rem;
|
padding: .5rem;
|
||||||
border: dashed 1px var(--metaColor)
|
border: dashed 1px var(--metaColor)
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
clear: both;
|
clear: both;
|
||||||
color: var(--footColor)
|
color: var(--footColor)
|
||||||
}
|
}
|
||||||
|
|
||||||
footer,
|
footer,
|
||||||
td,
|
td,
|
||||||
th {
|
th {
|
||||||
text-align: left
|
text-align: left
|
||||||
}
|
}
|
||||||
|
|
||||||
.metaData,
|
.metaData,
|
||||||
.themeButton,
|
.themeButton,
|
||||||
hr,
|
hr,
|
||||||
textarea {
|
textarea {
|
||||||
color: var(--metaColor)
|
color: var(--metaColor)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Site Specific Styling */
|
||||||
|
.wrapper {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icons settings */
|
||||||
|
.icons {
|
||||||
|
width: 2.0rem;
|
||||||
|
height: 2.0rem;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
top: .3rem;
|
||||||
|
position: relative;
|
||||||
|
color: var(--fgColor);
|
||||||
|
fill: var(--fgColor);
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons__background:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--metaColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navBar {
|
.navBar {
|
||||||
margin: .5rem;
|
padding: 1rem 0 0 0;
|
||||||
margin-bottom: 2rem;
|
display: flex;
|
||||||
display: flex;
|
flex-direction: row;
|
||||||
flex-direction: row;
|
gap: .4rem;
|
||||||
gap: .4rem;
|
flex-wrap: wrap;
|
||||||
flex-wrap: wrap;
|
justify-content: flex-end;
|
||||||
justify-content: flex-end;
|
align-items: center;
|
||||||
align-items: center;
|
align-content: flex-end
|
||||||
align-content: flex-end
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.themeButton {
|
.themeButton {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .themeButton.dark,
|
.dark .themeButton.dark,
|
||||||
.themeButton.light {
|
.themeButton.light {
|
||||||
display: none
|
display: none
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .themeButton.light {
|
.dark .themeButton.light {
|
||||||
display: block
|
display: block
|
||||||
}
|
}
|
||||||
|
|
||||||
.tagsData {
|
.tagsData {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
align-content: flex-end
|
align-content: flex-end
|
||||||
}
|
}
|
||||||
|
|
||||||
.titleList {
|
.titleList {
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footnote-definition {
|
.footnote-definition {
|
||||||
margin: 0 0 0 2rem;
|
margin: 0 0 0 2rem;
|
||||||
}
|
|
||||||
.footnote-definition-label {
|
|
||||||
color: var(--metaColor);
|
|
||||||
}
|
|
||||||
.footnote-definition p {
|
|
||||||
display: inline;
|
|
||||||
padding: 0 0 0 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footContainer,
|
.footnote-definition-label {
|
||||||
.footRight {
|
color: var(--metaColor);
|
||||||
display: flex;
|
}
|
||||||
align-content: center
|
|
||||||
|
.footnote-definition p {
|
||||||
|
display: inline;
|
||||||
|
padding: 0 0 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footContainer {
|
.footContainer {
|
||||||
flex-direction: row;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start
|
align-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
.footRight {
|
|
||||||
flex-direction: column;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.noStyle {
|
.noStyle {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 0
|
border-radius: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
.textCenter {
|
.textCenter {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.floatRight {
|
.floatRight {
|
||||||
float: right
|
float: right
|
||||||
}
|
}
|
||||||
|
|
||||||
.floatLeft {
|
.floatLeft {
|
||||||
float: left
|
float: left
|
||||||
}
|
}
|
||||||
|
|
||||||
.webring {
|
.webring {
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add Padding */
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
.wrapper {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
21
static/icons.svg
Normal file
21
static/icons.svg
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="rss" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
|
||||||
|
<path fill="currentColor" d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="darkMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
|
||||||
|
<path fill="currentColor" d="M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21Z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="lightMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
|
||||||
|
<path fill="currentColor" d="M12 17q-2.075 0-3.538-1.463T7 12q0-2.075 1.463-3.538T12 7q2.075 0 3.538 1.463T17 12q0 2.075-1.463 3.538T12 17ZM2 13q-.425 0-.713-.288T1 12q0-.425.288-.713T2 11h2q.425 0 .713.288T5 12q0 .425-.288.713T4 13H2Zm18 0q-.425 0-.713-.288T19 12q0-.425.288-.713T20 11h2q.425 0 .713.288T23 12q0 .425-.288.713T22 13h-2Zm-8-8q-.425 0-.713-.288T11 4V2q0-.425.288-.713T12 1q.425 0 .713.288T13 2v2q0 .425-.288.713T12 5Zm0 18q-.425 0-.713-.288T11 22v-2q0-.425.288-.713T12 19q.425 0 .713.288T13 20v2q0 .425-.288.713T12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7q-.275.3-.687.288T5.65 7.05ZM18 19.425l-1.05-1.075q-.275-.3-.275-.713t.275-.687q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288Z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="chevronLeft" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
|
||||||
|
<path fill="currentColor" d="M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42Z"/>
|
||||||
|
</symbol>
|
||||||
|
|
||||||
|
<symbol id="chevronRight" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
|
||||||
|
<path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42Z"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -1,148 +1,18 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="{{ lang }}">
|
<html lang="{{ lang }}">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
{% include "head.html" %}
|
||||||
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
|
|
||||||
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
|
||||||
<meta name="robots" content="index, follow">
|
|
||||||
{% if page.title %}
|
|
||||||
{% set title = page.title %}
|
|
||||||
{% elif section.title %}
|
|
||||||
{% set title = section.title %}
|
|
||||||
{% elif config.title %}
|
|
||||||
{% set title = config.title %}
|
|
||||||
{% endif %}
|
|
||||||
{% if page.extra.author %}
|
|
||||||
{% set author = page.extra.author %}
|
|
||||||
{% elif section.extra.author %}
|
|
||||||
{% set author = section.extra.author %}
|
|
||||||
{% elif config.extra.author %}
|
|
||||||
{% set author = config.extra.author %}
|
|
||||||
{% endif %}
|
|
||||||
{% if page.description %}
|
|
||||||
{% set description = page.description | truncate(length=150) %}
|
|
||||||
{% elif section.description %}
|
|
||||||
{% set description = section.description | truncate(length=150) %}
|
|
||||||
{% elif config.description %}
|
|
||||||
{% set description = config.description | truncate(length=150) %}
|
|
||||||
{% endif %}
|
|
||||||
{% if page.extra.image %}
|
|
||||||
{% set image = get_url(path=page.extra.image, trailing_slash=false) %}
|
|
||||||
{% elif section.extra.image %}
|
|
||||||
{% set image = get_url(path=section.extra.image, trailing_slash=false) %}
|
|
||||||
{% elif config.extra.favicon %}
|
|
||||||
{% set image = get_url(path=config.extra.favicon, trailing_slash=false) %}
|
|
||||||
{% endif %}
|
|
||||||
{% if page.permalink %}
|
|
||||||
{% set url = page.permalink %}
|
|
||||||
{% elif section.permalink %}
|
|
||||||
{% set url = section.permalink %}
|
|
||||||
{% elif config.base_url %}
|
|
||||||
{% set url = config.base_url %}
|
|
||||||
{% endif %}
|
|
||||||
{% if title %}
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
{% endif %}
|
|
||||||
{% block metatags %}
|
|
||||||
{% if title %}
|
|
||||||
<meta name="title" content="{{ title }}">
|
|
||||||
{% endif %}
|
|
||||||
{% if author %}
|
|
||||||
<meta name="author" content="{{ author }}">
|
|
||||||
{% endif %}
|
|
||||||
{% if description %}
|
|
||||||
<meta name="description" content="{{ description }}">
|
|
||||||
{% endif %}
|
|
||||||
<meta property="og:type" content="website">
|
|
||||||
<meta property="og:url" content="{{ url | safe }}">
|
|
||||||
{% if title %}
|
|
||||||
<meta property="og:site_name" content="{{ config.title }}">
|
|
||||||
{% endif %}
|
|
||||||
{% if title %}
|
|
||||||
<meta property="og:title" content="{{ title }}">
|
|
||||||
{% endif %}
|
|
||||||
{% if description %}
|
|
||||||
<meta property="og:description" content="{{ description }}">
|
|
||||||
{% endif %}
|
|
||||||
{% if image %}
|
|
||||||
<meta property="og:image" content="{{ image }}">
|
|
||||||
{% endif %}
|
|
||||||
{% set twitter_card = config.extra.twitter_card | default(value=true) %}
|
|
||||||
{% if twitter_card != false %}
|
|
||||||
<meta property="twitter:card" content="summary_large_image">
|
|
||||||
<meta property="twitter:url" content="{{ url | safe }}">
|
|
||||||
{% if title %}
|
|
||||||
<meta property="twitter:title" content="{{ title }}">
|
|
||||||
{% endif %}
|
|
||||||
{% if description %}
|
|
||||||
<meta property="twitter:description" content="{{ description }}">
|
|
||||||
{% endif %}
|
|
||||||
{% if image %}
|
|
||||||
<meta property="twitter:image" content="{{ image }}">
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
|
||||||
<link rel="canonical" href="{{ url | safe }}">
|
|
||||||
{% if image %}
|
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}">
|
|
||||||
{% endif %}
|
|
||||||
{% endblock metatags %}
|
|
||||||
{% if config.generate_feed %}
|
|
||||||
{% block feed %}
|
|
||||||
<link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
|
|
||||||
{% endblock feed %}
|
|
||||||
{% endif %}
|
|
||||||
{% block css %}
|
|
||||||
<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
|
|
||||||
{% endblock css %}
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<header>
|
<header>
|
||||||
{% if config.extra.header_nav %}
|
{% include "header.html" %}
|
||||||
<nav class="navBar">
|
|
||||||
{% for nav_item in config.extra.header_nav %}
|
|
||||||
{% set current_nav_item = nav_item[lang] %}
|
|
||||||
{% if current_nav_item and current_nav_item.name %}
|
|
||||||
<a href="{{ get_url(path=current_nav_item.url) }}" {% if current_nav_item.new_tab %}target="_blank" rel="noreferrer noopener"{% endif %}>{{ current_nav_item.name }}</a>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
<div class="themeSwitch">
|
|
||||||
<button class="themeButton light" onclick="setTheme('light')" title="Light mode">◐</button>
|
|
||||||
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode">◑</button>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
{% endif %}
|
|
||||||
<script>
|
|
||||||
const setTheme = (theme) => {
|
|
||||||
document.documentElement.className = theme;
|
|
||||||
localStorage.setItem('theme', theme);
|
|
||||||
}
|
|
||||||
const getTheme = () => {
|
|
||||||
const theme = localStorage.getItem('theme');
|
|
||||||
theme && setTheme(theme);
|
|
||||||
}
|
|
||||||
getTheme()
|
|
||||||
</script>
|
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
{% block content %}{% endblock content %}
|
{% block content %}{% endblock content %}
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
{% block footer %}{% endblock footer %}
|
{% include "footer.html" %}
|
||||||
<hr>
|
|
||||||
<div class=footContainer>
|
|
||||||
<div class="footLeft">
|
|
||||||
<p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://fr.wikipedia.org/wiki/Licence_MIT">MIT</a><br>
|
|
||||||
Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme & <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="footRight">
|
|
||||||
<!-- Size 46x46 -->
|
|
||||||
<img class="footGif noStyle" loading="lazy" src="https://i.ibb.co/XYDpfcs/foot.gif" alt="footGif">
|
|
||||||
<a class="metaData" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates.">RSS</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,9 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block header %}
|
{% block content %}
|
||||||
<div><a href="..">..</a>/<span class="metaData">{{ page.slug }}</span></div>
|
<div><a href="..">..</a>/<span class="metaData">{{ page.slug }}</span></div>
|
||||||
<time datetime="{{ page.date }}">Published on: <span class="metaData">{{ page.date }}</span></time>
|
<time datetime="{{ page.date }}">Published on: <span class="metaData">{{ page.date }}</span></time>
|
||||||
<h1>{{ page.title }}</h1>
|
<h1>{{ page.title }}</h1>
|
||||||
{% endblock header %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
|
|
||||||
{% if page.toc and page.extra.toc %}
|
{% if page.toc and page.extra.toc %}
|
||||||
<h2>Table of contents</h2>
|
<h2>Table of contents</h2>
|
||||||
|
|
@ -35,11 +32,8 @@
|
||||||
</ul>
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
{{ page.content | safe }}
|
{{ page.content | safe }}
|
||||||
{% endblock content %}
|
|
||||||
|
|
||||||
{% block footer %}
|
|
||||||
<p class="tagsData">
|
<p class="tagsData">
|
||||||
{% if page.taxonomies.tags %}
|
{% if page.taxonomies.tags %}
|
||||||
{% for tag in page.taxonomies.tags %}
|
{% for tag in page.taxonomies.tags %}
|
||||||
|
|
@ -47,4 +41,4 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</p>
|
</p>
|
||||||
{% endblock footer %}
|
{% endblock content %}
|
||||||
11
templates/footer.html
Normal file
11
templates/footer.html
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<hr>
|
||||||
|
<div class=footContainer>
|
||||||
|
<div class="footLeft">
|
||||||
|
<p>Licensed under <a target="_blank" rel="noopener noreferrer" href="https://fr.wikipedia.org/wiki/Licence_MIT">MIT</a><br>
|
||||||
|
Built with <a target="_blank" rel="noopener noreferrer" href="https://www.getzola.org">Zola</a> using <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/anemone">anemone</a> theme & <a target="_blank" rel="noopener noreferrer" href="https://github.com/Speyll/veqev">veqev</a> colors.<br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="footRight">
|
||||||
|
<a class="icons__background" target="_blank" rel="noopener noreferrer" href="{{ get_url(path="atom.xml", trailing_slash=false) }}" title="Subscribe via RSS for updates."><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#rss', trailing_slash=false) | safe }}"></use></svg></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
94
templates/head.html
Normal file
94
templates/head.html
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
|
||||||
|
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
{% if page.title %}
|
||||||
|
{% set title = page.title %}
|
||||||
|
{% elif section.title %}
|
||||||
|
{% set title = section.title %}
|
||||||
|
{% elif config.title %}
|
||||||
|
{% set title = config.title %}
|
||||||
|
{% endif %}
|
||||||
|
{% if page.extra.author %}
|
||||||
|
{% set author = page.extra.author %}
|
||||||
|
{% elif section.extra.author %}
|
||||||
|
{% set author = section.extra.author %}
|
||||||
|
{% elif config.extra.author %}
|
||||||
|
{% set author = config.extra.author %}
|
||||||
|
{% endif %}
|
||||||
|
{% if page.description %}
|
||||||
|
{% set description = page.description | truncate(length=150) %}
|
||||||
|
{% elif section.description %}
|
||||||
|
{% set description = section.description | truncate(length=150) %}
|
||||||
|
{% elif config.description %}
|
||||||
|
{% set description = config.description | truncate(length=150) %}
|
||||||
|
{% endif %}
|
||||||
|
{% if page.extra.image %}
|
||||||
|
{% set image = get_url(path=page.extra.image, trailing_slash=false) %}
|
||||||
|
{% elif section.extra.image %}
|
||||||
|
{% set image = get_url(path=section.extra.image, trailing_slash=false) %}
|
||||||
|
{% elif config.extra.favicon %}
|
||||||
|
{% set image = get_url(path=config.extra.favicon, trailing_slash=false) %}
|
||||||
|
{% endif %}
|
||||||
|
{% if page.permalink %}
|
||||||
|
{% set url = page.permalink %}
|
||||||
|
{% elif section.permalink %}
|
||||||
|
{% set url = section.permalink %}
|
||||||
|
{% elif config.base_url %}
|
||||||
|
{% set url = config.base_url %}
|
||||||
|
{% endif %}
|
||||||
|
{% if title %}
|
||||||
|
<title>{{ title }}</title>
|
||||||
|
{% endif %}
|
||||||
|
{% block metatags %}
|
||||||
|
{% if title %}
|
||||||
|
<meta name="title" content="{{ title }}">
|
||||||
|
{% endif %}
|
||||||
|
{% if author %}
|
||||||
|
<meta name="author" content="{{ author }}">
|
||||||
|
{% endif %}
|
||||||
|
{% if description %}
|
||||||
|
<meta name="description" content="{{ description }}">
|
||||||
|
{% endif %}
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="{{ url | safe }}">
|
||||||
|
{% if title %}
|
||||||
|
<meta property="og:site_name" content="{{ config.title }}">
|
||||||
|
{% endif %}
|
||||||
|
{% if title %}
|
||||||
|
<meta property="og:title" content="{{ title }}">
|
||||||
|
{% endif %}
|
||||||
|
{% if description %}
|
||||||
|
<meta property="og:description" content="{{ description }}">
|
||||||
|
{% endif %}
|
||||||
|
{% if image %}
|
||||||
|
<meta property="og:image" content="{{ image }}">
|
||||||
|
{% endif %}
|
||||||
|
{% set twitter_card = config.extra.twitter_card | default(value=true) %}
|
||||||
|
{% if twitter_card != false %}
|
||||||
|
<meta property="twitter:card" content="summary_large_image">
|
||||||
|
<meta property="twitter:url" content="{{ url | safe }}">
|
||||||
|
{% if title %}
|
||||||
|
<meta property="twitter:title" content="{{ title }}">
|
||||||
|
{% endif %}
|
||||||
|
{% if description %}
|
||||||
|
<meta property="twitter:description" content="{{ description }}">
|
||||||
|
{% endif %}
|
||||||
|
{% if image %}
|
||||||
|
<meta property="twitter:image" content="{{ image }}">
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
<link rel="canonical" href="{{ url | safe }}">
|
||||||
|
{% if image %}
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="{{ get_url(path=config.extra.favicon, trailing_slash=false) }}">
|
||||||
|
{% endif %}
|
||||||
|
{% endblock metatags %}
|
||||||
|
{% if config.generate_feed %}
|
||||||
|
{% block feed %}
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="RSS" href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
|
||||||
|
{% endblock feed %}
|
||||||
|
{% endif %}
|
||||||
|
{% block css %}
|
||||||
|
<link rel="stylesheet" href="{{ get_url(path='css/style.css', trailing_slash=false) | safe }}"/>
|
||||||
|
{% endblock css %}
|
||||||
25
templates/header.html
Normal file
25
templates/header.html
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
{% if config.extra.header_nav %}
|
||||||
|
<nav class="navBar">
|
||||||
|
{% for nav_item in config.extra.header_nav %}
|
||||||
|
{% set current_nav_item = nav_item[lang] %}
|
||||||
|
{% if current_nav_item and current_nav_item.name %}
|
||||||
|
<a href="{{ get_url(path=current_nav_item.url) }}" {% if current_nav_item.new_tab %}target="_blank" rel="noreferrer noopener"{% endif %}>{{ current_nav_item.name }}</a>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
<div class="themeSwitch">
|
||||||
|
<button class="themeButton light" onclick="setTheme('light')" title="Light mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#lightMode', trailing_slash=false) | safe }}"></use></svg></button>
|
||||||
|
<button class="themeButton dark" onclick="setTheme('dark')" title="Dark mode"><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#darkMode', trailing_slash=false) | safe }}"></use></svg></button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endif %}
|
||||||
|
<script>
|
||||||
|
const setTheme = (theme) => {
|
||||||
|
document.documentElement.className = theme;
|
||||||
|
localStorage.setItem('theme', theme);
|
||||||
|
}
|
||||||
|
const getTheme = () => {
|
||||||
|
const theme = localStorage.getItem('theme');
|
||||||
|
theme && setTheme(theme);
|
||||||
|
}
|
||||||
|
getTheme()
|
||||||
|
</script>
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block header %}
|
|
||||||
<h1>{{ page.title }}</h1>
|
|
||||||
{% endblock header %}
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<h1>{{ page.title }}</h1>
|
||||||
|
|
||||||
{% if page.toc and page.extra.toc %}
|
{% if page.toc and page.extra.toc %}
|
||||||
<h2>Table of contents</h2>
|
<h2>Table of contents</h2>
|
||||||
|
|
@ -34,9 +31,7 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{{ page.content | safe }}
|
{{ page.content | safe }}
|
||||||
{% endblock content %}
|
|
||||||
|
|
||||||
{% block footer %}
|
|
||||||
<p class="tagsData">
|
<p class="tagsData">
|
||||||
{% if page.taxonomies.tags %}
|
{% if page.taxonomies.tags %}
|
||||||
{% for tag in page.taxonomies.tags %}
|
{% for tag in page.taxonomies.tags %}
|
||||||
|
|
@ -44,4 +39,4 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</p>
|
</p>
|
||||||
{% endblock footer %}
|
{% endblock content %}
|
||||||
|
|
@ -1,10 +1,8 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block header %}
|
|
||||||
<h1>{{ section.title }}</h1>
|
|
||||||
{% endblock header %}
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<h1>{{ section.title }}</h1>
|
||||||
|
|
||||||
{{ section.content | safe }}
|
{{ section.content | safe }}
|
||||||
|
|
||||||
{% if paginator %}
|
{% if paginator %}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<span class="webring">
|
<span class="webring">
|
||||||
<a href={{prev}}>⇱</a>
|
<a class="icons__background" href={{prev}}><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#chevronLeft', trailing_slash=false) | safe }}"></use></svg></a>
|
||||||
<a href={{webring}}>{{webringName}}</a>
|
<a href={{webring}}>{{webringName}}</a>
|
||||||
<a href={{next}}>⇲</a></span>
|
<a class="icons__background" href={{next}}><svg class="icons icons__background"><use href="{{ get_url(path='icons.svg#chevronRight', trailing_slash=false) | safe }}"></use></svg></a></span>
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block header %}
|
|
||||||
<h1>{{ taxonomy.name }}</h1>
|
|
||||||
{% endblock header %}
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<h1>{{ taxonomy.name }}</h1>
|
||||||
<p>
|
<p>
|
||||||
{% for term in terms %}
|
{% for term in terms %}
|
||||||
<a href="{{ term.permalink | safe }}">#{{ term.name }}</a>[{{ term.pages | length }}]
|
<a href="{{ term.permalink | safe }}">#{{ term.name }}</a>[{{ term.pages | length }}]
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block header %}
|
|
||||||
<h1>{{ term.name }}</h1>
|
|
||||||
{% endblock header %}
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<h1>{{ term.name }}</h1>
|
||||||
{% if paginator %}
|
{% if paginator %}
|
||||||
{% set pages = paginator.pages %}
|
{% set pages = paginator.pages %}
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue