cupper-hugo-theme/assets/css/template-styles.css

1008 lines
17 KiB
CSS
Raw Normal View History

2019-02-13 20:54:41 +01:00
/* Fonts */
2017-11-02 17:50:47 +01:00
@font-face {
font-family: 'Miriam Libre';
2019-02-15 18:01:38 +01:00
src: url('{{ "css/fonts/miriamlibre-bold.woff2" | absURL }}') format('woff2'), url('{{ "css/fonts/miriamlibre-bold.woff" | absURL }}') format('woff');
2017-11-02 17:50:47 +01:00
font-weight: bold;
font-style: normal;
}
*,
*::before,
*::after {
font-family: inherit;
background-color: inherit;
color: inherit;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: calc(1em + 0.33vw);
2017-12-25 18:08:06 +01:00
font-family: Arial, Helvetica Neue, sans-serif;
2017-11-02 17:50:47 +01:00
line-height: 1.5;
color: #111;
background-color: #fefefe;
}
template {
display: none !important;
}
* + * {
margin-top: 2.25rem;
}
br,
dt,
dd,
th,
td,
option,
[hidden] + *,
li + li,
body,
.main-and-footer {
margin-top: 0;
}
p + p {
margin-top: 0.75rem;
}
2018-03-24 15:40:28 +01:00
.priority {
margin-top: 0;
}
2017-11-02 17:50:47 +01:00
a {
text-decoration: none;
border-bottom: 1px solid;
}
abbr {
text-decoration: none;
cursor: help;
border-bottom: 1px dashed;
}
img {
max-width: 100%;
2018-03-24 15:40:28 +01:00
max-height: 50vh;
2017-11-02 17:50:47 +01:00
}
.img-link {
border-bottom: none;
}
2017-11-02 17:50:47 +01:00
p img {
margin: 0.75rem 0;
}
figure p img {
margin: 0;
}
:focus:not([tabindex="-1"]),
[data-expands]:focus svg,
.patterns a:focus .text,
[for="themer"] :focus + [aria-hidden] {
outline: 4px solid #999;
}
a {
outline-offset: 2px;
}
2019-02-13 20:54:41 +01:00
/* Fix for IE :( */
2017-11-02 17:50:47 +01:00
[tabindex="-1"]:focus,
div:not([tabindex]):focus {
outline: none;
}
[hidden] {
display: none;
}
2019-02-13 20:54:41 +01:00
/* Skip link */
2017-11-02 17:50:47 +01:00
[href="#main"] {
display: block;
width: 100%;
padding: 0.75rem;
color: #fefefe;
background: #000;
position: absolute;
top: -3rem;
text-align: center;
z-index: 1;
}
[href="#main"]:focus {
top: 0;
outline: none;
}
2019-02-13 20:54:41 +01:00
/* Text styles */
2017-11-02 17:50:47 +01:00
h1,
h2,
h3,
h4 {
font-family: Miriam Libre, serif;
line-height: 1.125;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.66rem;
}
h3 {
font-size: 1.25rem;
}
h4,
h5 {
font-size: 1rem;
font-family: PT Sans, sans-serif;
}
h5 {
font-size: 0.85rem;
text-transform: uppercase;
}
kbd {
line-height: 1;
font-size: 0.66rem;
padding: 0.1rem 0.33rem;
border-radius: 0.25rem;
border: 2px solid;
box-shadow: 0.125rem 0.125rem 0 #111;
vertical-align: 0.33em;
}
pre,
.file-tree {
overflow-x: auto;
padding: 1.5rem;
border: 1px solid;
}
code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 0.85em;
}
.cmd {
padding: 0.75rem;
background: #111;
}
.cmd code {
color: #fefefe;
white-space: nowrap;
}
.cmd code::before {
content: '$';
font-weight: bold;
padding-right: 0.25em;
}
2019-02-13 20:54:41 +01:00
/* Lists */
2017-11-02 17:50:47 +01:00
main ul,
main ol {
margin-left: 2.25rem;
}
main li + li {
margin-top: 0.5rem;
}
2018-03-24 15:40:28 +01:00
main ul ul, main ol ol, main li ul, main li ol {
2017-11-02 17:50:47 +01:00
margin-top: 0.5rem;
}
2018-03-24 15:40:28 +01:00
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;
}
2017-11-02 17:50:47 +01:00
2019-02-13 20:54:41 +01:00
/* Blockquotes */
2017-11-02 17:50:47 +01:00
blockquote {
2019-02-13 22:17:53 +01:00
border-left: 0.5rem solid;
padding-left: 0.75rem;
}
blockquote .author {
2017-11-02 17:50:47 +01:00
font-size: 0.85rem;
}
2019-02-13 20:54:41 +01:00
/* Buttons */
2017-11-02 17:50:47 +01:00
button {
font-size: 1.25rem;
border-radius: 0.33em;
font-family: inherit;
background: #111;
color: #fefefe;
padding: 0.75rem;
border: 0;
}
[data-launch] {
2017-12-02 13:18:34 +01:00
font-size: 0.66rem !important;
2017-11-02 17:50:47 +01:00
padding: 0.5rem !important;
2017-12-02 13:18:34 +01:00
margin-top: 0 !important;
2017-11-02 17:50:47 +01:00
border-radius: 0 !important;
2017-12-02 13:18:34 +01:00
border-top-left-radius: 0.33rem !important;
2017-11-02 17:50:47 +01:00
box-shadow: none !important;
background: #111 !important;
2017-12-02 13:18:34 +01:00
color: #fefefe !important;
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
2017-11-02 17:50:47 +01:00
}
/* Forms */
label {
display: inline-block;
font-weight: bold;
}
[for="themer"] {
background: #111;
border-radius: 0.33em;
color: #fefefe;
padding: 0.25em 0.75em;
margin: 0.5rem;
}
[for="themer"] [aria-hidden]::before {
content: 'off';
}
[for="themer"] :checked + [aria-hidden]::before {
content: 'on';
}
2019-02-13 20:54:41 +01:00
/* Tables */
2017-11-02 17:50:47 +01:00
table {
text-align: left;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 2px solid;
padding: 0.5rem;
line-height: 1.25;
margin: 0;
}
th {
font-weight: bold;
}
th:empty {
border: 0;
}
2019-02-13 20:54:41 +01:00
/* Tested using... table */
2017-11-02 17:50:47 +01:00
.tested {
text-align: center;
border: 1px solid #111;
}
.tested tr {
display: flex;
flex-flow: row wrap;
}
.tested td, .tested th {
vertical-align: middle;
overflow: hidden;
flex: 1 0 auto;
border: 1px solid #111;
}
.tested th {
width: 100%;
background-color: #111;
color: #fefefe;
outline-color: #111;
}
.tested img {
max-width: 3rem;
}
.tested span {
display: block;
margin: 0;
}
.tested .additional {
font-size: 0.85rem;
}
caption {
font-size: 1.125rem;
padding-bottom: 0.25rem;
font-style: italic;
}
2019-02-13 20:54:41 +01:00
/* Page structure */
2017-11-02 17:50:47 +01:00
.wrapper {
position: relative;
margin-top: 0;
overflow-x: hidden;
}
.intro-and-nav {
font-size: 0.8rem;
width: 15rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
border-right: 2px solid;
}
.intro-and-nav > div {
padding: 2.25rem;
display: flex;
flex-direction: column;
height: 100%;
}
.intro {
flex: 0 0 auto;
}
.patterns {
flex: 1 1 auto;
}
.logo {
border: 0;
}
.logo img {
width: 100%;
max-width: 12rem;
}
.library-desc {
margin-top: 0.5rem;
margin-left: auto;
margin-right: auto;
max-width: 25rem;
}
.main-and-footer {
margin-left: 15rem;
}
.main-and-footer > div {
max-width: 40rem;
margin: 0 auto;
padding: 2.25rem;
}
[role="contentinfo"] {
font-size: 0.85rem;
margin-top: 4rem;
text-align: center;
}
2019-02-13 20:54:41 +01:00
/* Patterns navigation */
2017-11-02 17:50:47 +01:00
.patterns {
overflow: auto;
margin-top: 1.5rem;
}
.patterns * {
margin-top: 0;
}
.patterns h3 {
font-size: 1rem;
}
.patterns h3 + ul {
margin-top: 0.75rem;
}
.patterns li {
line-height: 1.125;
list-style: none;
}
.patterns li + li {
margin-top: 0.75rem;
}
.patterns ul ul {
margin-left: 0.75rem;
}
.pattern a {
border: 0;
display: flex;
flex-wrap: nowrap;
align-items: baseline;
font-weight: bold;
2018-03-24 15:40:28 +01:00
padding: 0 1rem;
2017-11-02 17:50:47 +01:00
}
.pattern a:focus {
outline: none;
}
.pattern span {
margin-left: 0.125rem;
}
2018-03-24 15:40:28 +01:00
2019-02-13 20:54:41 +01:00
/* After */
2017-11-02 17:50:47 +01:00
.pattern [aria-current] {
2018-03-24 15:40:28 +01:00
background-color: #111;
clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
color: #fefefe;
padding: 0.5em 1em 0.5em;
2017-11-02 17:50:47 +01:00
}
2018-03-24 15:40:28 +01:00
2019-02-13 20:54:41 +01:00
/* Menu button */
2017-11-02 17:50:47 +01:00
#menu-button {
display: none;
width: 100%;
text-align: center;
}
#menu-button:focus {
outline: none;
box-shadow: inset 0 0 0 0.25rem #999;
}
2019-02-13 20:54:41 +01:00
/* Tables of contents */
2017-11-02 17:50:47 +01:00
.toc {
font-size: 0.85rem;
border: 1px solid;
padding: 1.5rem;
}
.toc h2 {
font-size: 1rem;
}
.toc ol {
margin-left: 0.75rem;
margin-top: 0.5rem;
}
2019-02-13 20:54:41 +01:00
/* Pattern lists */
2017-11-02 17:50:47 +01:00
.patterns-list {
list-style: none;
margin-left: 0;
}
.patterns-list h2 {
font-size: 1.25rem;
2019-02-13 23:21:49 +01:00
line-height: 1.6;
2017-11-02 17:50:47 +01:00
}
.patterns-list li + li {
margin-top: 1rem;
padding-top: 1rem;
border-top: 2px solid;
}
.patterns-list a {
border: 0;
}
2019-02-13 20:54:41 +01:00
/* Tags */
2017-11-02 17:50:47 +01:00
.tags {
margin-top: 0;
font-size: 0.85rem;
}
.tags * {
display: inline;
margin: 0;
}
.tags strong {
margin-right: 0.25rem;
}
.tags li {
white-space: nowrap;
margin: 0 0.25rem 0 0;
}
/* Date */
.date {
margin-top: 0;
font-size: 0.85rem;
}
2017-11-02 17:50:47 +01:00
2019-02-13 20:54:41 +01:00
/* Notes and warnings */
2017-11-02 17:50:47 +01:00
.note {
border-left: 0.5rem solid;
font-size: 0.85rem;
}
.note .sign {
height: 2.25rem;
width: 2.25rem;
}
.note > div {
margin-left: 0.75rem;
}
.note > div > img:first-child {
height: 1.5rem;
}
.note > div >:first-child + * {
margin-top: 0;
}
.note.warning {
border-left: 0;
2019-02-15 17:57:49 +01:00
background-image: url({{ "css/images/stripe.svg" | absURL }});
2017-11-02 17:50:47 +01:00
background-size: 0.5rem auto;
background-repeat: repeat-y;
}
.note.warning > div {
margin-left: 1.25rem;
}
2019-02-13 20:54:41 +01:00
/* Tick lists */
2017-11-02 17:50:47 +01:00
.ticks li {
list-style: none;
position: relative;
}
.ticks li::before {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
margin-right: 0.25rem;
2019-02-15 17:57:49 +01:00
background-image: url({{ "css/images/icon-tick.svg" | absURL }});
2017-11-02 17:50:47 +01:00
background-size: 100% auto;
position: absolute;
left: -1.25rem;
top: 0.25rem;
}
2019-02-13 20:54:41 +01:00
/* Figures */
2017-11-02 17:50:47 +01:00
figure {
text-align: center;
}
figcaption {
font-size: 0.85rem;
font-style: italic;
margin-top: 0.5rem;
}
main {
display: block;
counter-reset: fig;
min-height: 100vh;
}
figcaption::before {
counter-increment: fig;
content: 'Figure ' counter(fig) ':\0020';
font-weight: bold;
}
2019-02-13 20:54:41 +01:00
/* Code blocks */
2017-11-02 17:50:47 +01:00
pre[class*=language-] {
background: none;
margin-top: 2.25rem;
margin-bottom: 0;
overflow-y: hidden;
overflow-x: auto;
}
code[class*="language-"], pre[class*="language-"] {
text-shadow: none;
2019-02-13 21:50:51 +01:00
/* filter: grayscale(100%); */
2017-11-02 17:50:47 +01:00
}
pre[class*=language-][data-line] {
padding: 1em 0 0 2.25rem;
}
pre[class*=language-] code * {
margin-top: 0 !important;
}
[data-codeblock-shortcode], .code-annotated code {
display: inline-block;
margin-top: -1rem;
}
.code-annotated {
overflow-y: hidden;
overflow-x: auto;
padding: 1.5rem;
border: 1px solid;
white-space: pre;
counter-reset: annotation;
}
.highlight {
background: #ddd;
padding: 0.0625rem 0.33rem;
border-radius: 0.5rem;
}
.numbered .highlight::after,
.code-annotated.numbered + ol li::before {
counter-increment: annotation;
content: counter(annotation);
font-weight: bold;
font-size: 0.5rem;
background: #111;
color: #fefefe;
border-radius: 1rem;
margin-left: 0.25rem;
padding: 0.125em 0.5em;
vertical-align: 0.33em;
}
.code-annotated.numbered + ol {
list-style: none;
counter-reset: annotation;
}
.code-annotated.numbered + ol li::before {
font-size: 0.66em;
margin-right: 0.33em;
vertical-align: 0.25em;
}
2019-02-13 20:54:41 +01:00
/* File tree lists */
2017-11-02 17:50:47 +01:00
.file-tree {
overflow-x: auto;
}
.file-tree ul {
font-family: Courier, monospace;
margin: 0;
padding: 0;
padding-left: 3rem;
list-style: none;
line-height: 1.25;
position: relative;
}
.file-tree > ul {
padding-left: 0;
overflow-x: auto;
overflow-y: hidden;
}
.file-tree li {
background: #fefefe;
position: relative;
white-space: nowrap;
}
.file-tree li + li {
margin-top: 0;
}
.file-tree li:not(:last-child) > ul::before {
content: '\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1em;
white-space: normal;
}
.file-tree li::before {
content: '\251C\2500\2500\0020';
}
.file-tree li:last-child::before {
content: '\2514\2500\2500\0020';
}
2019-02-13 20:54:41 +01:00
2017-11-02 17:50:47 +01:00
/* Expandable sections */
.expandable-section {
border-top: 1px solid;
border-bottom: 1px solid;
padding: 0.75rem 0;
}
[id^="js-expandable-"] {
margin: 0;
padding: 1.5rem 0 0.75rem;
}
@media screen {
.expandable-section + .expandable-section {
margin-top: 0;
border-top: 0;
}
}
[data-expands] {
text-align: left;
color: #111;
border: 0;
background: none;
width: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
}
[data-expands] svg {
margin-top: 0;
width: 1em;
height: 1em;
}
[data-expands][aria-expanded="true"] svg .up-strut {
display: none;
}
[data-expands]:focus {
outline: none;
}
p:empty {
display: none;
}
*:not(p) + p:empty + p {
margin-top: 2.25rem;
}
2019-02-13 20:54:41 +01:00
2017-11-02 17:50:47 +01:00
/* WCAG and principles */
.wcag li {
font-size: 0.85em;
}
.principles p {
font-size: 0.85rem;
margin-top: 0.75rem;
}
.principles.with-desc > li + li,
.wcag.with-desc > li + li {
border-top: 1px solid;
margin-top: 0.75rem;
padding-top: 0.75rem;
}
2019-02-13 20:54:41 +01:00
/* Site errors */
2017-11-02 17:50:47 +01:00
.site-error {
padding: 1.5rem;
background: #efefef;
}
.site-error strong {
color: #C83737;
}
2019-02-13 20:54:41 +01:00
2017-11-02 17:50:47 +01:00
/* SVG icons */
a svg,
button svg,
h1 svg,
th svg,
li > svg {
height: 0.75em;
width: 0.75em;
margin-right: 0.25em;
}
h1 svg {
margin-right: 0;
width: 0.85em;
height: 0.85em;
}
.wcag-icon {
width: 1.25em;
}
.bookmark-icon {
vertical-align: middle;
}
.link-icon {
width: 0.75em;
height: 0.75em;
}
.tags svg, .link-icon {
vertical-align: middle;
}
.balloon-icon {
width: 0.75em;
margin-right: 0;
}
.print {
white-space: nowrap;
font-style: normal;
}
2019-02-13 20:54:41 +01:00
2017-11-02 17:50:47 +01:00
/* Color palettes */
.colors {
display: flex;
height: 5rem;
margin: -0.25rem;
list-style: none;
flex-wrap: nowrap;
}
.colors li {
margin: 0.25rem;
flex: 1 0 auto;
position: relative;
}
.colors span {
line-height: 1;
background-color: #111;
color: #fefefe;
font-size: 0.75rem;
padding: 0.25rem;
position: absolute;
bottom: 0.25rem;
right: 0.25rem;
}
2019-02-13 20:54:41 +01:00
/* Cross references */
2017-11-02 17:50:47 +01:00
.pattern-link {
font-weight: bold;
}
2019-02-13 20:54:41 +01:00
/* Inline demos */
2017-11-02 17:50:47 +01:00
.demo-inner {
border-top: 1px solid;
border-bottom: 1px solid;
2017-12-02 13:18:34 +01:00
padding: 1.5rem 0;
position: relative;
2017-11-02 17:50:47 +01:00
}
[id^="js-demo-"] {
all: initial;
display: block;
}
2019-02-13 20:54:41 +01:00
2017-11-02 17:50:47 +01:00
/* Section links */
.h2-container {
position: relative;
font-size: 1.66rem;
}
.h2-container a {
position: absolute;
margin-top: 0;
top: 0;
line-height: 1;
left: -1em;
border: 0;
}
2019-02-13 20:54:41 +01:00
/* Single page layout */
2017-11-02 17:50:47 +01:00
.wrapper.print-version .main-and-footer {
margin-left: 0;
}
.wrapper.print-version .intro-and-nav {
position: static;
border: 0;
width: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper.print-version main {
min-height: 0;
}
.wrapper.print-version .library-desc {
font-size: 1rem;
}
.wrapper.print-version .intro-and-nav > div {
height: auto;
}
.wrapper.print-version #patterns-list {
margin-left: 0;
margin-top: 1.5rem;
display: block;
}
.wrapper.print-version .toc {
font-size: 1rem;
}
.wrapper.print-version .toc h2 {
font-size: 1.66rem;
}
.wrapper.print-version #patterns-list h3 {
font-size: 1.25rem;
}
.wrapper.print-version .patterns {
margin-top: 0;
}
.pattern-section:not(:last-child) {
padding-bottom: 2.25rem;
border-bottom: 2px solid;
}
.pattern-section h1 {
padding: 0 !important;
}
2019-02-13 20:54:41 +01:00
2017-11-02 17:50:47 +01:00
/* Custom 404 */
.custom-404 {
text-align: center;
}
.custom-404 * {
margin: 0;
}
.custom-404 svg {
max-width: 100%;
}
2019-02-13 20:54:41 +01:00
2017-11-02 17:50:47 +01:00
/* Utilities */
.vh {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
2019-02-13 20:54:41 +01:00
.gallery {
display: flex;
justify-content: center;
}
2017-11-02 17:50:47 +01:00
2019-02-13 20:54:41 +01:00
/* Media queries */
@media screen and (max-width: 45em) {
2017-11-02 17:50:47 +01:00
body a {
hyphens: auto;
}
[role="banner"] {
position: static;
width: auto;
height: auto;
}
.intro {
text-align: center;
}
2017-12-26 12:11:40 +01:00
.intro-and-nav {
border-right: none;
}
2017-11-02 17:50:47 +01:00
.intro-and-nav > div {
padding: 1.5rem;
}
.main-and-footer {
margin: 0;
}
main {
min-height: auto;
}
2018-03-24 15:40:28 +01:00
#patterns-list {
margin-top: 0.5rem;
border: 1px solid;
}
2017-11-02 17:50:47 +01:00
.patterns h3 {
2018-03-24 15:40:28 +01:00
font-size: 1.5rem;
padding: 1.5rem 1rem 0.75rem;
2017-11-02 17:50:47 +01:00
}
.patterns li:not(.pattern) {
margin-top: 0;
}
.patterns ul ul {
margin: 0;
}
.patterns li {
margin-top: 0;
}
.pattern {
font-size: 1rem;
}
.pattern a {
2018-03-24 15:40:28 +01:00
padding: 1rem;
2017-11-02 17:50:47 +01:00
}
.pattern [aria-current] {
2018-03-24 15:40:28 +01:00
clip-path: none;
padding: 1rem;
2017-11-02 17:50:47 +01:00
}
.pattern + .pattern {
border-top: 1px solid;
margin-top: 0;
}
#menu-button {
display: block;
}
#patterns-list {
display: none;
}
.toc-link {
display: none;
}
[aria-expanded="true"] + #patterns-list {
display: block;
}
code {
word-break: break-all;
}
}
@media print {
.wrapper:not(.print-version) .intro-and-nav,
.wrapper:not(.print-version) [role="contentinfo"] {
display: none;
}
.main-and-footer {
margin-left: 0;
}
a {
border: 0;
}
main a::after {
content: " (" attr(href) ")";
word-break: break-word;
}
main nav a::after {
content: '';
}
.cmd code {
background: #fefefe;
color: #111;
}
pre code {
white-space: pre-wrap !important;
}
.expandable-section {
border: 0;
padding: 0;
}
.expandable-section + p {
margin-top: 0.75rem;
}
[id^="js-expandable-"] {
display: block;
}
[data-expands] svg {
display: none;
}
main *:not(.with-desc) {
page-break-inside: avoid;
}
.note.warning {
border-left: 0.5rem solid;
background: none;
}
}
@media (-ms-high-contrast: active) {
img[src*=".svg"] {
background: #fefefe;
padding: 0.5rem;
}
.ticks li::before {
content: '✓';
background: none;
width: auto;
top: 0;
}
.note.warning {
border-left: 0.5rem solid;
background: none;
}
}