Replaced all colors with CSS vars

Added initial theme support and dark theme
Replaced Skeleton grid classes with basic CSS grid utilities
  Note: did not try to replicate the 12 column functionality
This commit is contained in:
Steve 2019-01-21 05:22:36 -05:00
parent 9ea615074e
commit 3f08177d00
2 changed files with 132 additions and 109 deletions

View File

@ -7,6 +7,7 @@ Building off of Skeleton's [awesomeness](https://github.com/dhg/Skeleton#why-its
- Normalize.css added as a submodule to remain current - Normalize.css added as a submodule to remain current
- Updated to use CSS variables - Updated to use CSS variables
- Uses CSS Grid instead of 12-column grid system - Uses CSS Grid instead of 12-column grid system
- Support for @media prefers-color-scheme (aka Dark Mode)
- Pending Release: Uses CSS env() function - Pending Release: Uses CSS env() function
- Possible: Add basic Nav boilerplate - Possible: Add basic Nav boilerplate

234
css/skeleton.css vendored
View File

@ -1,15 +1,16 @@
/* /*
* Skeleton V2.0.4 * Barebones V3
* Copyright 2014, Dave Gamache * Copyright 2019 Steve Cochran
* www.getskeleton.com *
* Based of Skeleton by Dave Gamache
*
* Free to use under the MIT license. * Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/ */
/* Table of contents /* Table of contents
- Variables
- Grid - Grid
- Base Styles - Base Styles
- Typography - Typography
@ -25,107 +26,128 @@
- Media Queries - Media Queries
*/ */
/* Variables
*/
:root {
/* default theme: light background, dark text, blue accent */
--theme-hue: 0; /* white */
--accent-hue: 194; /* blue */
--text-color-richer: hsl(var(--theme-hue), 0%, 5%); /* #0d0d0d */
--text-color-normal: hsl(var(--theme-hue), 0%, 13%); /* #222222 text color; button:hover:focus color */
--text-color-softer: hsl(var(--theme-hue), 0%, 33%); /* #555555 button color; button:hover border */
--accent-color: hsl(var(--accent-hue), 86%, 57%); /* #33C3F0 link; button-primary bg+border; textarea,select:focus border */
--accent-color-hover: hsl(var(--accent-hue), 76%, 49%) /* #1EAEDB link hover; button-primary:hover:focus bg+border */
--border-color: hsl(var(--theme-hue), 0%, 73%); /* #bbbbbb button border */
--border-color-softer: hsl(var(--theme-hue), 0%, 82%); /* #d1d1d1 textarea,select,code,td,hr border */
--background-color: initial; /* transparent body background; textarea,select background */
--code-background: hsl(var(--theme-hue), 0%, 95%); /* #f1f1f1 code background*/
--button-primary-color: white;
/* Note: Skeleton was based off a 10px font sizing for REM */
/* 62.5% of typical 16px browser default = 10px */
--base-font-size: 62.5%;
/* Grid Defaults - default to match orig skeleton settings */
--grid-max-width: 960px;
}
/* theme support */
*/
@media (prefers-color-scheme: dark) {
:root {
/* dark theme: light background, dark text, blue accent */
--theme-hue: 0; /* black */
--accent-hue: 194; /* blue */
--text-color-richer: hsl(var(--theme-hue), 0%, 95%); /* */
--text-color-normal: hsl(var(--theme-hue), 0%, 87%); /* text color; button:hover:focus color */
--text-color-softer: hsl(var(--theme-hue), 0%, 67%); /* button color; button:hover border */
--accent-color: hsl(var(--accent-hue), 86%, 57%); /* link; button-primary bg+border; textarea,select:focus border */
--accent-color-hover: hsl(var(--accent-hue), 76%, 49%) /* link hover; button-primary:hover:focus bg+border */
--border-color: hsl(var(--theme-hue), 0%, 27%); /* button border */
--border-color-softer: hsl(var(--theme-hue), 0%, 18%); /* textarea,select,code,td,hr border */
--background-color: hsl(var(--theme-hue), 0%, 5%); /* body background; textarea,select background */
--code-background: hsl(var(--theme-hue), 0%, 5%); /* code background*/
--button-primary-color: white;
}
/* TODO - test dialing back image intensity on dark background
img {
opacity: .80;
transition: opacity .5s ease-in-out;
}
img:hover {
opacity: 1;
}
*/
}
/* Grid /* Grid
*/ */
.container { /* CSS Grid depends much more on CSS than HTML, so there is less boilerplate
than with skeleton. Only basic 1-4 column grids are included.
Any additional needs should be made using custom CSS directives */
/* did not keep .container to prevent backwards compatibility problems */
.grid-container {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: 960px; max-width: var(--grid-max-width);
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 20px;
box-sizing: border-box; } display: grid;
.column, grid-gap: 20px;
.columns { gap: 20px;
width: 100%;
float: left;
box-sizing: border-box; }
/* For devices larger than 400px */ /* by default use min 200px wide columns auto-fit into width */
@media (min-width: 400px) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
.container {
width: 85%;
padding: 0; }
} }
/* For devices larger than 550px */ /* basic grid defaults */
@media (min-width: 550px) { .grid-container.quarters {
.container { grid-template-columns: repeat(4, 1fr);
width: 80%; }
.column,
.columns {
margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
} }
.grid-container.thirds {
grid-template-columns: repeat(3, 1fr);
}
.grid-container.halves {
grid-template-columns: repeat(2, 1fr);
}
.grid-container.full {
grid-template-columns: 1fr;
}
/* Base Styles /* Base Styles
*/ */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html { html {
font-size: 62.5%; } font-size: var(--base-font-size);
}
body { body {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ font-size: 1.5em;
line-height: 1.6; line-height: 1.6;
font-weight: 400; font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222; } color: var(--text-color-normal);
background-color: var(--background-color);;
}
/* Typography /* Typography
@ -158,9 +180,9 @@ p {
/* Links /* Links
*/ */
a { a {
color: #1EAEDB; } color: var(--accent-color); }
a:hover { a:hover {
color: #0FA0CE; } color: var(--accent-color-hover); }
/* Buttons /* Buttons
@ -173,7 +195,7 @@ input[type="button"] {
display: inline-block; display: inline-block;
height: 38px; height: 38px;
padding: 0 30px; padding: 0 30px;
color: #555; color: var(--text-color-softer);
text-align: center; text-align: center;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
@ -184,7 +206,7 @@ input[type="button"] {
white-space: nowrap; white-space: nowrap;
background-color: transparent; background-color: transparent;
border-radius: 4px; border-radius: 4px;
border: 1px solid #bbb; border: 1px solid var(--border-color);
cursor: pointer; cursor: pointer;
box-sizing: border-box; } box-sizing: border-box; }
.button:hover, .button:hover,
@ -197,17 +219,17 @@ button:focus,
input[type="submit"]:focus, input[type="submit"]:focus,
input[type="reset"]:focus, input[type="reset"]:focus,
input[type="button"]:focus { input[type="button"]:focus {
color: #333; color: var(--text-color-normal);
border-color: #888; border-color: var(--text-color-softer);
outline: 0; } outline: 0; }
.button.button-primary, .button.button-primary,
button.button-primary, button.button-primary,
input[type="submit"].button-primary, input[type="submit"].button-primary,
input[type="reset"].button-primary, input[type="reset"].button-primary,
input[type="button"].button-primary { input[type="button"].button-primary {
color: #FFF; color: var(--button-primary-color);
background-color: #33C3F0; background-color: var(--accent-color);
border-color: #33C3F0; } border-color: var(--accent-color); }
.button.button-primary:hover, .button.button-primary:hover,
button.button-primary:hover, button.button-primary:hover,
input[type="submit"].button-primary:hover, input[type="submit"].button-primary:hover,
@ -218,9 +240,9 @@ button.button-primary:focus,
input[type="submit"].button-primary:focus, input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus, input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus { input[type="button"].button-primary:focus {
color: #FFF; color: var(--button-primary-color);
background-color: #1EAEDB; background-color: var(--accent-color-hover);
border-color: #1EAEDB; } border-color: var(--accent-color-hover); }
/* Forms /* Forms
@ -236,8 +258,8 @@ textarea,
select { select {
height: 38px; height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff; background-color: var(--background-color);
border: 1px solid #D1D1D1; border: 1px solid #var(--border-color-softer);
border-radius: 4px; border-radius: 4px;
box-shadow: none; box-shadow: none;
box-sizing: border-box; } box-sizing: border-box; }
@ -266,7 +288,7 @@ input[type="url"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
border: 1px solid #33C3F0; border: 1px solid ;
outline: 0; } outline: 0; }
label, label,
legend { legend {
@ -311,8 +333,8 @@ code {
margin: 0 .2rem; margin: 0 .2rem;
font-size: 90%; font-size: 90%;
white-space: nowrap; white-space: nowrap;
background: #F1F1F1; background: var(--code-background);
border: 1px solid #E1E1E1; border: 1px solid var(--border-color-softer);
border-radius: 4px; } border-radius: 4px; }
pre > code { pre > code {
display: block; display: block;
@ -326,7 +348,7 @@ th,
td { td {
padding: 12px 15px; padding: 12px 15px;
text-align: left; text-align: left;
border-bottom: 1px solid #E1E1E1; } border-bottom: 1px solid var(--border-color-softer); }
th:first-child, th:first-child,
td:first-child { td:first-child {
padding-left: 0; } padding-left: 0; }
@ -377,7 +399,7 @@ hr {
margin-top: 3rem; margin-top: 3rem;
margin-bottom: 3.5rem; margin-bottom: 3.5rem;
border-width: 0; border-width: 0;
border-top: 1px solid #E1E1E1; } border-top: 1px solid var(--border-color-softer); }
/* Clearing /* Clearing