🚧 CSS and component changes for dev site

packages/components/src/Emblem/index.js

@@ -3,25 +3,19 @@ import PropTypes from "prop-types";
 
 const Emblem = props => (
   <React.Fragment>
-    <span className="emb" style={{color: props.c1, fontSize: props.size+"px"}}>{props.t1}</span>
+    <span className="emb">{props.t1}</span>
-    <span className="lem" style={{color: props.c2, fontSize: props.size+"px"}}>{props.t2}</span>
+    <span className="lem">{props.t2}</span>
   </React.Fragment>
 );
 
 Emblem.propTypes = {
-  size: PropTypes.number,
-  c1: PropTypes.string,
-  c2: PropTypes.string,
   t1: PropTypes.string,
-  t2: PropTypes.string,
+  t2: PropTypes.string
 };
 
 Emblem.defaultProps = {
-  size: 36,
+  t1: "Free",
-  c1: "#111111",
+  t2: "Sewing"
-  c2: "#111111",
-  t1: "",
-  t2: "",
 };
 
 export default Emblem;

packages/components/src/Footer/index.js

@@ -14,18 +14,16 @@ const Footer = props => {
   };
   const links = {
     docs: {
+      blog: "https://" + props.language + ".freesewing.org/blog",
       aboutFreesewing:
         "https://" + props.language + ".freesewing.org/docs/about",
-      faq: "https://" + props.language + ".freesewing.org/docs/faq",
+      faq: "https://" + props.language + ".freesewing.org/docs/faq"
-      makerDocs: "https://" + props.language + ".freesewing.org/docs/",
-      devDocs: "https://" + props.language + ".freesewing.dev/"
     },
     community: {
       becomeAPatron:
         "https://" + props.language + ".freesewing.org/patrons/join",
-      showcase: "https://" + props.language + ".freesewing.org/showcase",
+      makerDocs: "https://" + props.language + ".freesewing.org/docs/",
-      makerBlog: "https://" + props.language + ".freesewing.org/blog",
+      devDocs: "https://" + props.language + ".freesewing.dev/"
-      devBlog: "https://" + props.language + ".freesewing.dev/blog"
     }
   };
   const styles = {
@@ -63,9 +61,6 @@ const Footer = props => {
           }
           return (
             <div key={l}>
-              <h4>
-                <FormattedMessage id={"app." + l} />
-              </h4>
               <ul>{items}</ul>
             </div>
           );

packages/components/src/Navbar/index.js

@@ -43,24 +43,50 @@ const Navbar = props => {
   if (typeof props.home === "function") homeProps.onClick = props.home;
   else homeProps.href = props.home;
 
+  let logo = (
+    <div className="logo">
+      <a id="home" {...homeProps}>
+        {props.logo}
+      </a>
+    </div>
+  );
+  let emblem = (
+    <div className="emblem">
+      <a {...homeProps}>{props.emblem}</a>
+    </div>
+  );
+
   return (
     <header className="navbar">
       <div>
-        <div className="logo">
+        <div className="only-xs">
-          <a id="home" {...homeProps}>
+          {Object.keys(props.navs.mleft).map(key =>
-            {props.logo}
+            renderNav(key, props.navs.mleft[key])
-          </a>
+          )}
         </div>
-        <div className="emblem">
+        <div className="not-xs">
-          <a {...homeProps}>{props.emblem}</a>
+          {logo}
+          {emblem}
+          {Object.keys(props.navs.left).map(key =>
+            renderNav(key, props.navs.left[key])
+          )}
+        </div>
+        <div className="spread">
+          <div className="only-xs">
+            {logo}
+            {emblem}
+          </div>
+        </div>
+        <div className="only-xs">
+          {Object.keys(props.navs.mright).map(key =>
+            renderNav(key, props.navs.mright[key])
+          )}
+        </div>
+        <div className="not-xs">
+          {Object.keys(props.navs.right).map(key =>
+            renderNav(key, props.navs.right[key])
+          )}
         </div>
-        {Object.keys(props.navs.left).map(key =>
-          renderNav(key, props.navs.left[key])
-        )}
-        <div className="spread" />
-        {Object.keys(props.navs.right).map(key =>
-          renderNav(key, props.navs.right[key])
-        )}
       </div>
     </header>
   );
@@ -70,13 +96,15 @@ Navbar.propTypes = {
   navs: PropTypes.object,
   logo: PropTypes.node,
   emblem: PropTypes.node,
-  home: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+  home: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  toggleMenu: PropTypes.func,
+  toggleToc: PropTypes.func
 };
 
 Navbar.defaultProps = {
   home: "https://freesewing.org/",
   navs: { left: [], right: [] },
-  logo: <Logo size={32} color="#e9ecef" />,
+  logo: <Logo embed color="#e9ecef" />,
-  emblem: <Emblem t1="Free" t2="Sewing" size={20} c1="#74c0fc" c2="#e9ecef" />
+  emblem: <Emblem />
 };
 export default Navbar;

packages/css-theme/src/_components.scss

@@ -3,3 +3,5 @@
 @import "components/draft";
 @import "components/draft-configurator";
 @import "components/draft-design";
+@import "components/topicstoc";
+@import "components/breadcrumbs";

packages/css-theme/src/_layout.scss

@@ -1,2 +1,3 @@
 @import "layout/section-aside";
+@import "layout/menu-toc";
 

packages/css-theme/src/_mixins.scss

@@ -1,3 +1,10 @@
-@mixin body-font { font-family:  -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; }
+@mixin xs-screen {
+  @media (max-width: 599px) { @content; }
+}
+@mixin sm-screen {
+  @media (min-width: 600px) and (max-width: 959px) { @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; }
 @mixin fixed-font { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }

packages/css-theme/src/_reset.scss

@@ -1,3 +1,9 @@
 body {
   margin: 0;
+  font-size: 18px;
+  line-height: 1.5;
+  scroll-behavior: smooth;
+}
+img {
+  max-width: 100%;
 }

packages/css-theme/src/_theme-wrapper.scss

@@ -10,10 +10,16 @@
 .theme-wrapper.light {
   background: $fc-bg-light;
   color: $fc-bg-dark;
+  .altbg {
+    background: $fc-altbg-light;
+  }
 }
 
 .theme-wrapper.dark {
   background: $fc-bg-dark;
   color: $fc-bg-light;
+  .altbg {
+    background: $fc-altbg-dark;
+  }
 }
 

packages/css-theme/src/_typography.scss

@@ -0,0 +1,61 @@
+h1,h2,h3,h4,h5,h6,button { @include title-font; }
+h1 {
+  font-size: 3.5rem;
+  font-weight: 200;
+  margin: 1rem 0 2rem;
+}
+h2 {
+  font-size: 2.5rem;
+  border-top: 1px solid $oc-gray-4;
+  margin: 3.5rem 0 1rem;
+  padding: 1.5rem 0 1rem;
+  font-weight: 400;
+}
+.theme-wrapper.dark h2 {
+  border-color: $oc-gray-7;
+}
+h2.bare {
+  border: none;
+  margin: 0;
+}
+h3 {
+  font-size: 2rem;
+  margin: 1.75rem 0 1rem;
+}
+h4 {
+  font-size: 1.75rem;
+  margin: 1.5rem 0 0.75rem;
+}
+h5 {
+  font-size: 1.5rem;
+  margin: 1.25rem 0 0.5rem;
+}
+h6 {
+  font-size: 1.25rem;
+  margin: 1rem 0 0.25rem;
+}
+h2 a.anchor,
+h3 a.anchor,
+h4 a.anchor,
+h5 a.anchor,
+h6 a.anchor {
+  margin-left: -20px;
+  margin-right: 4px;
+}
+
+@include sm-screen {
+  h1 { font-size: 3rem; }
+  h2 { font-size: 2.25rem; }
+}
+@include xs-screen {
+  h1 {
+    font-size: 2.5rem;
+    margin: 1rem 0 1.5rem;
+  }
+  h2 {
+    font-size: 2rem;
+    margin: 2.5rem 0 0.5rem;
+  }
+  h3 { font-size: 1.85rem; }
+  h4 { font-size: 1.65rem; }
+}

packages/css-theme/src/_utility.scss

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

packages/css-theme/src/_variables.scss

@@ -2,6 +2,8 @@ $fc-text-light: $oc-gray-9;
 $fc-text-dark: $oc-gray-0;
 $fc-bg-light: $oc-gray-0;
 $fc-bg-dark: $oc-gray-9;
+$fc-altbg-light: $oc-gray-1;
+$fc-altbg-dark: $oc-gray-8;
 $fc-notice-light: $oc-yellow-7;
 $fc-notice-dark: $oc-lime-3;
 $fc-hoverbg-light: $oc-gray-1;

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

@@ -0,0 +1,31 @@
+nav.breadcrumbs {
+  ul {
+    @include title-font;
+    margin-left: 0;
+    padding-left: 0;
+    font-size: 95%;
+    li {
+      list-style-type: none;
+      display: inline-block;
+    }
+    li:first-child:before {
+      content: "";
+      padding: 0;
+    }
+    li:before {
+      content: "»";
+      padding: 0 0.25rem;
+      font-size: 125%;
+    }
+  }
+}
+
+.theme-wrapper.dark {
+  nav.breadcrumbs {
+    ul {
+      li {
+      }
+    }
+  }
+}
+

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

@@ -5,6 +5,10 @@ header.navbar {
   padding: 0 26px;
   background: $fc-bg-dark;
   z-index: 15;
+  div.only-xs,
+  div.not-xs {
+    align-items: center;
+  }
 
   div.logo {
     height: 64px;
@@ -14,20 +18,35 @@ header.navbar {
     display: flex;
     align-items: center;
     color: $oc-gray-2;
-    a { text-decoration: none; }
+    a {
+      text-decoration: none;
+      height: 42px;
+      width: 42px;
+    }
   }
   div.emblem {
     margin-right: 26px;
-    a { text-decoration: none; }
+    a {
+      text-decoration: none!important;
+      @include title-font;
+      font-size: 26px;
+      span.lem { color: $oc-gray-2; }
+      span.emb { color: $fc-link-dark; }
+    }
+  }
+  div.spread {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
   }
-  div.spread { flex-grow: 1}
   a.nav,
   button {
     @include title-font;
+    text-decoration: none!important;
     margin: 0;
     padding: 0 13px;
     height: 60px;
-    color: $fc-text-dark;
+    color: $fc-text-dark!important;
     border: 0;
     line-height: 64px;
     border-bottom: 4px solid $fc-bg-dark;
@@ -65,3 +84,70 @@ header.navbar > div {
   align-items: center;
 }
 
+
+@include xs-screen {
+  header.navbar {
+    position: fixed;
+    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;
+  	}
+  }
+}
+
+@include sm-screen {
+  header.navbar {
+    height: 54px;
+    width: calc(100% - 36px);
+    padding: 0 18px;
+  	> div {
+  	  height: 54px;
+  	}
+  	div.logo,
+  	div.emblem {
+  	  margin-right: 12px;
+  	}
+  	div.logo a {
+  	  height: 32px;
+  	  width: 32px;
+  	}
+  	div.emblem a {
+      font-size: 22px;
+  	}
+  	a.nav {
+  	  padding: 0 6px;
+  	  line-height: 54px;
+  	  height: 50px;
+  	}
+  	button {
+  	  padding: 0 6px;
+  	  height: 54px;
+  	  line-height: 54px;
+  	}
+  }
+}

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

@@ -0,0 +1,83 @@
+ul.topics {
+  margin: 0;
+  padding: 0;
+}
+ul.topics > li.topic {
+  @include title-font;
+  list-style-type: none;
+  //text-transform: uppercase;
+  margin: 0;
+  padding: 0;
+  a.topic {
+    display: block;
+    padding: 0.25rem 0.5rem;
+    border-left: 4px solid transparent;
+    color: $fc-text-light!important;
+  }
+  a.topic:hover {
+    background: $oc-gray-5;
+    text-decoration: none!important;
+  }
+}
+ul.topics > li.topic.active {
+  font-weight: bold;
+  a.topic {
+    border-left: 4px solid $fc-link-light;
+  }
+}
+ul.topics > li.topic > ul.topics.l1 {
+  font-weight: normal;
+  a {
+    color: $fc-text-light!important;
+    padding-left: 2.5rem;
+    display: block;
+  }
+  a:hover {
+    background: $oc-gray-3;
+    text-decoration: none!important;
+  }
+  li.active a {
+    font-weight: bold;
+  }
+  ul.links {
+    margin-left: 1.5rem;
+    > li > a {
+      display: inline;
+      padding: 0;
+      color: $fc-link-light!important;
+      font-weight: normal;
+    }
+    > li > a:hover {
+      text-decoration: underline!important;
+      background: transparent;
+    }
+  }
+}
+
+.theme-wrapper.dark {
+  ul.topics > li.topic {
+    a.topic {
+      color: $fc-text-dark!important;
+    }
+    a.topic:hover {
+      background: $oc-gray-6;
+    }
+  }
+  ul.topics > li.topic > ul.topics.l1 {
+    a {
+      color: $fc-text-dark!important;
+    }
+    a:hover {
+      background: $oc-gray-7;
+    }
+    ul.links {
+      > li > a {
+        color: $fc-link-dark!important;
+      }
+      > li > a:hover {
+        text-decoration: underline!important;
+        background: transparent;
+      }
+    }
+  }
+}

packages/css-theme/src/elements/_a.scss

@@ -1,12 +1,12 @@
-.theme-wrapper a {
+.theme-wrapper a:not([role="button"]) {
   text-decoration: none;
 }
-.theme-wrapper a:hover {
+.theme-wrapper a:not([role="button"]):hover {
   text-decoration: underline;
 }
-.theme-wrapper.light a {
+.theme-wrapper.light a:not([role="button"]) {
   color: $fc-link-light;
 }
-.theme-wrapper.dark a {
+.theme-wrapper.dark a:not([role="button"]) {
   color: $fc-link-dark;
 }

packages/css-theme/src/elements/_code.scss

@@ -1,21 +1,21 @@
 .theme-wrapper.light :not(pre) > code[class*="language-"] {
-  padding: 0.125rem 0.5rem;
+  padding: 0.1rem 0.25rem;
-  background: $oc-gray-6;
+  background: $oc-gray-2;
-  border: 1px $oc-gray-5 solid;
+  border: 1px $oc-gray-3 solid;
   color: $oc-gray-9;
 }
 .theme-wrapper.dark :not(pre) > code[class*="language-"] {
   padding: 0.125rem 0.5rem;
-  background: $oc-gray-6;
+  background: $oc-gray-9;
-  border: 1px $oc-gray-5 solid;
+  border: 1px $oc-gray-7 solid;
-  color: $oc-gray-9;
+  color: $oc-gray-1;
 }
 
 div.gatsby-highlight {
   position: relative;
 }
-div.gatsby-highlight pre.language-js {
+div.gatsby-highlight pre {
-  padding-top: 1rem;
+  padding: 1.5rem 1rem;
 }
 
 pre.language-js:before,
@@ -50,5 +50,8 @@ pre.language-svg:before {
   content: "svg";
   background: rgba(129, 197, 255, 0.9);
 }
-
+code[class*="language-"],
+pre[class*="language-"] {
+  white-space: pre-wrap;
+}
 

packages/css-theme/src/elements/_footer.scss

@@ -1,4 +1,6 @@
 footer {
+  @include title-font;
+  font-size: 90%;
   background: $fc-bg-dark;
   color: $fc-text-dark;
   margin: 0;

packages/css-theme/src/elements/_ul.scss

@@ -1,8 +1,13 @@
 ul.links {
-  padding-left: 1rem;
+  padding-left: 1.5rem;
+  line-height: 1.35;
+  font-size: 95%;
+  font-weight: normal;
   li {
     list-style-type: none;
+    a { display: inline-block; }
   }
+  li.active { font-weight: bold; }
   li:before {
 		content: "\00a0";
 		background: $oc-gray-5;
@@ -18,6 +23,7 @@ ul.links {
 	li.nodot:before {
 		content: none;
 	}
+  li.active:before,
   li:hover:before {
 		background: $fc-link-light;
 	}

packages/css-theme/src/layout/_menu-toc.scss

@@ -0,0 +1,45 @@
+@include xs-screen {
+  .theme-wrapper.light div.fs-sa aside,
+  .theme-wrapper.dark div.fs-sa aside,
+  .theme-wrapper.light div.menu,
+  .theme-wrapper.dark div.menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    padding: 2rem;
+    padding-top: 4rem;
+    max-width: 600px;
+    z-index: -10;
+    transition: opacity 0.5s ease 0s;
+    opacity: 0;
+    > ul,
+    > div {
+      transform: translate(0px, 20px);
+      transition: transform 0.5s ease 0s;
+    }
+  }
+}
+.theme-wrapper.show-toc div.fs-sa aside {
+  opacity: 1;
+  z-index: 10;
+  > ul {
+    transform: translate(0px, 0px);
+  }
+}
+
+.theme-wrapper.light div.menu {
+  background: $oc-gray-1;
+}
+.theme-wrapper.dark div.menu {
+  background: $oc-gray-8;
+}
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  z-index: 10;
+  > div {
+    transform: translate(0px, 0px);
+  }
+}
+

packages/css-theme/src/layout/_section-aside.scss

@@ -3,13 +3,13 @@ div.fs-sa {
 
   section{
     width: 100%;
-    padding: 1rem;
+    padding: 1rem 1.5rem;
   }
   aside {
     padding: 1rem 0;
     max-width: 400px;
     min-width: 200px;
-    width: 30%;
+    width: 40%;
     background: $oc-gray-1;
     border-left: 1px solid $oc-gray-3;
   }
@@ -21,7 +21,6 @@ div.fs-sa {
   }
 }
 
-
 .theme-wrapper.dark {
   div.fs-sa {
     section {

packages/css-theme/src/theme.scss

@@ -4,7 +4,10 @@
 @import "mixins";
 @import "prism";
 @import "theme-wrapper";
+@import "typography";
 @import "layout";
 @import "scroll";
 @import "components";
 @import "elements";
+@import "utility";
+

packages/i18n/src/locales/en/app.yaml

@@ -221,3 +221,4 @@ makerDocs: Maker documentation
 devDocs: Developer documentation
 makerBlog: Maker blog
 devBlog: Developer blog
+slogan: A JavaScript library for made-to-measure sewing patterns