break to fix version differences

resources/layout-mouse.less

@@ -1,5 +1,5 @@
 :root {
-    --sidebar-width: calc(10.2em + calc(.3vw * 9) + var(--space));
+    --sidebar-width: calc(10.2em + calc(.3vw * 9));
 }
 
 #grid {
@@ -7,6 +7,7 @@
     grid-template-columns: 10.2em calc(.3vw * 9) 1fr auto var(--sidebar-width);
     grid-template-rows:
         [topstart] auto
+        [sitenotice] auto
         [title] auto
         [pageheader] auto
         [pagebody] auto
@@ -51,6 +52,11 @@
     grid-column: 4 / 5;
 }
 
+#localNotice {
+    grid-row: sitenotice;
+    grid-column: 3 / 5;
+}
+
 #versions {
     align-items: center;
 }
@@ -112,6 +118,8 @@
 }
 
 #page-menu {
+    // position: sticky;
+    // top: calc(var(--space) * 2);
     position: relative;
     min-height: 100%;
     width: 100%;
@@ -119,10 +127,13 @@
 
 #page-menu-button {
     height: 100%;
-
     text-align: left;
 }
 
+#user-menu-button:hover, #page-menu-button:hover {
+    box-shadow: inset 0 0 3px 3px var(--blue-3);
+}
+
 #page-menu > * {
     padding-left: var(--space);
 }

resources/layout-touch.less

@@ -123,11 +123,8 @@ p {
 #page-menu-list {
     grid-row: unset;
     right: 0;
-    margin-top: var(--space);
     gap: calc(var(--space) * 3);
-    padding: var(--space);
+    // box-shadow: 0 0 2px 1px var(--gold-7), inset 0 0 6px 3px var(--gold-1);
-    background-color: var(--gold-2);
-    box-shadow: 0 0 2px 1px var(--gold-7), inset 0 0 6px 3px var(--gold-1);
     z-index: 1;
 }
 

resources/skin.less

@@ -25,6 +25,10 @@ body {
     background-image: linear-gradient(100deg, var(--blue-1), var(--white) 20%, var(--white)70%, var(--blue-1))
 }
 
+body::selection {
+    background-color: var(--blue-5);
+}
+
 :root {
     --space: .6em;
 }
@@ -87,7 +91,7 @@ fieldset {
     margin-bottom: calc(var(--space));
 }
 
-p {
+main p {
     margin-bottom: calc(var(--space) * 2);
     line-height: calc(var(--space) * 3);
 }
@@ -125,6 +129,20 @@ p {
     display: none;
 }
 
+#localNotice {
+    width: 100%;
+}
+
+.sitenotice {
+    display: flex;
+    padding: calc(var(--space) * 3);
+    justify-content: center;
+    // background: linear-gradient(90deg, transparent, var(--blue-5) 20%, var(--blue-5) 70%, transparent);
+    color: var(--gold-1);
+
+    background: linear-gradient(to top, #ffffffff 0%, #000000ff 20%, #000000ff 80%, #ffffffff 100%), linear-gradient(to right, #ffffffff 0%, #000000ff 20%, #000000ff 80%, #ffffffff 100%), linear-gradient(to top, #667fdaff 0% 100%, #0000ffff 100%);background-blend-mode: color-dodge;
+}
+
 
 //     border-style: solid;
 //     border-image: linear-gradient(150deg, var(--blue-5), white 30%) 1;

resources/topbar.less

@@ -33,7 +33,7 @@
 
 #nav-search-bar {
     border-radius: calc(var(--space) / 2);
-    background-image: linear-gradient(10deg, var(--blue-1), var(--blue-1) 40%, var(--gold-1));
+    // background-image: linear-gradient(10deg, var(--blue-1), var(--blue-1) 40%, var(--gold-1));
     // background-color: var(--blue-2);
     background-color: var(--white);
     border: 1px solid var(--black);
@@ -43,11 +43,16 @@
     height: 100%;
 }
 
+#nav-search-bar:hover {
+    box-shadow: inset 0 0 3px 3px var(--blue-3);
+}
+
 #nav-search-bar:focus {
     outline: 3px solid var(--blue-7);
     box-shadow: inset 0 0 3px 3px var(--blue-3);
     background-color: var(--white);
     border-bottom: 3px inset var(--blue-7);
+    background-image: none;
 }
 
 #nav-search form {
@@ -55,7 +60,7 @@
 }
 
 #user-menu-button, #page-menu-button {
-    border-bottom: 3px solid var(--gold-6);
+    border-bottom: 3px solid var(--blue-6);
     border-width: 0 0 3px 0;
 }
 
@@ -65,10 +70,10 @@
     overflow: clip;
     text-overflow: ellipsis;
     padding: var(--space);
-    background-color: var(--gold-2);
+    background-color: var(--blue-2);
     // border-radius: calc(var(--space) / 2 );
-    // box-shadow: inset 0 0 3px 3px var(--gold-1);
+    // box-shadow: inset 0 0 3px 3px var(--blue-1);
-    color: var(--gold-7);
+    color: var(--blue-7);
 }
 
 #user-menu {
@@ -84,8 +89,9 @@
     margin-top: calc(var(--space) / 2);
     display: none;
     z-index: 1;
-    border-top: 3px solid var(--gold-6);
+    // border-top: 3px solid var(--blue-6);
     border-width: 3px 0 0 0;
+    box-shadow: 0 0 2px .5px var(--blue-7), inset 0 0 3px 3px var(--blue-1);
 }
 
 #page-actions, #page-views, #user-links {
@@ -96,8 +102,8 @@
 }
 
 #user-menu:focus-within #user-menu-button, #page-menu:focus-within #page-menu-button {
-    background-color: var(--gold-3);
+    background-color: var(--blue-3);
-    box-shadow: inset 0 0 3px 3px var(--gold-4);
+    box-shadow: inset 0 0 3px 3px var(--blue-4), 0 0 2px .5px var(--blue-7);
 }
 
 #user-menu:focus-within #user-menu-list, #page-menu:focus-within #page-menu-list {

resources/variables.less

@@ -0,0 +1 @@
+@cdx-icon-full-screen: 150px;

templates/skin.mustache

@@ -77,6 +77,8 @@
         </div>
     </header>
 
+    {{{html-site-notice}}}
+
     <div id="sidebar-nav">
       
         <nav id="nav-main" class="nav-menu">