Index: skin/defaults.css |
=================================================================== |
new file mode 100644 |
--- /dev/null |
+++ b/skin/defaults.css |
@@ -0,0 +1,446 @@ |
+/*! |
+ * This file is part of website-defaults |
+ * Copyright (C) 2016-present eyeo GmbH |
+ * |
+ * website-defaults is free software: you can redistribute it and/or |
+ * modify it under the terms of the GNU General Public License as published by |
+ * the Free Software Foundation, either version 3 of the License, or |
+ * (at your option) any later version. |
+ * |
+ * website-defaults is distributed in the hope that it will be useful, |
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of |
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
+ * GNU General Public License for more details. |
+ * |
+ * You should have received a copy of the GNU General Public License |
+ * along with website-defaults. If not, see <http://www.gnu.org/licenses/>. |
+ */ |
+/******************************************************************************* |
+ * CSS Reset |
+ ******************************************************************************/ |
+/* Reset margins, paddings, and font globally */ |
+html, body, |
+h1, h2, h3, h4, h5, h6, |
+a, p, span, |
+em, small, strong, sub, sup, |
+strike, s, mark, del, ins, |
+abbr, dfn, |
+blockquote, q, cite, |
+code, pre, |
+kbd, samp, var, output, ruby, |
+ol, ul, li, dl, dt, dd, |
+div, section, article, |
+main, aside, nav, |
+header, hgroup, footer, |
+img, figure, figcaption, |
+address, time, |
+audio, video, |
+canvas, object, iframe, embed, |
+details, summary, |
+fieldset, form, label, legend, |
+table, caption, |
+tbody, tfoot, thead, |
+tr, th, td { |
+ margin: 0px; |
+ padding: 0px; |
+ border: 0px; |
+ font-size: 100%; |
+ font: inherit; |
+ vertical-align: baseline; } |
+ |
+/* Add the correct display in IE 9-. */ |
+article, |
+aside, |
+footer, |
+header, |
+nav, |
+section, |
+main { |
+ display: block; } |
+ |
+/* Set default box-sizing (opinionated) */ |
+*, |
+*:before, |
+*:after { |
+ box-sizing: inherit; } |
+ |
+html { |
+ box-sizing: border-box; } |
+ |
+/* Remove the margin in all browsers (opinionated). */ |
+body { |
+ margin: 0px; } |
+ |
+/* Remove list styles (opinionated) */ |
+ol, |
+ul { |
+ list-style: none; } |
+ |
+/* Remove quotes ("") in most browsers (opinionated) */ |
+blockquote, |
+q { |
+ quotes: none; } |
+ |
+/* Remove quotes ("") in Safari (opinionated) */ |
+blockquote:before, |
+blockquote:after, |
+q:before, |
+q:after { |
+ content: ""; |
+ content: none; } |
+ |
+/* Share borders between adjacent cells (opinionated) */ |
+table { |
+ border-collapse: collapse; |
+ border-spacing: 0; } |
+ |
+/* Normalize inline content (opinionated) */ |
+b, |
+strong { |
+ font-weight: 600; } |
+ |
+small { |
+ font-size: 0.8em; } |
+ |
+abbr { |
+ text-decoration: underline; |
+ cursor: help; } |
+ |
+sup { |
+ position: relative; |
+ font-size: 75%; |
+ vertical-align: super; } |
+ |
+a, |
+a:visited { |
+ color: inherit; |
+ /* Remove the gray background on active links in IE 10. */ |
+ background-color: transparent; |
+ text-decoration: none; |
+ /* Set default pointer regardless of href (opinionated) */ |
+ cursor: pointer; } |
+ |
+a:hover, |
+a:active, |
+a:focus { |
+ text-decoration: underline; } |
+ |
+img { |
+ /* Make fixed width images responsive */ |
+ max-width: 100%; |
+ /* Remove the border on images inside links in IE 10-. */ |
+ border-style: none; } |
+ |
+/* Set correct display for hidden attribute in IE 10- */ |
+[hidden] { |
+ display: none; } |
+ |
+/******************************************************************************* |
+ * Utilities |
+ ******************************************************************************/ |
+/* Responsive widths |
+ ******************************************************************************/ |
+/** |
+ * Stretch content (e.g. images) full-width |
+ */ |
+.full-width { |
+ display: block; |
+ width: 100%; } |
+ |
+/** |
+ * Center content within a (responsive) fixed width |
+ */ |
+.container { |
+ width: 1140px; |
+ max-width: 100%; |
+ margin-right: auto; |
+ margin-left: auto; |
+ padding-right: 1em; |
+ padding-left: 1em; } |
+ |
+/* Device widths |
+ ******************************************************************************/ |
+.phone-width { |
+ width: auto; } |
+ |
+.phablet-width { |
+ width: 540px; } |
+ |
+.tablet-width { |
+ width: 720px; } |
+ |
+.desktop-width { |
+ width: 960px; } |
+ |
+.large-desktop-width { |
+ width: 1140px; } |
+ |
+/* Clearfix |
+ ******************************************************************************/ |
+.clearfix:after, .content:after, |
+.clearfix:before, |
+.content:before { |
+ display: table; |
+ content: " "; } |
+ |
+.clearfix:after, .content:after { |
+ clear: both; } |
+ |
+/******************************************************************************* |
+ * Base styles |
+ ******************************************************************************/ |
+html { |
+ color: #212121; |
+ background-color: #fff; |
+ font-family: sans-serif; |
+ line-height: 1.5; } |
+ |
+/******************************************************************************* |
+ * Content styles |
+ ******************************************************************************* |
+ * 1. Document |
+ * 2. Headings |
+ * 3. Body content |
+ ******************************************************************************/ |
+.content { |
+ /* Clearfixed |
+ ****************************************************************************/ |
+ /* Document |
+ ****************************************************************************/ |
+ /* Headings |
+ ****************************************************************************/ |
+ /* Body content |
+ ****************************************************************************/ } |
+ .content p, |
+ .content ol, |
+ .content ul, |
+ .content dl, |
+ .content pre, |
+ .content blockquote { |
+ /* Set consistent margins (opinionated) */ |
+ margin: 1em 0em; } |
+ .content h1, |
+ .content h2, |
+ .content h3, |
+ .content h4, |
+ .content h5, |
+ .content h6 { |
+ /* Margin on top **only** (opinionated) */ |
+ margin: 2em 0em 0.5em 0em; |
+ /* All headings should be bold (opinionated) */ |
+ font-weight: 600; } |
+ .content h1 { |
+ font-size: 2em; } |
+ .content h2 { |
+ font-size: 1.5em; } |
+ .content h3 { |
+ font-size: 1.25em; } |
+ .content h4 { |
+ font-size: 1em; } |
+ .content h5 { |
+ font-size: 0.8em; } |
+ .content h6 { |
+ font-size: 0.7em; } |
+ .content a, |
+ .content a:visited { |
+ color: #1565c0; } |
+ .content hr { |
+ border: 1px solid #eee; } |
+ .content blockquote { |
+ padding-left: 1em; |
+ border-left: 5px solid #9e9e9e; } |
+ .content [dir="rtl"] blockquote { |
+ padding-right: 1em; |
+ padding-left: 0em; |
+ border-right: 5px solid #eee; |
+ border-left: 0px; } |
+ .content ol, |
+ .content ul { |
+ padding-left: 1.5em; } |
+ .content [dir="rtl"] ol, |
+ .content [dir="rtl"] ul { |
+ padding-right: 2em; |
+ padding-left: 0em; } |
+ .content ol { |
+ list-style: decimal; } |
+ .content ul { |
+ list-style: disc; } |
+ .content li { |
+ margin: 0.25em 0em; } |
+ .content ol ol, |
+ .content ul ul, |
+ .content ol ul, |
+ .content ul ol { |
+ /* prevent double spacing lists */ |
+ margin: 0em; } |
+ .content ol ol { |
+ list-style-type: lower-alpha; } |
+ .content dt { |
+ /* undo browser default (opinionated)*/ |
+ font-weight: 600; } |
+ .content dd { |
+ margin: 0.25em 0em 1em 0em; } |
+ |
+/******************************************************************************* |
+ * Grid component |
+ ******************************************************************************/ |
+/** |
+ * - .row contains one or more .column(s) |
+ * - .row clears .column(s) |
+ * - .row negates the left & right padding of it's left-most & right-most |
+ * .column(s) while preserving consistent padding between .column(s) |
+ */ |
+.row { |
+ margin: 0px -1em; } |
+ |
+.row:after { |
+ display: block; |
+ clear: both; |
+ content: ""; } |
+ |
+/** |
+ * - .column is 100% width by default |
+ * - Modifier classes are applied to .column to change it's width |
+ * - Modifier classes behave differently on different device widths |
+ */ |
+.column { |
+ position: relative; |
+ width: 100%; |
+ min-height: 1px; |
+ padding: 0px 1em; } |
+ |
+/* - .column(s) within .row .reverse appear in reverse order |
+ * - .column(s) within [dir=rtl] appear in reverse order respectively |
+ */ |
+.column, |
+[dir="rtl"] .reverse .column { |
+ float: left; } |
+ |
+.reverse .column, |
+[dir="rtl"] .column { |
+ float: right; } |
+ |
+@media (min-width: 768px) { |
+ .one-half, |
+ .one-fourth { |
+ width: 50%; } } |
+ |
+@media (min-width: 992px) { |
+ .one-third { |
+ width: 33.333333%; } |
+ .two-thirds { |
+ width: 66.666667%; } } |
+ |
+@media (min-width: 992px) { |
+ .one-fourth { |
+ width: 25%; } |
+ .three-fourths { |
+ width: 75%; } } |
+ |
+/******************************************************************************* |
+ * Basic forms fields |
+ ******************************************************************************* |
+ |
+/* 1. Reset |
+ ******************************************************************************/ |
+/* Change the font styles in all browsers (opinionated). */ |
+input, |
+optgroup, |
+select, |
+textarea { |
+ font: inherit; } |
+ |
+/* Show the overflow in IE and Edge */ |
+input { |
+ overflow: visible; } |
+ |
+/* Remove the inheritance of text transform in Edge, Firefox, and IE. */ |
+select { |
+ text-transform: none; } |
+ |
+/* Set block display (opinionated) */ |
+fieldset { |
+ display: block; } |
+ |
+/* Correct the text wrapping in Edge and IE. */ |
+legend { |
+ display: table; |
+ max-width: 100%; |
+ white-space: normal; } |
+ |
+/* Remove the default vertical scrollbar in IE. */ |
+textarea { |
+ overflow: auto; } |
+ |
+/* Remove the padding in IE 10-. */ |
+[type="checkbox"], |
+[type="radio"] { |
+ padding: 0px; } |
+ |
+/******************************************************************************* |
+ * Adanced forms fields |
+ ******************************************************************************* |
+ |
+/* 1. Reset |
+ ******************************************************************************/ |
+/* 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; } |
+ |
+/* Use `-webkit-appearance: none` to reset inputs in iOS Safari */ |
+[type="date"], |
+[type="time"], |
+[type="datetime"], |
+[type="datetime-local"], |
+[type="month"], |
+[type="week"], |
+[type="search"], |
+[type="search"]::-webkit-search-cancel-button, |
+[type="search"]::-webkit-search-decoration { |
+ -webkit-appearance: none; } |
+ |
+[type="search"] { |
+ outline-offset: -2px; } |
+ |
+/******************************************************************************* |
+ * Buttons |
+ ******************************************************************************* |
+ |
+/* 1. Reset |
+ ******************************************************************************/ |
+button { |
+ margin: 0px; |
+ font: inherit; |
+ /* Show the overflow in IE and Edge */ |
+ overflow: visible; |
+ /* Remove rounded corners in Chrome 62+ */ |
+ border-radius: 0; |
+ /* Remove the inheritance of text transform in Edge, Firefox, and IE. */ |
+ text-transform: none; } |
+ |
+/** |
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` |
+ * controls in Android 4. |
+ * 2. Correct the inability to style clickable types in iOS and Safari. |
+ */ |
+button, |
+html [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 { |
+ padding: 0px; |
+ border-style: none; } |
+ |
+/* 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; } |