From 32f47bf5cbd5f3a1c20e938dffa6adc114570477 Mon Sep 17 00:00:00 2001 From: Marissa Felitto Date: Tue, 25 Nov 2014 13:00:24 -0800 Subject: [PATCH 1/3] css to sass --- shane-marissa/index.html | 123 ++++++++++++++++++ shane-marissa/sass/buttons/buttons.css | 18 +++ shane-marissa/sass/buttons/buttons.css.map | 7 + shane-marissa/sass/buttons/buttons.sass | 19 +++ shane-marissa/sass/color/color.css | 3 + shane-marissa/sass/color/color.css.map | 7 + shane-marissa/sass/color/color.sass | 13 ++ shane-marissa/sass/components/album.css | 17 +++ shane-marissa/sass/components/album.css.map | 7 + shane-marissa/sass/components/album.sass | 22 ++++ shane-marissa/sass/components/header.css | 6 + shane-marissa/sass/components/header.css.map | 7 + shane-marissa/sass/components/header.sass | 8 ++ shane-marissa/sass/components/wrapper.css | 6 + shane-marissa/sass/components/wrapper.css.map | 7 + shane-marissa/sass/components/wrapper.sass | 7 + shane-marissa/sass/layout/config.css | 3 + shane-marissa/sass/layout/config.css.map | 7 + shane-marissa/sass/layout/config.sass | 6 + shane-marissa/sass/layout/reset.css | 8 ++ shane-marissa/sass/layout/reset.css.map | 7 + shane-marissa/sass/layout/reset.sass | 6 + shane-marissa/sass/main.css | 13 ++ shane-marissa/sass/main.css.map | 7 + shane-marissa/sass/main.sass | 15 +++ shane-marissa/sass/typography/typography.css | 3 + .../sass/typography/typography.css.map | 7 + shane-marissa/sass/typography/typography.sass | 5 + 28 files changed, 364 insertions(+) create mode 100644 shane-marissa/index.html create mode 100644 shane-marissa/sass/buttons/buttons.css create mode 100644 shane-marissa/sass/buttons/buttons.css.map create mode 100644 shane-marissa/sass/buttons/buttons.sass create mode 100644 shane-marissa/sass/color/color.css create mode 100644 shane-marissa/sass/color/color.css.map create mode 100644 shane-marissa/sass/color/color.sass create mode 100644 shane-marissa/sass/components/album.css create mode 100644 shane-marissa/sass/components/album.css.map create mode 100644 shane-marissa/sass/components/album.sass create mode 100644 shane-marissa/sass/components/header.css create mode 100644 shane-marissa/sass/components/header.css.map create mode 100644 shane-marissa/sass/components/header.sass create mode 100644 shane-marissa/sass/components/wrapper.css create mode 100644 shane-marissa/sass/components/wrapper.css.map create mode 100644 shane-marissa/sass/components/wrapper.sass create mode 100644 shane-marissa/sass/layout/config.css create mode 100644 shane-marissa/sass/layout/config.css.map create mode 100644 shane-marissa/sass/layout/config.sass create mode 100644 shane-marissa/sass/layout/reset.css create mode 100644 shane-marissa/sass/layout/reset.css.map create mode 100644 shane-marissa/sass/layout/reset.sass create mode 100644 shane-marissa/sass/main.css create mode 100644 shane-marissa/sass/main.css.map create mode 100644 shane-marissa/sass/main.sass create mode 100644 shane-marissa/sass/typography/typography.css create mode 100644 shane-marissa/sass/typography/typography.css.map create mode 100644 shane-marissa/sass/typography/typography.sass diff --git a/shane-marissa/index.html b/shane-marissa/index.html new file mode 100644 index 0000000..077befa --- /dev/null +++ b/shane-marissa/index.html @@ -0,0 +1,123 @@ + + + + + + + + + + + + + + + + + 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..110a7df --- /dev/null +++ b/shane-marissa/sass/buttons/buttons.css @@ -0,0 +1,18 @@ +button { + margin-left: auto; + margin-right: auto; + display: block; + height: 50px; + width: 50px; + border-radius: 50px; + border: 1px solid #000000; + background: #959595; + cursor: pointer; + color: #ffffff; + background: 135deg, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%; } + 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..cdb5991 --- /dev/null +++ b/shane-marissa/sass/buttons/buttons.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAEA,MAAM;EACJ,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;EAClB,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,IAAI;EACnB,MAAM,EAAE,iBAAwB;EAChC,UAAU,ECAG,OAAO;EDCpB,MAAM,EAAE,OAAO;EACf,KAAK,ECVW,OAAO;EDWvB,UAAU,ECPO,iGAAM;EDSvB,aAAM;IACJ,KAAK,ECdS,OAAO;EDevB,gBAAS;IACP,KAAK,ECNO,OAAO", +"sources": ["buttons.sass","../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..3d9476e --- /dev/null +++ b/shane-marissa/sass/buttons/buttons.sass @@ -0,0 +1,19 @@ +@import 'color/color' + +button + margin-left: auto + margin-right: auto + display: block + height: 50px + width: 50px + border-radius: 50px + border: 1px solid $primary-color + background: $accent-color + cursor: pointer + color: $secondary-color + background: $button-gradient + + a:link + color: $secondary-color + a:visited + color: $visited-color diff --git a/shane-marissa/sass/color/color.css b/shane-marissa/sass/color/color.css new file mode 100644 index 0000000..c7d71a1 --- /dev/null +++ b/shane-marissa/sass/color/color.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=color.css.map */ diff --git a/shane-marissa/sass/color/color.css.map b/shane-marissa/sass/color/color.css.map new file mode 100644 index 0000000..bb5c0ce --- /dev/null +++ b/shane-marissa/sass/color/color.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "", +"sources": [], +"names": [], +"file": "color.css" +} \ No newline at end of file diff --git a/shane-marissa/sass/color/color.sass b/shane-marissa/sass/color/color.sass new file mode 100644 index 0000000..bb76e57 --- /dev/null +++ b/shane-marissa/sass/color/color.sass @@ -0,0 +1,13 @@ +$primary-color: #000000 + +$secondary-color: #ffffff + +$caption-gradient: (to top right, #aebcbf, #6e7774, #0a0809) + +$button-gradient: (135deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%) + +$header-gradient: (#eee, #333) + +$accent-color: #959595 + +$visited-color: #ff0000 diff --git a/shane-marissa/sass/components/album.css b/shane-marissa/sass/components/album.css new file mode 100644 index 0000000..cff6452 --- /dev/null +++ b/shane-marissa/sass/components/album.css @@ -0,0 +1,17 @@ +.albums { + width: 23.75em; + height: 37.5em; + display: inline-block; + background: transparent; } + .albums .winner { + width: 18.75em; } + .albums figcaption { + padding: 0.313em; + border: 0.188em solid #959595; + text-align: center; + word-wrap: normal; + background: to top right, #aebcbf, #6e7774, #0a0809; + font-family: "Raleway", sans-serif; + opacity: 0.75; } + +/*# 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..70a7f7f --- /dev/null +++ b/shane-marissa/sass/components/album.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAIA,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;IACR,OAAO,EAAE,OAAM;IACf,MAAM,EAAE,qBAA0B;IAClC,UAAU,EAAE,MAAM;IAClB,SAAS,EAAE,MAAM;IACjB,UAAU,ECdM,uCAAY;IDe5B,WAAW,EEjBA,qBAAS;IFkBpB,OAAO,EAAE,IAAG", +"sources": ["album.sass","../color/color.sass","../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..f65b9f1 --- /dev/null +++ b/shane-marissa/sass/components/album.sass @@ -0,0 +1,22 @@ +@import 'typography/typography' + +@import 'color/color' + +.albums + width: 23.75em + height: 37.5em + display: inline-block + background: transparent + + .winner + width: 18.75em + + figcaption + padding: .313em + border: .188em solid $accent-color + text-align: center + word-wrap: normal + background: $caption-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..b06b1c0 --- /dev/null +++ b/shane-marissa/sass/components/header.css @@ -0,0 +1,6 @@ +.header { + text-align: center; + font-size: 3.375em; + background: #eee, #333; } + +/*# 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..c491c30 --- /dev/null +++ b/shane-marissa/sass/components/header.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAEA,OAAO;EACL,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,OAAO;EAClB,UAAU,ECGO,UAAI", +"sources": ["header.sass","../color/color.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..d1ca78a --- /dev/null +++ b/shane-marissa/sass/components/header.sass @@ -0,0 +1,8 @@ +@import 'color/color' + +.header + text-align: center + font-size: 3.375em + background: $header-gradient + + 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..f932d86 --- /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..34684a6 --- /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.css b/shane-marissa/sass/layout/config.css new file mode 100644 index 0000000..405ec86 --- /dev/null +++ b/shane-marissa/sass/layout/config.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=config.css.map */ diff --git a/shane-marissa/sass/layout/config.css.map b/shane-marissa/sass/layout/config.css.map new file mode 100644 index 0000000..22cb941 --- /dev/null +++ b/shane-marissa/sass/layout/config.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "", +"sources": [], +"names": [], +"file": "config.css" +} \ No newline at end of file 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..65382af --- /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.css b/shane-marissa/sass/typography/typography.css new file mode 100644 index 0000000..0eda407 --- /dev/null +++ b/shane-marissa/sass/typography/typography.css @@ -0,0 +1,3 @@ + + +/*# sourceMappingURL=typography.css.map */ diff --git a/shane-marissa/sass/typography/typography.css.map b/shane-marissa/sass/typography/typography.css.map new file mode 100644 index 0000000..aeb7281 --- /dev/null +++ b/shane-marissa/sass/typography/typography.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "", +"sources": [], +"names": [], +"file": "typography.css" +} \ No newline at end of file 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 + + From a98d1992fe2a2ac9d3bc85d79582997609d714eb Mon Sep 17 00:00:00 2001 From: Marissa Felitto Date: Tue, 25 Nov 2014 13:07:51 -0800 Subject: [PATCH 2/3] add read_me --- read_me.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 read_me.md 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 From 3e55bc4de07bc728d32b214a156aa9d20b926b9c Mon Sep 17 00:00:00 2001 From: Shane Kalles Date: Mon, 1 Dec 2014 14:24:56 -0800 Subject: [PATCH 3/3] Update sass with mixins --- shane-marissa/index.html | 3 --- shane-marissa/sass/buttons/buttons.css | 15 ++++++++------- shane-marissa/sass/buttons/buttons.css.map | 4 ++-- shane-marissa/sass/buttons/buttons.sass | 16 ++++++++-------- shane-marissa/sass/color/_color.sass | 13 +++++++++++++ shane-marissa/sass/color/_function.scss | 15 +++++++++++++++ shane-marissa/sass/color/_mixin.scss | 13 +++++++++++++ shane-marissa/sass/color/color.css | 3 --- shane-marissa/sass/color/color.css.map | 7 ------- shane-marissa/sass/color/color.sass | 13 ------------- shane-marissa/sass/components/album.css | 7 ++++--- shane-marissa/sass/components/album.css.map | 4 ++-- shane-marissa/sass/components/album.sass | 12 +++++++----- shane-marissa/sass/components/header.css | 4 +++- shane-marissa/sass/components/header.css.map | 4 ++-- shane-marissa/sass/components/header.sass | 9 +++++---- shane-marissa/sass/components/wrapper.css.map | 2 +- shane-marissa/sass/components/wrapper.sass | 2 +- .../sass/layout/{config.sass => _config.sass} | 0 shane-marissa/sass/layout/config.css | 3 --- shane-marissa/sass/layout/config.css.map | 7 ------- shane-marissa/sass/main.css.map | 2 +- .../{typography.sass => _typography.sass} | 0 shane-marissa/sass/typography/typography.css | 3 --- shane-marissa/sass/typography/typography.css.map | 7 ------- 25 files changed, 85 insertions(+), 83 deletions(-) create mode 100644 shane-marissa/sass/color/_color.sass create mode 100644 shane-marissa/sass/color/_function.scss create mode 100644 shane-marissa/sass/color/_mixin.scss delete mode 100644 shane-marissa/sass/color/color.css delete mode 100644 shane-marissa/sass/color/color.css.map delete mode 100644 shane-marissa/sass/color/color.sass rename shane-marissa/sass/layout/{config.sass => _config.sass} (100%) delete mode 100644 shane-marissa/sass/layout/config.css delete mode 100644 shane-marissa/sass/layout/config.css.map rename shane-marissa/sass/typography/{typography.sass => _typography.sass} (100%) delete mode 100644 shane-marissa/sass/typography/typography.css delete mode 100644 shane-marissa/sass/typography/typography.css.map diff --git a/shane-marissa/index.html b/shane-marissa/index.html index 077befa..d161c03 100644 --- a/shane-marissa/index.html +++ b/shane-marissa/index.html @@ -5,13 +5,10 @@ - - - Top Albums diff --git a/shane-marissa/sass/buttons/buttons.css b/shane-marissa/sass/buttons/buttons.css index 110a7df..4559963 100644 --- a/shane-marissa/sass/buttons/buttons.css +++ b/shane-marissa/sass/buttons/buttons.css @@ -1,15 +1,16 @@ 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: 50px; - width: 50px; - border-radius: 50px; - border: 1px solid #000000; - background: #959595; + height: 3.125em; + width: 3.125em; + border-radius: 3.125em; + border: 0.063em solid #000000; cursor: pointer; - color: #ffffff; - background: 135deg, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%; } + color: #ffffff; } button a:link { color: #ffffff; } button a:visited { diff --git a/shane-marissa/sass/buttons/buttons.css.map b/shane-marissa/sass/buttons/buttons.css.map index cdb5991..418e242 100644 --- a/shane-marissa/sass/buttons/buttons.css.map +++ b/shane-marissa/sass/buttons/buttons.css.map @@ -1,7 +1,7 @@ { "version": 3, -"mappings": "AAEA,MAAM;EACJ,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;EAClB,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,IAAI;EACnB,MAAM,EAAE,iBAAwB;EAChC,UAAU,ECAG,OAAO;EDCpB,MAAM,EAAE,OAAO;EACf,KAAK,ECVW,OAAO;EDWvB,UAAU,ECPO,iGAAM;EDSvB,aAAM;IACJ,KAAK,ECdS,OAAO;EDevB,gBAAS;IACP,KAAK,ECNO,OAAO", -"sources": ["buttons.sass","../color/color.sass"], +"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 index 3d9476e..17968b0 100644 --- a/shane-marissa/sass/buttons/buttons.sass +++ b/shane-marissa/sass/buttons/buttons.sass @@ -1,18 +1,18 @@ -@import 'color/color' +@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: 50px - width: 50px - border-radius: 50px - border: 1px solid $primary-color - background: $accent-color + height: 3.125em + width: 3.125em + border-radius: 3.125em + border: 0.063em solid $primary-color cursor: pointer color: $secondary-color - background: $button-gradient - a:link color: $secondary-color a:visited 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/color/color.css b/shane-marissa/sass/color/color.css deleted file mode 100644 index c7d71a1..0000000 --- a/shane-marissa/sass/color/color.css +++ /dev/null @@ -1,3 +0,0 @@ - - -/*# sourceMappingURL=color.css.map */ diff --git a/shane-marissa/sass/color/color.css.map b/shane-marissa/sass/color/color.css.map deleted file mode 100644 index bb5c0ce..0000000 --- a/shane-marissa/sass/color/color.css.map +++ /dev/null @@ -1,7 +0,0 @@ -{ -"version": 3, -"mappings": "", -"sources": [], -"names": [], -"file": "color.css" -} \ No newline at end of file diff --git a/shane-marissa/sass/color/color.sass b/shane-marissa/sass/color/color.sass deleted file mode 100644 index bb76e57..0000000 --- a/shane-marissa/sass/color/color.sass +++ /dev/null @@ -1,13 +0,0 @@ -$primary-color: #000000 - -$secondary-color: #ffffff - -$caption-gradient: (to top right, #aebcbf, #6e7774, #0a0809) - -$button-gradient: (135deg, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%) - -$header-gradient: (#eee, #333) - -$accent-color: #959595 - -$visited-color: #ff0000 diff --git a/shane-marissa/sass/components/album.css b/shane-marissa/sass/components/album.css index cff6452..3ac94da 100644 --- a/shane-marissa/sass/components/album.css +++ b/shane-marissa/sass/components/album.css @@ -6,12 +6,13 @@ .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; - background: to top right, #aebcbf, #6e7774, #0a0809; - font-family: "Raleway", sans-serif; - opacity: 0.75; } + 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 index 70a7f7f..739fc8a 100644 --- a/shane-marissa/sass/components/album.css.map +++ b/shane-marissa/sass/components/album.css.map @@ -1,7 +1,7 @@ { "version": 3, -"mappings": "AAIA,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;IACR,OAAO,EAAE,OAAM;IACf,MAAM,EAAE,qBAA0B;IAClC,UAAU,EAAE,MAAM;IAClB,SAAS,EAAE,MAAM;IACjB,UAAU,ECdM,uCAAY;IDe5B,WAAW,EEjBA,qBAAS;IFkBpB,OAAO,EAAE,IAAG", -"sources": ["album.sass","../color/color.sass","../typography/typography.sass"], +"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 index f65b9f1..e85fb9a 100644 --- a/shane-marissa/sass/components/album.sass +++ b/shane-marissa/sass/components/album.sass @@ -1,6 +1,7 @@ -@import 'typography/typography' - -@import 'color/color' +@import '../typography/typography' +@import '../color/color' +@import '../color/mixin' +@import '../color/function' .albums width: 23.75em @@ -12,11 +13,12 @@ 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: $caption-gradient + // background: $text-gradient font-family: $caption-font - opacity: .75 + // opacity: .75 diff --git a/shane-marissa/sass/components/header.css b/shane-marissa/sass/components/header.css index b06b1c0..cd31f51 100644 --- a/shane-marissa/sass/components/header.css +++ b/shane-marissa/sass/components/header.css @@ -1,6 +1,8 @@ .header { text-align: center; font-size: 3.375em; - background: #eee, #333; } + 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 index c491c30..bb4e2d9 100644 --- a/shane-marissa/sass/components/header.css.map +++ b/shane-marissa/sass/components/header.css.map @@ -1,7 +1,7 @@ { "version": 3, -"mappings": "AAEA,OAAO;EACL,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,OAAO;EAClB,UAAU,ECGO,UAAI", -"sources": ["header.sass","../color/color.sass"], +"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 index d1ca78a..61628a3 100644 --- a/shane-marissa/sass/components/header.sass +++ b/shane-marissa/sass/components/header.sass @@ -1,8 +1,9 @@ -@import 'color/color' +@import '../color/color' +// You cannot use a mixin for text gradient. .header text-align: center font-size: 3.375em - background: $header-gradient - - + background: -webkit-linear-gradient($header-gradient...) + -webkit-background-clip: text + -webkit-text-fill-color: transparent diff --git a/shane-marissa/sass/components/wrapper.css.map b/shane-marissa/sass/components/wrapper.css.map index f932d86..74eb3e6 100644 --- a/shane-marissa/sass/components/wrapper.css.map +++ b/shane-marissa/sass/components/wrapper.css.map @@ -1,7 +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"], +"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 index 34684a6..2946aa9 100644 --- a/shane-marissa/sass/components/wrapper.sass +++ b/shane-marissa/sass/components/wrapper.sass @@ -1,4 +1,4 @@ -@import 'layout/config' +@import '../layout/config' .wrapper display: $flex-display diff --git a/shane-marissa/sass/layout/config.sass b/shane-marissa/sass/layout/_config.sass similarity index 100% rename from shane-marissa/sass/layout/config.sass rename to shane-marissa/sass/layout/_config.sass diff --git a/shane-marissa/sass/layout/config.css b/shane-marissa/sass/layout/config.css deleted file mode 100644 index 405ec86..0000000 --- a/shane-marissa/sass/layout/config.css +++ /dev/null @@ -1,3 +0,0 @@ - - -/*# sourceMappingURL=config.css.map */ diff --git a/shane-marissa/sass/layout/config.css.map b/shane-marissa/sass/layout/config.css.map deleted file mode 100644 index 22cb941..0000000 --- a/shane-marissa/sass/layout/config.css.map +++ /dev/null @@ -1,7 +0,0 @@ -{ -"version": 3, -"mappings": "", -"sources": [], -"names": [], -"file": "config.css" -} \ No newline at end of file diff --git a/shane-marissa/sass/main.css.map b/shane-marissa/sass/main.css.map index 65382af..fde7a68 100644 --- a/shane-marissa/sass/main.css.map +++ b/shane-marissa/sass/main.css.map @@ -1,7 +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"], +"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/typography/typography.sass b/shane-marissa/sass/typography/_typography.sass similarity index 100% rename from shane-marissa/sass/typography/typography.sass rename to shane-marissa/sass/typography/_typography.sass diff --git a/shane-marissa/sass/typography/typography.css b/shane-marissa/sass/typography/typography.css deleted file mode 100644 index 0eda407..0000000 --- a/shane-marissa/sass/typography/typography.css +++ /dev/null @@ -1,3 +0,0 @@ - - -/*# sourceMappingURL=typography.css.map */ diff --git a/shane-marissa/sass/typography/typography.css.map b/shane-marissa/sass/typography/typography.css.map deleted file mode 100644 index aeb7281..0000000 --- a/shane-marissa/sass/typography/typography.css.map +++ /dev/null @@ -1,7 +0,0 @@ -{ -"version": 3, -"mappings": "", -"sources": [], -"names": [], -"file": "typography.css" -} \ No newline at end of file