Update with changes made while updating index.html

Mostly minor changes made to fix or improve minor issues found
while updating index.html from Skeleton repo.
This commit is contained in:
Steve 2019-01-26 09:56:00 -05:00
parent 8ad9b471d5
commit 7462765a84
3 changed files with 36 additions and 51 deletions

View File

@ -1,21 +0,0 @@
{
"name": "skeleton",
"version": "2.0.4",
"homepage": "http://getskeleton.com/",
"repository": {
"type": "git",
"url": "https://github.com/dhg/Skeleton"
},
"authors": [
"Dave Gamache <hello@davegamache.com> (http://davegamache.com/)"
],
"description": "Skeleton is a dead-simple, responsive boilerplate to kickstart any responsive project.",
"main": "css/skeleton.css",
"keywords": [
"css",
"skeleton",
"responsive",
"boilerplate"
],
"license": "MIT"
}

View File

@ -40,7 +40,7 @@
/* CSS Variables
*/
:root {
html {
/* default theme: light background, dark text, blue accent */
--theme-hue: 0; /* white */
@ -56,7 +56,7 @@
--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: white; /* 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*/
@ -71,10 +71,12 @@
--grid-max-width: 960px;
}
/* theme support
*/
/* Dark Theme
Note: prefers-color-scheme selector support is still limited, but
included for future and an example of defining a different base 'theme'
*/
@media (prefers-color-scheme: dark) {
:root {
:html {
/* dark theme: light background, dark text, blue accent */
--theme-hue: 0; /* black */
--accent-hue: 194; /* blue */
@ -120,19 +122,22 @@
.grid-container {
position: relative;
width: 100%;
max-width: var(--grid-max-width);
margin: 0 auto;
padding: 20px;
text-align: center;
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));
grid-template-columns: minmax(200px, 1fr);
}
/* basic grids */
.grid-container.fifths {
grid-template-columns: repeat(5, 1fr);
}
.grid-container.quarters {
grid-template-columns: repeat(4, 1fr);
}
@ -146,15 +151,23 @@
grid-template-columns: 1fr;
}
/* grids to 3 columns above mobile sizes */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
padding: 10px 0;
}
}
/* Base Styles
*/
html {
font-size: var(--base-font-size);
font-size: var(--base-font-size);
scroll-behavior: smooth;
}
body {
font-size: 1.5em;
font-size: 1.6rem; /* changed from 15px in orig skeleton */
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -177,7 +190,7 @@ h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
/* Larger than phablet */
@media (min-width: 550px) {
@media (min-width: 600px) {
h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; }
@ -329,14 +342,13 @@ ol {
ol, ul {
padding-left: 0;
margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%; }
ul ul, ul ol, ol ol, ol ul {
font-size: 100%;
margin: 1rem 0 1rem 3rem;
color: var(--text-color-softer);
}
li {
margin-bottom: 1rem; }
margin-bottom: 0.5rem; }
/* Code
@ -352,7 +364,8 @@ code {
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre; }
white-space: pre;
overflow: auto; }
/* Tables
@ -437,17 +450,12 @@ there.
*/
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than mobile (default point when grid becomes active) */
@media (min-width: 600px) {}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}
/* Larger than phablet */
@media (min-width: 900px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}

View File

@ -100,5 +100,3 @@
.offset-by-one-half.columns { grid-column-start: 7;}
}