mirror of
https://github.com/robsheldon/sscaffold-css.git
synced 2025-08-22 13:32:58 +02:00
Reorganize the 'base theme' section into subsections for typography, layout, and colors.
This commit is contained in:
555
sscaffold.css
555
sscaffold.css
@@ -47,6 +47,7 @@ ul[class],
|
||||
ol[class],
|
||||
dl,
|
||||
li,
|
||||
blockquote,
|
||||
figure,
|
||||
figcaption,
|
||||
button,
|
||||
@@ -59,14 +60,10 @@ textarea {
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
/* Render the 'main' element consistently in IE. [1] */
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
main,
|
||||
details {
|
||||
/* Add the correct display in Edge, IE 10+, and Firefox. [1] */
|
||||
/* Render <main> consistently in IE and add the correct display for <details>
|
||||
in Edge, IE 10+, and Firefox. [1] */
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -142,6 +139,8 @@ img {
|
||||
border-style: none;
|
||||
/* Go ahead and make these block-level elements. I'm not sure about this. [4] */
|
||||
display: block;
|
||||
/* [2] */
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -169,7 +168,9 @@ abbr[title] {
|
||||
b,
|
||||
strong {
|
||||
/* Add the correct font weight in Chrome, Edge, and Safari. [1] */
|
||||
font-weight: bolder;
|
||||
/* This has been changed from [1] because the 'bolder' value is not well
|
||||
enough supported in common fonts: https://css-tricks.com/almanac/properties/f/font-weight/ */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@@ -202,6 +203,12 @@ sup {
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
/* [2] */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
td:not([align]),
|
||||
th:not([align]) {
|
||||
/* Borrow a rule from [5], modifying a rule from [2] to give table cells
|
||||
@@ -297,12 +304,6 @@ legend {
|
||||
}
|
||||
|
||||
|
||||
progress {
|
||||
/* Add the correct vertical alignment in Chrome, Firefox, and Opera. [1] */
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
|
||||
textarea {
|
||||
/* Remove the default vertical scrollbar in IE 10+. [1] */
|
||||
overflow: auto;
|
||||
@@ -347,6 +348,12 @@ textarea {
|
||||
}
|
||||
|
||||
|
||||
progress {
|
||||
/* Add the correct vertical alignment in Chrome, Firefox, and Opera. [1] */
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
|
||||
[hidden] {
|
||||
/* Add the correct display in IE 10. [1] */
|
||||
display: none;
|
||||
@@ -602,10 +609,12 @@ main section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
@@ -621,13 +630,16 @@ main section {
|
||||
*
|
||||
******************************************************************************/
|
||||
|
||||
/**
|
||||
* Typography: font, letter-spacing, line-height, text-*, list-style-type.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
color: #606c76;
|
||||
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
font-size: 1.6em;
|
||||
font-weight: 300;
|
||||
@@ -636,151 +648,11 @@ body {
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
border-left: 0.3rem solid #d1d1d1;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
blockquote *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
code {
|
||||
background: #f4f5f6;
|
||||
border-radius: .4rem;
|
||||
font-size: 86%;
|
||||
margin: 0 .2rem;
|
||||
padding: .2rem .5rem;
|
||||
}
|
||||
|
||||
|
||||
pre {
|
||||
background: #f4f5f6;
|
||||
border-left: 0.3rem solid #9b4dca;
|
||||
}
|
||||
|
||||
|
||||
pre > code {
|
||||
border-radius: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 0.1rem solid #f4f5f6;
|
||||
margin: 3.0rem 0;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: #9b4dca;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
a:focus, a:hover {
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul dl,
|
||||
ul ol,
|
||||
ul ul {
|
||||
font-size: 90%;
|
||||
margin: 1.5rem 0 1.5rem 3.0rem;
|
||||
}
|
||||
|
||||
|
||||
ol {
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
list-style: circle inside;
|
||||
}
|
||||
|
||||
|
||||
dd,
|
||||
dt,
|
||||
li {
|
||||
margin-bottom: 1.0rem;
|
||||
}
|
||||
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
form,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: 0.1rem solid #e1e1e1;
|
||||
padding: 1.2rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Heading elements.
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
@@ -789,8 +661,6 @@ h5,
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
letter-spacing: -.1rem;
|
||||
margin-bottom: 2.0rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -833,6 +703,296 @@ h6 {
|
||||
}
|
||||
|
||||
|
||||
dl {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
ol {
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
list-style: circle inside;
|
||||
}
|
||||
|
||||
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul dl,
|
||||
ul ol,
|
||||
ul ul {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
||||
.button,
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .1rem;
|
||||
line-height: 3.8rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
label,
|
||||
legend {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
label.inline,
|
||||
legend.inline {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Layout: Display, margin, padding, height, and width.
|
||||
*/
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
form,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
blockquote *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
code {
|
||||
margin: 0 .2rem;
|
||||
padding: .2rem .5rem;
|
||||
}
|
||||
|
||||
|
||||
pre > code {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
margin: 3.0rem 0;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: 2.0rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
||||
dl dl,
|
||||
dl ol,
|
||||
dl ul,
|
||||
ol dl,
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul dl,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin: 1.5rem 0 1.5rem 3.0rem;
|
||||
}
|
||||
|
||||
|
||||
dd,
|
||||
dt,
|
||||
li {
|
||||
margin-bottom: 1.0rem;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 1.2rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
input,
|
||||
select,
|
||||
fieldset,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
textarea {
|
||||
min-height: 6.5rem;
|
||||
}
|
||||
|
||||
|
||||
.button,
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
display: inline-block;
|
||||
height: 3.8rem;
|
||||
padding: 0 3.0rem;
|
||||
margin-bottom: 1.0rem;
|
||||
}
|
||||
|
||||
|
||||
[type='email'],
|
||||
[type='number'],
|
||||
[type='password'],
|
||||
[type='search'],
|
||||
[type='tel'],
|
||||
[type='text'],
|
||||
[type='url'],
|
||||
textarea,
|
||||
select {
|
||||
height: 3.8rem;
|
||||
padding: .6rem 1.0rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
select {
|
||||
padding-right: 3.0rem;
|
||||
}
|
||||
|
||||
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
|
||||
label.inline,
|
||||
legend.inline {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
|
||||
fieldset {
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Colors, borders, outline, box-shadow, appearance, and opacity.
|
||||
*/
|
||||
|
||||
body {
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: #9b4dca;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
a:focus, a:hover {
|
||||
color: #606c76;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
border-left: 0.3rem solid #d1d1d1;
|
||||
}
|
||||
|
||||
|
||||
pre,
|
||||
code {
|
||||
background: #f4f5f6;
|
||||
}
|
||||
|
||||
|
||||
pre {
|
||||
border-left: 0.3rem solid #9b4dca;
|
||||
}
|
||||
|
||||
|
||||
code {
|
||||
border-radius: .4rem;
|
||||
}
|
||||
|
||||
|
||||
pre > code {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 0.1rem solid #f4f5f6;
|
||||
}
|
||||
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: 0.1rem solid #e1e1e1;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Button styling. All buttons start with the "outline" style defined in
|
||||
* milligram.css [2]. Buttons with a "submit" type or a "default" attribute
|
||||
@@ -846,20 +1006,9 @@ button,
|
||||
[type="submit"] {
|
||||
border: 0.1rem solid #9b4dca;
|
||||
border-radius: .4rem;
|
||||
display: inline-block;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
height: 3.8rem;
|
||||
letter-spacing: .1rem;
|
||||
line-height: 3.8rem;
|
||||
padding: 0 3.0rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
background-color: transparent;
|
||||
color: #9b4dca;
|
||||
margin-bottom: 1.0rem;
|
||||
vertical-align: text-top;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
@@ -964,11 +1113,17 @@ button.default[disabled]:hover,
|
||||
* Other form elements.
|
||||
*/
|
||||
|
||||
input,
|
||||
select,
|
||||
fieldset,
|
||||
textarea {
|
||||
margin-bottom: 1.5rem;
|
||||
[type='email']:focus,
|
||||
[type='number']:focus,
|
||||
[type='password']:focus,
|
||||
[type='search']:focus,
|
||||
[type='tel']:focus,
|
||||
[type='text']:focus,
|
||||
[type='url']:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: #9b4dca;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -988,36 +1143,11 @@ select {
|
||||
border: 0.1rem solid #d1d1d1;
|
||||
border-radius: .4rem;
|
||||
box-shadow: none;
|
||||
box-sizing: inherit;
|
||||
height: 3.8rem;
|
||||
padding: .6rem 1.0rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
[type='email']:focus,
|
||||
[type='number']:focus,
|
||||
[type='password']:focus,
|
||||
[type='search']:focus,
|
||||
[type='tel']:focus,
|
||||
[type='text']:focus,
|
||||
[type='url']:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: #9b4dca;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
select {
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDI5IDE0IiB3aWR0aD0iMjkiPjxwYXRoIGZpbGw9IiNkMWQxZDEiIGQ9Ik05LjM3NzI3IDMuNjI1bDUuMDgxNTQgNi45MzUyM0wxOS41NDAzNiAzLjYyNSIvPjwvc3ZnPgo=') center right no-repeat;
|
||||
padding-right: 3.0rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -1026,35 +1156,6 @@ select:focus {
|
||||
}
|
||||
|
||||
|
||||
textarea {
|
||||
min-height: 6.5rem;
|
||||
}
|
||||
|
||||
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
|
||||
fieldset {
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
label.inline,
|
||||
legend.inline {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/******************************************************************************
|
||||
*
|
||||
* CREDITS
|
||||
|
Reference in New Issue
Block a user