colors
This commit is contained in:
parent
a594a95c6e
commit
1aa4b55591
|
@ -2,6 +2,12 @@
|
|||
@use 'grids-responsive';
|
||||
/* The line above should remain empty */
|
||||
|
||||
$darkTextColor: #ccc;
|
||||
$darkTextColorStr: "ccc";
|
||||
$darkBgGrey: #313131;
|
||||
$blueLinkVisited: #007bff;
|
||||
$grey: #666;
|
||||
|
||||
/************************/
|
||||
/** Very Common Things **/
|
||||
/************************/
|
||||
|
@ -22,7 +28,7 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
|
|||
|
||||
a, a:visited {
|
||||
text-decoration: none;
|
||||
color: #007bff;
|
||||
color: $blueLinkVisited;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
|
@ -50,6 +56,7 @@ body {
|
|||
h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
$h2Size: 1.2rem;
|
||||
h2 {
|
||||
font-size: $h2Size;
|
||||
|
@ -69,8 +76,11 @@ h1.brand-title {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
h1.brand-title > a, h2.brand-subtitle {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
h1.brand-title > a {
|
||||
color: #000;
|
||||
font-variant: small-caps;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
@ -79,11 +89,9 @@ h1.brand-title > a:hover, h1.brand-title > a:focus {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
$grey: #666;
|
||||
h2.brand-subtitle {
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
main {
|
||||
|
@ -95,10 +103,11 @@ main {
|
|||
#header {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: #e6e6e6;
|
||||
padding: 1rem 2rem 2rem 2rem;
|
||||
border-radius: 10px;
|
||||
max-width: 1000px;
|
||||
|
||||
background: radial-gradient(circle at top left, $blueLinkVisited 0%, $grey 50%, $darkTextColor 100%);
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
|
@ -244,13 +253,8 @@ $featuresGutter: 1rem;
|
|||
/**********************************/
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
// these two should match
|
||||
$textColor: #ccc;
|
||||
$textColorStr: "ccc";
|
||||
$bgGrey: #313131;
|
||||
|
||||
h1, h2, h2.brand-subtitle, h3, body {
|
||||
color: $textColor;
|
||||
h1, h2, h3, body {
|
||||
color: $darkTextColor;
|
||||
}
|
||||
body {
|
||||
background-color: #222;
|
||||
|
@ -260,14 +264,19 @@ $featuresGutter: 1rem;
|
|||
}
|
||||
|
||||
#header {
|
||||
background-color: $bgGrey;
|
||||
background-color: $darkBgGrey;
|
||||
background: radial-gradient(circle at top left, $blueLinkVisited 0%, $darkBgGrey 50%, $darkTextColor 100%);
|
||||
}
|
||||
|
||||
h2.brand-subtitle {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#page-index {
|
||||
#subscribe-section {
|
||||
background-color: $bgGrey;
|
||||
background-color: $darkBgGrey;
|
||||
> h2 {
|
||||
color: $textColor;
|
||||
color: $darkTextColor;
|
||||
}
|
||||
|
||||
span.message-success {
|
||||
|
@ -275,7 +284,7 @@ $featuresGutter: 1rem;
|
|||
}
|
||||
|
||||
input {
|
||||
color: $textColor;
|
||||
color: $darkTextColor;
|
||||
border: 1px solid #555;
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
|
@ -288,7 +297,7 @@ $featuresGutter: 1rem;
|
|||
label::before {
|
||||
// difference from the default version: the color of the
|
||||
// shape is #ccc.
|
||||
background-image: svgarrow($textColorStr);
|
||||
background-image: svgarrow($darkTextColorStr);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue