SEA-Design-Dev · MarissaFelitto · Nov 25, 2014 · Nov 25, 2014 · Dec 1, 2014
diff --git a/read_me.md b/read_me.md
@@ -0,0 +1,5 @@
+#Intro to SASS
+
+## Shane and Marissa - 11/25/14
+
+Took Casey and Henok's CSS and converted to SASS
diff --git a/shane-marissa/index.html b/shane-marissa/index.html
@@ -0,0 +1,120 @@
+<DOCTYPE html>
+<html>
+  <head>
+  <link href='http://fonts.googleapis.com/css?family=Arimo:700italic' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="sass/main.css">
+  <link rel="stylesheet" href="sass/buttons/buttons.css">
+  <link rel="stylesheet" href="sass/components/album.css">
+  <link rel="stylesheet" href="sass/components/header.css">
+  <link rel="stylesheet" href="sass/components/wrapper.css">
+  <link rel="stylesheet" href="sass/layout/reset.css">
+
+  <meta charset='utf-8'>
+  <title>Top Albums</title>
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1 class="header">Team Florida's Current Music Picks</h1>
+        <p></p>
+      </header>
+      <div class="wrapper">
+      <section>
+        <header>
+          <h1 class="title">Henok's Top Five Of The Moment</h1>
+        </header>
+        <article class="albums">
+          <figure>
+            <img src="http://thissongissick.com/wp-content/uploads/2014/10/Run-The-Jewels.jpg" alt="Run The Jewels 2" class="winner">
+            <figcaption>Run The Jewels - Run The Jewels 2</figcaption>
+          </figure>
+          <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
+          <button><a href="https://www.youtube.com/watch?v=Hd1dTrFdZkA">Find</a></button>
+        </article>
+        <article class="albums">
+          <figure>
+            <img src="http://cdn4.pitchfork.com/news/55815/fc741210.jpg" alt="Black Moon Spell" class="winner">
+            <figcaption>King Tuff - Black Moon Spell</figcaption>
+          </figure>
+          <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
+          <button><a href="https://www.youtube.com/watch?v=9ufWAU8RjC8">Find</a></button>
+        </article>
+        <article class="albums">
+          <figure>
+            <img src="http://www.aux.tv/wp-content/uploads/2014/04/freddie-gibbs-madlib-pinata.jpg" alt="Pinata" class="winner">
+            <figcaption>Freddie Gibbs & Madlib - Pinata</figcaption>
+          </figure>
+          <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
+          <button><a href="https://www.youtube.com/watch?v=98nUZ938oiU">Find</a></button>
+        </article>
+      </div>
+      <div class="wrapper">
+        <article class="albums">
+          <figure>
+            <img src="http://cdn4.pitchfork.com/news/53290/1e766e86.jpg" alt="Present Tense" class="winner">
+            <figcaption>Wild Beasts - Present Tense</figcaption>
+          </figure>
+          <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
+          <button><a href="https://www.youtube.com/watch?v=9IIbbFIQTKI&list=PLaXEUnRhowO5T2vMgPCrH0XjBnyIeyml2">Find</a></button>
+        </article>
+        <article class="albums">
+          <figure>
+            <img src="http://www.rockleak.com/uploads/posts/2014-07/1406054962_hippiesabotage-sunny-cover.jpg" alt="Sunny" class="winner">
+            <figcaption>Hippie Sabotage - Sunny</figcaption>
+          </figure>
+          <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
+          <button><a href="https://www.youtube.com/watch?v=zfnyoKu7ptw&list=PLQ83U7ao7jjBC1A5WNEdxxhEl8pmdbGXN">Find</a></button>
+        </article>
+      </div>
+      </section>
+      <div class="wrapper">
+      <section>
+        <header>
+          <h1 class="title">Casey's Five Picks Of The Moment</h1>
+        </header>
+        <article class="albums">
+         <figure>
+         <img src="http://s26.postimg.org/3peaa76e1/subli.png" alt="Sublime" class="winner"/>
+         <figcaption>Sublime - Sublime</figcaption>
+         <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
+         <button><a href="https://www.youtube.com/watch?v=HkMNOlYcpHg">Find</a></button>
+        </article>
+
+        <article class="albums">
+         <figure>
+         <img src="http://s26.postimg.org/hx3yyuj2x/psy.png" alt="Hangover" class="winner"/>
+         <figcaption>PSY & Snoop - Hangover</figcaption>
+         <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
+         <button><a href="https://www.youtube.com/watch?v=HkMNOlYcpHg">Find</a></button>
+        </article>
+
+        <article class="albums">
+         <figure>
+         <img src="http://s26.postimg.org/w8ivq0bvd/yeez.png" alt="Mercy" class="winner"/>
+         <figcaption>Kanye West - Mercy</figcaption>
+         <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
+         <button><a href="https://www.youtube.com/watch?v=7Dqgr0wNyPo">Find</a></button>
+        </article>
+        </div>
+        <div class="wrapper">
+         <article class="albums">
+         <figure>
+         <img src="http://s26.postimg.org/k2y9tcmjd/image.png" alt="Enjoy The Silence" class="winner"/>
+         <figcaption>Depeche Mode - Enjoy The Silence</figcaption>
+         <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
+         <button><a href="https://www.youtube.com/watch?v=m0AKJMGxwpE">Find</a></button>
+        </article>
+
+        <article class="albums">
+         <figure>
+         <img src="http://s26.postimg.org/e3aipp1qx/flo.png" alt="Wild Ones" class="winner"/>
+         <figcaption>Flo Rida - Wild Ones</figcaption>
+         <p class="Lorem">description ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.</p>
+         <button><a href="https://www.youtube.com/watch?v=bpOR_HuHRNs">Find</a></button>
+        </article>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/shane-marissa/sass/buttons/buttons.css b/shane-marissa/sass/buttons/buttons.css
diff --git a/shane-marissa/sass/buttons/buttons.css.map b/shane-marissa/sass/buttons/buttons.css.map
diff --git a/shane-marissa/sass/buttons/buttons.sass b/shane-marissa/sass/buttons/buttons.sass
@@ -0,0 +1,19 @@
+@import '../color/color'
+@import '../color/mixin'
+@import '../color/function'
+
+button
+  @include base-gradient(top left, $button-gradient...)
+  margin-left: auto
+  margin-right: auto
+  display: block
+  height: 3.125em
+  width: 3.125em
+  border-radius: 3.125em
+  border: 0.063em solid $primary-color
+  cursor: pointer
+  color: $secondary-color
+  a:link
+    color: $secondary-color
+  a:visited
+    color: $visited-color
diff --git a/shane-marissa/sass/color/_color.sass b/shane-marissa/sass/color/_color.sass
@@ -0,0 +1,13 @@
+$primary-color: #000000
+
+$secondary-color: #ffffff
+
+$button-gradient: (#959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%)
+
+$text-gradient: (#aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%)
+
+$header-gradient: (#eeeeee, #333333)
+
+$accent-color: #959595
+
+$visited-color: #ff0000
diff --git a/shane-marissa/sass/color/_function.scss b/shane-marissa/sass/color/_function.scss
@@ -0,0 +1,15 @@
+@function get-list-value($list, $place: first) {
+  @if $place == first {
+    $group: nth($list, 1);
+    $first-object: nth($group, 1);
+
+    @return $first-object
+  } @else if $place == last {
+    $group: nth($list, length($list));
+    $last-object: nth($group, 1);
+
+    @return $last-object
+  } @else {
+    @return 'this is an invalid option'
+  }
+}
diff --git a/shane-marissa/sass/color/_mixin.scss b/shane-marissa/sass/color/_mixin.scss
@@ -0,0 +1,13 @@
+// ----
+// libsass (v3.0.1)
+// ----
+
+@mixin base-gradient ($direction, $colors ...) {
+  $startColorstr: get-list-value($colors);
+  $endColorstr: get-list-value($colors, last);
+
+  background-color: $startColorstr;
+  background-image: linear-gradient(to #{$direction}, $colors);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#{ie-hex-str($startColorstr)}',
+  endColorstr = '#{ie-hex-str($endColorstr)}', GradientType = 0);
+}
diff --git a/shane-marissa/sass/components/album.css b/shane-marissa/sass/components/album.css
diff --git a/shane-marissa/sass/components/album.css.map b/shane-marissa/sass/components/album.css.map
diff --git a/shane-marissa/sass/components/album.sass b/shane-marissa/sass/components/album.sass
@@ -0,0 +1,24 @@
+@import '../typography/typography'
+@import '../color/color'
+@import '../color/mixin'
+@import '../color/function'
+
+.albums
+  width: 23.75em
+  height: 37.5em
+  display: inline-block
+  background: transparent
+
+  .winner
+    width: 18.75em
+
+  figcaption
+    @include base-gradient(top right, $text-gradient...)
+    padding: .313em
+    border: .188em solid $accent-color
+    text-align: center
+    word-wrap: normal
+    // background: $text-gradient
+    font-family: $caption-font
+    // opacity: .75
+
diff --git a/shane-marissa/sass/components/header.css b/shane-marissa/sass/components/header.css
diff --git a/shane-marissa/sass/components/header.css.map b/shane-marissa/sass/components/header.css.map
diff --git a/shane-marissa/sass/components/header.sass b/shane-marissa/sass/components/header.sass
@@ -0,0 +1,9 @@
+@import '../color/color'
+
+// You cannot use a mixin for text gradient.
+.header
+  text-align: center
+  font-size: 3.375em
+  background: -webkit-linear-gradient($header-gradient...)
+  -webkit-background-clip: text
+  -webkit-text-fill-color: transparent
diff --git a/shane-marissa/sass/components/wrapper.css b/shane-marissa/sass/components/wrapper.css
diff --git a/shane-marissa/sass/components/wrapper.css.map b/shane-marissa/sass/components/wrapper.css.map
diff --git a/shane-marissa/sass/components/wrapper.sass b/shane-marissa/sass/components/wrapper.sass
@@ -0,0 +1,7 @@
+@import '../layout/config'
+
+.wrapper
+  display: $flex-display
+  flex-direction: $flex-direction-row
+  justify-content: $flex-justify-space
+
diff --git a/shane-marissa/sass/layout/_config.sass b/shane-marissa/sass/layout/_config.sass
@@ -0,0 +1,6 @@
+$flex-display: flex
+
+$flex-direction-row: row
+
+$flex-justify-space: space-around
+
diff --git a/shane-marissa/sass/layout/reset.css b/shane-marissa/sass/layout/reset.css
diff --git a/shane-marissa/sass/layout/reset.css.map b/shane-marissa/sass/layout/reset.css.map
diff --git a/shane-marissa/sass/layout/reset.sass b/shane-marissa/sass/layout/reset.sass
@@ -0,0 +1,6 @@
+html,
+body,
+ul,
+ol
+  margin: 0
+  padding: 0
diff --git a/shane-marissa/sass/main.css b/shane-marissa/sass/main.css
diff --git a/shane-marissa/sass/main.css.map b/shane-marissa/sass/main.css.map
diff --git a/shane-marissa/sass/main.sass b/shane-marissa/sass/main.sass
@@ -0,0 +1,15 @@
+@import 'color/color'
+
+@import 'typography/typography'
+
+body
+  background-image: url('http://p1.pichost.me/i/36/1591464.jpg')
+  background-attachment: fixed
+  background-size: cover
+  background-repeat: no-repeat
+  color: $secondary-color
+
+.title
+  text-align: center
+  color: $secondary-color
+  font-family: $secondary-font