all-grid atomic design, cleaned

atomic-docs/atomic-db/components.dat

@@ -310,5 +310,21 @@
         "backgroundColor": "",
         "order": -37,
         "has_js": "false"
+    },
+    {
+        "component": "m_video",
+        "category": "4-molecules",
+        "description": "",
+        "backgroundColor": "",
+        "order": -38,
+        "has_js": "false"
+    },
+    {
+        "component": "q_tables",
+        "category": "2-quarks",
+        "description": "",
+        "backgroundColor": "",
+        "order": -39,
+        "has_js": "false"
     }
 ]

atomic-docs/components/1-base/b_typeset.txp

@@ -1,6 +1,6 @@
 <!-- components/1-base/b_typeset.txp -->
 
-<div class="u_baseline-grid l_beam">
+<div class="u_baseline-grid">
     <div>
       <h1>Lorem Khaled Ipsum is a major key to success.</h1>
       <p>To succeed you must believe. When you believe, you will succeed. The key to more success is to have a lot of pillows.</p>

atomic-docs/components/2-quarks/q_tables.txp

@@ -0,0 +1 @@
+<!-- components/2-quarks/q_tables.txp -->

atomic-docs/components/4-molecules/m_video.txp

@@ -0,0 +1 @@
+<!-- components/4-molecules/m_video.txp -->

atomic-docs/scss/1-base/_b_typeset.scss

@@ -147,6 +147,10 @@ $shevy-ssmall: (
     @extend .a_heading, .h4-styled, .h3-styled\@medium;
   }
 
+  a {
+    text-decoration: underline;
+  }
+
   blockquote p {
     &:before {
       content: '“';

atomic-docs/scss/2-quarks/_2-quarks.scss

@@ -4,4 +4,5 @@
 @import "_q_forms";
 @import "_q_code";
 @import "_q_figure";
-@import "_q_hr";
+@import "_q_hr";
+@import "_q_tables";

atomic-docs/scss/2-quarks/_q_tables.scss

@@ -0,0 +1,32 @@
+/* scss/3-quarks/_q_tables.scss */
+
+table {
+    width: 100%;
+}
+
+th,
+td:first-child {
+    font-weight: 600;
+}
+
+th {
+    padding-bottom: my-bs(1);
+}
+
+td,
+th {
+    text-align: left;
+    vertical-align: baseline;
+}
+
+tr:first-child {
+    width: max-content;
+}
+
+
+td {
+    padding-right: var(--base-unit--ss);
+    padding-bottom: my-bs(1);
+    word-break: break-word;
+
+}

atomic-docs/scss/3-atoms/_a_headings.scss

@@ -1,100 +1,122 @@
 /* scss/3-atoms/_a_headings.scss */
 
-h1,h2,h3,h4,h5,h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
 .a_heading {
-   letter-spacing: -.05rem;
-   font-weight: 400;
+  letter-spacing: -.05rem;
+  font-weight: 400;
 }
 
 h6 {
-   letter-spacing: initial;
+  letter-spacing: initial;
 }
 
 
 
 .a_heading--ellipsis {
-   text-overflow: ellipsis;
-   overflow: hidden;
-   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 
 
 
 .h0-style {
   @include heading($h0-shevy-small);
+
   @media screen and (min-width: $desktop) {
     @include heading($h0-shevy);
   }
+
   letter-spacing: -.07em;
 }
 
 .h1-style,
-.h1-styled > * {
+.h1-styled>* {
   @include heading($h1-shevy);
 }
+
 .h2-style,
-.h2-styled > * {
+.h2-styled>* {
   @include heading($h2-shevy);
 }
+
 .h3-style,
-.h3-styled > * {
-      @include heading($h3-shevy);
+.h3-styled>* {
+  @include heading($h3-shevy);
 }
+
 .h4-style,
-.h4-styled > * {
-      @include heading($h4-shevy);
+.h4-styled>* {
+  @include heading($h4-shevy);
 }
+
 .h5-style,
-.h5-styled > * {
-      @include heading($h5-shevy);
+.h5-styled>* {
+  @include heading($h5-shevy);
 }
+
 .h6-style,
-.h6-styled > * {
-   @extend h6;
+.h6-styled>* {
+  @extend h6;
 }
 
 
 @media screen and (min-width: $medium) {
-   .h1-style\@medium {
-      @include heading($h1-shevy);
-   }
-   .h2-style\@medium {
-      @include heading($h2-shevy);
-   }
-   .h3-style\@medium {
-      @include heading($h3-shevy);
-   }
-   .h4-style\@medium {
-      @include heading($h4-shevy);
-   }
-   .h5-style\@medium {
-      @include heading($h5-shevy);
-   }
-   .h6-style\@medium {
-      font-size: $h6 * 1rem;
-   }
-
-
-      .h1-styled\@medium > * {
-         @include heading($h1-shevy);
-      }
-      .h2-styled\@medium > * {
-         @include heading($h2-shevy);
-      }
-      .h3-styled\@medium > * {
-         @include heading($h3-shevy);
-      }
-      .h4-styled\@medium > * {
-         @include heading($h4-shevy);
-      }
-      .h5-styled\@medium > * {
-         @include heading($h5-shevy);
-      }
-      .h6-styled\@medium > * {
-         font-size: $h6 * 1rem;
-      }
+  .h1-style\@medium {
+    @include heading($h1-shevy);
+  }
 
+  .h2-style\@medium {
+    @include heading($h2-shevy);
+  }
 
+  .h3-style\@medium {
+    @include heading($h3-shevy);
+  }
 
-}
+  .h4-style\@medium {
+    @include heading($h4-shevy);
+  }
+
+  .h5-style\@medium {
+    @include heading($h5-shevy);
+  }
+
+  .h6-style\@medium {
+    font-size: $h6 * 1rem;
+  }
+
+
+  .h1-styled\@medium>* {
+    @include heading($h1-shevy);
+  }
+
+  .h2-styled\@medium>* {
+    @include heading($h2-shevy);
+  }
+
+  .h3-styled\@medium>* {
+    @include heading($h3-shevy);
+  }
+
+  .h4-styled\@medium>* {
+    @include heading($h4-shevy);
+  }
+
+  .h5-styled\@medium>* {
+    @include heading($h5-shevy);
+  }
+
+  .h6-styled\@medium>* {
+    font-size: $h6 * 1rem;
+  }
+
+
+
+}

atomic-docs/scss/3-atoms/_a_image.scss

@@ -3,6 +3,7 @@
 .a_image {
   position: relative; // allow for positioning of the .u_edit-in-txp component
   min-height: max-content;
+
   &--1x1 {
     aspect-ratio: 1/1;
   }
@@ -31,6 +32,7 @@
     height: 100%;
     width: 100%;
   }
+
   &--has-caption:not(.a_image--hide-caption) img {
     height: auto;
   }

atomic-docs/scss/4-molecules/_4-molecules.scss

@@ -1,3 +1,4 @@
 @import "_m_menu";
 @import "_m_hamburger";
 @import "_m_thumb";
+@import "_m_video";

atomic-docs/scss/4-molecules/_m_hamburger.scss

@@ -62,17 +62,6 @@
             }
         }
     }
-        //border: 1px solid red;
     &__menu {
-       // position: absolute;
-       // z-index: -1;
-        //left: 0;
-       //width: max-content;
-        //top: 0;
-        //right: 0;
-        //height: max-content;
-        //background: var(--background-colour);
-        //margin-top: var(--base-unit);
-        //right: 0;
     }
 }

atomic-docs/scss/4-molecules/_m_menu.scss

@@ -26,12 +26,12 @@
     .buttons & {
       padding: 0 var(--base-unit--ss);
       height: min-content;
-      //border: 2px solid var(--black);
+      background: var(--black);
+      color: var(--white);
       &--active,
-      &:hover,
-      .detail-page & {
-        background: var(--black);
-        color: var(--white);
+      &:hover {
+        background: var(--white);
+        color: var(--black);
       }
     }
 
@@ -59,7 +59,6 @@
 
     ul {
       display: none;
-      //top: 0;
       width: max-content;
       position: absolute;
       @include menubg();
@@ -74,7 +73,7 @@
     z-index:2;
     width: max-content;
     &__current {
-        font-weight: 500;
+        font-weight: 400;
         cursor: pointer;
         &:after{
           content:  url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAyMyAxMyIg
@@ -83,16 +82,13 @@
           4wNzU5OTk5IDAuOTU0OTA1WiIgZmlsbD0iIzI3MjcyNyIvPgo8L3N2Zz4K");
         display: inline-block;
         transform: scale(.62);
-       // margin-left: var(--base-unit--s);
      }
     }
 
     &__holder {
       position: relative;
     > ul {
         display: none;
-        // transform-origin: top;
-        // transform: scaleY(0);
         position: absolute;
         z-index: -1;
         width: max-content;
@@ -103,11 +99,6 @@
         padding-left: var(--base-unit);
         left: calc(var(--base-unit) * -1);
         @include menubg();
-       // padding-top: my-bs(2);
-        // :hover > & {
-        //   border: 1px solid red;
-        //   transform: scaleY(1);
-        // }
 
         .m_menu__child--active {
           display: none;
@@ -116,7 +107,6 @@
         }
     &:hover ul {
       display: block;
-     // background: var(--background-colour);
     }
 
 

atomic-docs/scss/4-molecules/_m_thumb.scss

@@ -2,9 +2,6 @@
 
 .m_thumb {
   position: relative;
-  > a {
-    //height: 100%;
-  }
   &__image {
     aspect-ratio: var(--thumb-aspect-ratio);
   }

atomic-docs/scss/4-molecules/_m_video.scss

@@ -0,0 +1,6 @@
+/* scss/6-molecules/_m_video.scss */
+
+.m_video {
+  position: relative;
+  max-width: 100%;
+}