From 6109807bcda3ea11b3fb3f90ec4815feb06b0f99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexis=20Co=CC=81rdova?= Date: Tue, 23 May 2017 11:03:08 -0700 Subject: [PATCH] Add stylelint CSS fixes --- src/components/button/style.scss | 2 ++ src/components/global-footer/style.scss | 1 + src/components/hero/style.scss | 2 ++ src/components/menu/style.scss | 4 ++++ src/styles/base/_colors.scss | 2 +- src/styles/base/_fonts.scss | 18 ++++++++++++------ src/styles/layout/_images.scss | 1 + src/styles/layout/_links.scss | 2 +- src/styles/layout/_main.scss | 1 + src/styles/utilities/_mixins.scss | 5 ++++- 10 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/components/button/style.scss b/src/components/button/style.scss index 55efbe8..a0afdf2 100644 --- a/src/components/button/style.scss +++ b/src/components/button/style.scss @@ -9,9 +9,11 @@ $button-font-size: $text-font-size; 0% { opacity: 0; } + 20% { opacity: 1; } + 100% { width: 200%; padding-bottom: 200%; diff --git a/src/components/global-footer/style.scss b/src/components/global-footer/style.scss index 95029e5..a1dcbd8 100644 --- a/src/components/global-footer/style.scss +++ b/src/components/global-footer/style.scss @@ -20,6 +20,7 @@ $author-text-color: $gray; text-align: left; } } + .author-metadata { margin-left: 5px; color: $author-text-color; diff --git a/src/components/hero/style.scss b/src/components/hero/style.scss index de2a9b6..1ec7f9f 100644 --- a/src/components/hero/style.scss +++ b/src/components/hero/style.scss @@ -6,6 +6,7 @@ $thismoment-background-color: $brand-thismoment; position: relative; z-index: 1; background-color: #999; + .hero-background-image { height: 200px; background-position: top center; @@ -26,6 +27,7 @@ $thismoment-background-color: $brand-thismoment; @include breakpoint(large) { height: 600px; } + &.home { background-image: url('../../assets/images/home/tableau-large.jpg'); } diff --git a/src/components/menu/style.scss b/src/components/menu/style.scss index 59861b0..cb38e47 100644 --- a/src/components/menu/style.scss +++ b/src/components/menu/style.scss @@ -24,10 +24,12 @@ $transition-timing-function: ease; transform $transition-duration $transition-timing-function, y $transition-duration $transition-delay $transition-timing-function; } + .line-middle { opacity: 1; transition: opacity 0.25s $transition-delay $transition-timing-function; } + .line-bottom { transition: transform $transition-duration $transition-timing-function, @@ -42,10 +44,12 @@ $transition-timing-function: ease; y $transition-duration $transition-timing-function, transform $transition-duration $transition-delay $transition-timing-function; } + .line-middle { opacity: 0; transition: opacity 0.25s $transition-timing-function; } + .line-bottom { y: 18px; transform: rotate(45deg); diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss index 542702b..1d1ddb0 100644 --- a/src/styles/base/_colors.scss +++ b/src/styles/base/_colors.scss @@ -14,7 +14,7 @@ $cerulean: #00aeff; $giants-orange: #fe5a1d; // Branded Colors -$brand-sony: #343A64; +$brand-sony: #343a64; $brand-thismoment: #6bc04b; $brand-linkedin: #0077b5; $brand-instagram: #e1306c; diff --git a/src/styles/base/_fonts.scss b/src/styles/base/_fonts.scss index e7f2e7c..c5ccd43 100644 --- a/src/styles/base/_fonts.scss +++ b/src/styles/base/_fonts.scss @@ -9,15 +9,18 @@ $hack-path: 'hack'; // Helvetica Neue Roman @font-face { font-family: 'HelveticaNeueLTStd-Roman'; - src: url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.eot?#iefix') format('embedded-opentype'), + src: + url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.eot?#iefix') format('embedded-opentype'), url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.otf') format('opentype'), - url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.woff') format('woff'), url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.ttf') format('truetype'); + url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.woff') format('woff'), + url('#{$font-path}/#{$helvetica-neue-roman-path}/HelveticaNeueLTStd-Roman.ttf') format('truetype'); } // Helvetica Neue Light @font-face { font-family: 'HelveticaNeueLTStd-Lt'; - src: url('#{$font-path}/#{$helvetica-neue-light-path}/HelveticaNeueLTStd-Lt.eot?#iefix') format('embedded-opentype'), + src: + url('#{$font-path}/#{$helvetica-neue-light-path}/HelveticaNeueLTStd-Lt.eot?#iefix') format('embedded-opentype'), url('#{$font-path}/#{$helvetica-neue-light-path}/HelveticaNeueLTStd-Lt.otf') format('opentype'), url('#{$font-path}/#{$helvetica-neue-light-path}/HelveticaNeueLTStd-Lt.woff') format('woff'), url('#{$font-path}/#{$helvetica-neue-light-path}/HelveticaNeueLTStd-Lt.ttf') format('truetype'); @@ -26,7 +29,8 @@ $hack-path: 'hack'; // Gotham Book @font-face { font-family: 'Gotham-Book'; - src: url('#{$font-path}/#{$gotham-book-path}/Gotham-Book.eot?#iefix') format('embedded-opentype'), + src: + url('#{$font-path}/#{$gotham-book-path}/Gotham-Book.eot?#iefix') format('embedded-opentype'), url('#{$font-path}/#{$gotham-book-path}/Gotham-Book.otf') format('opentype'), url('#{$font-path}/#{$gotham-book-path}/Gotham-Book.woff') format('woff'), url('#{$font-path}/#{$gotham-book-path}/Gotham-Book.ttf') format('truetype'); @@ -35,7 +39,8 @@ $hack-path: 'hack'; // Gotham Round Light @font-face { font-family: 'GothamRounded-Light'; - src: url('#{$font-path}/#{$gotham-round-light-path}/GothamRounded-Light.eot?#iefix') format('embedded-opentype'), + src: + url('#{$font-path}/#{$gotham-round-light-path}/GothamRounded-Light.eot?#iefix') format('embedded-opentype'), url('#{$font-path}/#{$gotham-round-light-path}/GothamRounded-Light.otf') format('opentype'), url('#{$font-path}/#{$gotham-round-light-path}/GothamRounded-Light.woff') format('woff'), url('#{$font-path}/#{$gotham-round-light-path}/GothamRounded-Light.ttf') format('truetype'); @@ -44,7 +49,8 @@ $hack-path: 'hack'; // Hack @font-face { font-family: 'Hack'; - src: url('#{$font-path}/#{$hack-path}/hack-regular-webfont.eot?#iefix') format('embedded-opentype'), + src: + url('#{$font-path}/#{$hack-path}/hack-regular-webfont.eot?#iefix') format('embedded-opentype'), url('#{$font-path}/#{$hack-path}/hack-regular-webfont.woff') format('woff'), url('#{$font-path}/#{$hack-path}/hack-regular-webfont.ttf') format('truetype'); } diff --git a/src/styles/layout/_images.scss b/src/styles/layout/_images.scss index 2a1b06a..35656a3 100644 --- a/src/styles/layout/_images.scss +++ b/src/styles/layout/_images.scss @@ -1,6 +1,7 @@ // Images figure { margin: 0; + img { width: 100%; } diff --git a/src/styles/layout/_links.scss b/src/styles/layout/_links.scss index 443e199..300bf29 100644 --- a/src/styles/layout/_links.scss +++ b/src/styles/layout/_links.scss @@ -16,7 +16,7 @@ a { content: ''; } - @media (hover:hover) { + @media (hover: hover) { &:hover { color: $link-text-hover-color; transition: color 0.25s ease-in; diff --git a/src/styles/layout/_main.scss b/src/styles/layout/_main.scss index 41633ad..9e87b78 100644 --- a/src/styles/layout/_main.scss +++ b/src/styles/layout/_main.scss @@ -22,6 +22,7 @@ body { position: relative; z-index: 1; margin: 0; + &:before { position: absolute; z-index: 100; diff --git a/src/styles/utilities/_mixins.scss b/src/styles/utilities/_mixins.scss index e60f279..4111d4c 100644 --- a/src/styles/utilities/_mixins.scss +++ b/src/styles/utilities/_mixins.scss @@ -5,7 +5,7 @@ // e.g., font-size: 1em = 1rem = 16px = 100%; // http://www.w3.org/TR/css3-mediaqueries/#units -$screen-sm: 0em; // 0px +$screen-sm: 0; // 0px $screen-md: 40em; // 640px $screen-lg: 64em; // 1024px @@ -25,17 +25,20 @@ $breakpoints: ( @content; } } + @else if $breakpoint == 'medium' { @media only screen and (min-width: map-get($breakpoints, medium)) { @content; } } + @else if $breakpoint == 'large' { @media only screen and (min-width: map-get($breakpoints, large)) { @content; } } } + @else { @warn 'Not a valid breakpoint: ' + $breakpoint; }