🚧 Work on CSS

packages/css-theme/src/_components.scss

@@ -6,3 +6,4 @@
 @import "components/topicstoc";
 @import "components/breadcrumbs";
 @import "components/example";
+@import "components/fab";

packages/css-theme/src/_mixins.scss

@@ -4,6 +4,9 @@
 @mixin sm-screen {
   @media (min-width: 600px) and (max-width: 959px) { @content; }
 }
+@mixin lg-screen {
+  @media (min-width: 960px) { @content; }
+}
 
 @mixin body-font { font-family:  -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
 @mixin title-font { font-family: 'Roboto Condensed', sans-serif; }

packages/css-theme/src/_utility.scss

@@ -1,7 +1,13 @@
 @include xs-screen {
-  .only-xs { display: inherit!important; }
   .not-xs { display: none!important; }
+  .only-xs { display: inherit; }
+}
+@include sm-screen {
+  .not-xs { display: inherit; }
+  .only-xs { display: none!important; }
+}
+@include lg-screen {
+  .not-xs { display: inherit; }
+  .only-xs { display: none!important; }
 }
-.only-xs { display: none; }
-.not-xs { display: inherit; }
 

packages/css-theme/src/_variables.scss

@@ -1,3 +1,4 @@
+$fc-blue: "#74c0fc";
 $fc-text-light: $oc-gray-9;
 $fc-text-dark: $oc-gray-0;
 $fc-bg-light: $oc-gray-0;

packages/css-theme/src/components/_draft.scss

@@ -129,12 +129,14 @@ svg.freesewing.draft text {
 
 /* SVG defs (snippets) are in the shadow DOM */
 g.snippet.notch > circle,
-g.snippet.bnotch > circle,
+g.snippet.button > circle,
-g.snippet.bnotch > path,
+g.snippet.buttonhole > path {
-g.snippet.utton > circle,
-g.snippet.uttonhole > path {
   color: $fc-draft-mark-light;
 }
+g.snippet.bnotch > circle,
+g.snippet.bnotch > path {
+  color: $fc-draft-note-light;
+}
 /* Same for paperless grid, also in shadow DOM */
 rect.grid {
   stroke-width: 1;

packages/css-theme/src/components/_example.scss

@@ -1,46 +1,22 @@
 figure.example {
   div.example {
     position: relative;
-    svg.freesewing.draft {
-      box-shadow: 0 0 3px #0006;
-    }
     div.actions {
       position: absolute;
-      right: 5px;
+      right: 0;
-      bottom: 14px;
+      top: 0;
-      button {
-        display: block;
-        background: $fc-text-light;
-        color: $fc-bg-light;
-        padding: 5px;
-        margin: 5px;
-      }
-      button:hover {
-        background: $oc-green-7;
-      }
-      button.active {
-        background: $oc-green-7;
-      }
     }
   }
-  > div.design {
+}
-    border-top: 2px solid $oc-gray-4;
+figure.design.example {
-    border-bottom: 2px solid $oc-gray-4;
+  border: 1px solid $oc-gray-4;
+  svg.freesewing.draft.design {
+    border-bottom: 1px solid $oc-gray-4;
+  }
+  figcaption {
+    display: none;
   }
 }
 
 .theme-wrapper.dark figure.example div.example {
-  svg.freesewing.draft {
-    box-shadow: none;
-    border: 1px solid $oc-gray-8;
-  }
-  div.actions {
-    button {
-      background: $fc-text-dark;
-      color: $fc-bg-light;
-    }
-    button.active {
-      background: $fc-text-dark;
-    }
-  }
 }

packages/css-theme/src/components/_fab.scss

@@ -0,0 +1,22 @@
+button.fab {
+  position: fixed;
+  bottom: 1rem;
+  width: 64px;
+  height: 64px!important;
+  background: $fc-text-light!important;
+  z-index: 20;
+  font-size: 2rem;
+}
+button.fab.primary {
+  right: 1rem;
+}
+button.fab.secondary {
+  right: calc(1rem + 69px);
+  background: $fc-link-light!important;
+}
+.theme-wrapper.dark button.fab {
+  background: $fc-text-dark!important;
+}
+.theme-wrapper.dark button.fab.secondary {
+  background: $fc-link-dark!important;
+}

packages/css-theme/src/components/_navbar.scss

@@ -5,8 +5,7 @@ header.navbar {
   padding: 0 26px;
   background: $fc-bg-dark;
   z-index: 15;
-  div.only-xs,
+  div {
-  div.not-xs {
     align-items: center;
   }
 
@@ -87,36 +86,7 @@ header.navbar > div {
 
 @include xs-screen {
   header.navbar {
-    position: fixed;
+    display: none;
-    bottom: 0;
-    left: 0;
-    height: 42px;
-    width: calc(100% - 26px);
-    padding: 0 13px;
-  	> div {
-  	  height: 42px;
-  	}
-  	div.spread {
-      justify-content: center;
-    }
-  	div.logo,
-  	div.emblem {
-  	  margin-right: 12px;
-  	}
-  	div.logo a {
-  	  height: 32px;
-  	  width: 32px;
-  	}
-  	div.emblem a {
-      font-size: 22px;
-  	}
-    a.nav,
-    button {
-      border: 0;
-  	  padding: 0 6px;
-  	  height: 42px;
-  	  line-height: 42px;
-  	}
   }
 }