mirror of
https://github.com/seigler/dash-website
synced 2025-07-26 23:06:09 +00:00
chore: add autoprefixer, remove browser-prefixed styles
This commit is contained in:
Joshua Seigler
parent
3ad64419af
commit
b6ea201bb7
6 changed files with 84 additions and 120 deletions
11
_config.yml
11
_config.yml
|
|
@ -15,11 +15,16 @@ languages: ["en", "es", "cn", "pt", "ru", "it"]
|
||||||
exclude_from_localizations: ["assets"]
|
exclude_from_localizations: ["assets"]
|
||||||
|
|
||||||
sass:
|
sass:
|
||||||
style: compressed
|
style: compressed
|
||||||
cache: false
|
cache: false
|
||||||
|
|
||||||
gems:
|
autoprefixer:
|
||||||
|
browsers:
|
||||||
|
- last 2 versions
|
||||||
|
|
||||||
|
gems:
|
||||||
- jekyll-paginate
|
- jekyll-paginate
|
||||||
|
- jekyll-autoprefixer
|
||||||
|
|
||||||
collections:
|
collections:
|
||||||
components: # style guide
|
components: # style guide
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,5 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer--social {
|
.footer--social {
|
||||||
-moz-column-count: 2;
|
|
||||||
-webkit-column-count: 2;
|
|
||||||
column-count: 2;
|
column-count: 2;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ form {
|
||||||
padding: 10px 5px 10px 5px;
|
padding: 10px 5px 10px 5px;
|
||||||
border: 2px solid $black;
|
border: 2px solid $black;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
.username {
|
.username {
|
||||||
background-image: url(../images/icon-username.png);
|
background-image: url(../images/icon-username.png);
|
||||||
|
|
@ -22,4 +22,4 @@ form {
|
||||||
padding-left: 40px;
|
padding-left: 40px;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -907,7 +907,5 @@
|
||||||
*,
|
*,
|
||||||
*:before,
|
*:before,
|
||||||
*:after {
|
*:after {
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,8 +19,6 @@ a.blog_link {
|
||||||
margin: 1px;
|
margin: 1px;
|
||||||
border:1px solid #dddddd;
|
border:1px solid #dddddd;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
-webkit-border-radius: 50%;
|
|
||||||
-moz-border-radius: 50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-title {
|
.background-title {
|
||||||
|
|
|
||||||
|
|
@ -7,51 +7,47 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
p {
|
p {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #FF5252;
|
color: #FF5252;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
}
|
}
|
||||||
a:after {
|
a:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #FF5252;
|
background: #FF5252;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
width: 0%;
|
width: 0%;
|
||||||
-webkit-transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
-ms-transform: translateX(-50%);
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
bottom: 0;
|
||||||
left: 50%;
|
transition: .35s ease;
|
||||||
bottom: 0;
|
|
||||||
-webkit-transition: .35s ease;
|
|
||||||
transition: .35s ease;
|
|
||||||
}
|
}
|
||||||
.a:hover:after, a:focus:after, a:active:after {
|
.a:hover:after, a:focus:after, a:active:after {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#hero{
|
#hero{
|
||||||
.button_container {
|
.button_container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
right: 30px;
|
right: 30px;
|
||||||
height: 23px;
|
height: 23px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
-webkit-transition: opacity .25s ease;
|
transition: opacity .25s ease;
|
||||||
transition: opacity .25s ease;
|
&:hover {
|
||||||
&:hover {
|
opacity: .7;
|
||||||
opacity: .7;
|
}
|
||||||
}
|
|
||||||
span {
|
span {
|
||||||
background: $white;
|
background: $white;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -60,8 +56,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
-webkit-transition: all .35s ease;
|
transition: all .35s ease;
|
||||||
transition: all .35s ease;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
span:nth-of-type(2) {
|
span:nth-of-type(2) {
|
||||||
|
|
@ -70,24 +65,19 @@
|
||||||
span:nth-of-type(3) {
|
span:nth-of-type(3) {
|
||||||
top: 16px;
|
top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button_container.active .top {
|
.button_container.active .top {
|
||||||
-webkit-transform: translateY(8px) translateX(0) rotate(45deg);
|
transform: translateY(8px) translateX(0) rotate(45deg);
|
||||||
-ms-transform: translateY(8px) translateX(0) rotate(45deg);
|
background: $white;
|
||||||
transform: translateY(8px) translateX(0) rotate(45deg);
|
|
||||||
background: $white;
|
|
||||||
}
|
}
|
||||||
.button_container.active .middle {
|
.button_container.active .middle {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
background: $white;
|
background: $white;
|
||||||
}
|
}
|
||||||
.button_container.active .bottom {
|
.button_container.active .bottom {
|
||||||
-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
|
transform: translateY(-8px) translateX(0) rotate(-45deg);
|
||||||
-ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
|
background: $white;
|
||||||
transform: translateY(-8px) translateX(0) rotate(-45deg);
|
|
||||||
background: $white;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -99,46 +89,40 @@
|
||||||
width: 32px;
|
width: 32px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
-webkit-transition: opacity .25s ease;
|
transition: opacity .25s ease;
|
||||||
transition: opacity .25s ease;
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
background: $blue;
|
background: $blue;
|
||||||
border: none;
|
border: none;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
-webkit-transition: all .35s ease;
|
transition: all .35s ease;
|
||||||
transition: all .35s ease;
|
cursor: pointer;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
span:nth-of-type(2) {
|
span:nth-of-type(2) {
|
||||||
top: 8px;
|
top: 8px;
|
||||||
}
|
}
|
||||||
span:nth-of-type(3) {
|
span:nth-of-type(3) {
|
||||||
top: 16px;
|
top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button_container.active .top {
|
.button_container.active .top {
|
||||||
-webkit-transform: translateY(8px) translateX(0) rotate(45deg);
|
transform: translateY(8px) translateX(0) rotate(45deg);
|
||||||
-ms-transform: translateY(8px) translateX(0) rotate(45deg);
|
background: $blue;
|
||||||
transform: translateY(8px) translateX(0) rotate(45deg);
|
|
||||||
background: $blue;
|
|
||||||
}
|
}
|
||||||
.button_container.active .middle {
|
.button_container.active .middle {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
background: $blue;
|
background: $blue;
|
||||||
}
|
}
|
||||||
.button_container.active .bottom {
|
.button_container.active .bottom {
|
||||||
-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
|
transform: translateY(-8px) translateX(0) rotate(-45deg);
|
||||||
-ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
|
|
||||||
transform: translateY(-8px) translateX(0) rotate(-45deg);
|
|
||||||
background: $blue;
|
background: $blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -151,8 +135,7 @@
|
||||||
height: 0%;
|
height: 0%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
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;
|
overflow: hidden;
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
|
|
@ -164,25 +147,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 70%;
|
height: 70%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
-webkit-transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
-ms-transform: translateY(-50%);
|
font-size: 36px;
|
||||||
transform: translateY(-50%);
|
font-weight: 200;
|
||||||
font-size: 36px;
|
text-align: center;
|
||||||
font-weight: 200;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
li {
|
li {
|
||||||
display: block;
|
display: block;
|
||||||
height: 16%;
|
height: 16%;
|
||||||
|
|
@ -220,33 +201,17 @@
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
li {
|
li {
|
||||||
-webkit-animation: fadeInRight .5s ease forwards;
|
animation: fadeInRight .5s ease forwards;
|
||||||
animation: fadeInRight .5s ease forwards;
|
animation-delay: .35s;
|
||||||
-webkit-animation-delay: .35s;
|
|
||||||
animation-delay: .35s;
|
|
||||||
}
|
}
|
||||||
li:nth-of-type(2) {
|
li:nth-of-type(2) {
|
||||||
-webkit-animation-delay: .4s;
|
animation-delay: .4s;
|
||||||
animation-delay: .4s;
|
|
||||||
}
|
}
|
||||||
li:nth-of-type(3) {
|
li:nth-of-type(3) {
|
||||||
-webkit-animation-delay: .45s;
|
animation-delay: .45s;
|
||||||
animation-delay: .45s;
|
|
||||||
}
|
}
|
||||||
li:nth-of-type(4) {
|
li:nth-of-type(4) {
|
||||||
-webkit-animation-delay: .50s;
|
animation-delay: .50s;
|
||||||
animation-delay: .50s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes fadeInRight {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
left: 20%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
left: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue