From b6ea201bb7863503a1f1dd15bcb8e9da4b6c40b0 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Sun, 4 Sep 2016 12:44:03 -0400 Subject: [PATCH] chore: add autoprefixer, remove browser-prefixed styles --- _config.yml | 11 ++- _sass/_footer.scss | 2 - _sass/_forms.scss | 4 +- _sass/_grid.scss | 2 - _sass/_junk-drawer.scss | 2 - _sass/_overlay-menu.scss | 183 ++++++++++++++++----------------------- 6 files changed, 84 insertions(+), 120 deletions(-) diff --git a/_config.yml b/_config.yml index d499b3f..5d903f8 100644 --- a/_config.yml +++ b/_config.yml @@ -15,11 +15,16 @@ languages: ["en", "es", "cn", "pt", "ru", "it"] exclude_from_localizations: ["assets"] sass: - style: compressed - cache: false + style: compressed + cache: false -gems: +autoprefixer: + browsers: + - last 2 versions + +gems: - jekyll-paginate + - jekyll-autoprefixer collections: components: # style guide diff --git a/_sass/_footer.scss b/_sass/_footer.scss index f4b194f..66997b1 100644 --- a/_sass/_footer.scss +++ b/_sass/_footer.scss @@ -40,7 +40,5 @@ footer { } .footer--social { - -moz-column-count: 2; - -webkit-column-count: 2; column-count: 2; } diff --git a/_sass/_forms.scss b/_sass/_forms.scss index 6e6656c..fc40cb3 100644 --- a/_sass/_forms.scss +++ b/_sass/_forms.scss @@ -4,7 +4,7 @@ form { padding: 10px 5px 10px 5px; border: 2px solid $black; box-sizing: border-box; - -webkit-appearance: none; + appearance: none; } .username { background-image: url(../images/icon-username.png); @@ -22,4 +22,4 @@ form { padding-left: 40px; color: #ccc; } -} \ No newline at end of file +} diff --git a/_sass/_grid.scss b/_sass/_grid.scss index c4aa32b..0104d7e 100644 --- a/_sass/_grid.scss +++ b/_sass/_grid.scss @@ -907,7 +907,5 @@ *, *:before, *:after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } diff --git a/_sass/_junk-drawer.scss b/_sass/_junk-drawer.scss index 61b1d60..7fb6bf7 100644 --- a/_sass/_junk-drawer.scss +++ b/_sass/_junk-drawer.scss @@ -19,8 +19,6 @@ a.blog_link { margin: 1px; border:1px solid #dddddd; border-radius: 50%; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; } .background-title { diff --git a/_sass/_overlay-menu.scss b/_sass/_overlay-menu.scss index b0a3a00..6c893ae 100644 --- a/_sass/_overlay-menu.scss +++ b/_sass/_overlay-menu.scss @@ -7,51 +7,47 @@ left: 0; margin: 0 auto; p { - font-size: 18px; + font-size: 18px; } a { - display: inline-block; - position: relative; - text-align: center; - color: #FF5252; - text-decoration: none; - font-size: 18px; - overflow: hidden; - top: 5px; + display: inline-block; + position: relative; + text-align: center; + color: #FF5252; + text-decoration: none; + font-size: 18px; + overflow: hidden; + top: 5px; } a:after { - content: ''; - position: absolute; - background: #FF5252; - height: 2px; - width: 0%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); - left: 50%; - bottom: 0; - -webkit-transition: .35s ease; - transition: .35s ease; + content: ''; + position: absolute; + background: #FF5252; + height: 2px; + width: 0%; + transform: translateX(-50%); + left: 50%; + bottom: 0; + transition: .35s ease; } .a:hover:after, a:focus:after, a:active:after { - width: 100%; + width: 100%; } } #hero{ .button_container { - position: absolute; - top: 40px; - right: 30px; - height: 23px; - width: 32px; - cursor: pointer; - z-index: 100; - -webkit-transition: opacity .25s ease; - transition: opacity .25s ease; - &:hover { - opacity: .7; - } + position: absolute; + top: 40px; + right: 30px; + height: 23px; + width: 32px; + cursor: pointer; + z-index: 100; + transition: opacity .25s ease; + &:hover { + opacity: .7; + } span { background: $white; border: none; @@ -60,8 +56,7 @@ position: absolute; top: 0; left: 0; - -webkit-transition: all .35s ease; - transition: all .35s ease; + transition: all .35s ease; cursor: pointer; } span:nth-of-type(2) { @@ -70,24 +65,19 @@ span:nth-of-type(3) { top: 16px; } - } .button_container.active .top { - -webkit-transform: translateY(8px) translateX(0) rotate(45deg); - -ms-transform: translateY(8px) translateX(0) rotate(45deg); - transform: translateY(8px) translateX(0) rotate(45deg); - background: $white; + transform: translateY(8px) translateX(0) rotate(45deg); + background: $white; } .button_container.active .middle { - opacity: 0; - background: $white; + opacity: 0; + background: $white; } .button_container.active .bottom { - -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); - -ms-transform: translateY(-8px) translateX(0) rotate(-45deg); - transform: translateY(-8px) translateX(0) rotate(-45deg); - background: $white; + transform: translateY(-8px) translateX(0) rotate(-45deg); + background: $white; } } @@ -99,46 +89,40 @@ width: 32px; cursor: pointer; z-index: 100; - -webkit-transition: opacity .25s ease; - transition: opacity .25s ease; + transition: opacity .25s ease; &:hover { - opacity: .7; + opacity: .7; } span { - background: $blue; - border: none; - height: 4px; - width: 100%; - position: absolute; - top: 0; - left: 0; - -webkit-transition: all .35s ease; - transition: all .35s ease; - cursor: pointer; + background: $blue; + border: none; + height: 4px; + width: 100%; + position: absolute; + top: 0; + left: 0; + transition: all .35s ease; + cursor: pointer; } span:nth-of-type(2) { - top: 8px; + top: 8px; } span:nth-of-type(3) { - top: 16px; + top: 16px; } } .button_container.active .top { - -webkit-transform: translateY(8px) translateX(0) rotate(45deg); - -ms-transform: translateY(8px) translateX(0) rotate(45deg); - transform: translateY(8px) translateX(0) rotate(45deg); - background: $blue; + transform: translateY(8px) translateX(0) rotate(45deg); + background: $blue; } .button_container.active .middle { opacity: 0; background: $blue; } .button_container.active .bottom { - -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); - -ms-transform: translateY(-8px) translateX(0) rotate(-45deg); - transform: translateY(-8px) translateX(0) rotate(-45deg); + transform: translateY(-8px) translateX(0) rotate(-45deg); background: $blue; } @@ -151,8 +135,7 @@ height: 0%; opacity: 0; visibility: hidden; - -webkit-transition: opacity .35s, visibility .35s, height .35s; - transition: opacity .35s, visibility .35s, height .35s; + transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; .logo { @@ -164,25 +147,23 @@ } nav { - position: relative; - height: 70%; - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - font-size: 36px; - font-weight: 200; - text-align: center; + position: relative; + height: 70%; + top: 50%; + transform: translateY(-50%); + font-size: 36px; + font-weight: 200; + text-align: center; } - ul { - list-style: none; - padding: 0; - margin: 0 auto; - margin-top: 0px; - display: inline-block; - position: relative; - height: 50%; + ul { + list-style: none; + padding: 0; + margin: 0 auto; + margin-top: 0px; + display: inline-block; + position: relative; + height: 50%; li { display: block; height: 16%; @@ -220,33 +201,17 @@ visibility: visible; height: 100%; li { - -webkit-animation: fadeInRight .5s ease forwards; - animation: fadeInRight .5s ease forwards; - -webkit-animation-delay: .35s; - animation-delay: .35s; + animation: fadeInRight .5s ease forwards; + animation-delay: .35s; } li:nth-of-type(2) { - -webkit-animation-delay: .4s; - animation-delay: .4s; + animation-delay: .4s; } li:nth-of-type(3) { - -webkit-animation-delay: .45s; - animation-delay: .45s; + animation-delay: .45s; } li:nth-of-type(4) { - -webkit-animation-delay: .50s; - animation-delay: .50s; - } -} - -@-webkit-keyframes fadeInRight { - 0% { - opacity: 0; - left: 20%; - } - 100% { - opacity: 1; - left: 0; + animation-delay: .50s; } }