diff --git a/read_me.md b/read_me.md new file mode 100644 index 0000000..0e32ede --- /dev/null +++ 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 \ No newline at end of file diff --git a/shane-marissa/index.html b/shane-marissa/index.html new file mode 100644 index 0000000..d161c03 --- /dev/null +++ b/shane-marissa/index.html @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + Top Albums + + +
+
+

Team Florida's Current Music Picks

+

+
+
+
+
+

Henok's Top Five Of The Moment

+
+
+
+ Run The Jewels 2 +
Run The Jewels - Run The Jewels 2
+
+

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.

+ +
+
+
+ Black Moon Spell +
King Tuff - Black Moon Spell
+
+

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.

+ +
+
+
+ Pinata +
Freddie Gibbs & Madlib - Pinata
+
+

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.

+ +
+
+
+
+
+ Present Tense +
Wild Beasts - Present Tense
+
+

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.

+ +
+
+
+ Sunny +
Hippie Sabotage - Sunny
+
+

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.

+ +
+
+ +
+
+
+

Casey's Five Picks Of The Moment

+
+
+
+ Sublime +
Sublime - Sublime
+

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.

+ +
+ +
+
+ Hangover +
PSY & Snoop - Hangover
+

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.

+ +
+ +
+
+ Mercy +
Kanye West - Mercy
+

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.

+ +
+
+
+
+
+ Enjoy The Silence +
Depeche Mode - Enjoy The Silence
+

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.

+ +
+ +
+
+ Wild Ones +
Flo Rida - Wild Ones
+

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.

