starting focused styling

dev/package-lock.json

@@ -54,7 +54,8 @@
     "amdefine": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
     },
     "ansi-escapes": {
       "version": "3.1.0",
@@ -240,7 +241,8 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
     },
     "bcrypt-pbkdf": {
       "version": "1.0.1",
@@ -321,6 +323,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -534,7 +537,8 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -586,11 +590,6 @@
         "boom": "2.x.x"
       }
     },
-    "css-parse": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.7.0.tgz",
-      "integrity": "sha1-Mh9s9zeCpv91ERE5D8BeLGV9jJs="
-    },
     "css-tree": {
       "version": "1.0.0-alpha25",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha25.tgz",
@@ -667,6 +666,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
       "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+      "dev": true,
       "requires": {
         "ms": "2.0.0"
       }
@@ -1229,7 +1229,8 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
     },
     "fstream": {
       "version": "1.0.11",
@@ -1350,6 +1351,7 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
       "integrity": "sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=",
+      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -1872,6 +1874,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -1880,7 +1883,8 @@
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+      "dev": true
     },
     "inquirer": {
       "version": "3.3.0",
@@ -2391,6 +2395,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -2398,12 +2403,14 @@
     "minimist": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+      "dev": true
     },
     "mkdirp": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       }
@@ -2411,7 +2418,8 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "dev": true
     },
     "multimatch": {
       "version": "2.1.0",
@@ -2551,14 +2559,6 @@
         "abbrev": "1"
       }
     },
-    "normalize": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/normalize/-/normalize-0.3.1.tgz",
-      "integrity": "sha1-XfSj/hbALmH7Mf8vtEigf0pAhKY=",
-      "requires": {
-        "stylus": "*"
-      }
-    },
     "normalize-package-data": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
@@ -2577,6 +2577,11 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
+    "normalize.css": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.0.tgz",
+      "integrity": "sha512-iXcbM3NWr0XkNyfiSBsoPezi+0V92P9nj84yVV1/UZxRUrGczgX/X91KMAGM0omWLY2+2Q1gKD/XRn4gQRDB2A=="
+    },
     "npmlog": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
@@ -2626,6 +2631,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -2730,7 +2736,8 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
     },
     "path-is-inside": {
       "version": "1.0.2",
@@ -3451,11 +3458,6 @@
         }
       }
     },
-    "sax": {
-      "version": "0.5.8",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-0.5.8.tgz",
-      "integrity": "sha1-1HLbIo6zMcJQaw6MFVJK25OdEsE="
-    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -3545,14 +3547,6 @@
         "hoek": "2.x.x"
       }
     },
-    "source-map": {
-      "version": "0.1.43",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
-      "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
-      "requires": {
-        "amdefine": ">=0.0.4"
-      }
-    },
     "spdx-correct": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
@@ -3720,19 +3714,6 @@
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
       "dev": true
     },
-    "stylus": {
-      "version": "0.54.5",
-      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.5.tgz",
-      "integrity": "sha1-QrlWCTHKcJDOhRWnmLqeaqPW3Hk=",
-      "requires": {
-        "css-parse": "1.7.x",
-        "debug": "*",
-        "glob": "7.0.x",
-        "mkdirp": "0.5.x",
-        "sax": "0.5.x",
-        "source-map": "0.1.x"
-      }
-    },
     "supports-color": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
