add new frameworks - resolves #20
dohliam
4 years ago
parent
22eda12f7c
commit
01b2c578d3
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{background-color:#fff;color:#333;font:14px/20px "HelveticaNeue-Light","HelveticaNeue",Helvetica,Arial,sans-serif}header{width:100%;margin:0 auto;position:relative;padding:20px 0;border-bottom:1px solid #ddd;margin-bottom:20px}.logo{font-size:28px;color:#333}nav ul{margin:0}nav ul li{display:inline;margin-right:20px;font-size:16px;line-height:28px;color:#333}nav ul li a{color:#333}.container{position:relative;text-align:left;width:960px;max-width:90%;margin:0 auto}footer{border-top:1px solid #ccc;font-size:11px;line-height:26px;color:#999}footer a{color:#999}footer a:hover{color:#105cb6}footer ul li{display:inline;list-style:none;padding-left:20px}.row{width:100%;margin:0 auto 20px auto;display:inline-block;position:relative}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{float:left;margin-right:2%}.row .col-1:last-child,.row .col-2:last-child,.row .col-3:last-child,.row .col-4:last-child,.row .col-5:last-child,.row .col-6:last-child,.row .col-7:last-child,.row .col-8:last-child,.row .col-9:last-child,.row .col-10:last-child,.row .col-11:last-child,.row .col-12:last-child{margin-right:0}.row:after,.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.col-1{width:6%}.col-2{width:15%}.col-3{width:23.5%}.col-4{width:32%}.col-5{width:40%}.col-6{width:49%}.col-7{width:56.5%}.col-8{width:66%}.col-9{width:74%}.col-10{width:82.5%}.col-11{width:91%}.col-12{width:100%}a{color:#105cb6;text-decoration:none}a:hover,a:focus{color:#105cb6;text-decoration:underline}a:active{color:#105cb6}h1{font-size:30px;line-height:36px;margin-bottom:20px}h2{font-size:24px;line-height:20px;margin-bottom:20px}h3{font-size:20px;line-height:20px;margin-bottom:10px}h4{font-size:16px;line-height:20px;margin-bottom:10px}h5{font-size:14px;line-height:20px;margin-bottom:20px}h6{font-size:12px;line-height:20px;margin-bottom:20px}h1,h2,h3,h4,h5,h6{color:#333}p{margin-bottom:20px}.float-left{float:left}.float-right{float:right}img.float-left{float:left;margin:0 20px 20px 0}img.float-right{float:right;margin:0 0 20px 20px}img.center{margin:0 auto;display:block}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}hr{background-color:#ccc;border:0;color:#ccc;height:1px;margin-bottom:20px}pre,code{background-color:#eee;display:block;padding:10px}pre{margin-bottom:20px;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}blockquote{margin:10px 10px 20px;padding:9px;background-color:#f8f8f8;color:#666;border-left:5px solid #ddd;font:14px/20px Georgia,Times,serif;quotes:"\201C" "\201D"}blockquote p{margin:0}blockquote:before{content:open-quote;font-weight:bold}blockquote:after{content:close-quote;font-weight:bold}ul{margin-bottom:20px;list-style-position:inside}ol{margin-bottom:20px;list-style-position:inside}ul ul,ol ol{margin-bottom:0}fieldset{position:relative;border-top:1px solid #ccc;padding:10px;margin-bottom:20px}fieldset legend{font-weight:bold;font-size:16px;padding:0 5px}table{margin-bottom:20px;width:100%}th{font-weight:bold}td{text-align:left}tfoot{font-style:italic}@media print{*{text-shadow:none !important;background:transparent !important;box-shadow:none !important;color:#000 !important}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
body{margin:0;font-family:sans-serif;height:100%;background:#f5f5fb}a:link,a:visited{color:#f44337}::selection{background:#f44337;color:#fff}code,pre{background:#fcfcff;color:#666;font-weight:bold;padding:3px 5px;border-radius:4px}pre{padding:12px;overflow-x:auto}.rbl-layout{display:flex;flex-direction:column;min-height:100vh}.rbl-layout__header{padding:20px}.rbl-layout__content{flex:1;margin:0 auto}.rbl-layout__footer{color:#888;font-size:12px;text-align:center;padding:20px}.rbl-header-1,.rbl-header-2,.rbl-header-3,.rbl-header-4{color:#333;font-family:BlinkMacSystemFont,sans-serif;font-weight:normal}html{font-size:1em}body{font-family:BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.45;color:#666}.rbl-paragraph{margin-bottom:1.3em}.rbl-header-1,.rbl-header-2,.rbl-header-3,.rbl-header-4{margin:1.414em 0 .5em;font-weight:inherit;line-height:1.2}.rbl-header-1{margin-top:0;font-size:2.074em}.rbl-header-2{font-size:1.728em}.rbl-header-3{font-size:1.44em}.rbl-header-4{font-size:1.2em}.rbl-small{font-size:.833em}.rbl-panel{border-radius:6px;box-shadow:0 2px 14px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.1),0 1px 5px 0 rgba(0,0,0,0.01);background:#fff}.rbl-panel__title{box-sizing:border-box;margin:0;padding:20px 20px 0}.rbl-panel__inner{box-sizing:border-box;padding:20px}.rbl-button,.rbl-button--secondary{border:0;border-radius:2px;min-width:64px;padding:0 16px;display:inline-block;font-family:BlinkMacSystemFont,sans-serif;height:36px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;will-change:box-shadow;transition:box-shadow .2s cubic-bezier(0.4,0,1,1),background-color .2s cubic-bezier(0.4,0,0.2,1),color .2s cubic-bezier(0.4,0,0.2,1);outline:0;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;user-select:none;vertical-align:middle}.rbl-button{background:rgba(244,67,55,0.1);color:#f44337}.rbl-button:hover{background:rgba(244,67,55,0.2)}.rbl-button:active{background:rgba(244,67,55,0.4)}.rbl-button:focus{box-shadow:0 0 0 2px rgba(244,67,55,0.2)}.rbl-button--secondary{background:transparent;color:#666}.rbl-button--secondary:hover{background:rgba(0,0,0,0.06)}.rbl-button--secondary:active{background:rgba(0,0,0,0.12)}.rbl-button--secondary:focus{box-shadow:0 0 0 2px rgba(244,67,55,0.2)}.rbl-checkbox{position:fixed;top:-30px;left:-30px;opacity:0}.rbl-checkbox+label{color:#505052;cursor:pointer;align-items:center;font-size:14px;display:flex;position:relative;user-select:none}.rbl-checkbox+label::before{content:'';width:16px;height:16px;border-radius:2px;background:#fff center center;background-size:90%;margin:0 10px 0 0;border:2px solid #aaa;transition:background .1s ease,background-size .1s ease,border .1s ease}.rbl-checkbox+label::after{content:'';width:40px;height:40px;background:rgba(0,0,0,0.1);position:absolute;left:-10px;top:-10px;border-radius:100%;transform:scale(0);transition:transform .5s ease}.rbl-checkbox:checked+label::before{border-color:#ff8981;background:#ff8981 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNy44LDE1LjYgMi4yLDEwIDMuOCw4LjQgNy44LDEyLjQgMTYuMiw0IDE3LjgsNS42ICIvPjwvc3ZnPg==);background-size:100%;color:#fff}.rbl-checkbox:active+label::after{transform:scale(1);transition:transform .1s ease}@keyframes checkboxFocus{0{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.8)}}.rbl-checkbox:focus+label::after{background:rgba(244,67,55,0.2);animation:checkboxFocus .7s infinite alternate;transition:transform .1s ease,color .1s ease}.rbl-select{border:0;background:#fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNyAxMGw1IDUgNS01eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=) no-repeat right center;font-family:sans-serif;padding:0 32px 0 16px;font-size:16px;border-radius:2px;-webkit-appearance:none;color:#555;height:36px;transition:box-shadow .1s ease}.rbl-select:focus{outline:0;box-shadow:0 0 0 2px rgba(244,67,55,0.3)}.rbl-field-label{color:#505052;cursor:pointer;align-items:center;font-size:14px;display:flex;position:relative;user-select:none;margin:0 0 4px}.rbl-textfield{box-shadow:0 0 0 2px rgba(0,0,0,0.1);border:0;background:#fff;border-radius:2px;color:#555;padding:8px;display:block;font-family:BlinkMacSystemFont,sans-serif;font-size:16px;outline:0;width:100%;box-sizing:border-box}.rbl-textfield::placeholder{color:rgba(102,102,102,0.2)}.rbl-textfield:focus{box-shadow:0 0 0 2px rgba(244,67,55,0.3)}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,569 @@
|
||||
/*!
|
||||
* Gutenberg
|
||||
*
|
||||
* MIT Fabien Sa
|
||||
* https://github.com/BafS/Gutenberg
|
||||
*/
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
/* Document
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
html {
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */ }
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
body {
|
||||
margin: 0; }
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
main {
|
||||
display: block; }
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0; }
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
/* 1 */
|
||||
height: 0;
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */ }
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
a {
|
||||
background-color: transparent; }
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder; }
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
small {
|
||||
font-size: 80%; }
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline; }
|
||||
|
||||
sub {
|
||||
bottom: -0.25em; }
|
||||
|
||||
sup {
|
||||
top: -0.5em; }
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
img {
|
||||
border-style: none; }
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible; }
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none; }
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; }
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0; }
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText; }
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em; }
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
display: table;
|
||||
/* 1 */
|
||||
max-width: 100%;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
white-space: normal;
|
||||
/* 1 */ }
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
progress {
|
||||
vertical-align: baseline; }
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
textarea {
|
||||
overflow: auto; }
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto; }
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */ }
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
details {
|
||||
display: block; }
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
summary {
|
||||
display: list-item; }
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
template {
|
||||
display: none; }
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
[hidden] {
|
||||
display: none; }
|
||||
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after,
|
||||
p:first-letter,
|
||||
div:first-letter,
|
||||
blockquote:first-letter,
|
||||
li:first-letter,
|
||||
p:first-line,
|
||||
div:first-line,
|
||||
blockquote:first-line,
|
||||
li:first-line {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important; }
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin: 0 auto;
|
||||
text-rendering: optimizeLegibility; }
|
||||
|
||||
p,
|
||||
blockquote,
|
||||
table,
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top: 0; }
|
||||
|
||||
p:last-child,
|
||||
ul:last-child,
|
||||
ol:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #000;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-top: 0; }
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem; }
|
||||
|
||||
h2 {
|
||||
font-size: 2rem; }
|
||||
|
||||
h3 {
|
||||
font-size: 1.75rem; }
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem; }
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem; }
|
||||
|
||||
h6 {
|
||||
font-size: 1rem; }
|
||||
|
||||
a, a:visited {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
word-wrap: break-word; }
|
||||
|
||||
table {
|
||||
border-collapse: collapse; }
|
||||
|
||||
thead {
|
||||
display: table-header-group; }
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid #000; }
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 8px 16px;
|
||||
page-break-inside: avoid; }
|
||||
|
||||
code,
|
||||
pre,
|
||||
kbd {
|
||||
border: 1px solid #bbb;
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 85%; }
|
||||
|
||||
code,
|
||||
kbd {
|
||||
padding: 3px; }
|
||||
|
||||
pre {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 10px 12px; }
|
||||
pre code,
|
||||
pre kbd {
|
||||
border: 0; }
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: transparent; }
|
||||
|
||||
:-moz-placeholder {
|
||||
color: transparent; }
|
||||
|
||||
::-moz-placeholder {
|
||||
color: transparent; }
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: transparent; }
|
||||
|
||||
blockquote {
|
||||
border: 0;
|
||||
border-left: 5px solid #bbb;
|
||||
margin-left: 1px;
|
||||
padding: 12px 1.5rem; }
|
||||
[dir='rtl'] blockquote {
|
||||
border-left: 0;
|
||||
border-right: 5px solid #bbb;
|
||||
margin-left: 0;
|
||||
margin-right: 1px; }
|
||||
blockquote:first-child {
|
||||
margin-top: 0; }
|
||||
blockquote p:last-child,
|
||||
blockquote ul:last-child,
|
||||
blockquote ol:last-child {
|
||||
margin-bottom: 0; }
|
||||
blockquote footer {
|
||||
display: block;
|
||||
font-size: 80%; }
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
display: block;
|
||||
max-width: 100% !important;
|
||||
vertical-align: middle; }
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 2px solid #bbb;
|
||||
height: 0;
|
||||
margin: 2.25rem 0;
|
||||
padding: 0; }
|
||||
|
||||
dt {
|
||||
font-weight: bold; }
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
margin-bottom: 0.75rem; }
|
||||
|
||||
abbr[title],
|
||||
acronym[title] {
|
||||
border: 0;
|
||||
text-decoration: none; }
|
||||
|
||||
table,
|
||||
blockquote,
|
||||
pre,
|
||||
code,
|
||||
figure,
|
||||
li,
|
||||
hr,
|
||||
ul,
|
||||
ol,
|
||||
a,
|
||||
tr {
|
||||
page-break-inside: avoid; }
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
a {
|
||||
orphans: 3;
|
||||
widows: 3; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
page-break-after: avoid;
|
||||
page-break-inside: avoid; }
|
||||
|
||||
h1 + p,
|
||||
h2 + p,
|
||||
h3 + p {
|
||||
page-break-before: avoid; }
|
||||
|
||||
img {
|
||||
page-break-after: auto;
|
||||
page-break-before: auto;
|
||||
page-break-inside: avoid; }
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
word-wrap: break-word; }
|
||||
|
||||
body {
|
||||
padding-bottom: 2.54cm;
|
||||
padding-left: 1.8cm;
|
||||
padding-right: 1.8cm;
|
||||
padding-top: 2.54cm; }
|
||||
|
||||
a[href^='http']:after, a[href^='ftp']:after {
|
||||
content: " (" attr(href) ")";
|
||||
font-size: 80%; }
|
||||
|
||||
a[href$='.jpg']:after, a[href$='.jpeg']:after, a[href$='.gif']:after, a[href$='.png']:after {
|
||||
display: none; }
|
||||
|
||||
abbr[title]:after,
|
||||
acronym[title]:after {
|
||||
content: " (" attr(title) ")"; }
|
||||
|
||||
.page-break,
|
||||
.page-break-before {
|
||||
page-break-before: always; }
|
||||
|
||||
.page-break-after {
|
||||
page-break-after: always; }
|
||||
|
||||
.no-print {
|
||||
display: none; }
|
||||
|
||||
a.no-reformat:after {
|
||||
content: ''; }
|
||||
|
||||
abbr[title].no-reformat:after,
|
||||
acronym[title].no-reformat:after {
|
||||
content: ''; }
|
||||
|
||||
.no-reformat abbr:after,
|
||||
.no-reformat acronym:after,
|
||||
.no-reformat a:after {
|
||||
content: ''; }
|
||||
@ -0,0 +1,725 @@
|
||||
/* ASIDE */
|
||||
/* Put content to the left or right of the page as an "aside". This is an
|
||||
* alternative to footnotes.
|
||||
*/
|
||||
|
||||
aside {
|
||||
hyphens: auto; /* Hyphenate, as this text is quite narrow. */
|
||||
}
|
||||
|
||||
aside {
|
||||
position: absolute;
|
||||
left: /*padx*/-15em;
|
||||
width: 14em;
|
||||
text-align: right;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
/* Alternative: place on the right.
|
||||
aside {
|
||||
position: absolute;
|
||||
right: -15em;
|
||||
width: 14em;
|
||||
}
|
||||
*/
|
||||
|
||||
@media (max-width: 83em) { /* Place inline if it won't fit on the screen. */
|
||||
aside {
|
||||
position: static;
|
||||
width: auto;
|
||||
text-align: left;
|
||||
background-color: #f7f7f7;
|
||||
padding: .4em 2em;
|
||||
border: 1px solid /*bordercolor*/#aaa;
|
||||
hyphens: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Optional: place the page further to the right, so that there's more space for
|
||||
* the aside.
|
||||
* Adjust the media query above to max-width: 63em
|
||||
.page {
|
||||
left: 10em;
|
||||
}
|
||||
*/
|
||||
/* FONTS */
|
||||
|
||||
/* I like the Libre Baskerville typeface, which is a nice Serif font.
|
||||
*
|
||||
* https://github.com/impallari/Libre-Baskerville
|
||||
* https://web.archive.org/web/20150918205958/http://www.impallari.com/projects/update/86
|
||||
* https://fonts.google.com/specimen/Libre+Baskerville
|
||||
*
|
||||
* A copy is in the "fonts" dir.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Libre Baskerville';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: fallback;
|
||||
src: local('Libre Baskerville'), local('LibreBaskerville-Regular'),
|
||||
url(/fonts/libre-baskerville.woff2) format('woff2'),
|
||||
url(./fonts/libre-baskerville.woff2) format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Libre Baskerville';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: fallback;
|
||||
src: local('Libre Baskerville Bold'), local('LibreBaskerville-Bold'),
|
||||
url(/fonts/libre-baskerville-bold.woff2) format('woff2'),
|
||||
url(./fonts/libre-baskerville-bold.woff2) format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Libre Baskerville';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: fallback;
|
||||
src: local('Libre Baskerville Italic'), local('LibreBaskerville-Italic'),
|
||||
url(/fonts/libre-baskerville-italic.woff2) format('woff2'),
|
||||
url(./fonts/libre-baskerville-italic.woff2) format('woff2');
|
||||
}
|
||||
|
||||
html {
|
||||
font: 16px/180% 'Libre Baskerville', 'DejaVu Serif', 'Bitstream Vera Serif', 'Georgia', serif;
|
||||
/* Possible sans-serif alternative; note you may want to adjust the
|
||||
* line-height and font-size if you want the fonts. Different values work
|
||||
* better for different fonts.
|
||||
* font: 18px/160% Calibri, 'DejaVu Sans Serif', sans-serif;
|
||||
*/
|
||||
|
||||
text-size-adjust: none; /* Disables text adjustment algorithm on some mobile browsers, this is */
|
||||
-webkit-text-size-adjust: none; /* intended for sites that are not designed for mobile viewing. */
|
||||
}
|
||||
|
||||
@media (max-width: /*bodywidth*/54em) { /* Use smaller fonts and line-height on smaller screens. */
|
||||
html { font-size: 14px; line-height: 160%; }
|
||||
}
|
||||
@media (max-width: /*bodywidth*/26em) {
|
||||
html { font-size: 12px; line-height: 150%; }
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 14px; /* Smaller text to fit more. */
|
||||
line-height: 130%; /* Idem. */
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
/* Enable ligatures, works well with Libre Baskerville, which adds
|
||||
* (old-fashioned but handsome) ligatures on "st", "ct", and "sp".
|
||||
*
|
||||
* You'll need to add "&subset=all" if you're using it from Google Fonts:
|
||||
* https://fonts.googleapis.com/css?family=Libre+Baskerville&subset=all
|
||||
*/
|
||||
font-variant-ligatures: common-ligatures discretionary-ligatures;
|
||||
font-feature-settings: 'liga' on, 'dlig' on;
|
||||
}
|
||||
|
||||
|
||||
/* DEFAULTS */
|
||||
* {
|
||||
box-sizing: border-box; /* Element width/height includes the border. */
|
||||
}
|
||||
|
||||
*:target {
|
||||
background-color: #ff6; /* Highlight elements in URL fragment, e.g. #some-header, or #footnote-1. */
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #eee; /* Neutral background to contrast with the page. */
|
||||
color: /*textcolor*/#252525; /* Slightly less "harsh" black; looks subtly better. */
|
||||
tab-size: 4; /* Tab size of 4 is probably more common in editors etc. */
|
||||
-moz-tab-size: 4; /* Still needed as of Jan 2019 :-( https://bugzil.la/737785 */
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0; /* No extra margin; shows up in some cases (e.g. when printing). */
|
||||
}
|
||||
|
||||
.center, .page {
|
||||
max-width: /*bodywidth*/54rem; /* Don't make it too wide, as that makes it harder to read. */
|
||||
margin: .5rem auto; /* Add some extra space at top/bottom, and centre it. */
|
||||
position: relative; /* So that absolute/relative positioning is relative to the page, which is almost always what's desired. */
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: /*pady*/1rem /*padx*/4rem; /* Small padding on top, larger on sides. */
|
||||
background-color: /*bgcolor*/#fff; /* White background to override the html one */
|
||||
/* A slightly grey or yellowish tint also works well, and gives a warmer feel.
|
||||
* Some suggestions: #fbfbf7, #fffff7 */
|
||||
/* Remove this and the box-shadow for an even background colour. */
|
||||
box-shadow: 0 0 6px rgba(0,0,0,.2); /* Box-shadow effect looks quite handsome here. */
|
||||
}
|
||||
@media (max-width: /*bodywidth*/54em) {
|
||||
.page, .center {
|
||||
max-width: 100%; /* Full-width page. */
|
||||
padding: 0 1rem; /* Modest amount of padding to prevent wasting screen space. */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* PRINTING */
|
||||
@page {
|
||||
margin: 0; /* Don't add extra margin to pages, .page already has it. */
|
||||
/* Also hides URL and such that most browsers add. */
|
||||
}
|
||||
@media print { /* Reset some stuff for printing. */
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
.page, .center {
|
||||
box-shadow: none;
|
||||
padding: 0 1cm;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
}
|
||||
.page:first-child, .center:first-child {
|
||||
padding-top: 5mm;
|
||||
}
|
||||
}
|
||||
|
||||
.page-a4, .page.page-a4 { /* A4 paper used in most places */
|
||||
width: 21cm;
|
||||
height: 29.7cm;
|
||||
}
|
||||
|
||||
.page-letter, .page.page-letter { /* Standard U.S. letter */
|
||||
width: 8.5in;
|
||||
height: 11in;
|
||||
}
|
||||
|
||||
|
||||
/* LINKS */
|
||||
a,
|
||||
a code, /* Otherwise it would just stay black text; common enough to include here. */
|
||||
.link {
|
||||
color: #00f; /* Make sure colour is the same in all browsers. */
|
||||
text-decoration: none; /* Underlining can look "busy"; the colour on its own should be enough. */
|
||||
transition: color .2s; /* Animate the change in colour effect on hover; subtle but noticeable. */
|
||||
}
|
||||
a:hover, .link:hover {
|
||||
text-decoration: underline; /* Provide some feedback by underlining and changing colour. */
|
||||
color: #6491ff; /* Light blue */
|
||||
}
|
||||
a:hover code {
|
||||
color: #6491ff; /* Also change colour of code on hover. */
|
||||
}
|
||||
|
||||
form { /* Make sure forms don't affect visual layout. */
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
background: transparent; /* Reset basic appearance. */
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
line-height: 1rem;
|
||||
display: inline;
|
||||
|
||||
-moz-user-select: inherit; /* Otherwise text isn't selectable. */
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
|
||||
/* HEADERS */
|
||||
|
||||
/* The intention is that there is only one h1 on a page: at the top. If you use
|
||||
* h1 different, then you may want to add a border like in the h2. */
|
||||
h1 {
|
||||
text-align: center;
|
||||
padding: .5em 0; /* More than default. */
|
||||
font-size: 1.7em; /* Default of 2em is pretty large. */
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 1px solid /*textcolor*/#252525; /* Underline to stand out more. */
|
||||
padding-bottom: .2em; /* Border not too close to the text. */
|
||||
font-size: 1.5em; /* Default of 1.8em is pretty large. */
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em; /* Default of 1.6em is pretty large. */
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em; /* Slightly larger than default of 1em. */
|
||||
}
|
||||
|
||||
h5, h6 {
|
||||
font-size: 1em; /* Don't make h5 and h6 smaller than base font. */
|
||||
}
|
||||
|
||||
|
||||
/* BLOCKQUOTE */
|
||||
blockquote {
|
||||
font-style: italic; /* Quotations are usually typeset in italics. */
|
||||
}
|
||||
|
||||
|
||||
/* IMAGES */
|
||||
img {
|
||||
max-width: 100%; /* Make sure it's never larger than the page. */
|
||||
}
|
||||
figure {
|
||||
text-align: center; /* Centre images and associated captions (if any). */
|
||||
margin: 1rem 0; /* Don't need 40px of margin on either side. */
|
||||
}
|
||||
|
||||
figure.border {
|
||||
border: 1px solid /*bordercolor*/#aaa; /* Add border. */
|
||||
padding: 5px; /* Slight gap between image and border. */
|
||||
margin: -5px; /* Put the border in the margin, so the padding doesn't shrink the image. */
|
||||
}
|
||||
|
||||
@media (min-width: /*bodywidth*/54em) { /* Only if the screen is wide enough. */
|
||||
figure.full { /* Make sure this is after .border so that adding both works. */
|
||||
margin-left: /*padx*/-4rem;
|
||||
width: calc(100% + /*padx*/8rem);
|
||||
}
|
||||
|
||||
figure.full.border {
|
||||
border-left: none; /* Remove side borders on .full */
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* CODE */
|
||||
code, pre, kbd, samp {
|
||||
background-color: #f5f5f5; /* Make it stand out a bit more. */
|
||||
color: #000; /* Override the softer black, as we're now using a grey background. */
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto; /* Add scrollbars if the content is too high or wide. */
|
||||
max-height: 500px; /* Scroll content larger than this. */
|
||||
padding: .5em 1em; /* Don't put the text right on the edge. */
|
||||
border-radius: 2px; /* Looks better with subtly rounded corner. */
|
||||
border-top: 1px solid #d5d5d5; /* Looks better. */
|
||||
border-bottom: 1px solid #d5d5d5; /* Looks better. */
|
||||
}
|
||||
|
||||
@media (min-width: /*bodywidth*/54em) { /* Only if the screen is wide enough. */
|
||||
pre.full {
|
||||
margin-left: /*padx*/-4rem;
|
||||
width: calc(100% + /*padx*/8rem);
|
||||
}
|
||||
}
|
||||
|
||||
code, kbd, samp {
|
||||
padding: 1px 2px; /* Make sure the text isn't right on the edge of the background. */
|
||||
}
|
||||
pre > code { /* Reset the above styling on <pre><code> */
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
|
||||
background-color: transparent; /* Don't include grey background in headers, looks ugly. */
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* TABLES */
|
||||
table {
|
||||
border-collapse: collapse; /* No space between borders. */
|
||||
width: 100%;
|
||||
}
|
||||
table + table {
|
||||
margin-top: 2em; /* Add margin for subsequent tables. */
|
||||
}
|
||||
|
||||
@media (min-width: /*bodywidth*/54em) { /* Only if the screen is wide enough. */
|
||||
table.full {
|
||||
margin-left: /*padx*/-3.5rem;
|
||||
width: calc(100% + /*padx*/7rem);
|
||||
}
|
||||
}
|
||||
|
||||
caption {
|
||||
font-weight: bold; /* Make caption stand out more. */
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid #ddd; /* Divide rows with a border. */
|
||||
}
|
||||
table > tr:last-child, tbody tr:last-child, tfoot tr:last-child {
|
||||
border-bottom: none; /* No border on the last row. */
|
||||
}
|
||||
tfoot tr:first-child {
|
||||
border-top: 1px solid #ddd; /* Continue border on first tfoot row; removed with tbody tr:last-child. */
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: .2em .5em; /* Whitespace on top/bottom to make it less dense. */
|
||||
/* And to the side to prevent cells from touching. */
|
||||
hyphens: none; /* Disable hyphenation by default, as it tends to wreak havoc with cell width calculations. */
|
||||
}
|
||||
|
||||
td.left, th.left { /* Left aligned table cells (mainly for <th>). */
|
||||
text-align: left;
|
||||
}
|
||||
td.right, th.right { /* Right aligned table cells. */
|
||||
text-align: right;
|
||||
}
|
||||
table td.right {
|
||||
font-feature-settings: 'tnum' on; /* Use tabular numbers for alignment. */
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-family: sans-serif; /* Libre Baskerville has no aligned numbers :-( */
|
||||
}
|
||||
|
||||
/* SUPER- AND SUBSCRIPT */
|
||||
|
||||
sup, sub { /* Make sure the line height isn't affected. */
|
||||
height: 0;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
}
|
||||
sup {
|
||||
bottom: 1ex;
|
||||
}
|
||||
sub {
|
||||
top: .5ex;
|
||||
}
|
||||
|
||||
/* HORIZONTAL RULER */
|
||||
|
||||
/* Make the <hr> element look better by replacing it with some text (usually
|
||||
* decorative characters such as fleurons or an asterism. */
|
||||
hr {
|
||||
border: none; /* Remove default border. */
|
||||
text-align: center; /* Centre the characters. */
|
||||
font-size: 60px; /* Make it larger; what looks good depends a bit on which character you choose. */
|
||||
color: /*textcolor*/#252525; /* Standard text colour; it's grey by default. */
|
||||
opacity: .9; /* But make it slightly less dark than regular text. */
|
||||
}
|
||||
|
||||
hr:before {
|
||||
/* Two fleurons with touching edges.
|
||||
content: "☙❧";
|
||||
letter-spacing: -4px;
|
||||
*/
|
||||
|
||||
/* As SVG, because too many browsers suck at rendering fonts well. This is
|
||||
* the same as the above two rules (as they *should* render). */
|
||||
content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMC4yIDkuMiIgaGVpZ2h0PSIzNC44IiB3aWR0aD0iMTE0LjMiPjxwYXRoIGQ9Ik0xMy4yIDBxMS4xIDAgMS4zIDEuMiAwIDEtLjcgMS4yLTEuOC40LTIgLjggMi42LjMgMy4yIDMuMWguMmwuMi44LS40LjFxLS4yIDEuOC0xLjggMS45LTEgMC0xLjMtMSAwLS44LjItLjguMi40LjguNC44IDAgMS0uOFExMSA2LjEgMTEgMy43cS0xLjQgMC0yLjEgMSAxLjQuNyAxLjQgMS44LS4xIDIuNS0zLjYgMi43US41IDkuMiAwIDUuNXEwLS42LjctLjcuNSAwIC42LjV2LjJsLS4xLjRxMCAxIDEuMSAxIDEgMCAxLS43UTQgMS4yIDcgMXEyIC4xIDIgMS43di4xcTAgLjQtLjQgMS41IDEtLjggMi0xIC42IDAgLjYtLjQuOC0xIDEuNi0xLjMuNi0uNC42LS44bC0uMi0uNHEtLjItLjMgMC0uNHptLTEuNiAzLjd2LjFxMCAxLjQgMi4zIDIuMi0uMy0yLTIuMy0yLjN6Ii8+PHBhdGggZD0iTTE3IDBxLTEgMC0xLjMgMS4yIDAgMSAuOCAxLjIgMS44LjQgMiAuOC0yLjcuMy0zLjIgMy4xSDE1bC0uMi44LjUuMXEuMiAxLjggMS44IDEuOSAxIDAgMS4yLTEgMC0uOC0uMi0uOC0uMS40LS43LjQtLjkgMC0xLS44IDIuNy0uOCAyLjgtMy4yIDEuNCAwIDIgMS0xLjMuNy0xLjMgMS44IDAgMi41IDMuNSAyLjcgNi40IDAgNi44LTMuNyAwLS42LS42LS43LS42IDAtLjcuNXYuMmwuMi40cTAgMS0xLjIgMS0uOSAwLTEtLjctLjYtNS0zLjctNS4yLTIgLjEtMiAxLjd2LjFxMCAuNC40IDEuNS0xLS44LTItMS0uNiAwLS42LS40LS43LTEtMS41LTEuMy0uNi0uNC0uNi0uOGwuMi0uNHEuMi0uMyAwLS40em0xLjcgMy43di4xcTAgMS40LTIuNCAyLjIuMy0yIDIuNC0yLjN6Ii8+PC9zdmc+);
|
||||
|
||||
/* Alternative: separate with a space:
|
||||
content: "☙ ❧";
|
||||
*/
|
||||
|
||||
/* Or separate with letter-spacing and padding:
|
||||
letter-spacing: 1em;
|
||||
padding-left: 1em;
|
||||
*/
|
||||
|
||||
/* Or asterism:
|
||||
content: "⁂";
|
||||
*/
|
||||
|
||||
/* Many possibilities
|
||||
content: "* * *";
|
||||
content: "· · ·";
|
||||
*/
|
||||
}
|
||||
/* BLOCKQUOTE */
|
||||
|
||||
/* Put decorational quotation marks around blockquote elements. */
|
||||
blockquote {
|
||||
font-style: italic; /* Quotations are usually typeset in italics. */
|
||||
position: relative; /* So that position: absolute is relative to this. */
|
||||
}
|
||||
|
||||
blockquote:before /*, blockquote:after */ {
|
||||
position: absolute; /* Don't interfere with regular layout. */
|
||||
color: #dbdbdb; /* Just decorational, so don't stand out too much. */
|
||||
font-size: 5em;
|
||||
}
|
||||
|
||||
blockquote:before {
|
||||
content: "“";
|
||||
left: -.6em;
|
||||
top: .25em;
|
||||
}
|
||||
|
||||
/* Optional: place a mark after the quote, too. I personally don't like it as
|
||||
* often times the last line won't end at the line, and there just seems to be a
|
||||
* "dangling" quotation mark there.
|
||||
*
|
||||
* Note: add blockquote:after to the first selector above too.
|
||||
*/
|
||||
/*
|
||||
blockquote:after {
|
||||
content: "„"; /* Use the German-style opening quote as it's easier to align, and it should look the same. *
|
||||
right: -.6em;
|
||||
bottom: .25em;
|
||||
}
|
||||
*/
|
||||
/* FORMS */
|
||||
|
||||
/* Simple form layouts.
|
||||
*
|
||||
* Use the "vertical" class to make the labels sit above the input fields:
|
||||
*
|
||||
* Label
|
||||
* [ ]
|
||||
*
|
||||
* [x] Checkbox
|
||||
*
|
||||
* [Submit]
|
||||
*
|
||||
*
|
||||
* Use the "horizontal" class if you want a more "horizontal" layout:
|
||||
*
|
||||
* Label [ ]
|
||||
*
|
||||
* Another [ ]
|
||||
*
|
||||
* [x] Checkbox
|
||||
*
|
||||
* [Submit]
|
||||
*
|
||||
* You need to explicitly add one of the layout classes to make it easier to use
|
||||
* forms as simple UI elements.
|
||||
*/
|
||||
|
||||
|
||||
/* GENERIC STYLES */
|
||||
input[type="text"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="week"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="range"],
|
||||
input[type="number"],
|
||||
textarea,
|
||||
select {
|
||||
font: 1em/100% sans-serif; /* Use sans-serif font with the default font size. */
|
||||
}
|
||||
|
||||
textarea,
|
||||
button:not(.link),
|
||||
select,
|
||||
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]) {
|
||||
padding: .6em; /* Chrome adds almost no padding. */
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%; /* Use entire width of container. */
|
||||
height: 10rem; /* A reasonable default height for most purposes. */
|
||||
line-height: 130%; /* Reduce line-height since we set a sans-serif font. */
|
||||
}
|
||||
|
||||
button:not(.link), input[type="submit"]:not(.link) {
|
||||
color: #000; /* Bit more contrast. */
|
||||
cursor: pointer; /* Clearer it's clickable. */
|
||||
margin-left: .5em; /* Bit of margin generally looks better. */
|
||||
padding: .6em 1.5em; /* More padding for left/right. */
|
||||
background-color: #f6f5f4; /* Background gets reset when border is set; defaults from Firefox. */
|
||||
background: linear-gradient(#f6f5f4, #edebe9);
|
||||
border: .5px outset #e9e9e9; /* More or less the same as the Firefox border. */
|
||||
border-radius: 3px;
|
||||
border-top-color: #ccc;
|
||||
border-left-color: #ccc;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: inherit; /* No need for just selects to be grey. */
|
||||
}
|
||||
|
||||
input:not(.link):focus,
|
||||
button:not(.link):focus,
|
||||
textarea:focus,
|
||||
select:focus { /* Firefox removes this once you start styling */
|
||||
outline: 1px solid #00f;
|
||||
box-shadow: 0 0 .2em #00f;
|
||||
color: #000; /* Increase contrast a bit. */
|
||||
cursor: pointer; /* Clearer that you can click this. */
|
||||
}
|
||||
|
||||
button:not(.link):hover, /* Bit darker on hover. */
|
||||
input[type="submit"]:not(.link):hover {
|
||||
background-color: #f0f0f0;
|
||||
background: linear-gradient(#f0f0f0, #d0cecc);
|
||||
}
|
||||
button:not(.link):active, /* Reverse when active/clicking. */
|
||||
input[type="submit"]:not(.link):active {
|
||||
background-color: #d0cecc;
|
||||
background: linear-gradient(#d0cecc, #f0f0f0);
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
form > strong, fieldset > strong { /* Header. */
|
||||
display: inline-block;
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
form span {
|
||||
margin-left: .2em; /* Help text or error; so it doesn't sit flush with the input. */
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid /*bordercolor*/#aaa; /* More modern-looking border instead of inset or 2px. */
|
||||
}
|
||||
|
||||
/* VERTICAL FORM */
|
||||
|
||||
/* TODO: optgroup? */
|
||||
/* https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css */
|
||||
.vertical input[type="text"],
|
||||
.vertical input[type="search"],
|
||||
.vertical input[type="tel"],
|
||||
.vertical input[type="url"],
|
||||
.vertical input[type="email"],
|
||||
.vertical input[type="password"],
|
||||
.vertical input[type="date"],
|
||||
.vertical input[type="month"],
|
||||
.vertical input[type="week"],
|
||||
.vertical input[type="time"],
|
||||
.vertical input[type="datetime-local"],
|
||||
.vertical input[type="range"],
|
||||
.vertical input[type="number"],
|
||||
.vertical textarea,
|
||||
.vertical select {
|
||||
display: block; /* One input per line. */
|
||||
min-width: 20rem; /* Roughly half the page. */
|
||||
}
|
||||
|
||||
.vertical input[type="number"] {
|
||||
min-width: 10rem; /* Numbers don't need to be so wide. */
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.vertical label {
|
||||
display: block; /* One label per line. */
|
||||
margin-top: .5em; /* Clear from the previous input. */
|
||||
}
|
||||
|
||||
/* HORIZONTAL FORM */
|
||||
form.horizontal {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
form.horizontal label {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
form.horizontal > div {
|
||||
width: 65%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
form.horizontal input[type=submit],
|
||||
form.horizontal button[type=submit] {
|
||||
margin-left: 35%; /* Align submit buttons with inputs. */
|
||||
}
|
||||
|
||||
form.horizontal span { /* Help text, put below the input. */
|
||||
display: block;
|
||||
margin-left: .2em;
|
||||
}
|
||||
/* PERMALINK MARKERS */
|
||||
|
||||
/* Style permalink markers in headers. h2-h6 headers. The HTML is assumed to
|
||||
* look like:
|
||||
*
|
||||
* <h2 id="hello">Hello, CSS! <a href="#hello"></a></h1>
|
||||
*
|
||||
* Note the space between the </a> and text matters, otherwise it will look bad
|
||||
* in text browsers.
|
||||
*/
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
|
||||
font-size: .7em; /* Doesn't need to be so large. */
|
||||
line-height: 0; /* Don't affect line-height of header. */
|
||||
color: #999; /* Use subdued colour, don't need to stand out too much. */
|
||||
}
|
||||
|
||||
h1 a:after, h2 a:after, h3 a:after, h4 a:after, h5 a:after, h6 a:after {
|
||||
content: "¶"; /* So it won't get copy/pasted. */
|
||||
/* Alternative:
|
||||
content: "🔗";
|
||||
content: "§";
|
||||
content: "[link]";
|
||||
*/
|
||||
}
|
||||
|
||||
/* Alternative: put it before the element, in the page margin. Not done for h1
|
||||
* as that's centre-aligned by default, so it looks weird. */
|
||||
/*
|
||||
h2, h3, h4, h5, h6 {
|
||||
position: relative;
|
||||
}
|
||||
h2 a, h3 a, h4 a, h5 a, h6 a {
|
||||
position: absolute;
|
||||
left: -1em;
|
||||
font-size: .8em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
*/
|
||||
/* POSTSCRIPT */
|
||||
|
||||
/* A "postscript" is useful for adding things after the main text, such as a
|
||||
* footnotes section, feedback section, etc.
|
||||
*
|
||||
* It doesn't need to be at the end of the document, and also fits well at the
|
||||
* end of a chapter.
|
||||
*/
|
||||
.postscript {
|
||||
margin-top: 3em; /* Clear a bit from regular content. */
|
||||
border-top: 1px solid /*bordercolor*/#aaa; /* Border to separate. */
|
||||
font-size: .9em; /* Slightly smaller text. */
|
||||
position: relative; /* So we can place the header. */
|
||||
|
||||
}
|
||||
.postscript + .postscript {
|
||||
margin-top: 2em; /* Less margin for subsequent footnotes. */
|
||||
}
|
||||
|
||||
.postscript > strong {
|
||||
font-style: normal; /* Override the italics. */
|
||||
position: absolute; /* Move to the to align with the border. */
|
||||
top: -1em;
|
||||
left: 1em;
|
||||
background-color: /*bgcolor*/#fff; /* Add background colour and padding to hide the border. */
|
||||
padding: 0 .5em;
|
||||
}
|
||||
|
||||
.postscript > p {
|
||||
margin: 1em 2em /* Make margin same as list. */
|
||||
}
|
||||
|
||||
/* Make the border take up the page padding if the screen is wide enough. */
|
||||
@media (min-width: /*bodywidth*/54rem) {
|
||||
.postscript {
|
||||
margin-left: /*padx*/-4em; /* Put the div in the margin too, so the border is wider. */
|
||||
width: calc(100% + /*padx*/8em);
|
||||
padding: 0 /*padx*/4em; /* Add page margin. */
|
||||
}
|
||||
|
||||
.postscript > strong {
|
||||
left: /*padx*/6em;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,112 @@
|
||||
/*
|
||||
Minimal CSS
|
||||
minimalcss.com
|
||||
*/
|
||||
|
||||
/* Reset */
|
||||
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
|
||||
/* Layout */
|
||||
body { background-color: #fff; color: #333; font: 14px/20px "HelveticaNeue-Light", "HelveticaNeue", Helvetica, Arial, sans-serif; }
|
||||
|
||||
header { width: 100%; margin: 0 auto; position: relative; padding: 20px 0; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
|
||||
.logo { font-size: 28px; color: #333; }
|
||||
|
||||
nav ul { margin: 0; }
|
||||
nav ul li { display: inline; margin-right: 20px; font-size: 16px; line-height: 28px; color: #333; }
|
||||
nav ul li a { color: #333; }
|
||||
|
||||
.container { position: relative; text-align: left; width: 960px; max-width: 90%; margin: 0 auto; }
|
||||
|
||||
footer { border-top:1px solid #ccc; font-size:11px; line-height:26px; color:#999; }
|
||||
footer a { color:#999999; }
|
||||
footer a:hover { color:#105CB6; }
|
||||
footer ul li { display:inline; list-style:none; padding-left:20px; }
|
||||
|
||||
/* Grid */
|
||||
.row { width: 100%; margin:0 auto 20px auto; display:inline-block; position:relative; }
|
||||
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left; margin-right: 2%; }
|
||||
.row .col-1:last-child, .row .col-2:last-child, .row .col-3:last-child, .row .col-4:last-child, .row .col-5:last-child, .row .col-6:last-child, .row .col-7:last-child, .row .col-8:last-child, .row .col-9:last-child, .row .col-10:last-child, .row .col-11:last-child, .row .col-12:last-child { margin-right: 0; }
|
||||
.row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
|
||||
.col-1 { width: 6%; }
|
||||
.col-2 { width: 15%; }
|
||||
.col-3 { width: 23.5%; }
|
||||
.col-4 { width: 32%; }
|
||||
.col-5 { width: 40%; }
|
||||
.col-6 { width: 49%; }
|
||||
.col-7 { width: 56.5%; }
|
||||
.col-8 { width: 66%; }
|
||||
.col-9 { width: 74%; }
|
||||
.col-10 { width: 82.5%; }
|
||||
.col-11 { width: 91%; }
|
||||
.col-12 { width: 100%; }
|
||||
|
||||
/* Typography */
|
||||
a { color: #105CB6; text-decoration: none; }
|
||||
a:hover, a:focus { color: #105CB6; text-decoration: underline; }
|
||||
a:active { color: #105CB6; }
|
||||
|
||||
h1 { font-size: 30px; line-height: 36px; margin-bottom: 20px; }
|
||||
h2 { font-size: 24px; line-height: 20px; margin-bottom: 20px; }
|
||||
h3 { font-size: 20px; line-height: 20px; margin-bottom: 10px; }
|
||||
h4 { font-size: 16px; line-height: 20px; margin-bottom: 10px; }
|
||||
h5 { font-size: 14px; line-height: 20px; margin-bottom: 20px; }
|
||||
h6 { font-size: 12px; line-height: 20px; margin-bottom: 20px; }
|
||||
h1,h2,h3,h4,h5,h6 { color: #333; }
|
||||
|
||||
p { margin-bottom: 20px; }
|
||||
|
||||
.float-left { float: left; }
|
||||
.float-right { float: right; }
|
||||
img.float-left { float: left; margin: 0 20px 20px 0; }
|
||||
img.float-right { float: right; margin: 0 0 20px 20px; }
|
||||
img.center { margin: 0 auto; display: block; }
|
||||
|
||||
.text-left { text-align: left; }
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
.text-justify { text-align: justify; }
|
||||
|
||||
/* Misc */
|
||||
hr { background-color: #ccc; border: 0px; color: #ccc; height: 1px; margin-bottom: 20px; }
|
||||
|
||||
pre, code { background-color: #eee; display:block; padding:10px; }
|
||||
|
||||
pre {
|
||||
margin-bottom: 20px;
|
||||
white-space: pre-wrap; /* css-3 */
|
||||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
||||
white-space: -pre-wrap; /* Opera 4-6 */
|
||||
white-space: -o-pre-wrap; /* Opera 7 */
|
||||
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
||||
}
|
||||
|
||||
blockquote { margin: 10px 10px 20px; padding: 9px; background-color: #f8f8f8; color: #666; border-left: 5px solid #ddd; font: 14px/20px Georgia, Times, serif; quotes: "\201C" "\201D"; }
|
||||
blockquote p { margin: 0; }
|
||||
blockquote:before { content: open-quote; font-weight: bold; }
|
||||
blockquote:after { content: close-quote; font-weight: bold; }
|
||||
|
||||
/* List */
|
||||
ul { margin-bottom: 20px; list-style-position:inside; }
|
||||
ol { margin-bottom: 20px; list-style-position:inside; }
|
||||
ul ul, ol ol { margin-bottom:0; }
|
||||
|
||||
/* Form */
|
||||
fieldset { position: relative; border-top:1px solid #ccc; padding: 10px; margin-bottom:20px; }
|
||||
fieldset legend { font-weight:bold; font-size:16px; padding: 0 5px; }
|
||||
|
||||
/* Table */
|
||||
table { margin-bottom: 20px; width:100%; }
|
||||
th { font-weight: bold; }
|
||||
td { text-align: left; }
|
||||
tfoot { font-style: italic; }
|
||||
|
||||
/* Print */
|
||||
@media print {
|
||||
* {
|
||||
text-shadow: none !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1 @@
|
||||
body{margin:0;font-family:sans-serif;height:100%;background:#f5f5fb}a:link,a:visited{color:#f44337}::selection{background:#f44337;color:#fff}code,pre{background:#fcfcff;color:#666;font-weight:bold;padding:3px 5px;border-radius:4px}pre{padding:12px;overflow-x:auto}.rbl-layout{display:flex;flex-direction:column;min-height:100vh}.rbl-layout__header{padding:20px}.rbl-layout__content{flex:1;margin:0 auto}.rbl-layout__footer{color:#888;font-size:12px;text-align:center;padding:20px}.rbl-header-1,.rbl-header-2,.rbl-header-3,.rbl-header-4{color:#333;font-family:BlinkMacSystemFont,sans-serif;font-weight:normal}html{font-size:1em}body{font-family:BlinkMacSystemFont, sans-serif;font-weight:400;line-height:1.45;color:#666}.rbl-paragraph{margin-bottom:1.3em}.rbl-header-1,.rbl-header-2,.rbl-header-3,.rbl-header-4{margin:1.414em 0 0.5em;font-weight:inherit;line-height:1.2}.rbl-header-1{margin-top:0;font-size:2.074em}.rbl-header-2{font-size:1.728em}.rbl-header-3{font-size:1.44em}.rbl-header-4{font-size:1.2em}.rbl-small{font-size:0.833em}.rbl-panel{border-radius:6px;box-shadow:0 2px 14px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.1),0 1px 5px 0 rgba(0,0,0,0.01);background:#fff}.rbl-panel__title{box-sizing:border-box;margin:0;padding:20px 20px 0}.rbl-panel__inner{box-sizing:border-box;padding:20px}.rbl-button,.rbl-button--secondary{border:none;border-radius:2px;min-width:64px;padding:0 16px;display:inline-block;font-family:BlinkMacSystemFont,sans-serif;height:36px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;will-change:box-shadow;transition:box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1),background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),color 0.2s cubic-bezier(0.4, 0, 0.2, 1);outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;user-select:none;vertical-align:middle}.rbl-button{background:rgba(244,67,55,0.1);color:#f44337}.rbl-button:hover{background:rgba(244,67,55,0.2)}.rbl-button:active{background:rgba(244,67,55,0.4)}.rbl-button:focus{box-shadow:0 0 0 2px rgba(244,67,55,0.2)}.rbl-button--secondary{background:transparent;color:#666}.rbl-button--secondary:hover{background:rgba(0,0,0,0.06)}.rbl-button--secondary:active{background:rgba(0,0,0,0.12)}.rbl-button--secondary:focus{box-shadow:0 0 0 2px rgba(244,67,55,0.2)}.rbl-checkbox{position:fixed;top:-30px;left:-30px;opacity:0}.rbl-checkbox+label{color:#505052;cursor:pointer;align-items:center;font-size:14px;display:flex;position:relative;user-select:none}.rbl-checkbox+label::before{content:'';width:16px;height:16px;border-radius:2px;background:#fff center center;background-size:90%;margin:0 10px 0 0;border:2px solid #aaa;transition:background .1s ease, background-size .1s ease, border .1s ease}.rbl-checkbox+label::after{content:'';width:40px;height:40px;background:rgba(0,0,0,0.1);position:absolute;left:-10px;top:-10px;border-radius:100%;transform:scale(0);transition:transform .5s ease}.rbl-checkbox:checked+label::before{border-color:#ff8981;background:#ff8981 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNy44LDE1LjYgMi4yLDEwIDMuOCw4LjQgNy44LDEyLjQgMTYuMiw0IDE3LjgsNS42ICIvPjwvc3ZnPg==);background-size:100%;color:#fff}.rbl-checkbox:active+label::after{transform:scale(1);transition:transform .1s ease}@keyframes checkboxFocus{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.8)}}.rbl-checkbox:focus+label::after{background:rgba(244,67,55,0.2);animation:checkboxFocus .7s infinite alternate;transition:transform .1s ease, color .1s ease}.rbl-select{border:0;background:#fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNyAxMGw1IDUgNS01eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=) no-repeat right center;font-family:sans-serif;padding:0 32px 0 16px;font-size:16px;border-radius:2px;-webkit-appearance:none;color:#555;height:36px;transition:box-shadow .1s ease}.rbl-select:focus{outline:0;box-shadow:0 0 0 2px rgba(244,67,55,0.3)}.rbl-field-label{color:#505052;cursor:pointer;align-items:center;font-size:14px;display:flex;position:relative;user-select:none;margin:0 0 4px}.rbl-textfield{box-shadow:0 0 0 2px rgba(0,0,0,0.1);border:0;background:#fff;border-radius:2px;color:#555;padding:8px;display:block;font-family:BlinkMacSystemFont,sans-serif;font-size:16px;outline:0;width:100%;box-sizing:border-box}.rbl-textfield::placeholder{color:rgba(102,102,102,0.2)}.rbl-textfield:focus{box-shadow:0 0 0 2px rgba(244,67,55,0.3)}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue