1
0
Fork 0
mirror of https://github.com/sbrl/Pepperminty-Wiki.git synced 2024-12-22 13:45:02 +00:00

Start working on new photo theme

This commit is contained in:
Starbeamrainbowlabs 2019-11-04 00:52:34 +00:00
parent 729af8205d
commit 0ef5add3d2
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
2 changed files with 98 additions and 1 deletions

View file

@ -7,6 +7,7 @@ if(!isset($paths)) {
$paths = new stdClass();
$paths->extra_data_directory = "build/._extra_data";
}
$theme_id = "default";
if(isset($_GET["determine-latest-version"])) {
header("content-type: application/json");
@ -89,7 +90,7 @@ $core = str_replace([
trim(file_get_contents("version")),
exec("git rev-parse HEAD"),
trim(file_get_contents("peppermint.guiconfig.json")),
trim(file_get_contents("themes/default/theme.css"))
trim(file_get_contents("themes/$theme_id/theme.css"))
], $core);
$result = $core;

96
themes/photo/theme.css Normal file
View file

@ -0,0 +1,96 @@
/**
* @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; }