SEA-Design-Dev · sheyna · Nov 5, 2014 · Nov 5, 2014 · Nov 5, 2014 · Nov 5, 2014
diff --git a/Sheyna-Galen/.gitignore b/Sheyna-Galen/.gitignore
@@ -0,0 +1,37 @@
+# Compiled source #
+###################
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+# Packages #
+############
+# it's better to unpack these files and commit the raw source
+# git has its own built in compression methods
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Logs and databases #
+######################
+*.log
+*.sql
+*.sqlite
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
diff --git a/Sheyna-Galen/Index.html b/Sheyna-Galen/Index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Kenyon Institute</title>
+    <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/style.css">
+  </head>
+
+  <body>
+
+    <header>
+      <nav class="main-nav color3">
+        <ul>
+          <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 col_3_of_3">
+      <h1 class="hero__title">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>
+
+    <article class="feature col_3_of_3">
+      <h1 class="headline-subhead">Programs</h1>
+
+      <section class="feature__box color1 col_1_of_3">
+        <h2>Sample Header</h2>
+        <h3><time datetime="2014-11-03">November 3, 2014</time></h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing
+          elit. Maecenas in mi urna. Phasellus rhoncus tempor
+          velit, vitae finibus felis.</p>
+        <img src="img/icon1.gif">
+      </section>
+
+      <section class="feature__box color2 col_1_of_3">
+        <h2>Sample Header</h2>
+        <h3><time datetime="2014-11-03">November 3, 2014</time></h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing
+          elit. Maecenas in mi urna. Phasellus rhoncus tempor
+          velit, vitae finibus felis.</p>
+        <img src="img/icon2.gif">
+      </section>
+
+      <section class="feature__box color3 col_1_of_3">
+        <h2>Sample Header</h2>
+        <h3><time datetime="2014-11-03">November 3, 2014</time></h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing
+          elit. Maecenas in mi urna. Phasellus rhoncus tempor
+          velit, vitae finibus felis.</p>
+        <img src="img/icon3.gif">
+      </section>
+    </article>
+
+    <form class="sign-up">
+      <label for="email" class="headline-subhead clearfix">
+        Sign up to receive more information</label>
+      <input class="sign-up__field" id="email" type="email" placeholder="Email">
+      <button type="submit" class="sign-up__btn">Sign Up</button>
+    </form>
+
+    <section class="feature col_4_of_4">
+      <h1 class="headline-subhead">feature and Speakers</h1>
+
+      <figure class="profile col_1_of_4">
+        <img src="img/professor_smith.jpg"/>
+        <figcaption>Professor Name</figcaption>
+        <p>Professor Title and Department</p>
+      </figure>
+
+      <figure class="profile col_1_of_4">
+        <img src="img/professor_davis.jpg"/>
+        <figcaption>Professor Name</figcaption>
+        <p>Professor Title and Department</p>
+      </figure>
+
+      <figure class="profile col_1_of_4">
+        <img src="img/professor_keller.jpg"/>
+        <figcaption>Professor Name</figcaption>
+        <p>Professor Title and Department</p>
+      </figure>
+
+      <figure class="profile col_1_of_4">
+        <img src="img/professor_green.jpg"/>
+        <figcaption>Professor Name</figcaption>
+        <p>Professor Title and Department</p>
+      </figure>
+    </section>
+
+  </body>
+</html>
diff --git a/Sheyna-Galen/README.md b/Sheyna-Galen/README.md
@@ -0,0 +1,21 @@
+#Refactor Another Team's Project
+###Sheyna and Galen's refactor of Loann and Marissa's Core CSS Site
+
+For Code Fellow's UX/Front End Accelerator.
+Images from [morguefile.com](morguefile.com)
+
+##Major Changes
+- CSS Formatting
+  - Fixed spacing in rule and property declarations
+  - Updated commented section names
+- Fix BEM
+  - Change class names to be more semantic - ie .main into .hero
+  - Removed complex class names that could be easily accessed by selector - ie .profile__header into .profile figcaption
+- Class Compression
+  - Combined redundant numbered classes
+  - Made class for page subheaders
+  - Cleaned up .feature and made it more modular (modifies both Events and Profile sections)
+  - Anonymized the Color classes into .color1, .color2, .color3
+- Cosmetic
+  - Add images to .feature boxes
+  - Change Form Submit Button
diff --git a/Sheyna-Galen/css/reset.css b/Sheyna-Galen/css/reset.css
@@ -0,0 +1,48 @@
+/* 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;
+}
+body {
+	line-height: 1;
+}
+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;
+}