joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: SASS whitespace consistency

Browse source
This commit is contained in:
Joshua Seigler 2016-09-04 11:21:40 -04:00
parent 831141ae9a
commit 3ad64419af
9 changed files with 944 additions and 944 deletions
Download patch file Download diff file Expand all files Collapse all files

8
_sass/_1024.scss
View file

@ -6,13 +6,13 @@
h1 { h1 {
font-size: 34px; font-size: 34px;
} }
h2 { h2 {
font-size: 20px; font-size: 20px;
} }
#background-video { #background-video {
top: -40px; top: -40px;
max-height: 600px; max-height: 600px;
} }
#key-features { #key-features {
padding: 0 30px 0 30px; padding: 0 30px 0 30px;
@ -37,4 +37,4 @@
height: auto; height: auto;
} }
} }
} }

34
_sass/_colors.scss
View file

@ -12,28 +12,28 @@ $dark-blue: #0b3b5a;
// for the style guide: // for the style guide:
@function contrast-color($color, $dark, $light, $threshold: 50) { @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 @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 @return $dark; // Lighter background, return dark color
} @else { } @else {
@return $light; // Darker background, return light color @return $light; // Darker background, return light color
} }
} }
$color: $color:
('black', $black), ('black', $black),
('white', $white), ('white', $white),
('blue', $blue), ('blue', $blue),
('red', $red), ('red', $red),
('green', $green), ('green', $green),
('gray', $gray), ('gray', $gray),
('dark-blue', $dark-blue); ('dark-blue', $dark-blue);
@each $name, $bgcolor in $color { @each $name, $bgcolor in $color {
.color__tile--#{$name}-bg { .color__tile--#{$name}-bg {
background-color: $bgcolor; background-color: $bgcolor;
color: contrast-color($bgcolor, #000, #fff); color: contrast-color($bgcolor, #000, #fff);
box-shadow: 0 0 10px -4px contrast-color($bgcolor, black, transparent, 80) inset; box-shadow: 0 0 10px -4px contrast-color($bgcolor, black, transparent, 80) inset;
} }
} }

10
_sass/_directives.scss
View file

