Converted to use:
- CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
This commit is contained in:
Steve
parent
ef8330bedf
commit
8ad9b471d5
@ -7,9 +7,9 @@
|
||||
* Free to use under the MIT license.
|
||||
*/
|
||||
|
||||
|
||||
/* Table of contents
|
||||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
- Media Breakpoints
|
||||
- Variables
|
||||
- Grid
|
||||
- Base Styles
|
||||
@ -26,7 +26,19 @@
|
||||
- Media Queries
|
||||
*/
|
||||
|
||||
/* Variables
|
||||
/* ENV Variables
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* Media breakpoint variables for use in media queries
|
||||
* Note: this section is currently commented out pending release of
|
||||
* final CSS env() spec
|
||||
* Breakpoints based on
|
||||
* https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* CSS Variables
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
:root {
|
||||
|
||||
@ -39,12 +51,13 @@
|
||||
--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 */
|
||||
--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 */
|
||||
--background-color-softer: hsl(var(--theme-hue), 0%, 95%);
|
||||
--code-background: hsl(var(--theme-hue), 0%, 95%); /* #f1f1f1 code background*/
|
||||
|
||||
--button-primary-color: white;
|
||||
@ -58,7 +71,7 @@
|
||||
--grid-max-width: 960px;
|
||||
}
|
||||
|
||||
/* theme support */
|
||||
/* theme support
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
@ -67,21 +80,25 @@
|
||||
--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-normal: hsl(var(--theme-hue), 0%, 80%); /* 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 */
|
||||
--accent-color: hsl(var(--accent-hue), 76%, 49%); /* link; button-primary bg+border; textarea,select:focus border */
|
||||
--accent-color-hover: hsl(var(--accent-hue), 86%, 57%); /* 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 */
|
||||
--border-color-softer: hsl(var(--theme-hue), 0%, 20%); /* textarea,select,code,td,hr border */
|
||||
|
||||
--background-color: hsl(var(--theme-hue), 0%, 5%); /* body background; textarea,select background */
|
||||
--background-color: hsl(var(--theme-hue), 0%, 12%); /* body background; textarea,select background */
|
||||
--background-color-softer: hsl(var(--theme-hue), 0%, 18%);
|
||||
--code-background: hsl(var(--theme-hue), 0%, 5%); /* code background*/
|
||||
|
||||
--button-primary-color: white;
|
||||
}
|
||||
|
||||
img.value-img {
|
||||
filter: invert(0.8);
|
||||
}
|
||||
/* TODO - test dialing back image intensity on dark background
|
||||
img {
|
||||
opacity: .80;
|
||||
@ -101,7 +118,6 @@
|
||||
Any additional needs should be made using custom CSS directives */
|
||||
|
||||
|
||||
/* did not keep .container to prevent backwards compatibility problems */
|
||||
.grid-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -116,7 +132,7 @@
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
/* basic grid defaults */
|
||||
/* basic grids */
|
||||
.grid-container.quarters {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
@ -132,9 +148,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Base Styles
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
html {
|
||||
@ -259,7 +272,7 @@ select {
|
||||
height: 38px;
|
||||
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid #var(--border-color-softer);
|
||||
border: 1px solid var(--border-color-softer);
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box; }
|
||||
@ -288,7 +301,7 @@ input[type="url"]:focus,
|
||||
input[type="password"]:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border: 1px solid ;
|
||||
border: 1px solid var(--accent-color);
|
||||
outline: 0; }
|
||||
label,
|
||||
legend {
|
||||
|
||||
104
css/skeleton-legacy.css
Normal file
104
css/skeleton-legacy.css
Normal file
@ -0,0 +1,104 @@
|
||||
/* include this file if you want to duplicate all classes available
|
||||
* the original skeleton boilerplate.
|
||||
*
|
||||
* Note: if you are creating a new site, this file is not needed
|
||||
* and simpler CSS Grid elements should be used without all the
|
||||
* additional classes on HTML elements. See the Readme for examples.
|
||||
*/
|
||||
|
||||
|
||||
/* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* Directives to replicate all skeleton.css functionality */
|
||||
/* .row becomes a grid container with 12 columns */
|
||||
.container, .row {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4%;
|
||||
}
|
||||
|
||||
.column,
|
||||
.columns {
|
||||
width: 100%;
|
||||
float: left;
|
||||
box-sizing: border-box; }
|
||||
|
||||
/* For devices larger than 400px */
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
width: 85%;
|
||||
padding: 0; }
|
||||
}
|
||||
|
||||
/* For devices larger than 550px */
|
||||
@media (min-width: 550px) {
|
||||
.container {
|
||||
width: 80%;
|
||||
}
|
||||
.row {
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 4%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.one.column, .one.columns { grid-column-end: span 1; }
|
||||
.two.columns { grid-column-end: span 2; }
|
||||
.three.columns { grid-column-end: span 3; }
|
||||
.four.columns { grid-column-end: span 4; }
|
||||
.five.columns { grid-column-end: span 5; }
|
||||
.six.columns { grid-column-end: span 6; }
|
||||
.seven.columns { grid-column-end: span 7; }
|
||||
.eight.columns { grid-column-end: span 8; }
|
||||
.nine.columns { grid-column-end: span 9; }
|
||||
.ten.columns { grid-column-end: span 10; }
|
||||
.eleven.columns { grid-column-end: span 11; }
|
||||
.twelve.columns { grid-column-end: span 12; }
|
||||
.one-third.column { grid-column-end: span 4; }
|
||||
.two-thirds.column { grid-column-end: span 8; }
|
||||
.one-half.column { grid-column-end: span 6; }
|
||||
|
||||
/* Offsets */
|
||||
.offset-by-one.column,
|
||||
.offset-by-one.columns { grid-column-start: 2; }
|
||||
.offset-by-two.column,
|
||||
.offset-by-two.columns { grid-column-start: 3; }
|
||||
.offset-by-three.column,
|
||||
.offset-by-three.columns { grid-column-start: 4; }
|
||||
.offset-by-four.column,
|
||||
.offset-by-four.columns { grid-column-start: 5; }
|
||||
.offset-by-five.column,
|
||||
.offset-by-five.columns { grid-column-start: 6; }
|
||||
.offset-by-six.column,
|
||||
.offset-by-six.columns { grid-column-start: 7; }
|
||||
.offset-by-seven.column,
|
||||
.offset-by-seven.columns { grid-column-start: 8; }
|
||||
.offset-by-eight.column,
|
||||
.offset-by-eight.columns { grid-column-start: 9; }
|
||||
.offset-by-nine.column,
|
||||
.offset-by-nine.columns { grid-column-start: 10; }
|
||||
.offset-by-ten.column,
|
||||
.offset-by-ten.columns { grid-column-start: 11; }
|
||||
.offset-by-eleven.column,
|
||||
.offset-by-eleven.columns { grid-column-start: 12; }
|
||||
|
||||
.offset-by-one-third.column,
|
||||
.offset-by-one-third.columns { grid-column-start: 5;}
|
||||
.offset-by-two-thirds.column,
|
||||
.offset-by-two-thirds.columns { grid-column-start: 9;}
|
||||
|
||||
.offset-by-one-half.column,
|
||||
.offset-by-one-half.columns { grid-column-start: 7;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user