changed sass to be more 'dark" but still /comfy/

This commit is contained in:
shockrahwow 2019-11-27 22:42:04 -08:00
parent 3f25ca913c
commit a5f78421c3
2 changed files with 21 additions and 97 deletions

View File

@ -1,3 +1,4 @@
@import 'general.scss';
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -11,7 +12,7 @@
body {
line-height: 1.7em;
color: #7f8c8d;
background: whitesmoke;
background: $back-grey;
font-size: 13px;
}
@ -22,12 +23,11 @@ h4,
h5,
h6,
label {
color: #34495e;
color: $text-bold;
}
.pure-img-responsive {
max-width: 100%;
height: auto;
.bg-dark {
background-color: $bar-grey;
}
.l-box {
@ -46,7 +46,8 @@ label {
.card {
display: inline-block;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
background: white;
background: $top-grey;
color: $text-norm;
margin: 20px;
margin-left: 25%;
margin-right: 25%;
@ -55,7 +56,7 @@ label {
.head-card {
display: inline-block;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
background: whitesmoke;
background: $top-grey;
margin: 20px;
}
@ -78,72 +79,6 @@ label {
margin-bottom: 1em;
}
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/
.pure-button {
background-color: #1f8dd6;
color: white;
padding: 0.5em 2em;
border-radius: 5px;
}
a.pure-button-primary {
background: white;
color: #1f8dd6;
border-radius: 5px;
font-size: 120%;
}
.home-menu {
padding: 0.5em;
text-align: center;
}
.home-menu {
background: rgb(0, 14, 15);
}
.pure-menu.pure-menu-fixed {
border-bottom: none;
/* I need a higher z-index here because of the scroll-over effect. */
z-index: 4;
padding-left: 25%;
padding-right: 25%;
}
.home-menu .pure-menu-heading {
font-weight: 400;
font-size: 120%;
}
.home-menu .pure-menu-selected a {
color: white;
}
.home-menu a {
color: whitesmoke;
}
.home-menu li a:hover,
.home-menu li a:focus {
background: none;
border: none;
color: #AECFE5;
}
/*
* -- CONTENT STYLES --
*/
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
height: 100%;
width: 100%;
min-height: 12%;
z-index: 2;
background: white;
background: rgba(0,0,0,0);
}
/* We want to give the content area some more padding */
.content {
@ -163,10 +98,12 @@ a.pure-button-primary {
color: white;
}
.pure-g {
background-color: $back-grey;
}
/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
color: #1f8dd6;
color: #DA2860;
color: $heading-pink;
text-align: center;
}
.content-subhead i {

View File

@ -1,3 +1,4 @@
@import 'general.scss';
$button_color_bg: #1f8dd6;
$button_color_txt: white;
* {
@ -17,6 +18,10 @@ body {
line-height: 1.7em;
font-size: 13px;
}
p {
color: $text-norm;
}
.navbar {
z-index: 2;
}
@ -41,31 +46,11 @@ a {
}
.pure-form input[type] {
border: 2px solid #ddd;
box-shadow: none;
font-size: 100%;
width: 100%;
margin-bottom: 1em;
.pure-g {
background-color: $back-grey;
}
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/
.pure-button {
background-color: $button_color_bg;
color: $button_color_txt;
padding: 0.5em 2em;
border-radius: 5px;
}
a.pure-button-primary {
background: $button_color_bg;
color: $button_color_txt;
border-radius: 5px;
font-size: 120%;
}
/*
* -- SPLASH STYLES --
@ -136,12 +121,14 @@ a.pure-button-primary {
/* We want to give the content area some more padding */
.content {
padding: 1em 1em 3em;
background-color: $back-grey;
}
/* This is the class used for the main content headers (<h2>) */
.content-head {
font-weight: 400;
text-transform: uppercase;
color: $text-bold;
letter-spacing: 0.1em;
margin: 2em 0 1em;
}