Casey, Monica & Henok Sass 101

readme.md

@@ -1,71 +1,4 @@
 # UXE - Sass 101
-
-- Getting through this week we will be 100% using Sass. CSS is now dead to us. To make this transition, you need to complete the following tasks:
-  - Get Sass installed, either the Ruby or C version.
-  - Be able to run Sass and process to CSS
-  - Choose a project that we will start converting to Sass
-  - Review all exercises [http://coderecipez.roughdraft.io/](http://coderecipez.roughdraft.io/)
-
-- To turn in this assignment:
-  - Clone the repo and place project you will convert to Sass inside
-
-
-## Submitting assignments
-
-Submitting assignments for this course will require leveraging some of the more advanced features of Github. These features will not only improve your knowledge of Git and Github, but also provide practice exercises for working on a distributed project with a large team.
-
-## How to submit an assignment
-
-In order to submit assignments, please use the following steps
-
-1. [Fork this repo][1] so that you have a working version
-1. [Clone the forked repo][2] to your local computer
-1. Create a folder named with your name, example `dale-sande`
-1. Once completed with your assignment, commit code to the master branch and push to Github `git push origin master`
-1. From __your fork__ of the project, initiate a pull request to the parent repo
-
-## Assignment review
-
-When a pull request is initiated, I will be notified of the update and comment on the submitted assignment via Github tools.
-
-## Keeping your local repo up to date
-Your local repo will be an independent version of the original repo from the moment you fork the repo. In order to keep your local repo up to date with the original repo, you need to do what is called an [upstream pull][3].
-
-To manage an upstream pull, I suggest updating your `.bash_profile` and your `.gitconfig` file with easy to remember aliases.
-
-### .bash_profile
-
-In your `.bash_profile` add the following alias
-
-```
-alias upstream="git remote add upstream \$@"
-```
-
-From the command line you simply need to refer to the alias and add the path to the upstream repo as shown in the following example.
-
-```
-$ upstream https://github.com/blackfalcon/unicorn-class-css-section.git
-```
-
-Once the upstream repo is configured for your local repo, this never needs to be reset again, unless you delete your local repo.
-
-### .gitconfig
-In your `.gitconfig` add the following alias
-
-```
-[alias]
-  pu = !"git fetch origin -v; git fetch upstream -v; git merge upstream/master"
-```
-
-From the command line, within the project repo, enter the following command to pull latest code from the upstream master.
-
-```
-git pu
-```
-
-
-
-
-[1]:https://help.github.com/articles/fork-a-repo
-[2]:https://help.github.com/articles/fork-a-repo#step-2-clone-your-fork
-[3]:https://help.github.com/articles/syncing-a-fork
+##Sass 101 Assignment
+###Collaborators: Henok, Casey and Monica
+####Nested appropriate selectors and created variables for multiple selectors

sass_assignment.scss

@@ -0,0 +1,148 @@
+//colors
+$white: #ffffff;
+$black: black;
+$gray: #999999;
+$orange: #ff6600;
+$tan: #ff944c;
+$red: #7f3300;
+$green: #aac8b0;
+$brown: #7F3300;
+$bg-color: #FFFFFF;
+
+//fonts
+$font_0: Constantia;
+$font_1: Lucida Bright;
+$font_2: DejaVu Serif;
+$font_3: Georgia;
+$font_4: serif;
+
+//style
+$height_a: auto;
+$width_a: auto;
+$text_decor: none;
+$text_decor_line: underline;
+$font_weight_b: bold;
+$display_b: block;
+$margin_t: .5em;
+
+
+@charset "utf-8";
+title {
+  font-style: italic;
+  font-weight: $font_weight_b;
+  font-size: .8em;
+}
+.responsive-image {
+  height: $height_a;
+  width: $width_a;
+}
+.responsive-imagetwo {
+  height: $height_a;
+  width: $width_a;
+  padding-top: .05px;
+}
+.main {
+  width: 50%;
+  min-width: 740px;
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: $bg-color;
+}
+p {
+  color: $black;
+  font-family: $font_0, $font_1, $font_2, $font_3, $font_4;
+  font-style: normal;
+  font-weight: 400;
+}
+article {
+  padding-right: 20px;
+  width:$width_a;
+  float: right;
+  height: $height_a;
+}
+figure {
+  display: $display_b;
+  margin-top: $margin_t;
+  width: $width_a;
+  padding-left: 1em;
+  img {
+    padding: 10px;
+    box-shadow: 1px 1px 15px $gray;
+  }
+}
+figcaption {
+  font-size: 0.875em;
+  font-weight: $font_weight_b;
+  text-align: center;
+  display: $display_b;
+  margin-top: $margin_t;
+  width: $width_a;
+  padding-bottom: 2em;
+}
+footer {
+  padding-top: 105px;
+  padding-bottom: 6px;
+  padding-left: 2%;
+  background-color: $bg-color;
+  color: $black;
+  clear: left;
+  font-size: .8em;
+}
+a {
+  font-weight: $font_weight_b;
+  text-decoration: $text_decor;
+  &:link {
+    color: $orange;
+  }
+  &:visited {
+    color: $tan;
+  }
+  &:hover {
+    color: $red;
+    text-decoration: $text_decor_line;
+  }
+  &:active {
+    color: $red;
+    text-decoration: $text_decor_line;
+  }
+  &:focus {
+    color: $red;
+    text-decoration: $text_decor_line;
+  }
+}
+.table {
+  display: table;
+  margin: 0 auto;
+}
+.thispage {
+  height: $height_a;
+  width: $width_a;
+}
+ul#horizontal-list {
+  min-width: 696px;
+  list-style: none;
+  padding-top: 20px;
+  li {
+    display: inline;
+    margin: 45px;
+  }
+}
+nav a {
+  &:hover {
+    background-color: $green;
+    text-decoration: $text_decor;
+  }
+  &:active {
+    background-color: $green;
+    text-decoration: $text_decor;
+  }
+  &:focus {
+    background-color: $green;
+    text-decoration: $text_decor;
+  }
+  &.thispage {
+    background-color: $green;
+    text-decoration: $text_decor;
+  }
+}