SEA-Design-Dev · gkbroderick · Nov 6, 2014 · Nov 6, 2014 · Nov 6, 2014 · Nov 6, 2014
diff --git a/Galen-Sheyna/GalenChange.md b/Galen-Sheyna/GalenChange.md
@@ -0,0 +1,14 @@
+#Galen Weekend Changes
+
+-Switched to Progressive enhancement version of Responsive Grid
+  -MAJOR Changes to Layout.css and state.css
+  -Swapped column margins only
+  -Swapped Span parameters
+  -Refactored layout.css Spans
+
+-Flexbox (in Layout.css)
+  -Added webkit vendor prefixes for Safari
+
+-Module.css
+  -Refactored Footer (unnec p selector)
+
diff --git a/Galen-Sheyna/Index.html b/Galen-Sheyna/Index.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Kenyon Institute</title>
+    <link rel="stylesheet" href="css/base.css">
+    <link rel="stylesheet" href="css/layout.css">
+    <link rel="stylesheet" href="css/module.css">
+    <link rel="stylesheet" href="css/state.css">
+    <link rel="stylesheet" href="css/typography.css">
+  </head>
+  <body>
+    <header class="color3">
+      <nav>
+        <ul class="main-nav">
+          <li class="main-nav__item">
+            <a href="#">Kenyon Institute</a></li>
+          <li class="main-nav__item">
+            <a href="#">Programs</a></li>
+          <li class="main-nav__item">
+            <a href="#">The Institute</a></li>
+          <li class="main-nav__item">
+            <a href="#">The Campus</a></li>
+          <li class="main-nav__item">
+            <a href="#">Request Info</a></li>
+        </ul>
+      </nav>
+    </header>
+    <section class="hero color5">
+      <h1 class="hero__title" tabindex="0">Main Introduction</h1>
+      <p class="hero__text">Lorem ipsum dolor sit amet,
+        consectetur adipiscing elit. Maecenas in mi urna.
+        Phasellus rhoncus tempor velit, vitae finibus felis.
+        Vestibulum tempor justo ante, a tincidunt purus
+        dignissim eu. Quisque maximus ut lorem suscipit
+        molestie. Nullam interdum ante et maximus varius.
+        Cum sociis natoque penatibus et magnis dis parturient
+        montes, nascetur ridiculus mus. Proin interdum tellus
+        tortor, sit amet placerat lectus gravida quis.</p>
+    </section>
+    <main>
+      <section class="feature section clearfix">
+        <h1 class="headline-subhead" tabindex="0">Programs</h1>
+        <article class="feature__box color1 col span_1_of_3">
+          <h1>Sample Header</h1>
+          <h2><time datetime="2014-11-03">November 3, 2014</time></h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Maecenas in mi urna. Phasellus rhoncus tempor
+            velit, vitae finibus felis. <a href="#">Read More...</a></p>
+          <a href="#">
+            <figure class="vectorImage">
+              <svg xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 578.621 390.559">
+                <path class="arrowIcon-1"
+                  d="M3.438 187.25l69.375-69.375v55.5h41.625v27.75H72.812v55.5L3.438 187.25zM133 173.375h36.938v27.75H133V173.375zM188.5 173.375h36.938v27.75H188.5V173.375zM244 173.375h36.938v27.75H244V173.375z"/>
+                <path class="arrowIcon-1"
+                  d="M253.188 201.125H216.25v-27.75h36.938V201.125zM308.688 201.125H271.75v-27.75h36.938V201.125zM364.188 201.125H327.25v-27.75h36.938V201.125zM424.375 256.625v-55.5H382.75v-27.75h41.625v-55.5l69.375 69.375L424.375 256.625z"/>
+                <path class="arrowIcon-2"
+                  d="M505.246 30.5l69.375 69.375h-55.5V141.5h-27.75V99.875h-55.5L505.246 30.5zM519.121 160.063V197h-27.75v-36.938H519.121zM519.121 215.563V252.5h-27.75v-36.938H519.121zM519.121 271.063V308h-27.75v-36.938H519.121z"/>
+              </svg>
+            </figure>
+          </a>
+        </article>
+        <article class="feature__box color2 col span_1_of_3">
+          <h1>Sample Header</h1>
+          <h2><time datetime="2014-11-03">November 3, 2014</time></h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Maecenas in mi urna. Phasellus rhoncus tempor
+            velit, vitae finibus felis. <a href="#">Read More...</a></p>
+          <a href="#">
+            <figure class="vectorImage">
+              <svg xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 578.621 390.559">
+                <path class="bellIconFill"
+                  d="M286.333 141.296c-11.65 0.621-25-2-22.667 11.333s17.667 9.667 17.667 9.667 -11 3-29.667 6 -46.667 4-67.667 33 -12 37.333-17.333 42.667 -17 7.333-19 16 16.667 18.333 57.667 20 132.667 4.667 157 1.667 61.333-6.667 61.667-15.333 -0.333-11-7.667-16.333 -9.667-8.333-14.333-20.667 -9.667-33-32.667-44.667 -41.66-17.607-74-20c0.333-5.667 7.333-9.667 8.667-13.333S303.812 140.365 286.333 141.296zM156.65 170.734l-56.255-52.962 10.977-13.172L156.65 170.734zM206.044 108.991l-39.241-66.408 10.978-8.781L206.044 108.991zM290.016 15.416l-7.959 77.109 -6.037-77.109H290.016zM406.092 42.583l-39.24 66.408 28.265-75.189L406.092 42.583zM472.5 117.772l-56.255 52.962 45.278-66.134L472.5 117.772z"/>
+                <path class="bellIconOutline"
+                  d="M450.82 337.811c0 7.136-3.113 11.346-9.33 12.623 -39.151 8.232-90.831 12.35-155.044 12.35 -69.521 0-121.565-4.117-156.143-12.35 -6.406-1.462-9.604-5.668-9.604-12.623 0-8.413 3.108-13.445 9.33-15.093 0.913-16.28 8.322-28.17 22.228-35.674v-10.428c-6.771-1.462-10.153-5.668-10.153-12.623 0-9.511 7.135-17.288 21.404-23.325 4.939-27.99 17.104-48.112 36.497-60.371 15.367-9.879 38.508-16.096 69.427-18.66 -6.955-2.744-10.428-6.86-10.428-12.349 0-8.413 8.138-12.623 24.423-12.623 17.014 0 25.521 4.21 25.521 12.623 0 5.487-3.387 9.604-10.153 12.349 31.463 2.564 55.247 8.781 71.349 18.66 20.854 12.443 33.752 32.565 38.691 60.371 13.536 5.488 20.307 13.631 20.307 24.423 0 4.391-3.293 8.143-9.879 11.251v10.428c14.085 7.685 21.494 19.668 22.229 35.948C447.707 324.184 450.82 329.214 450.82 337.811zM417.067 262.896c0-4.391-3.662-8.231-10.978-11.524 -33.847 3.478-76.562 5.214-128.151 5.214 -50.492 0-86.535-2.834-108.119-8.507 -1.098 0.732-5.124 2.563-12.074 5.487 -3.478 1.467-5.214 3.843-5.214 7.136 0 11.345 41.162 17.014 123.486 17.014C370.048 277.714 417.067 272.774 417.067 262.896zM266.139 169.869c-28.175 2.38-48.666 7.868-61.469 16.465 -14.818 10.062-25.615 27.899-32.381 53.511l17.288 2.195c1.462-19.024 10.059-35.125 25.795-48.297C228.909 182.218 245.833 174.26 266.139 169.869zM265.59 171.79c-34.761 18.66-52.688 42.809-53.785 72.444l6.586 0.823c2.195-18.66 6.586-33.02 13.172-43.083C238.149 191.917 249.49 181.854 265.59 171.79zM400.876 243.138c-6.955-28.903-20.95-49.12-41.985-60.646 -17.562-9.694-42.354-14.176-74.366-13.446 -0.917 0-5.947 0.274-15.093 0.823 -26.893 19.758-39.975 43.083-39.241 69.976l0.274 6.312c17.743 1.281 32.93 1.921 45.553 1.921C299.982 248.077 341.604 246.431 400.876 243.138zM300.715 147.916c0-2.011-5.763-3.02-17.288-3.02 -10.612 0-15.916 1.009-15.916 3.02 0 4.938 5.488 7.409 16.465 7.409C295.133 155.325 300.715 152.855 300.715 147.916z"/>
+              </svg>
+            </figure>
+          </a>
+        </article>
+        <article class="feature__box color3 col span_1_of_3">
+          <h1>Sample Header</h1>
+          <h2><time datetime="2014-11-03">November 3, 2014</time></h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Maecenas in mi urna. Phasellus rhoncus tempor
+            velit, vitae finibus felis. <a href="#">Read More...</a></p>
+          <a href="#">
+            <figure class="vectorImage">
+              <svg xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 578.621 390.559">
+                <path class="windowIconRear"
+                  d="M482.5 235.625h-95.25l-53.439-72.346L196.75 140.375v-127H482.5V235.625zM450.75 203.875v-127H228.5v63.5l105.311 22.904 53.439 40.596H450.75z"/>
+                <path class="windowIconFront"
+                  d="M387.25 362.625H101.5v-222.25h285.75V362.625zM355.5 330.875v-127H133.25v127H355.5zM387.25 140.375"/>
+              </svg>
+            </figure>
+          </a>
+        </article>
+      </section>
+      <section class="feature clearfix">
+        <form class="field-with-button">
+          <label for="email" class="headline-subhead clearfix" tabindex="0">
+            Sign up to receive more information</label>
+          <input class="input-field" id="email" type="email" placeholder="Email">
+          <button type="submit">Sign Up</button>
+        </form>
+      </section>
+      <section class="feature clearfix">
+        <h1 class="headline-subhead" tabindex="0">Feature and Speakers</h1>
+        <figure class="profile col span_1_of_4">
+          <img class="profSmith">
+          <figcaption>Professor Name</figcaption>
+          <p>Professor Title and Department</p>
+        </figure>
+        <figure class="profile col span_1_of_4">
+          <img class="profDavis">
+          <figcaption>Professor Name</figcaption>
+          <p>Professor Title and Department</p>
+        </figure>
+        <figure class="profile col span_1_of_4">
+          <img class="profKeller">
+          <figcaption>Professor Name</figcaption>
+          <p>Professor Title and Department</p>
+        </figure>
+        <figure class="profile col span_1_of_4">
+          <img class="profGreen">
+          <figcaption>Professor Name</figcaption>
+          <p>Professor Title and Department</p>
+        </figure>
+      </section>
+    </main>
+    <footer class="citation color4">
+      <form class="field-with-button">
+        <label for="search"></label>
+        <input class="input-field" id="search" type="search" placeholder="Search">
+        <button type="submit" class="search-button icon-search"></button>
+      </form>
+      <p>Page by Loann and Marissa</p>
+      <p>Refactored by Galen and Sheyna</p>
+    </footer>
+  </body>
+</html>
diff --git a/Galen-Sheyna/README.md b/Galen-Sheyna/README.md
@@ -0,0 +1,23 @@
+#Advanced CSS, Layout and Design
+###Sheyna and Galen's redesign of Loann and Marissa's Core CSS Site
+
+For Code Fellow's UX/Front End Accelerator.
+Images from [morguefile.com](morguefile.com)
+
+
+##Changes from 'Responsive and Assets' Assignment
+- Add Inline SVG with hover pseudo selectors
+- Add Retina scale images (and image classes) and state.css media query to display
+- Take out Skeleton 960 and place Responsive Grid back
+- Alter Responsive Grid to be Mobile-First
+- Move Reset.css into base.css
+- Add general links and link styling
+- Change Article Headers to H1
+
+##Changes from 'Refactor' Assignment
+- Nav is now Flexbox
+- Added Skeleton 960 grid system to Main section
+- Separated out CSS into a more SMACSS breakdown / general refactor
+- Made a more generalized form module
+- Add footer and search bar
+- Use icon font of search magnifying glass
diff --git a/Galen-Sheyna/css/base.css b/Galen-Sheyna/css/base.css
@@ -0,0 +1,83 @@
+/* Meyer's Reset
+http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/*Base Styles*/
+
+* {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;}
+
+body {
+  font-size: 1em;
+  line-height: 1;
+}
+
+button {
+  background-color: MediumOrchid;
+  font-size: 1.25em;
+  color: white;
+}
+
+img {
+  display: block;
+  width: 100%;
+}
+
+a {
+  text-decoration: none;
+  color: MediumOrchid;
+}
+
+a:hover,
+a:visited {
+  color: #8a2aa2;
+}
diff --git a/Galen-Sheyna/css/fonts/icomoon.eot b/Galen-Sheyna/css/fonts/icomoon.eot
diff --git a/Galen-Sheyna/css/fonts/icomoon.svg b/Galen-Sheyna/css/fonts/icomoon.svg
diff --git a/Galen-Sheyna/css/fonts/icomoon.ttf b/Galen-Sheyna/css/fonts/icomoon.ttf
diff --git a/Galen-Sheyna/css/fonts/icomoon.woff b/Galen-Sheyna/css/fonts/icomoon.woff
diff --git a/Galen-Sheyna/css/layout.css b/Galen-Sheyna/css/layout.css
@@ -0,0 +1,75 @@
+/*Flex*/
+
+.main-nav {
+  padding: 1.5% 0;
+  display: -webkit-flex;
+  -webkit-flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -webkit-justify-content: space-around;
+  -webkit-align-items: baseline;
+  -webkit-align-content: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: baseline;
+  align-content: center;
+}
+
+.main-nav__item {
+  padding: 1% 1.5%;
+  -webkit-flex: 0, 1, auto;
+  -webkit-align-self: auto;
+  flex: 0, 1, auto;
+  align-self: auto;
+}
+
+/*Responsive Grid - Dividers*/
+
+.section {
+  clear: both;
+  padding: 0px;
+  margin: 0px;
+}
+
+.col {
+  display: block;
+  float:left;
+  margin: 1% 0 1% 0%;
+}
+
+.col:first-child {
+  margin-left: 0;
+}
+
+/*Spans - Progressive Enhancement Version*/
+
+.span_3_of_3,
+.span_2_of_3,
+.span_1_of_3,
+.span_4_of_4,
+.span_3_of_4,
+.span_2_of_4,
+.span_1_of_4 {
+  width: 100%;
+}
+
+/* clearing */
+
+.clearfix:before,
+.clearfix:after {
+  content: '\0020';
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.clearfix {
+  zoom: 1;
+}