mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
chore: SASS whitespace consistency
This commit is contained in:
Joshua Seigler
parent
831141ae9a
commit
3ad64419af
9 changed files with 944 additions and 944 deletions
|
|
@ -11,8 +11,8 @@
|
|||
font-size: 20px;
|
||||
}
|
||||
#background-video {
|
||||
top: -40px;
|
||||
max-height: 600px;
|
||||
top: -40px;
|
||||
max-height: 600px;
|
||||
}
|
||||
#key-features {
|
||||
padding: 0 30px 0 30px;
|
||||
|
|
|
|||
|
|
@ -12,28 +12,28 @@ $dark-blue: #0b3b5a;
|
|||
// for the style guide:
|
||||
|
||||
@function contrast-color($color, $dark, $light, $threshold: 50) {
|
||||
@if (lightness(scale-color($color, $green: 30%, $blue: -6%, $red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm
|
||||
@return $dark; // Lighter background, return dark color
|
||||
} @else {
|
||||
@return $light; // Darker background, return light color
|
||||
}
|
||||
@if (lightness(scale-color($color, $green: 30%, $blue: -6%, $red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm
|
||||
@return $dark; // Lighter background, return dark color
|
||||
} @else {
|
||||
@return $light; // Darker background, return light color
|
||||
}
|
||||
}
|
||||
|
||||
$color:
|
||||
('black', $black),
|
||||
('white', $white),
|
||||
('black', $black),
|
||||
('white', $white),
|
||||
|
||||
('blue', $blue),
|
||||
('red', $red),
|
||||
('green', $green),
|
||||
('blue', $blue),
|
||||
('red', $red),
|
||||
('green', $green),
|
||||
|
||||
('gray', $gray),
|
||||
('dark-blue', $dark-blue);
|
||||
('gray', $gray),
|
||||
('dark-blue', $dark-blue);
|
||||
|
||||
@each $name, $bgcolor in $color {
|
||||
.color__tile--#{$name}-bg {
|
||||
background-color: $bgcolor;
|
||||
color: contrast-color($bgcolor, #000, #fff);
|
||||
box-shadow: 0 0 10px -4px contrast-color($bgcolor, black, transparent, 80) inset;
|
||||
}
|
||||
.color__tile--#{$name}-bg {
|
||||
background-color: $bgcolor;
|
||||
color: contrast-color($bgcolor, #000, #fff);
|
||||
box-shadow: 0 0 10px -4px contrast-color($bgcolor, black, transparent, 80) inset;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ This is for time-saving base classes that get @extend -ed
|
|||
*/
|
||||
|
||||
%clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +1,46 @@
|
|||
/*
|
||||
footer
|
||||
nav.content
|
||||
section x5
|
||||
<text>
|
||||
ul
|
||||
li
|
||||
.footer--menu.content
|
||||
.footer--languagePicker
|
||||
a x3
|
||||
.footer--legal
|
||||
.content
|
||||
.footer--copyright
|
||||
a
|
||||
nav.content
|
||||
section x5
|
||||
<text>
|
||||
ul
|
||||
li
|
||||
.footer--menu.content
|
||||
.footer--languagePicker
|
||||
a x3
|
||||
.footer--legal
|
||||
.content
|
||||
.footer--copyright
|
||||
a
|
||||
*/
|
||||
|
||||
footer {
|
||||
background-color: #333333;
|
||||
color: #717171;
|
||||
padding-top: 4em;
|
||||
background-color: #333333;
|
||||
color: #717171;
|
||||
padding-top: 4em;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
> nav {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
> section {
|
||||
display: table-cell;
|
||||
> ul {
|
||||
margin: 1em 0 0;
|
||||
padding: 0;
|
||||
> li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> nav {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
> section {
|
||||
display: table-cell;
|
||||
> ul {
|
||||
margin: 1em 0 0;
|
||||
padding: 0;
|
||||
> li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer--social {
|
||||
-moz-column-count: 2;
|
||||
-webkit-column-count: 2;
|
||||
column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
-webkit-column-count: 2;
|
||||
column-count: 2;
|
||||
}
|
||||
|
|
|
|||
1372
_sass/_grid.scss
1372
_sass/_grid.scss
File diff suppressed because it is too large
Load diff
|
|
@ -16,11 +16,11 @@ a.blog_link {
|
|||
}
|
||||
|
||||
.img-circle {
|
||||
margin: 1px;
|
||||
border:1px solid #dddddd;
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
margin: 1px;
|
||||
border:1px solid #dddddd;
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
}
|
||||
|
||||
.background-title {
|
||||
|
|
|
|||
|
|
@ -1,161 +1,161 @@
|
|||
.container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
top: 40%;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
top: 40%;
|
||||
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%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
-webkit-transition: .35s ease;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
span {
|
||||
background: $white;
|
||||
border: none;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-transition: all .35s ease;
|
||||
transition: all .35s ease;
|
||||
cursor: pointer;
|
||||
background: $white;
|
||||
border: none;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-transition: all .35s ease;
|
||||
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: $white;
|
||||
-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;
|
||||
}
|
||||
.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;
|
||||
-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;
|
||||
}
|
||||
}
|
||||
|
||||
.button_container {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
height: 23px;
|
||||
width: 32px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
-webkit-transition: opacity .25s ease;
|
||||
transition: opacity .25s ease;
|
||||
&:hover {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
height: 23px;
|
||||
width: 32px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
-webkit-transition: opacity .25s ease;
|
||||
transition: opacity .25s ease;
|
||||
&:hover {
|
||||
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;
|
||||
-webkit-transition: all .35s ease;
|
||||
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;
|
||||
-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;
|
||||
}
|
||||
.button_container.active .middle {
|
||||
opacity: 0;
|
||||
background: $blue;
|
||||
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);
|
||||
background: $blue;
|
||||
-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;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
background: $black;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transition: opacity .35s, visibility .35s, height .35s;
|
||||
transition: opacity .35s, visibility .35s, height .35s;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
background: $black;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-transition: opacity .35s, visibility .35s, height .35s;
|
||||
transition: opacity .35s, visibility .35s, height .35s;
|
||||
overflow: hidden;
|
||||
|
||||
.logo {
|
||||
.logo {
|
||||
width: 180px;
|
||||
height: auto;
|
||||
top: 30px;
|
||||
|
|
@ -163,42 +163,42 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
margin-top: 0px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 50%;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
margin-top: 0px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 50%;
|
||||
li {
|
||||
display: block;
|
||||
height: 16%;
|
||||
height: calc(100% / 6);
|
||||
min-height: 50px;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
height: 16%;
|
||||
height: calc(100% / 6);
|
||||
min-height: 50px;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 5px;
|
||||
display: block;
|
||||
position: relative;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
a:hover:after, a:focus:after, a:active:after {
|
||||
width: 100%;
|
||||
|
|
@ -216,47 +216,47 @@
|
|||
}
|
||||
}
|
||||
.overlay.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
height: 100%;
|
||||
li {
|
||||
-webkit-animation: fadeInRight .5s ease forwards;
|
||||
animation: fadeInRight .5s ease forwards;
|
||||
-webkit-animation-delay: .35s;
|
||||
animation-delay: .35s;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
height: 100%;
|
||||
li {
|
||||
-webkit-animation: fadeInRight .5s ease forwards;
|
||||
animation: fadeInRight .5s ease forwards;
|
||||
-webkit-animation-delay: .35s;
|
||||
animation-delay: .35s;
|
||||
}
|
||||
li:nth-of-type(2) {
|
||||
-webkit-animation-delay: .4s;
|
||||
animation-delay: .4s;
|
||||
-webkit-animation-delay: .4s;
|
||||
animation-delay: .4s;
|
||||
}
|
||||
li:nth-of-type(3) {
|
||||
-webkit-animation-delay: .45s;
|
||||
animation-delay: .45s;
|
||||
-webkit-animation-delay: .45s;
|
||||
animation-delay: .45s;
|
||||
}
|
||||
li:nth-of-type(4) {
|
||||
-webkit-animation-delay: .50s;
|
||||
animation-delay: .50s;
|
||||
-webkit-animation-delay: .50s;
|
||||
animation-delay: .50s;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
left: 20%;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
left: 20%;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
0% {
|
||||
opacity: 0;
|
||||
left: 20%;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
left: 20%;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
#styleguide {
|
||||
.component {
|
||||
&:after { // TODO clearfix mixin
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.component + .component {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.component {
|
||||
&:after { // TODO clearfix mixin
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.component + .component {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.color__tile {
|
||||
display: inline-block;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
width: 10em;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.color__tile {
|
||||
display: inline-block;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
width: 10em;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ h1 {
|
|||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-size: 28px;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue