css and layout fixes, prep web95 to be a base theme

immers-space · Nov 4, 2022 · 9d21d04 · 9d21d04
1 parent 38709f9
commit 9d21d04
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/static/reference-theme.css b/static/reference-theme.css
@@ -144,5 +144,5 @@
   --main-title-color: var(--h1-color);
   --backdrop-filter: none;
   --navbar-actions-border: var(--border-width) solid var(--secondary);
-  --article-sectioning-footer-color: var(--article-sectionning-color);
+  --card-sectioning-footer-color: var(--card-sectionning-background-color);
 }
diff --git a/views/assets/immers.scss b/views/assets/immers.scss
@@ -1,6 +1,7 @@
 $semantic-root-element: '#app';
 $mobile-cutoff: 768px;
 @import "@picocss/pico/scss/pico";
+@import "./web95.css";
 
 :root {
   /** pico CSS tweaks **/
@@ -22,7 +23,7 @@ $mobile-cutoff: 768px;
   --main-title-color: var(--h1-color);
   --backdrop-filter: none;
   --navbar-actions-border: var(--border-width) solid var(--secondary);
-  --article-sectioning-footer-color: var(--article-sectionning-color);
+  --card-sectioning-footer-color: var(--card-sectionning-background-color);
 }
 
 body {
@@ -242,7 +243,7 @@ article:last-child {
 }
 
 article > footer {
-  background-color: var(--article-sectioning-footer-color);
+  background-color: var(--card-sectioning-footer-color);
 }
 
 // main ui card header doesn't need so much emphasis

diff --git a/static/web95.css → views/assets/web95.css b/static/web95.css → views/assets/web95.css
@@ -1,7 +1,8 @@
-/* using :is to spike the specificity of :root */
-:is(:root, #root) {
+/* add html to outspecify the default light theme's :root:not([attr]) */
+html:root[data-theme="web95"] {
   --window-grey: #bfbfbf;
   --window-light-grey: #d4d4d4;
+  --window-medium-grey: #929292;
   --window-dark-grey: #3d3d3d;
   /* aesthetic colors from https://github.com/torch2424/aesthetic-css */
   --aesthetic-white: #FAFAFA;
@@ -63,7 +64,7 @@
     0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
     0 0 0 0.0625rem rgba(27, 40, 50, 0.015),
     0 -2px 1px var(--window-light-grey);
-  --article-sectioning-footer-color: var(--window-light-grey);
+  --card-sectioning-footer-color: var(--window-medium-grey);
   --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(2, 2, 2)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
 }
 
diff --git a/views/components/Layout.js b/views/components/Layout.js
@@ -35,9 +35,7 @@ export default function Layout (props) {
               </ul>
             </nav>
           </header>
-          <div>
-            {props.children}
-          </div>
+          {props.children}
         </article>
       </main>