Trying out Sass

Safa- Levi/Day2/css/base.css

@@ -0,0 +1,34 @@
+
+
+/*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;
+}

Safa- Levi/Day2/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;
+}

Safa- Levi/Day2/css/module.css

@@ -0,0 +1,188 @@
+.headline-subhead {
+  text-align: center;
+  padding-bottom: 1.5em;
+  text-transform: uppercase;
+  font-size: 1.25em;
+  color: gray;
+}
+
+/* nav */
+
+.main-nav__item a {
+  text-align: center;
+  padding: 0.2em;
+  color: white;
+  font-size: 1.5em;
+  border-radius: .3em;
+}
+
+.main-nav__item a:hover {
+  background-color: MediumOrchid;
+}
+
+/* hero */
+
+.hero {
+  color: white;
+  text-align: center;
+  padding: 5% 0;
+  margin-bottom: 4.5em;
+}
+
+.hero__title {
+  font-size: 5em;
+}
+
+.hero__text {
+  font-size: 1em;
+  line-height: 1.5em;
+  max-width: 38em;
+  margin: auto;
+}
+
+/* feature */
+
+.feature {
+  text-align: center;
+  display: block;
+  padding-bottom: 4.5em;
+}
+
+.feature__box {
+  padding: 3%;
+  color: white;
+  display: inline-block;
+  font-size: 1em;
+}
+
+.feature__box h1 {
+  font-size: 1.3em;
+  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+  font-weight: bold;
+  color: MediumOrchid;
+}
+
+.feature__box h2 {
+  margin: 0.4em auto;
+}
+
+/* form section */
+
+.field-with-button{
+  text-align: center;
+  display: block;
+  cursor: pointer;
+}
+
+.input-field {
+  margin-top: 1.25em;
+  font-size: 1.25em;
+  padding: .125em;
+}
+
+.search-button{
+  font-size: 1em;
+}
+
+/* profile section */
+
+.profile {
+  color: gray;
+  padding-bottom: 1.5em;
+}
+
+.profile figcaption {
+  margin-top: .1875em;
+  line-height: 1.5em;
+  font-weight: bold;
+}
+
+.profile img {
+  margin: 0 auto;
+  max-width: 12.5em;
+}
+
+/*footer*/
+
+.citation {
+  padding: 1.5em 0 4em 0;
+  text-align: center;
+  font-size: 0.8em;
+}
+
+.citation p:first-of-type {
+  padding-top: 0.8em;
+}
+
+/*Vector Images*/
+
+.vectorImage {
+  margin: 0.6em 0 -0.6em 0;
+}
+
+.windowIconRear,
+.windowIconFront,
+.arrowIcon-1,
+.arrowIcon-2 {
+  fill: white;
+}
+
+.bellIconOutline,
+.windowIconFront:hover,
+.arrowIcon-1:hover {
+  fill: MediumOrchid;
+}
+
+.arrowIcon-2:hover {
+  fill: MediumSeaGreen;
+}
+
+.bellIconFill {
+  fill: LemonChiffon;
+}
+
+.windowIconRear:hover,
+.bellIconFill:hover {
+  fill: SkyBlue;
+}
+
+/*Images*/
+
+.profGreen {
+  content: url('../img/professor_green_1x.jpg');
+}
+
+.profDavis {
+  content: url('../img/professor_davis_1x.jpg');
+}
+
+.profSmith {
+  content: url('../img/professor_smith_1x.jpg');
+}
+
+.profKeller {
+  content: url('../img/professor_keller_1x.jpg');
+}
+
+/* Color */
+
+.color1 {
+  background-color: SkyBlue;
+}
+
+.color2 {
+  background-color: LemonChiffon;
+  color: gray;
+}
+
+.color3 {
+  background-color: MediumSeaGreen;
+}
+
+.color4 {
+  background-color: whitesmoke;
+}
+
+.color5 {
+  background-color: MediumOrchid;
+}

Safa- Levi/Day2/css/state.css

@@ -0,0 +1,55 @@
+/*Responsive Grid Media Queries*/
+
+@media (min-width: 480px) {
+  .col {
+    margin: 1% 0.5% 1% 0.5%;
+  }
+
+  .span_3_of_3 {
+  width: 100%;
+  }
+
+  .span_2_of_3 {
+    width: 66.13%;
+  }
+
+  .span_1_of_3 {
+    width: 32.26%;
+  }
+
+  .span_4_of_4 {
+    width: 100%;
+  }
+
+  .span_3_of_4 {
+    width: 74.6%;
+  }
+
+  .span_2_of_4 {
+    width: 49.2%;
+  }
+
+  .span_1_of_4 {
+    width: 23.8%;
+  }
+}
+
+/*Retina Images*/
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .profGreen {
+    content: url('../img/professor_green_2x.jpg');
+  }
+
+  .profDavis {
+    content: url('../img/professor_davis_2x.jpg');
+  }
+
+  .profSmith {
+    content: url('../img/professor_smith_2x.jpg');
+  }
+
+  .profKeller {
+    content: url('../img/professor_keller_2x.jpg');
+  }
+}

Safa- Levi/Day2/css/typography.css

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: 'icomoon';
+  src:url('fonts/icomoon.eot?8fdye');
+  src:url('fonts/icomoon.eot?#iefix8fdye') format('embedded-opentype'),
+  url('fonts/icomoon.woff?8fdye') format('woff'),
+  url('fonts/icomoon.ttf?8fdye') format('truetype'),
+  url('fonts/icomoon.svg?8fdye#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  font-family: 'icomoon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+}
+
+.icon-search:before {
+  content: "\e600";
+}