new styles

This commit is contained in:
Heydon Pickering 2018-03-24 14:40:28 +00:00
parent d6a7aaf3d1
commit 7af7444475
3 changed files with 85 additions and 29 deletions

View File

@ -43,6 +43,9 @@ body,
p + p { p + p {
margin-top: 0.75rem; margin-top: 0.75rem;
} }
.priority {
margin-top: 0;
}
a { a {
text-decoration: none; text-decoration: none;
border-bottom: 1px solid; border-bottom: 1px solid;
@ -54,6 +57,7 @@ abbr {
} }
img { img {
max-width: 100%; max-width: 100%;
max-height: 50vh;
} }
p img { p img {
margin: 0.75rem 0; margin: 0.75rem 0;
@ -165,9 +169,27 @@ main ol {
main li + li { main li + li {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
main ul ul, main ol ol { main ul ul, main ol ol, main li ul, main li ol {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
ol ol {
list-style: lower-latin;
}
ol ol ol {
list-style: lower-roman;
}
main dt {
font-weight: bold;
}
main dd {
padding-left: 2rem;
}
dd ul {
margin-left: 0;
}
dd li + li {
margin: 0;
}
/* Blockquotes */ /* Blockquotes */
blockquote { blockquote {
@ -363,6 +385,7 @@ caption {
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: baseline; align-items: baseline;
font-weight: bold; font-weight: bold;
padding: 0 1rem;
} }
.pattern a:focus { .pattern a:focus {
outline: none; outline: none;
@ -370,15 +393,15 @@ caption {
.pattern span { .pattern span {
margin-left: 0.125rem; margin-left: 0.125rem;
} }
/* after */
.pattern [aria-current] { .pattern [aria-current] {
background-color: #111; background-color: #111;
background-image: url(images/arrow_effect.svg); clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
background-position: 98% center;
background-size: 125%;
background-repeat: no-repeat;
color: #fefefe; color: #fefefe;
padding: 0.5em 1em 0.5em; padding: 0.5em 1em 0.5em;
} }
/* menu button */ /* menu button */
#menu-button { #menu-button {
@ -854,11 +877,15 @@ h1 svg {
main { main {
min-height: auto; min-height: auto;
} }
#patterns-list {
margin-top: 0.5rem;
border: 1px solid;
}
.patterns h3 { .patterns h3 {
font-size: 1.125rem; font-size: 1.5rem;
border-top: 4px solid; padding: 1.5rem 1rem 0.75rem;
border-bottom: 4px solid;
padding: 0.75rem 0;
} }
.patterns li:not(.pattern) { .patterns li:not(.pattern) {
margin-top: 0; margin-top: 0;
@ -873,10 +900,11 @@ h1 svg {
font-size: 1rem; font-size: 1rem;
} }
.pattern a { .pattern a {
padding: 0.75rem 0; padding: 1rem;
} }
.pattern [aria-current] { .pattern [aria-current] {
background-image: none; clip-path: none;
padding: 1rem;
} }
.pattern + .pattern { .pattern + .pattern {
border-top: 1px solid; border-top: 1px solid;

File diff suppressed because one or more lines are too long

View File

@ -43,6 +43,9 @@ body,
p + p { p + p {
margin-top: 0.75rem; margin-top: 0.75rem;
} }
.priority {
margin-top: 0;
}
a { a {
text-decoration: none; text-decoration: none;
border-bottom: 1px solid; border-bottom: 1px solid;
@ -54,6 +57,7 @@ abbr {
} }
img { img {
max-width: 100%; max-width: 100%;
max-height: 50vh;
} }
p img { p img {
margin: 0.75rem 0; margin: 0.75rem 0;
@ -165,9 +169,27 @@ main ol {
main li + li { main li + li {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
main ul ul, main ol ol { main ul ul, main ol ol, main li ul, main li ol {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
ol ol {
list-style: lower-latin;
}
ol ol ol {
list-style: lower-roman;
}
main dt {
font-weight: bold;
}
main dd {
padding-left: 2rem;
}
dd ul {
margin-left: 0;
}
dd li + li {
margin: 0;
}
/* Blockquotes */ /* Blockquotes */
blockquote { blockquote {
@ -363,6 +385,7 @@ caption {
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: baseline; align-items: baseline;
font-weight: bold; font-weight: bold;
padding: 0 1rem;
} }
.pattern a:focus { .pattern a:focus {
outline: none; outline: none;
@ -370,15 +393,15 @@ caption {
.pattern span { .pattern span {
margin-left: 0.125rem; margin-left: 0.125rem;
} }
/* after */
.pattern [aria-current] { .pattern [aria-current] {
background-color: #111; background-color: #111;
background-image: url(images/arrow_effect.svg); clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
background-position: 98% center;
background-size: 125%;
background-repeat: no-repeat;
color: #fefefe; color: #fefefe;
padding: 0.5em 1em 0.5em; padding: 0.5em 1em 0.5em;
} }
/* menu button */ /* menu button */
#menu-button { #menu-button {
@ -854,11 +877,15 @@ h1 svg {
main { main {
min-height: auto; min-height: auto;
} }
#patterns-list {
margin-top: 0.5rem;
border: 1px solid;
}
.patterns h3 { .patterns h3 {
font-size: 1.125rem; font-size: 1.5rem;
border-top: 4px solid; padding: 1.5rem 1rem 0.75rem;
border-bottom: 4px solid;
padding: 0.75rem 0;
} }
.patterns li:not(.pattern) { .patterns li:not(.pattern) {
margin-top: 0; margin-top: 0;
@ -873,10 +900,11 @@ h1 svg {
font-size: 1rem; font-size: 1rem;
} }
.pattern a { .pattern a {
padding: 0.75rem 0; padding: 1rem;
} }
.pattern [aria-current] { .pattern [aria-current] {
background-image: none; clip-path: none;
padding: 1rem;
} }
.pattern + .pattern { .pattern + .pattern {
border-top: 1px solid; border-top: 1px solid;