/* HEADINGS */ /———-/
h1, h2, h3, h4, h5, h6 {
font-family: $font-serif; font-weight: 400; line-height: 1.4em; margin: 25px 0 12.5px;
}
h1 {
font-size: 32px; @media(min-width: 768px){ font-size: 45px; }
}
h2 {
font-family: $font-serif; font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px; font-weight: bold;
}
h5 {
font-size: 18px; font-weight: bold;
}
h6 {
font-size: 16px; font-weight: bold;
}
/* MEDIAS */ /——–/
img, video {
max-width: 100%;
}
/* LISTS */ /——-/
dl {
line-height: 25px; margin: 25px 0 12.5px; dt { border-bottom: 1px dashed $color-grey; display: inline-block; } dd { margin: 0 0 0 20px; }
}
ol, ul {
line-height: 25px; margin: 25px 0 12.5px; padding: 0 0 0 20px; ol, ul { margin-top: 0; } li { margin: 12.5px 0; }
}
ul {
list-style-type: circle;
}
/* TABLES */ /——–/
table {
border-collapse: collapse; display: block; margin: 25px 0 12.5px; overflow-x: auto; width: 100%; @media(min-width: 768px) { display: table; overflow-x: visible; }
}
th {
background: $color-grey-70; text-align: left;
}
th, td {
border: 1px solid $color-grey; min-width: 80px; padding: 10px;
}
/* PREFORMATED TEXT */ /——————/
pre {
background: $color-grey-70; padding: 20px; margin: 25px 0 12.5px; overflow-x: auto; white-space: pre-wrap;
}
code {
background: $color-grey-70; line-height: 1.4em; padding: 2px 5px;
}
/* BLOCKQUOTES */ /————-/
blockquote {
border-left: 2px solid $color-grey-30; color: $color-grey-30; font-family: $font-serif; font-size: 20px; font-style: italic; line-height: 1.4em; margin: 25px 25px 12.5px 0; padding: 0 0 0 25px;
}
/* TEXT-LEVEL SEMANTICS */ /———————-/
a {
border-bottom: 1px solid $color-grey-30; color: inherit; text-decoration: none; &:hover { border-bottom: 0; } &:focus { border-bottom: 0; outline-color: $color-grey-30; }
}
cite {
font-style: italic;
}
dfn {
font-style: italic; &[title] { border-bottom: 0; text-decoration: underline; text-decoration: underline dotted; }
}
kbd {
border: 1px solid $color-grey-30; padding: 2px 5px;
}
mark {
color: $color-grey; padding: 2px 5px;
}
p {
line-height: 25px; margin: 25px 0 12.5px;
}
samp {
background: $color-grey-70; padding: 2px 5px;
}
/* FORMS */ /——-/
background: $color-grey-30; border: 1px solid $color-grey-30; box-sizing: border-box; color: $color-white; display: block; margin: 5px 0 15px; padding: 10px; width: 100%; &:hover { background: $color-white; color: $color-grey-30; cursor: pointer; }
}
fieldset {
border: 1px solid $color-grey-30; margin: 25px 0 12.5px; padding: 10px;
}
form {
margin: 25px 0 12.5px;
}
input {
background: $color-grey-70; border: 1px solid $color-grey-30; box-sizing: border-box; color: $color-grey; display: block; margin: 5px 0 15px; padding: 10px; width: 100%; &[type=color] { padding: 0; }
}
label {
display: block;
}
legend {
padding: 0 10px;
}
select {
background: $color-grey-70; box-sizing: border-box; display: block; margin: 5px 0 15px; width: 100%;
}
textarea {
background: $color-grey-70; border: 1px solid $color-grey-30; box-sizing: border-box; color: $color-grey; display: block; margin: 5px 0 15px; padding: 10px; width: 100%;
}
button:focus, input:focus, select:focus, textarea:focus {
background: $color-white; color: $color-grey-30; outline-color: $color-grey-30;
}
/* EMBED */ /——-/
iframe {
max-width: 100%;
}
/* OTHER */ /——-/ hr {
border-top: 1px solid $color-grey-70; margin: 50px 0;
}