diff options
author | dvs1 | 2025-02-22 18:35:36 +1000 |
---|---|---|
committer | dvs1 | 2025-02-22 18:35:36 +1000 |
commit | 238e5d8ff42a172a95d3c33526181108a7cc78a6 (patch) | |
tree | 5aae7bb74bd00dcfb0c8c6df892ad7de406d1202 /default.template | |
parent | TODO++ (diff) | |
download | notYetAnotherWiki-238e5d8ff42a172a95d3c33526181108a7cc78a6.zip notYetAnotherWiki-238e5d8ff42a172a95d3c33526181108a7cc78a6.tar.gz notYetAnotherWiki-238e5d8ff42a172a95d3c33526181108a7cc78a6.tar.bz2 notYetAnotherWiki-238e5d8ff42a172a95d3c33526181108a7cc78a6.tar.xz |
Much HTML and CSS tweakage.
Main new feature - dark / light theme switcher.
Diffstat (limited to 'default.template')
-rw-r--r-- | default.template | 77 |
1 files changed, 42 insertions, 35 deletions
diff --git a/default.template b/default.template index 6da5a7b..f566f48 100644 --- a/default.template +++ b/default.template | |||
@@ -7,67 +7,74 @@ | |||
7 | <link rel="icon" type="image/png" href="$favicon$" /> | 7 | <link rel="icon" type="image/png" href="$favicon$" /> |
8 | <style> | 8 | <style> |
9 | a:hover {color: red;} | 9 | a:hover {color: red;} |
10 | 10 | body {height: 100vh; width: 100vw; font-family: sans-serif; margin: 0; padding: 0; border: none;} | |
11 | html {font-family: sans-serif; | 11 | menu {list-style-type: none;} |
12 | margin: 0; padding: 0; border: none; | ||
13 | height: 100vh; width: 100vw; | ||
14 | } | ||
15 | |||
16 | menu { | ||
17 | list-style-type: none; | ||
18 | } | ||
19 | |||
20 | pre { | 12 | pre { |
21 | background-color: $onefangPurple$; | 13 | background-color: $onefangPurple$; |
22 | overflow-x: auto; | 14 | overflow-x: auto; |
23 | width: 84vw; | 15 | width: 84vw; |
24 | margin: 2px; | 16 | margin: 2px; |
25 | } | 17 | } |
18 | table, td, th {border-collapse: collapse;border: 2px solid grey;} | ||
26 | 19 | ||
27 | table, td, th { | ||
28 | border-collapse: collapse; | ||
29 | border: 2px solid white; | ||
30 | } | ||
31 | 20 | ||
32 | .contentBox { | 21 | .contentBox { |
22 | background: black; color: white; | ||
33 | } | 23 | } |
34 | .contentBox a:active {color: red;} | ||
35 | .contentBox a:link {color: yellow;} | ||
36 | .contentBox a:visited {color: yellowgreen;} | ||
37 | .contentBox a:hover {color: red;} | ||
38 | |||
39 | .boxWrapper { | 24 | .boxWrapper { |
40 | height: 99vh; width: 99vw; | 25 | height: 99vh; width: 99vw; |
41 | background-image: linear-gradient($karenPurple$, $onefangPurple$); | 26 | background-image: linear-gradient($karenPurple$, $onefangPurple$); |
27 | color: white; | ||
42 | display: grid; | 28 | display: grid; |
43 | grid-template-columns: 1fr 98fr 1fr; | 29 | // grid-template-areas: |
44 | grid-template-rows: 1fr 1fr 98fr 1fr; | 30 | // "logo trail" |
31 | // "logo head" | ||
32 | // "menu body" | ||
33 | // "history foot"; | ||
34 | grid-template-columns: auto 1fr auto; | ||
35 | grid-template-rows: auto auto 1fr auto; | ||
36 | grid-auto-columns: minmax(auto, auto); | ||
45 | grid-auto-rows: minmax(auto, auto); | 37 | grid-auto-rows: minmax(auto, auto); |
46 | overflow-x: hidden; overflow-y: auto; | 38 | overflow-x: hidden; overflow-y: auto; |
47 | } | 39 | } |
48 | .boxLogo {grid-column: 1 / 1; grid-row: 1 / 2;} | 40 | .boxLogo {grid-area: logo; grid-column: 1 / 1; grid-row: 1 / 2; height: min-content;} |
49 | .boxTrails {grid-column: 2 / 2; grid-row: 1 / 1;} | 41 | .boxTrail {grid-area: trail; grid-column: 2 / 2; grid-row: 1 / 1; height: min-content;} |
50 | .boxHead {grid-column: 2 / 4; grid-row: 2 / 2; text-align: right;} | 42 | .boxCheck {grid-area: head; grid-column: 2 / 2; grid-row: 2 / 2; height: min-content;} |
51 | .boxMenu {grid-column: 1 / 1; grid-row: 3 / 3; padding: 4px; vertical-align: top;} | 43 | .boxHead {grid-area: head; grid-column: 2 / 2; grid-row: 2 / 2; height: min-content; text-align: right;} |
52 | .boxBody {grid-column: 2 / 4; grid-row: 3 / 3; padding: 4px; vertical-align: top; | 44 | .boxMenu {grid-area: menu; grid-column: 1 / 1; grid-row: 3 / 3; height: min-content; vertical-align: top; padding: 4px;} |
53 | background-color: black; color: white; | 45 | .boxBody {grid-area: body; grid-column: 2 / 2; grid-row: 3 / 3; vertical-align: top; |
54 | height: 100%; width: 100%; | 46 | height: 100%; width: 100%; |
47 | background: black; color: white; | ||
55 | } | 48 | } |
56 | .boxHistory {grid-column: 1 / 1; grid-row: 4 / 4; } | 49 | .boxHistory {grid-area: history; grid-column: 1 / 1; grid-row: 4 / 4; height: min-content;} |
57 | .boxFooter {grid-column: 2 / 4; grid-row: 4 / 4; text-align: right;} | 50 | .boxFoot {grid-area: foot; grid-column: 2 / 2; grid-row: 4 / 4; height: min-content; text-align: right;} |
51 | |||
52 | /* Hide the toggle checkbox */ | ||
53 | #mode-toggle {display: none;} | ||
54 | /* Style the button */ | ||
55 | #mode-btn { | ||
56 | display: inline-block; | ||
57 | } | ||
58 | // #mode-toggle:checked ~ .boxBody {background: white; color: black;} | ||
59 | #mode-toggle:checked ~ .contentBox {background: white; color: black;} | ||
60 | |||
58 | </style> | 61 | </style> |
59 | </head> | 62 | </head> |
60 | <body bgcolor="black" color="white" text="white" alink="red" link="yellow" vlink="yellowgreen"> | 63 | <body alink="red" link="yellow" vlink="yellowgreen"> |
61 | <div class="boxWrapper"> | 64 | <div class="boxWrapper"> |
62 | <div class="boxLogo"><header><nav><a href="$home$"><img src="$logo$" alt="Not (Yet) (Another / A) Wiki." title="Not (Yet) (Another / A) Wiki."/></a></nav></header></div> | 65 | <div class="boxLogo"><header><nav><a href="$home$"><img src="$logo$" alt="Not (Yet) (Another / A) Wiki." title="Not (Yet) (Another / A) Wiki."/></a></nav></header></div> |
63 | <div class="boxTrails"><header><nav>👣 $trail$</nav></header></div> | 66 | <div class="boxTrail"><header><nav>👣 $trail$</nav></header></div> |
64 | <div class="boxHead"><header><nav>$header$ plus login and register buttons </nav></header></div> | 67 | <div class="boxHead"><header><nav>$header$ plus login and register buttons </nav></header></div> |
65 | <div class="boxMenu"><header><nav>$menu$</nav></header></div> | ||
66 | <div class="boxBody"> | 68 | <div class="boxBody"> |
67 | <main class="contentBox">$body$</main> | 69 | <input type="checkbox" id="mode-toggle" /> |
70 | <main class="contentBox">$body$<br/></main> | ||
68 | </div> | 71 | </div> |
72 | <div class="boxMenu"><nav> | ||
73 | $menu$ | ||
74 | <label for="mode-toggle" id="mode-btn">🕶</label> | ||
75 | </nav></div> | ||
69 | <div class="boxHistory"><footer>$history$</footer></div> | 76 | <div class="boxHistory"><footer>$history$</footer></div> |
70 | <div class="boxFooter"><footer>$footer$</footer></div> | 77 | <div class="boxFoot"><footer>$footer$</footer></div> |
71 | </div> | 78 | </div> |
72 | </body> | 79 | </body> |
73 | </html> | 80 | </html> |