+ +
+
+ +
+ + diff --git a/shane-marissa/sass/buttons/buttons.css b/shane-marissa/sass/buttons/buttons.css new file mode 100644 index 0000000..4559963 --- /dev/null +++ b/shane-marissa/sass/buttons/buttons.css @@ -0,0 +1,19 @@ +button { + background-color: #959595; + background-image: linear-gradient(to top left, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FF959595', endColorstr = '#FF1B1B1B', GradientType = 0); + margin-left: auto; + margin-right: auto; + display: block; + height: 3.125em; + width: 3.125em; + border-radius: 3.125em; + border: 0.063em solid #000000; + cursor: pointer; + color: #ffffff; } + button a:link { + color: #ffffff; } + button a:visited { + color: #ff0000; } + +/*# sourceMappingURL=buttons.css.map */ diff --git a/shane-marissa/sass/buttons/buttons.css.map b/shane-marissa/sass/buttons/buttons.css.map new file mode 100644 index 0000000..418e242 --- /dev/null +++ b/shane-marissa/sass/buttons/buttons.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAIA,MAAM;ECIJ,gBAAgB,EAHA,OAAuB;EAIvC,gBAAgB,EAAE,uHAA0C;EAC5D,MAAM,EAAE,oHACsD;EDL9D,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;EAClB,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,OAAO;EACd,aAAa,EAAE,OAAO;EACtB,MAAM,EAAE,qBAA4B;EACpC,MAAM,EAAE,OAAO;EACf,KAAK,EEZW,OAAO;EFavB,aAAM;IACJ,KAAK,EEdS,OAAO;EFevB,gBAAS;IACP,KAAK,EENO,OAAO", +"sources": ["buttons.sass","../color/_mixin.scss","../color/_color.sass"], +"names": [], +"file": "buttons.css" +} \ No newline at end of file diff --git a/shane-marissa/sass/buttons/buttons.sass b/shane-marissa/sass/buttons/buttons.sass new file mode 100644 index 0000000..17968b0 --- /dev/null +++ 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 new file mode 100644 index 0000000..f53aa6e --- /dev/null +++ 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 new file mode 100644 index 0000000..a01344f --- /dev/null +++ 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 new file mode 100644 index 0000000..460143d --- /dev/null +++ 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 new file mode 100644 index 0000000..3ac94da --- /dev/null +++ b/shane-marissa/sass/components/album.css @@ -0,0 +1,18 @@ +.albums { + width: 23.75em; + height: 37.5em; + display: inline-block; + background: transparent; } + .albums .winner { + width: 18.75em; } + .albums figcaption { + background-color: #aebcbf; + background-image: linear-gradient(to top right, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FFAEBCBF', endColorstr = '#FF0A0809', GradientType = 0); + padding: 0.313em; + border: 0.188em solid #959595; + text-align: center; + word-wrap: normal; + font-family: "Raleway", sans-serif; } + +/*# sourceMappingURL=album.css.map */ diff --git a/shane-marissa/sass/components/album.css.map b/shane-marissa/sass/components/album.css.map new file mode 100644 index 0000000..739fc8a --- /dev/null +++ b/shane-marissa/sass/components/album.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAKA,OAAO;EACL,KAAK,EAAE,OAAO;EACd,MAAM,EAAE,MAAM;EACd,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,WAAW;EAEvB,eAAO;IACL,KAAK,EAAE,OAAO;EAEhB,kBAAU;ICNV,gBAAgB,EAHA,OAAuB;IAIvC,gBAAgB,EAAE,iFAA0C;IAC5D,MAAM,EAAE,oHACsD;IDK5D,OAAO,EAAE,OAAM;IACf,MAAM,EAAE,qBAA0B;IAClC,UAAU,EAAE,MAAM;IAClB,SAAS,EAAE,MAAM;IAEjB,WAAW,EEnBA,qBAAS", +"sources": ["album.sass","../color/_mixin.scss","../typography/_typography.sass"], +"names": [], +"file": "album.css" +} \ No newline at end of file diff --git a/shane-marissa/sass/components/album.sass b/shane-marissa/sass/components/album.sass new file mode 100644 index 0000000..e85fb9a --- /dev/null +++ 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 new file mode 100644 index 0000000..cd31f51 --- /dev/null +++ b/shane-marissa/sass/components/header.css @@ -0,0 +1,8 @@ +.header { + text-align: center; + font-size: 3.375em; + background: -webkit-linear-gradient(#eeeeee, #333333); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } + +/*# sourceMappingURL=header.css.map */ diff --git a/shane-marissa/sass/components/header.css.map b/shane-marissa/sass/components/header.css.map new file mode 100644 index 0000000..bb4e2d9 --- /dev/null +++ b/shane-marissa/sass/components/header.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAGA,OAAO;EAEL,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,OAAO;EAClB,UAAU,EAAE,yCAAyC;EACrD,uBAAuB,EAAE,IAAI;EAC7B,uBAAuB,EAAE,WAAW", +"sources": ["header.sass"], +"names": [], +"file": "header.css" +} \ No newline at end of file diff --git a/shane-marissa/sass/components/header.sass b/shane-marissa/sass/components/header.sass new file mode 100644 index 0000000..61628a3 --- /dev/null +++ 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 new file mode 100644 index 0000000..a8ba828 --- /dev/null +++ b/shane-marissa/sass/components/wrapper.css @@ -0,0 +1,6 @@ +.wrapper { + display: flex; + flex-direction: row; + justify-content: space-around; } + +/*# sourceMappingURL=wrapper.css.map */ diff --git a/shane-marissa/sass/components/wrapper.css.map b/shane-marissa/sass/components/wrapper.css.map new file mode 100644 index 0000000..74eb3e6 --- /dev/null +++ b/shane-marissa/sass/components/wrapper.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAEA,QAAQ;EACN,OAAO,ECHM,IAAI;EDIjB,cAAc,ECFK,GAAG;EDGtB,eAAe,ECDI,YAAY", +"sources": ["wrapper.sass","../layout/config.sass"], +"names": [], +"file": "wrapper.css" +} \ No newline at end of file diff --git a/shane-marissa/sass/components/wrapper.sass b/shane-marissa/sass/components/wrapper.sass new file mode 100644 index 0000000..2946aa9 --- /dev/null +++ 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 new file mode 100644 index 0000000..5bc57a1 --- /dev/null +++ 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 new file mode 100644 index 0000000..c09a160 --- /dev/null +++ b/shane-marissa/sass/layout/reset.css @@ -0,0 +1,8 @@ +html, +body, +ul, +ol { + margin: 0; + padding: 0; } + +/*# sourceMappingURL=reset.css.map */ diff --git a/shane-marissa/sass/layout/reset.css.map b/shane-marissa/sass/layout/reset.css.map new file mode 100644 index 0000000..26297ce --- /dev/null +++ b/shane-marissa/sass/layout/reset.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA;;;EAAK;EAIH,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC", +"sources": ["reset.sass"], +"names": [], +"file": "reset.css" +} \ No newline at end of file diff --git a/shane-marissa/sass/layout/reset.sass b/shane-marissa/sass/layout/reset.sass new file mode 100644 index 0000000..40150e8 --- /dev/null +++ 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 new file mode 100644 index 0000000..fcefc57 --- /dev/null +++ b/shane-marissa/sass/main.css @@ -0,0 +1,13 @@ +body { + background-image: url("http://p1.pichost.me/i/36/1591464.jpg"); + background-attachment: fixed; + background-size: cover; + background-repeat: no-repeat; + color: #ffffff; } + +.title { + text-align: center; + color: #ffffff; + font-family: "Arimo", sans-serif; } + +/*# sourceMappingURL=main.css.map */ diff --git a/shane-marissa/sass/main.css.map b/shane-marissa/sass/main.css.map new file mode 100644 index 0000000..fde7a68 --- /dev/null +++ b/shane-marissa/sass/main.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAIA,IAAI;EACF,gBAAgB,EAAE,4CAA4C;EAC9D,qBAAqB,EAAE,KAAK;EAC5B,eAAe,EAAE,KAAK;EACtB,iBAAiB,EAAE,SAAS;EAC5B,KAAK,ECPW,OAAO;;ADSzB,MAAM;EACJ,UAAU,EAAE,MAAM;EAClB,KAAK,ECXW,OAAO;EDYvB,WAAW,EEdI,mBAAO", +"sources": ["main.sass","color/_color.sass","typography/_typography.sass"], +"names": [], +"file": "main.css" +} \ No newline at end of file diff --git a/shane-marissa/sass/main.sass b/shane-marissa/sass/main.sass new file mode 100644 index 0000000..d538eea --- /dev/null +++ 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 diff --git a/shane-marissa/sass/typography/_typography.sass b/shane-marissa/sass/typography/_typography.sass new file mode 100644 index 0000000..ba9ccbb --- /dev/null +++ b/shane-marissa/sass/typography/_typography.sass @@ -0,0 +1,5 @@ +$secondary-font: 'Arimo', sans-serif + +$caption-font: 'Raleway', sans-serif + +