Initial example of distributing scss instead of css (#106)

* Initial example of distributing scss instead of css * Add css build back to npm run lib
GetDKAN · Feb 8, 2021 · 8989289 · 8989289
1 parent 35db885
commit 8989289
Show file tree

Hide file tree

Showing 10 changed files with 433 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -12,8 +12,8 @@
   "scripts": {
     "css:watch": "node-sass --omit-source-map-url src/theme/styles/index.scss dist/index.css -w",
     "lib:watch": "babel src -d lib --watch",
-    "lib": "npm run clean && babel src -d lib && node-sass --omit-source-map-url src/theme/styles/index.scss dist/index.css",
-    "clean": "rm -rf lib && mkdir lib",
+    "lib": "npm run clean && babel src -d lib && node-sass --omit-source-map-url src/theme/styles/index.scss dist/index.css && cp -R src/styles/scss dist/",
+    "clean": "rm -rf lib && mkdir lib && rm -rf dist && mkdir dist",
     "prepublish": "npm run lib",
     "storybook": "NODE_PATH=src start-storybook -p 6006",
     "deploy-storybook": "storybook-to-ghpages",

diff --git a/src/styles/scss/_variables.scss b/src/styles/scss/_variables.scss
@@ -0,0 +1,59 @@
+// Colors.
+$backgroundColor:   #f9fafb;
+$borderColor:       #e8ebf0;
+$borderRadius:      4px;
+$primaryDark:       #162e51; // blueDark.
+$primary:           #0978bc; // blue.
+$primaryLight:      #27AAE1; // blueLight.
+$primaryDust:       #dce4ef; // blueDust.
+$secondaryDark:     #EAC200; // yellowDark.
+$secondary:         #FFD666; // yellow.
+$secondaryLight:    #FFFAEE; // yellowLight.
+$grayDark:          #323A45;
+$grayMedium:        #A7AAAC;
+$grayLight:         #dddddd;
+$grayDust:          #eeeeee;
+$headingColor:      #162e51;
+$textColor:         #3B3B3B;
+$linkColor:         #0978bc;
+$linkHoverColor:    #162e51;
+$navBarBackgroundColor: #0978bc;
+$navBarLink:        #FFFFFF;
+$navBarLinkActive:  #FFFFFF;
+$navBarLinkHoverBack:   #023756;
+$navBarLinkActiveBack:  #305e92;
+$navBarLinkActiveHoverBack: #f2d13c;
+$navBarLinkActiveHover: #FFFFFF;
+$heroBackgroundColor: #0978bc;;
+$heroTextColor:     #FFFFFF;
+$heroHeadingColor:  #FFFFFF;
+$footerBackgroundColor: #162e51 !default;
+$footerText:        #FFFFFF;
+$footerLink:        #FFFFFF;
+$footerLinkHover:   #FFFFFF;
+
+// Fonts.
+$fontText: 'Rubik','Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+$fontHeading:'Rubik Bold','Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+
+// Alerts/Messaging.
+$info:          #039fce;
+$warning:       #fc9905;
+$danger:        #d9534f;
+$success:       #46a546;
+
+// File Formats.
+$apiIcon:       #317daa;
+$binIcon:       #7a7a00;
+$csvIcon:       #0b4498;
+$docIcon:       #6f5191;
+$rdfIcon:       #e36504;
+$jsonIcon:      #005051;
+$kmlIcon:       #3F6EA5;
+$pdfIcon:       #e0051e;
+$pptIcon:       #CF452C;
+$xmlIcon:       #d14900;
+$xlsIcon:       #015924;
+$zipIcon:       #3B0053;
+$htmlIcon:      #317daa;
+$dataIcon:      #666666;
diff --git a/src/styles/scss/index.scss b/src/styles/scss/index.scss
@@ -0,0 +1,8 @@
+@import "../../../../bootstrap/scss/bootstrap.scss";
+@import "./layout/footer.scss";
+@import "./layout/general.scss";
+@import "./layout/header.scss";
+@import "./layout/menu.scss";
+@import "./layout/navbar.scss";
+@import "./layout/hero.scss";
+@import "./layout/iconlist.scss";
diff --git a/src/styles/scss/layout/footer.scss b/src/styles/scss/layout/footer.scss
@@ -0,0 +1,71 @@
+@import "../variables";
+
+.dc-footer {
+  background-color: $footerBackgroundColor;
+  color: $footerText;
+  ul {
+    margin: 20px 40px 0 0;
+  }
+
+  .page-footer {
+    display: flex;
+    align-items: flex-start;
+    align-content: flex-start;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    padding-top: 40px;
+    padding-bottom: 40px;
+
+    h2,h3,h4 {
+      color: $footerText;
+    }
+    a {
+      color: $footerLink;
+      text-decoration: none;
+      &:hover,
+      &:focus {
+        color: $footerLinkHover;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .branding {
+    flex-grow: 2;
+    max-width: 50%;
+    h3 {
+      font-weight: 500;
+      font-size: 30px;
+      margin: 20px 0 5px;
+    }
+    p {
+      margin: 0 2em 1em 0;
+    }
+    .social {
+      margin: 1em 0 0 0;
+      svg {
+        font-size: 25px;
+        fill: #FFFFFF;
+        opacity: 0.5;
+        margin: 0 1em 1em 0;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .page-footer {
+      flex-wrap: wrap;
+    }
+    .branding {
+      width: 100%;
+      max-width: 100%;
+    }
+    .copyright {
+      margin-top: 30px;
+    }
+  }
+}
diff --git a/src/styles/scss/layout/general.scss b/src/styles/scss/layout/general.scss
@@ -0,0 +1,58 @@
+@import "../variables";
+
+html {
+  /*Convert font size to base 10 for easier calculations (1rem = 10px)*/
+  font-size: 62.5%;
+}
+
+body {
+  background-color: $backgroundColor;
+  color: $textColor;
+  font-weight: 300;
+  font-size: 1.6rem;
+  font-style: normal;
+  font-family: $fontText;
+
+  a, input, button, textarea {
+    transition: all 0.2s linear;
+  }
+  a {
+    color: $linkColor;
+    word-break: break-word;
+    &:hover,
+    &:focus {
+      color: $linkHoverColor;
+    }
+  }
+  h1,h2,h3,h4,h5 {
+    color: $headingColor;
+    font-family: $fontHeading;
+    font-weight: 700;
+  }
+  h1 { font-size: 3.0rem }  // 30px
+  h2 { font-size: 2.4rem; } // 24px
+  h3 { font-size: 2.0rem; } // 20px
+
+  table {
+    background-color: white;
+  }
+  .table-bordered td,
+  .table-bordered th {
+    border-color: $borderColor;
+  }
+  .form-control {
+    font-size: 1.6rem;
+    margin-bottom: 15px;
+  }
+}
+.dc-page {
+  h1 {
+    margin: 25px 0;
+  }
+  .swagger-ui .wrapper {
+    padding: 0;
+    .col-12 {
+      padding: 0;
+    }
+  }
+}
diff --git a/src/styles/scss/layout/header.scss b/src/styles/scss/layout/header.scss
@@ -0,0 +1,29 @@
+@import "../variables";
+
+.dc-header {
+  .dc-logo {
+    margin: 10px 10px 10px 0;
+    display: inline-block;
+  }
+  .dc-site-name {
+    display: inline-block;
+    vertical-align: bottom;
+    line-height: 1em;
+    margin-bottom: 10px;
+    a {
+      color: $headingColor;
+      font-size: 1.8rem;
+    }
+  }
+  .dc-slogan {
+    margin-top: 10px;
+  }
+
+  @media screen and (max-width: 768px) {
+    flex-wrap: wrap;
+    .dc-logo,
+    .site-name {
+      display: block;
+    }
+  }
+}
diff --git a/src/styles/scss/layout/hero.scss b/src/styles/scss/layout/hero.scss
@@ -0,0 +1,68 @@
+@import "../variables";
+
+.dc-hero {
+  position: relative;
+  background-size: cover;
+  background-position: 50% 50%;
+  padding: 40px 0;
+  display: flex;
+  align-items: flex-start;
+  align-content: stretch;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-evenly;
+  background-image: linear-gradient(rgb(22, 46, 81), rgb(9, 120, 188));
+  .dc-hero-title {
+    color: white;
+  }
+  .dc-hero-block {
+    position: relative;
+    margin: auto;
+    color: white;
+    padding: 20px;
+    min-width: 30%;
+    max-width: 50%;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+    letter-spacing: 0.5px;
+    &.center {
+      text-align: center;
+    }
+  }
+  h1,
+  h2 {
+    margin-top: 0;
+  }
+
+  .dc-hero-search {
+    display: flex;
+    flex-wrap: nowrap;
+    input {
+      margin-right: 1em;
+    }
+    button {
+      border: none;
+      background-color: $secondary;
+      color: $primaryDark;
+      height: 34px;
+      padding: 0 30px;
+      font-weight: bold;
+      font-size: 1.6rem;
+      &[type="reset"] {
+        margin-left: 1em;
+      }
+      &:hover,
+      &:focus {
+        background-color: $secondaryDark;
+        color: $primaryDark;
+        text-decoration: none;
+      }
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    flex-wrap: wrap;
+    .dc-hero-block {
+      max-width: 90%;
+    }
+  }
+}
diff --git a/src/styles/scss/layout/iconlist.scss b/src/styles/scss/layout/iconlist.scss
@@ -0,0 +1,31 @@
+@import "../variables";
+
+.dc-icon-list {
+  padding: 24px 0;
+  h2 {
+    display: block;
+    text-align: center;
+    margin: 2rem 15px;
+  }
+  ul {
+    list-style: none;
+    display: flex;
+    align-items: stretch;
+    align-content: flex-start;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: center;
+    padding: 0;
+  }
+  li {
+    text-align: center;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  @media screen and (min-width: 1200px) {
+    li {
+      max-width: 33%;
+    }
+  }
+}
diff --git a/src/styles/scss/layout/menu.scss b/src/styles/scss/layout/menu.scss
@@ -0,0 +1,38 @@
+.dc-menu {
+  ul {
+    list-style-type: none;
+    list-style: none;
+    padding: 0;
+    li {
+      list-style-type: none;
+    }
+    a {
+      display: block;
+      font-weight: 500;
+      padding: 4px;
+      text-decoration: none;
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .dc-menu-item {
+    text-decoration: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-touch-callout: none;
+    user-select: none;
+    cursor: pointer;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  nav {
+    display: block;
+    width: 100%;
+    ul {
+      margin-right: 0;
+    }
+  }
+}