diff --git a/README.md b/README.md index 9f30b1d..e40d200 100644 --- a/README.md +++ b/README.md @@ -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 - Updated to use CSS variables - Uses CSS Grid instead of 12-column grid system +- Support for @media prefers-color-scheme (aka Dark Mode) - Pending Release: Uses CSS env() function - Possible: Add basic Nav boilerplate diff --git a/css/skeleton.css b/css/skeleton.css index f28bf6c..e145188 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -1,15 +1,16 @@ /* -* Skeleton V2.0.4 -* Copyright 2014, Dave Gamache -* www.getskeleton.com +* Barebones V3 +* Copyright 2019 Steve Cochran +* +* Based of Skeleton by Dave Gamache +* * Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 12/29/2014 */ /* Table of contents –––––––––––––––––––––––––––––––––––––––––––––––––– +- Variables - Grid - Base Styles - Typography @@ -25,107 +26,128 @@ - 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 –––––––––––––––––––––––––––––––––––––––––––––––––– */ -.container { - position: relative; - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; } -.column, -.columns { - width: 100%; - float: left; - box-sizing: border-box; } +/* 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 */ -/* For devices larger than 400px */ -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; } + +/* did not keep .container to prevent backwards compatibility problems */ +.grid-container { + position: relative; + width: 100%; + max-width: var(--grid-max-width); + margin: 0 auto; + padding: 20px; + display: grid; + grid-gap: 20px; + gap: 20px; + + /* by default use min 200px wide columns auto-fit into width */ + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } -/* For devices larger than 550px */ -@media (min-width: 550px) { - .container { - 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%; } - +/* basic grid defaults */ +.grid-container.quarters { + grid-template-columns: repeat(4, 1fr); } +.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 –––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* 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 { - font-size: 62.5%; } + font-size: var(--base-font-size); +} body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + font-size: 1.5em; line-height: 1.6; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; } + color: var(--text-color-normal); + background-color: var(--background-color);; +} /* Typography @@ -158,9 +180,9 @@ p { /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { - color: #1EAEDB; } + color: var(--accent-color); } a:hover { - color: #0FA0CE; } + color: var(--accent-color-hover); } /* Buttons @@ -173,7 +195,7 @@ input[type="button"] { display: inline-block; height: 38px; padding: 0 30px; - color: #555; + color: var(--text-color-softer); text-align: center; font-size: 11px; font-weight: 600; @@ -184,7 +206,7 @@ input[type="button"] { white-space: nowrap; background-color: transparent; border-radius: 4px; - border: 1px solid #bbb; + border: 1px solid var(--border-color); cursor: pointer; box-sizing: border-box; } .button:hover, @@ -197,17 +219,17 @@ button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { - color: #333; - border-color: #888; + color: var(--text-color-normal); + border-color: var(--text-color-softer); outline: 0; } .button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { - color: #FFF; - background-color: #33C3F0; - border-color: #33C3F0; } + color: var(--button-primary-color); + background-color: var(--accent-color); + border-color: var(--accent-color); } .button.button-primary:hover, button.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="reset"].button-primary:focus, input[type="button"].button-primary:focus { - color: #FFF; - background-color: #1EAEDB; - border-color: #1EAEDB; } + color: var(--button-primary-color); + background-color: var(--accent-color-hover); + border-color: var(--accent-color-hover); } /* Forms @@ -236,8 +258,8 @@ textarea, select { height: 38px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ - background-color: #fff; - border: 1px solid #D1D1D1; + background-color: var(--background-color); + border: 1px solid #var(--border-color-softer); border-radius: 4px; box-shadow: none; box-sizing: border-box; } @@ -266,7 +288,7 @@ input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { - border: 1px solid #33C3F0; + border: 1px solid ; outline: 0; } label, legend { @@ -311,8 +333,8 @@ code { margin: 0 .2rem; font-size: 90%; white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; + background: var(--code-background); + border: 1px solid var(--border-color-softer); border-radius: 4px; } pre > code { display: block; @@ -326,7 +348,7 @@ th, td { padding: 12px 15px; text-align: left; - border-bottom: 1px solid #E1E1E1; } + border-bottom: 1px solid var(--border-color-softer); } th:first-child, td:first-child { padding-left: 0; } @@ -377,7 +399,7 @@ hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; - border-top: 1px solid #E1E1E1; } + border-top: 1px solid var(--border-color-softer); } /* Clearing