Many small mobile fixes

EternityForest · Nov 7, 2023 · 5efcaed · 5efcaed
1 parent 1f5e5d8
commit 5efcaed
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 22 deletions.
diff --git a/css/barrel.css b/css/barrel.css
@@ -52,8 +52,8 @@
     --control-border-radius: 12px;
     --control-border-width: 1px;
 
-    --3d-highlight: color-mix(in srgb, var(--control-bg) 50%, rgb(255 255 255));
-    --3d-shadow: color-mix(in srgb, var(--control-bg) 50%, rgb(0 0 0 / 0%));
+    --3d-highlight: color-mix(in srgb, var(--box-bg) 50%, rgba(241, 241, 241, 0.695));
+    --3d-shadow: color-mix(in srgb, var(--box-bg) 50%, rgba(0, 0, 0, 0.101));
 
     /*3D buttons are mostly transparent with just some highlights and shadows.*/
     --concave-item-bg: linear-gradient(180deg, var(--3d-shadow) 12%, var(--3d-highlight) 88%);
@@ -270,7 +270,6 @@ header>*:only-child,
 header>*:only-child>:only-child {
     width: 100%;
     box-sizing: border-box;
-    padding: 6px;
     margin: 0px;
 }
 
@@ -308,6 +307,8 @@ header:not(.undecorated)>.tool-bar:only-child :is(input, button) {
     color: var(--control-fg);
 }
 
+
+
 footer {
     border-top: var(--border-width) solid var(--border-color);
 }
