mirror of
https://github.com/sbrl/Pepperminty-Wiki.git
synced 2024-11-22 16:33:00 +00:00
96 lines
2.5 KiB
CSS
96 lines
2.5 KiB
CSS
/**
|
|
* @id photo
|
|
* @name Photo
|
|
* @description A different theme that looks great with a high-res photo behind it.
|
|
* @author Starbeamrainbowlabs
|
|
* @author_link https://starbeamrainbowlabs.com/
|
|
* @minversion v0.20
|
|
*/
|
|
|
|
:root {
|
|
--bg-colour: hsl(20, 66%, 44%);
|
|
--image-url: url("https://i.imgur.com/NSIDIeo.jpg");
|
|
|
|
--bg-a: hsla(0, 0%, 95%, 0.5);
|
|
--bg-b: hsla(0, 0%, 95%, 0.8);
|
|
|
|
--text-a: hsl(0, 0%, 10%);
|
|
|
|
--shadow-a: hsla(0, 0%, 25%, 0.3);
|
|
|
|
--panel-padding: 0.7em;
|
|
}
|
|
|
|
html, body { font-size: 100%; }
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 4fr 1fr;
|
|
grid-template-rows: repeat(6, auto);
|
|
grid-template-areas: "side-left header side-right"
|
|
"side-left nav-top side-right"
|
|
"side-left content side-right"
|
|
"side-left comments side-right"
|
|
"side-left footer side-right"
|
|
"side-left nav-bottom side-right";
|
|
|
|
background: var(--image-url) no-repeat top center / contain,
|
|
var(--bg-colour);
|
|
|
|
color: var(--text-a);
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
body > nav, main, .comments, footer {
|
|
margin: 1em 0;
|
|
background: var(--bg-a);
|
|
padding: var(--panel-padding);
|
|
box-shadow: 0.5em 0.5em 0.5em var(--shadow-a);
|
|
}
|
|
nav.top { grid-area: nav-top; }
|
|
nav.bottom { grid-area: nav-bottom; }
|
|
|
|
body > nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.nav-more { position: relative; }
|
|
.nav-more label { font-weight: bolder; cursor: pointer; }
|
|
.nav-more input[type=checkbox] { display: none; }
|
|
.nav-more-menu {
|
|
z-index: 10000;
|
|
position: absolute; top: 2.6rem; right: 100000px;
|
|
text-align: left;
|
|
background: var(--bg-b);
|
|
}
|
|
input[type=checkbox]:checked ~ .nav-more-menu { top: 2.15em; right: -2.7em; }
|
|
|
|
nav.mega-menu > span { flex: 1; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; }
|
|
nav.mega-menu { display: flex; flex-direction: row; padding-bottom: 0.4em; }
|
|
nav.mega-menu .category { min-width: 7.5em; padding: 0.3em 1em; }
|
|
nav.mega-menu strong { display: block; }
|
|
nav.mega-menu span { display: block; }
|
|
|
|
h1 {
|
|
grid-area: header;
|
|
text-align: center;
|
|
}
|
|
.logo { max-width: 1.75em; vertical-align: middle; }
|
|
|
|
main { grid-area: content; position: relative; }
|
|
.jump-to-comments { position: absolute; top: var(--panel-padding); right: var(--panel-padding); }
|
|
|
|
main > h1:first-child, .comments > h2:first-child { margin-top: 0; }
|
|
pre, code, input, textarea { font-size: 1rem; }
|
|
|
|
textarea {
|
|
width: 100%; min-height: 10em;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.comments { grid-area: comments; }
|
|
.avatar { vertical-align: middle; max-height: 1.5em; }
|
|
|
|
footer { grid-area: footer; }
|