finmoon/moon-anemone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added sticky footer, new SVG icons, and some minor fixes to the layout

Browse Source
This commit is contained in:
Speyll
2023-09-09 18:20:39 +01:00
parent de633ec8f2
commit d27284fecb
13 changed files with 367 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

386
static/css/style.css
View File

@@ -1,94 +1,94 @@
: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
--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
--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)
color: var(--bgColor);
background: var(--metaColor)
}
::selection {
color: var(--bgColor);
background: var(--metaColor)
color: var(--bgColor);
background: var(--metaColor)
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%
-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;
padding: 1rem;
overflow-wrap: break-word;
background: var(--bgColor);
color: var(--fgColor);
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;
margin: 1rem 1rem 1.5rem 0;
color: var(--bgColor);
background-color: var(--metaColor);
text-align: center;
text-wrap: balance;
font-size: 2.4rem;
color: var(--bgColor);
background-color: var(--metaColor);
text-align: center;
text-wrap: balance;
}
h1::before {
color: var(--bgColor);
content: '# '
color: var(--bgColor);
content: '# '
}
h2::before,
@@ -96,230 +96,250 @@ h3::before,
h4::before,
h5::before,
h6::before {
color: var(--metaColor);
content: '# '
color: var(--metaColor);
content: '# '
}
a {
color: var(--linkColor);
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)
background-color: var(--linkColor);
color: var(--bgColor)
}
ul {
list-style: none;
margin-top: .5rem;
margin-bottom: .5rem;
line-height: 1.45;
list-style: none;
margin-top: .5rem;
margin-bottom: .5rem;
line-height: 1.45;
}
ul li::marker {
content: '» ';
color: var(--metaColor)
content: '» ';
color: var(--metaColor)
}
ul li:hover::marker {
content: '# ';
font-weight: 700;
color: var(--linkColor)
}
li:hover {
transform: scale(1.02);
-webkit-transition: .1s ease-in;
-moz-transition: .1s ease-in;
-o-transition: .1s ease-in;
content: '# ';
font-weight: 700;
color: var(--linkColor)
}
blockquote {
border-left: 5px solid var(--metaColor);
margin: 1rem;
padding: 0 0 0 1rem
border-left: 5px solid var(--metaColor);
margin: 1rem;
padding: 0 0 0 1rem
}
textarea {
border: 2px dotted;
outline: 0;
resize: none;
overflow: auto;
background-color: var(--bgColor)
border: 2px dotted;
outline: 0;
resize: none;
overflow: auto;
background-color: var(--bgColor)
}
hr {
border: 1px dashed
border: 1px dashed
}
img {
max-width: 90%;
height: auto;
margin: .2rem;
padding: .2rem;
border: dashed 2px var(--metaColor);
border-radius: 15px
max-width: 90%;
height: auto;
margin: .2rem;
padding: .2rem;
border: dashed 2px var(--metaColor);
border-radius: 15px
}
pre {
border: 1px solid var(--metaColor);
padding: 1rem;
overflow-x: auto;
font-style: monospace;
border: 1px solid var(--metaColor);
padding: 1rem;
overflow-x: auto;
font-style: monospace;
}
p code,
li code,
div code {
color: var(--bgColor);
background-color: var(--fgColor);
padding: 0 .2rem 0 .2rem;
border-radius: .3rem;
color: var(--bgColor);
background-color: var(--fgColor);
}
pre code {
color: inherit;
background-color: inherit;
padding: 0;
border-radius: 0;
color: inherit;
background-color: inherit;
}
iframe {
max-width: 90%;
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
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%
width: 20%
}
th {
font-weight: 400
font-weight: 400
}
td,
th {
padding: .5rem;
border: dashed 1px var(--metaColor)
padding: .5rem;
border: dashed 1px var(--metaColor)
}
footer {
font-size: 1.4rem;
clear: both;
color: var(--footColor)
font-size: 1.4rem;
clear: both;
color: var(--footColor)
}
footer,
td,
th {
text-align: left
text-align: left
}
.metaData,
.themeButton,
hr,
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 {
margin: .5rem;
margin-bottom: 2rem;
display: flex;
flex-direction: row;
gap: .4rem;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
align-content: flex-end
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
cursor: pointer;
border: none;
font-size: 1.8rem;
background-color: transparent
}
.dark .themeButton.dark,
.themeButton.light {
display: none
display: none
}
.dark .themeButton.light {
display: block
display: block
}
.tagsData {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-start;
align-content: flex-end
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-start;
align-content: flex-end
}
.titleList {
line-height: 1.8;
line-height: 1.8;
}
.footnote-definition {
margin: 0 0 0 2rem;
}
.footnote-definition-label {
color: var(--metaColor);
}
.footnote-definition p {
display: inline;
padding: 0 0 0 1rem;
margin: 0 0 0 2rem;
}
.footContainer,
.footRight {
display: flex;
align-content: center
.footnote-definition-label {
color: var(--metaColor);
}
.footnote-definition p {
display: inline;
padding: 0 0 0 1rem;
}
.footContainer {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start
}
.footRight {
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.noStyle {
padding: 0;
margin: 0;
border: none;
border-radius: 0
padding: 0;
margin: 0;
border: none;
border-radius: 0
}
.textCenter {
text-align: center;
text-align: center;
}
.floatRight {
float: right
float: right
}
.floatLeft {
float: left
float: left
}
.webring {
margin: 0.5rem;
margin: 0.5rem;
}
/* Add Padding */
@media (max-width: 650px) {
.wrapper {
margin: 1rem;
}
}

21
static/icons.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB