default.template


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>$title$</title>
    <link rel="icon" type="image/png" href="$favicon$" />
    <style>
      a:hover {color: red;}
      body {height: 100vh; width: 100vw; font-family: sans-serif; margin: 0; padding: 0; border: none;}
      menu {list-style-type: none;}
      pre {
        background-color: $onefangPurple$;
        overflow-x: auto;
        width: 84vw;
        margin: 2px;
      }
      table, td, th {border-collapse: collapse;border: 2px solid grey;}


      .boxWrapper {
        height: 100vh; width: 100vw;
        background-image: linear-gradient($karenPurple$, $onefangPurple$);
        color: white;
        display: grid;
//        grid-template-areas:
//          "logo trail"
//          "logo head"
//          "menu body"
//          "history foot";
        grid-template-columns: auto 1fr auto;
        grid-template-rows:    auto auto 1fr auto;
        grid-auto-columns: minmax(auto, auto);
        grid-auto-rows: minmax(auto, auto);
        overflow-x: hidden; overflow-y: auto;
      }
      .boxLogo    {grid-area: logo;    grid-column: 1 / 1; grid-row: 1 / 2; height: min-content;}
      .boxTrail   {grid-area: trail;   grid-column: 2 / 2; grid-row: 1 / 1; height: min-content;}
      .boxCheck   {grid-area: head;    grid-column: 2 / 2; grid-row: 2 / 2; height: min-content;}
      .boxHead    {grid-area: head;    grid-column: 2 / 2; grid-row: 2 / 2; height: min-content; text-align: right;}
      .boxMenu    {grid-area: menu;    grid-column: 1 / 1; grid-row: 3 / 3; height: min-content; vertical-align: top; padding: 4px;}
      .boxBody    {grid-area: body;    grid-column: 2 / 2; grid-row: 3 / 3; vertical-align: top;
        height: 100%; width: 100%;
        background: black; color: white;
      }
      .boxHistory {grid-area: history; grid-column: 1 / 1; grid-row: 4 / 4; height: min-content;}
      .boxFoot    {grid-area: foot;    grid-column: 2 / 2; grid-row: 4 / 4; height: min-content; text-align: right;}

      /* Hide the toggle checkbox */
      #mode-toggle {display: none;}
      #mode-btn {display: inline-block;}
      #mode-toggle:checked ~ .boxBody {background: white; color: black;}
    </style>
  </head>
  <body alink="red" link="yellow" vlink="yellowgreen">
    <div class="boxWrapper">
      <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>
      <div class="boxTrail"><header><nav>&#x1f463; &nbsp; $trail$</nav></header></div>
      <div class="boxHead"><header><nav>$header$ &nbsp; plus login and register buttons &nbsp; </nav></header></div>
      <input type="checkbox" id="mode-toggle" /><div class="boxBody"><main>$body$<br/></main></div>
      <div class="boxMenu"><nav>$menu$<label for="mode-toggle" id="mode-btn">&#x1F576;</label></nav></div>
      <div class="boxHistory"><footer>$history$</footer></div>
      <div class="boxFoot"><footer>$footer$</footer></div>
    </div>
  </body>
</html>