@@ -4122,7 +4103,8 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
     },
     "write": {
       "version": "0.2.1",

dev/package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "jquery": "^3.3.1",
-    "normalize": "^0.3.1",
+    "normalize.css": "^8.0.0",
     "smoothscroll-polyfill": "^0.4.3"
   },
   "devDependencies": {

dev/scss/components/_global-head.scss

@@ -3,40 +3,31 @@
   flex-wrap: wrap;
   align-content: center;
   align-items: center;
-  margin: 0 auto $gutter;
+  margin: 0 auto;
   width: 83%;
 
-  > * { flex: 0 0 auto; }
+  > * {
-
+    flex: 0 0 auto;
-  .social-menu {
-    order: 1;
-    width: 100%;
-  }
-
-  .search-form  {
-    order: 2;
-    width: 100%;
-  }
-
-  .logo-banner {
-    order: 3;
-    width: 100%;
-  }
-
-  .header-menu {
-    order: 4;
-    width: 100%;
   }
 
+  .logo-banner { order: 1; }
+  .search-form { order: 2; }
+  .header-menu { order: 3; }
+  .social-menu { order: 4; }
 }
 
 @media screen and (min-width: #{$screen-tablet}) {
   .global-head {
     width: $container-tablet;
 
+    .social-menu { order: 1; }
+    .search-form { order: 2; }
+    .logo-banner { order: 3; }
+    .header-menu { order: 4; }
+
     .social-menu,
     .search-form  {
-      flex: 1 1 auto;
+      flex: 1 0 auto;
       width: auto;
     }
 

dev/scss/components/_header-menu.scss

@@ -1,15 +1,63 @@
 .header-menu {
   display: flex;
-  align-content: center;
+  flex-direction: column;
-  align-items: center;
+  align-content: flex-start;
-  justify-content: space-between;
+  align-items: flex-start;
-  margin: 0;
+  justify-content: flex-start;
+  margin: 5px 0;
   padding: 0;
+  width: 100%;
   list-style: none;
   line-height: 1;
 
   li {
+    flex: 1 0 auto;
     margin: 0;
-    padding: 5px 10px;
+    padding: 0;
+    width: 100%;
+  }
+
+  a {
+    display: block;
+    padding: $gutter 0;
+    text-transform: uppercase;
+    text-decoration: none;
+    letter-spacing: 0.125ch;
+    color: $di-purple;
+    font-weight: 700;
+
+    &:hover,
+    &:active {
+      background-color: $di-purple;
+      color: $copy-light;
+    }
+  }
+}
+
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  .header-menu {
+    margin-left: -$gutter;
+    width: calc(100% + #{$gutter * 2});
+
+    a {
+      padding-right: $gutter;
+      padding-left: $gutter;
+    }
+  }
+}
+
+@media screen and (min-width: $screen-tablet) {
+  .header-menu {
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: space-around;
+
+    li { width: auto; }
+
+    li,
+    a {
+      text-align: center;
+    }
   }
 }

dev/scss/components/_logo-banner.scss

@@ -0,0 +1,3 @@
+.logo-banner {
+  width: 100%;
+}

dev/scss/components/_search-form.scss

@@ -1,24 +1,25 @@
 .search-form {
-  [type="search"],
+  display: flex;
-  [type="text"] {
+  align-content: center;
-    border-radius: 0;
+  align-items: center;
+  justify-content: flex-start;
+  margin: $gutter 0;
+  width: 100%;
+
+  [type="submit"] {
+    flex: 0 0 auto;
+    border-left-width: 0;
+  }
+
+  label {
+    flex: 1 1 auto;
+    width: 100%;
   }
 }
 
 @media screen and (min-width: #{$screen-tablet}) {
   .search-form {
-    display: flex;
-    align-content: center;
-    align-items: center;
     justify-content: flex-end;
-
+    label { max-width: 250px; }
-    [type="submit"] {
-      flex: 0 0 auto;
-    }
-
-    label {
-      flex: 1 1 auto;
-      max-width: 250px;
-    }
   }
 }

dev/scss/components/_social-menu.scss

@@ -4,7 +4,8 @@
   align-items: center;
   justify-content: flex-start;
   margin: 0;
-  padding: 0;
+  padding: $gutter 0;
+  width: 100%;
   list-style: none;
   line-height: 1;
 
@@ -12,5 +13,32 @@
     flex: 0 0 auto;
     margin: 0;
     padding: 2px 8px;
+
+    &:first-of-type {
+      padding-left: 0;
+    }
+  }
+
+  a {
+    text-decoration: none;
+    color: $di-purple;
+    font-size: 14px;
+
+    &:hover,
+    &:active {
+      border-bottom: 1px solid $di-purple;
+      color: $di-purple;
+    }
+  }
+
+
+  footer & {
+    justify-content: flex-end;
+  }
+}
+
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  .social-menu {
+    header & { display: none; }
   }
 }

dev/scss/elements/_inputs.scss

@@ -5,10 +5,21 @@ textarea,
 [type="search"],
 [type="tel"],
 [type="text"] {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0;
+  border-color: $gray-dark;
+  background-color: $white;
   padding: 8px;
   width: 100%;
 }
 
+[type="submit"] {
+  border-color: $gray-dark;
+  background-color: $white;
+  padding: 8px;
+}
+
 .select-wrapper {
   padding: 7px 6px 6px;
   width: 100%;

dev/scss/main.scss

@@ -43,6 +43,7 @@
 //     specific UI components. This is where majority of our work takes place
 //     and our UI components are often composed of Objects and Components
 @import 'components/header-menu';
+@import 'components/logo-banner';
 @import 'components/home-loop';
 @import 'components/global-head';
 @import 'components/search-form';

dev/scss/settings/_colors.scss

@@ -6,3 +6,9 @@ $black: #000;
 $copy-light: $white;
 $copy-gray: $gray-light;
 $copy-dark: $black;
+
+$di-purple: #561eae;
+$di-purple-light: #716f9f;
+
+$di-orange: #f60;
+$di-orange-light: #e68d48;

dev/scss/settings/_variables.scss

@@ -1,12 +1,12 @@
 $container-tablet: 90vw;
 $container-tablet-lg: 810px;
 $container-desktop: 1080px;
-$container-desktop-lg: 1680px;
+$container-desktop-lg: 1080px;
 
 $screen-tablet: 600px;
 $screen-tablet-lg: 900px;
 $screen-desktop: 1200px;
-$screen-desktop-lg: 1800px;
+$screen-desktop-lg: 1200px;
 
 $gutter: 15px;
 

footer.php

@@ -1,4 +1,4 @@
 <footer class="container">
-  <?php ildi_nav('social-menu'); ?>
   <?php get_sidebar('footer-sponsors'); ?>
+  <?php ildi_nav('social-menu'); ?>
 </footer>