@ -3,9 +3,9 @@ This is for time-saving base classes that get @extend -ed
*/ */
%clearfix { %clearfix {
&:after { &:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
} }

70
_sass/_footer.scss
View file

@ -1,46 +1,46 @@
/* /*
footer footer
nav.content nav.content
section x5 section x5
<text> <text>
ul ul
li li
.footer--menu.content .footer--menu.content
.footer--languagePicker .footer--languagePicker
a x3 a x3
.footer--legal .footer--legal
.content .content
.footer--copyright .footer--copyright
a a
*/ */
footer { footer {
background-color: #333333; background-color: #333333;
color: #717171; color: #717171;
padding-top: 4em; padding-top: 4em;
a { a {
color: $white; color: $white;
} }
> nav { > nav {
display: table; display: table;
table-layout: fixed; table-layout: fixed;
> section { > section {
display: table-cell; display: table-cell;
> ul { > ul {
margin: 1em 0 0; margin: 1em 0 0;
padding: 0; padding: 0;
> li { > li {
list-style: none; list-style: none;
} }
} }
} }
} }
} }
.footer--social { .footer--social {
-moz-column-count: 2; -moz-column-count: 2;
-webkit-column-count: 2; -webkit-column-count: 2;
column-count: 2; column-count: 2;
} }

1374
_sass/_grid.scss
View file

File diff suppressed because it is too large Load diff

10
_sass/_junk-drawer.scss
View file

@ -16,11 +16,11 @@ a.blog_link {
} }
.img-circle { .img-circle {
margin: 1px; margin: 1px;
border:1px solid #dddddd; border:1px solid #dddddd;
border-radius: 50%; border-radius: 50%;
-webkit-border-radius: 50%; -webkit-border-radius: 50%;
-moz-border-radius: 50%; -moz-border-radius: 50%;
} }
.background-title { .background-title {

346
_sass/_overlay-menu.scss
View file

@ -1,210 +1,210 @@
.container { .container {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
top: 40%; top: 40%;
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%); -webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
left: 50%; left: 50%;
bottom: 0; bottom: 0;
-webkit-transition: .35s ease; -webkit-transition: .35s ease;
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; -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;
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; -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); -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
-ms-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: $white; 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); -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
-ms-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: $white; background: $white;
} }
} }
.button_container { .button_container {
position: absolute; position: absolute;
top: 30px; top: 30px;
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; -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; -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); -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
-ms-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; 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); -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
-ms-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; background: $blue;
} }
.overlay { .overlay {
position: fixed; position: fixed;
background: $black; background: $black;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 0%; height: 0%;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s; -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 {
width: 180px; width: 180px;
height: auto; height: auto;
top: 30px; top: 30px;
left: 30px; left: 30px;
position: absolute; position: absolute;
} }
nav { nav {
position: relative; position: relative;
height: 70%; height: 70%;
top: 50%; top: 50%;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
font-size: 36px; font-size: 36px;
font-weight: 200; font-weight: 200;
text-align: center; 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%;
height: calc(100% / 6); height: calc(100% / 6);
min-height: 50px; min-height: 50px;
position: relative; position: relative;
opacity: 0; opacity: 0;
} }
a { a {
display: block; display: block;
position: relative; position: relative;
color: $white; color: $white;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
padding-bottom: 15px; padding-bottom: 15px;
padding-top: 5px; padding-top: 5px;
} }
a:hover:after, a:focus:after, a:active:after { a:hover:after, a:focus:after, a:active:after {
width: 100%; width: 100%;
} }
} }
.sign-up-btn { .sign-up-btn {
border: none; border: none;
padding: 30px; padding: 30px;
@ -216,47 +216,47 @@
} }
} }
.overlay.open { .overlay.open {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
height: 100%; height: 100%;
li { li {
-webkit-animation: fadeInRight .5s ease forwards; -webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards; animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s; -webkit-animation-delay: .35s;
animation-delay: .35s; animation-delay: .35s;
} }
li:nth-of-type(2) { li:nth-of-type(2) {
-webkit-animation-delay: .4s; -webkit-animation-delay: .4s;
animation-delay: .4s; animation-delay: .4s;
} }
li:nth-of-type(3) { li:nth-of-type(3) {
-webkit-animation-delay: .45s; -webkit-animation-delay: .45s;
animation-delay: .45s; animation-delay: .45s;
} }
li:nth-of-type(4) { li:nth-of-type(4) {
-webkit-animation-delay: .50s; -webkit-animation-delay: .50s;
animation-delay: .50s; animation-delay: .50s;
} }
} }
@-webkit-keyframes fadeInRight { @-webkit-keyframes fadeInRight {
0% { 0% {
opacity: 0; opacity: 0;
left: 20%; left: 20%;
} }
100% { 100% {
opacity: 1; opacity: 1;
left: 0; left: 0;
} }
} }
@keyframes fadeInRight { @keyframes fadeInRight {
0% { 0% {
opacity: 0; opacity: 0;
left: 20%; left: 20%;
} }
100% { 100% {
opacity: 1; opacity: 1;
left: 0; left: 0;
} }
} }

34
_sass/_styleguide.scss
View file

@ -1,20 +1,20 @@
#styleguide { #styleguide {
.component { .component {
&:after { // TODO clearfix mixin &:after { // TODO clearfix mixin
content: ''; content: '';
display: table; display: table;
clear: both; clear: both;
} }
} }
.component + .component { .component + .component {
margin-top: 10px; margin-top: 10px;
} }
.color__tile { .color__tile {
display: inline-block; display: inline-block;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
width: 10em; width: 10em;
border-radius: 10px; border-radius: 10px;
} }
} }

2
_sass/_typography.scss
View file

@ -34,7 +34,7 @@ h1 {
} }
h2 { h2 {
font-size: 22px; font-size: 28px;
color: $blue; color: $blue;
} }