@@ -521,8 +522,6 @@ table tr:first-child td {
     border-style: solid;
     border-width: var(--border-width);
     border-radius: var(--border-radius);
-    margin-left: auto;
-    margin-right: auto;
     margin-top: 0.8em;
     margin-bottom: 0.2em;
     box-sizing: border-box;
@@ -580,6 +579,7 @@ table tr:first-child td {
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
+    gap: var(--gap);
 }
 
 .flex-col>* {
@@ -779,11 +779,11 @@ table tr:first-child td {
 }
 
 /*This user added margin is likely unwanted on tiny screens*/
-@media screen and (max-width: 860px) {
+@media screen and (max-width: 600px) {
     .scroll {
         /*Scroll boxes should never be full screen, or else you woul
         Have nowhere outside it to grab and scroll the whole page*/
-        max-height: 60vw;
+        max-height: 70vh;
     }
 }
 
@@ -1046,6 +1046,10 @@ footer.padding {
     justify-content: center;
 }
 
+.flex-col.align-center {
+    place-items: center;
+}
+
 .float-left {
     float: left;
 }
@@ -1082,28 +1086,31 @@ footer.padding {
 .bad {
     --fg: var(--danger-fg);
     --graphical-fg: var(--danger-fg);
-    background-color: color-mix(in srgb, var(--danger-color) var(--highlight-opacity), transparent)
+    background-color: color-mix(in srgb, var(--danger-color) var(--highlight-opacity), transparent);
+    color: var(--fg);
 }
 
 .warning,
 .warn {
     --fg: var(--warning-fg);
     --graphical-fg: var(--warning-fg);
-    background-color: color-mix(in srgb, var(--warning-color) var(--highlight-opacity), transparent)
+    background-color: color-mix(in srgb, var(--warning-color) var(--highlight-opacity), transparent);
+    color: var(--fg);
 }
 
 .highlight {
-    background-color: color-mix(in srgb, var(--highlight-color) var(--highlight-opacity), transparent)
+    background-color: color-mix(in srgb, var(--highlight-color) var(--highlight-opacity), transparent);
 }
 
 .success {
     --fg: var(--success-fg);
     --graphical-fg: var(--success-fg);
-    background-color: color-mix(in srgb, var(--success-color) var(--highlight-opacity), transparent)
+    background-color: color-mix(in srgb, var(--success-color) var(--highlight-opacity), transparent);
+    color: var(--fg);
 }
 
 .error.paper {
-    background-color: color-mix(in srgb, var(--error-color) 25%, var(--box-bg))
+    background-color: color-mix(in srgb, var(--error-color) 25%, var(--box-bg));
 }
 
 .warning.paper {
@@ -1130,6 +1137,7 @@ blockquote {
     margin-inline-end: 4px;
     margin: 6px;
     padding: 4px;
+    margin-block-end: var(--gap);
     color: var(--graphical-fg);
 }
 
@@ -1409,7 +1417,6 @@ dd {
 
 
 .tool-bar>label> :is(input, select, meter):not(.specificity-hack) {
-    margin: 0px var(--padding) 0px var(--padding);
     min-height: 100%;
 }
 
@@ -1433,6 +1440,13 @@ dd {
 
 }
 
+
+header:not(.undecorated)>.tool-bar:only-child> :is(a, a.button, select, p, h1, h2, h3, h4, h5, h6, label, input, meter, button, .input-group-append):last-child,
+header:not(.undecorated)>.tool-bar:only-child :is(a, a.button, select, p, h1, h2, h3, h4, h5, h6, label, meter, button, form, .input-group-append):last-child :last-child:not(i) {
+    border-radius: var(--control-border-radius);
+}
+
+
 .tool-bar>label:last-child {
     padding-inline-end: 0px;
 }
@@ -1476,6 +1490,8 @@ dd {
 
 .tool-bar>label {
     display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--padding);
     border-top: var(--tool-bar-element-border);
     border-bottom: var(--tool-bar-element-border);
     align-items: center;
@@ -1485,6 +1501,14 @@ dd {
     background: none;
 }
 
+/* 
+Wall to wall fill the top header
+body>header>.tool-bar.w-full, body>header>.tool-bar.w-full *,
+main>header>.tool-bar.w-full, main>header>.tool-bar.w-full *
+{
+    border-radius: 0px;
+} */
+
 /*Scrollbars*/
 /* Firefox */
 * {
@@ -1508,6 +1532,18 @@ dd {
     border: none;
 }
 
+
+@media screen and (max-width: 420px) {
+    * {
+        scrollbar-width: 6px;
+    }
+
+    /* Other browsers */
+    *::-webkit-scrollbar {
+        width: 6px;
+    }
+}
+
 /* The Range inputs */
 
 

diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
 </head>
 
 <body>
+
   <main>
     <section class="window paper">
       <header class="padding">Look! A Header</header>
@@ -15,10 +16,6 @@ <h2>Basic Page</h2>
       <p>This is a simple test page for barrel.css</p>
       <p>It is public domain/CC0, allong with barrel.css itself.</p>
 
-      <h3>Center an image</h3>
-      <img class="h-center w-sm-full rounded" src="img/barrel_studio.avif"
-        alt="AI generated art studio with lots of barrels">
-
       <p>Get the source code here: <a href="https://github.com/EternityForest/barrel.css">at github</a></p>
       <h3>Components</h3>
       <p>We want to keep the number of components very small,
@@ -27,6 +24,7 @@ <h3>Components</h3>
       <h4>Toolbars</h4>
       <div class="tool-bar">
         <p>Toolbar</p>
+
         <button>Button</button>
         <label>
           Labeled input
@@ -35,18 +33,17 @@ <h4>Toolbars</h4>
       </div>
       <h4>Cards</h4>
 
-      <article class="card w-sm-full">
+      <article class="card w-sm-full h-center">
         <header>Cards can have headers</header>
         This is a card! Headers and footers are optional in
         cards and windows. "w-sm-full" means about the width of a
         phone screen.
         <footer>A footer</footer>
       </article>
 
-
       <h4>Toolbar in header</h4>
 
-      <article class="card w-sm-full">
+      <article class="card w-sm-full h-center">
         <header>
           <div class="tool-bar">
             <p>Toolbar</p>
@@ -69,7 +66,6 @@ <h3>Semantic Styles</h3>
       <p class="success">Everything is fine now.</p>
       <p class="highlight">The highlight of the page</p>
 
-
       <h3>Color Variables</h3>
       <p>Semantic color palletes are generated from a single base color</p>
       <div class="flex-row nogaps">
@@ -82,6 +78,9 @@ <h3>Color Variables</h3>
         <div class="card w-sm-quarter h-6rem" style="background-color:var(--blue);">
         </div>
 
+        <div class="card w-sm-quarter h-6rem" style="background-color:var(--purple);">
+        </div>
+
         <div class="card w-sm-quarter h-6rem" style="background-color:var(--red);">
         </div>
 
@@ -182,7 +181,7 @@ <h4>Here's a form with no classes</h4>
             <input>
           </label>
 
-          <button type="button">A button</button>
+          <button>A button</button>
         </form>