YAR - mostly theming and link conversion.

Includes the new "hide all but content" icon.

1 files changed, 65 insertions, 29 deletions

diff --git a/default.template b/default.template
index 9c5765f..f9a2746 100644
--- a/default.template
+++ b/default.template
@@ -7,61 +7,97 @@
     <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;}
+      body {
+        height: 100vh; width: 100vw;
+        margin: 0; padding: 0; border: none;
+        background-image: linear-gradient($onefangPurple$, $karenPurple$);
+        color: white;
+        font-family: sans-serif;
+      }
       menu {list-style-type: none;}
       pre {
         background-color: $onefangPurple$;
         overflow-x: auto;
-        width: 84vw;
+        width: 99%;
         margin: 2px;
       }
       table, td, th {border-collapse: collapse;border: 2px solid grey;}
 
+      .toolTip {
+        border: 2px solid fuchsia;
+      }
 
       .boxWrapper {
-        height: 100vh; width: 100vw;
-        background-image: linear-gradient($onefangPurple$, $karenPurple$);
-        color: white;
+        height: 100%; width: 100%;
         display: grid;
 //        grid-template-areas:
-//          "logo trail"
-//          "logo head"
+//          "logo0 trail"
+//          "logo1 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);
+//        grid-auto-columns: minmax(auto, auto);
+//        grid-auto-rows: minmax(auto, auto);
         overflow-x: auto; 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;
+      .boxLogo0   {grid-area: logo0;   grid-column: 1 / 3; grid-row: 1 / 1; height: min-content; margin: 0; padding: 0; border: none;}
+      .boxLogo1   {grid-area: logo1;   grid-column: 1 / 3; grid-row: 2 / 2; height: min-content; margin: 0; padding: 0; border: none;}
+      .boxHead    {grid-area: head;    grid-column: 2 / 4; grid-row: 1 / 1; height: min-content; margin: 0; padding: 0; border: none; text-align: right;}
+      .boxTrail   {grid-area: trail;   grid-column: 2 / 4; grid-row: 2 / 2; height: min-content; margin: 0; padding: 0; border: none;}
+      .boxMenu    {grid-area: menu;    grid-column: 1 / 1; grid-row: 3 / 3; height: min-content; width: min-content; vertical-align: top; padding: 4px;}
+      .boxBody    {grid-area: body;    grid-column: 2 / 4; 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;}
+      .boxBody a:active  {color: red;}
+      .boxBody a:link    {color: orange;}
+      .boxBody a:visited {color: $onefangGreen$;}
+      .boxBody a:hover   {color: red;}
+      .boxHistory {grid-area: history; grid-column: 1 / 1; grid-row: 4 / 4; height: min-content; margin: 0; padding: 0; border: none;}
+      .boxFoot    {grid-area: foot;    grid-column: 2 / 4; grid-row: 4 / 4; height: min-content; margin: 0; padding: 0; border: none; text-align: right;}
 
-      /* Hide the toggle checkbox */
-      #mode-toggle {display: none;}
-      #mode-btn {color: white; display: inline-block;}
-      #mode-btn:checked {color: black;}
-      #mode-toggle:checked ~ .boxBody {background: white; color: black;}
+      #modeToggleBody {display: none;}
+      #modeToggleMenu {display: none;}
+      #modeBtn {color: white; display: inline-block;}
+      #modeToggleBody:checked ~ .modeBtn  {color: black;}
+      #modeToggleBody:checked ~ .boxBody  {background: white; color: black;}
+      #modeToggleBody:checked ~ .boxBody a:active  {color: $devuanDevuanalink$;}
+      #modeToggleBody:checked ~ .boxBody a:link    {color: $devuanDevuanlink$;}
+      #modeToggleBody:checked ~ .boxBody a:visited {color: $devuanDevuanvlink$;}
+      #modeToggleBody:checked ~ .boxBody a:hover   {color: $devuanDevuanhlink$;}
+      #modeToggleMenu:checked ~ .boxLogo0  {display: none;}
+      #modeToggleMenu:checked ~ .boxHead  {display: none;}
+      #modeToggleMenu:checked ~ .boxTrail  {display: none;}
+      #modeToggleMenu:checked ~ .boxMenu  {display: none;}
+      #modeToggleMenu:checked ~ .boxHistory  {display: none;}
+      #modeToggleMenu:checked ~ .boxFoot  {display: none;}
     </style>
   </head>
-  <body alink="red" link="yellow" vlink="yellowgreen">
+  <body alink="red" link="orange" vlink="$onefangGreen$">
     <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> &nbsp; &#x1f463; &nbsp; $trail$</nav></header></div>
-      <div class="boxHead"><header><nav>$header$ &nbsp; login &nbsp; register &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="boxLogo1"><header><nav>
+        <b class="toolTip" title="&#127828; hides or shows the left menu.
+&#x1F576; switches between dark and light themes.
+&#129717; will be for logging in, when I have written that bit.
+&#128269; will be the search, when I have written that bit.
+&#x1f463; is a trail of the steps to get here.">&#10067;</b>
+        <b class="toolTip"><label for="modeToggleMenu" class='modeBtn'>&#127828;</label></b>
+        <b class="toolTip"><label for="modeToggleBody" class='modeBtn'>&#x1F576;</label></b>
+        <b class="toolTip">&#129717;</b>
+        <b class="toolTip">&#128269;</b>
+      </nav></header></div>
+      <input type="checkbox" id="modeToggleMenu"/>  <div class="boxMenu"><nav><p><b>$menu$</b></p></nav></div>
+      <input type="checkbox" id="modeToggleBody"/>  <div class="boxBody"><main>$body$<br/></main></div>
+      <div class="boxLogo0"><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="boxHead"><header><nav><b>$header$</b> &nbsp; </nav></header></div>
+      <div class="boxTrail"><header><nav><b> &nbsp; &#x1f463; &nbsp; $trail$ </b></nav></header></div>
       <div class="boxHistory"><footer>$history$</footer></div>
-      <div class="boxFoot"><footer>$footer$</footer></div>
+      <div class="boxFoot"><footer><p>$footer$</footer>
+        <p><sub>No cookies or scripts where harmed in the making of this web site.  May contain low fat CSS.<sub/></p>
+      </div>
     </div>
   </body>
 </html>