diff options
| -rw-r--r-- | templates/web.html | 14 | ||||
| -rw-r--r-- | templates/web/css/elenq-publishing.css | 28 | ||||
| -rw-r--r-- | templates/web/css/elenq.css | 284 | ||||
| -rw-r--r-- | templates/web/css/extra-style.css | 25 | ||||
| -rw-r--r-- | templates/web/css/fonts.css | 23 | ||||
| -rw-r--r-- | templates/web/css/highlight.css | 119 | ||||
| -rw-r--r-- | templates/web/css/normalize.css | 427 | ||||
| -rw-r--r-- | templates/web/css/style.css | 364 | ||||
| l--------- | templates/web/fonts | 1 | ||||
| -rw-r--r-- | templates/web/js/colorscheme-switcher.js | 52 |
10 files changed, 1329 insertions, 8 deletions
diff --git a/templates/web.html b/templates/web.html index 68e5c64..244092d 100644 --- a/templates/web.html +++ b/templates/web.html @@ -11,19 +11,17 @@ $if(keywords)$ $endif$ <title>ElenQ Publishing - $pagetitle$</title> - <link rel="stylesheet" href="/static/css/normalize.css"> - <link rel="stylesheet" href="/static/css/fonts.css"> - <link rel="stylesheet" href="/static/css/elenq.css"> - <link rel="stylesheet" href="/static/css/elenq-publishing.css"> + <link rel="stylesheet" href="css/normalize.css"> + <link rel="stylesheet" href="css/fonts.css"> + <link rel="stylesheet" href="css/elenq.css"> + <link rel="stylesheet" href="css/elenq-publishing.css"> <!-- No need to add extra highlighting css --> - <link rel="stylesheet" href="/static/css/highlight.css"> + <link rel="stylesheet" href="css/highlight.css"> <style> .sourceCode { overflow: visible; } </style> - - <script type="text/javascript" async src="/static/js/prism-hl.js"></script> - <script type="text/javascript" async src="/static/js/colorscheme-switcher.js"></script> + <script type="text/javascript" async src="js/colorscheme-switcher.js"></script> $if(math)$ $math$ diff --git a/templates/web/css/elenq-publishing.css b/templates/web/css/elenq-publishing.css new file mode 100644 index 0000000..9292cd1 --- /dev/null +++ b/templates/web/css/elenq-publishing.css @@ -0,0 +1,28 @@ +/* Title block */ + +#title-block-header h1.main-title { + font-size: 4.5rem; line-height: 1; text-align: center; + margin-bottom: 2rem; + margin-top: 2rem; + font-family: "LatoLatinLightWeb", Helvetica, Arial, sans-serif; +} +#title-block-header h1 span.subtitle{ + font-size: 2.5rem; +} + +#title-block-header .author{ + text-align: center; +} + + +/* h2 are sections, increase the size and center them */ +h2{ + font-size: 3.5rem; + padding-top: 7rem; + padding-bottom: 2rem; + font-family: "LatoLatinLightWeb", Helvetica, Arial, sans-serif; +} + +.anchor:before{ + content: "ΒΆ"; +} diff --git a/templates/web/css/elenq.css b/templates/web/css/elenq.css new file mode 100644 index 0000000..ba04f2f --- /dev/null +++ b/templates/web/css/elenq.css @@ -0,0 +1,284 @@ +html{ + font-size: 80%; +} + +/* Typography*/ +body{ + font-family: "LatoLatinWeb", Helvetica, Arial, sans-serif; + line-height: 1.6; + color: #222; + background-color: #fff; + font-size: 1.5em; +} +p { + text-align: justify; +} +q, blockquote{ + font-style: italic; +} +h1, h2, h3, h4, h5, h6 { + text-decoration: none; + margin-top: 2ex; + margin-bottom: 0; + line-height: 2; + font-weight: 300; } +h1 { + font-size: 5.5rem; + line-height: 1.2; + text-align: center; + margin-bottom: 4rem; + margin-top: 0; + font-family: "LatoLatinLightWeb", Helvetica, Arial, sans-serif; +} +h1,h2,h3 { letter-spacing: -.1rem; } +h4 { letter-spacing: -.08rem;} +h5 { letter-spacing: -.05rem;} +h6 { letter-spacing: 0} + +h2 { font-size: 2.8rem; } +h3 { font-size: 2.3rem; } +h4 { font-size: 2.1rem; } +h5 { font-size: 1.8rem; } +h6 { font-size: 1.5rem; } + +@media (min-width: 550px) { + h1 { font-size: 8.0rem; } + h2 { font-size: 3.2rem; } + h3 { font-size: 2.7rem; } + h4 { font-size: 2.2rem; } + h5 { font-size: 2.0rem; } + h6 { font-size: 1.7rem; } +} +a{ + color: #1EAEDB; +} +hr{ + border: 0 +} +pre > code { + overflow: auto; + border: none; + border-radius: 0; +} + + + +/* Utils */ +.text-center{ + text-align: center; +} +.text-right{ + text-align: right; +} +.text-justify{ + text-align: justify; +} +.text-nodeco{ + text-decoration: none; +} +.text-nodeco-black{ + text-decoration: none; + color: #222; +} +.only-reader{ + font-size: 0; +} + + +/* Sections*/ +section{ + padding-top: 2rem; + padding-bottom: 2rem; + margin-bottom: 0; +} + + +/* Images */ +img { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 3ex; + margin-bottom: 3ex; +} +img.round{ + border-radius: 50%; +} + + +/* Footer */ +.bar-bottom { + border-top: 1px solid #eee; + position: relative; + width: 100%; + margin: 0 auto; + margin-top: 10ex; + padding: 1rem 0; + box-sizing: border-box; + + font-size: 70%; +} + + +/* Container */ +.container { + max-width: 900px; + margin: auto; + width: 80%; +} +@media(max-width: 550px){ + .container{ + padding-left: 20px; + padding-right: 20px; + } +} + + +/* Navbar */ +.mainheader{ + top: 0; + display: block; + width: 100%; + background: #fff; + z-index: 99; + border-bottom: 1px solid #eee; + margin-bottom: 6.5rem; +} +.navbar { + width: 100%; + } +.navbar-link, +.navbar-control{ + text-transform: uppercase; + font-size: 0.9rem; + font-weight: 600; + letter-spacing: .1rem; + text-decoration: none; + line-height: 6rem; + display: inline-block; + color: #222; + } +.navbar-right, +.navbar-left{ + display: inline; +} +.navbar-separator{ + margin: 0 auto; +} +/* Large devices everything inline and the header floating */ +@media (min-width: 801px) { + .mainheader{position: sticky;} + .link-right { + margin-left: 15px; + margin-right: 0px; + } + .link-left{ + margin-right: 25px; + } + .nav-right{ + text-align: right; + } + .navbar-right{ + float: right; + } + .navbar-separator{ + display: none; + } + +} +/* Smaller devices leave the header at the top of the page and make it more + * vertical */ +@media (max-width: 800px){ + /* Main navbar toggle */ + /* TODO: BURGER? */ + .navbar-link{ + margin-left: 3ex; + margin-right: 3ex; + } + .navbar-right, + .navbar-left{ + width: 100%; + min-width: 100%; + display: inline-flex; + flex: 1; + justify-content: space-around; + flex-flow: row; + } + .navbar-left{ + flex-flow: row wrap; + } + + .link-right{ + margin: auto; + line-height: 5rem; + } +} + + +/* Title page */ +.more-info { + padding-left: 3ex; + margin-top: 2ex; +} +.title-image { + width: 90%; +} +.title-image path{ + fill: #222; +} +@media (min-width: 550px){ + .title-image { width: 60%; } +} + + +/* Anchors */ +a.anchor{ + visibility: hidden; + text-decoration: none; + font-size: 0.8em; +} +h1:hover > a.anchor, +h2:hover > a.anchor, +h3:hover > a.anchor, +h4:hover > a.anchor, +h5:hover > a.anchor, +h6:hover > a.anchor{ + visibility: visible; +} + +:root{ + --bg-color: #FFF; + --tx-color: #222; + --link-color: #1EAEDB; + --border-color:#EEE; +} +@media (prefers-color-scheme: dark) { + :root { + --bg-color: #2F2F2F; + --tx-color: #FFF; + --link-color: #1EAEDB; + --border-color:#4A4A4A; + } +} + +/* Overwrite colors to vars if supported */ +body{ + color: var(--tx-color); + background-color: var(--bg-color); +} +.text-nodeco-black, .navbar-link{ + color: var(--tx-color); +} +.title-image path{ + fill: var(--tx-color); +} +.mainheader { + background-color: var(--bg-color); + border-color: var(--border-color); +} +a { + color: var(--link-color); +} +.bar-bottom { + border-color: var(--border-color); +} diff --git a/templates/web/css/extra-style.css b/templates/web/css/extra-style.css new file mode 100644 index 0000000..5716ec6 --- /dev/null +++ b/templates/web/css/extra-style.css @@ -0,0 +1,25 @@ +.summary{ + font-size: 130%; +} + +#hamburger, #hamburger-label{ + display: none; +} + +#hamburger-label{ + font-size: 180%; + cursor: pointer; +} + + +@media (max-width: 800px){ + #hamburger-label { + display: inline-block; + } + .navbar-contents { + display: none; + } + input#hamburger:checked ~ .navbar-contents { + display: block; + } +} diff --git a/templates/web/css/fonts.css b/templates/web/css/fonts.css new file mode 100644 index 0000000..de91f22 --- /dev/null +++ b/templates/web/css/fonts.css @@ -0,0 +1,23 @@ +/* Webfont: LatoLatin-Regular */@font-face { + font-family: 'LatoLatinWeb'; + src: url('../fonts/LatoLatin-Regular.eot'); /* IE9 Compat Modes */ + src: url('../fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */ + url('../fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */ + url('../fonts/LatoLatin-Regular.ttf') format('truetype'); + font-style: normal; + font-weight: normal; + text-rendering: optimizeLegibility; +} + +/* Webfont: LatoLatin-Light */@font-face { + font-family: 'LatoLatinLightWeb'; + src: url('../fonts/LatoLatin-Light.eot'); /* IE9 Compat Modes */ + src: url('../fonts/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('../fonts/LatoLatin-Light.woff2') format('woff2'), /* Modern Browsers */ + url('../fonts/LatoLatin-Light.woff') format('woff'), /* Modern Browsers */ + url('../fonts/LatoLatin-Light.ttf') format('truetype'); + font-style: normal; + font-weight: normal; + text-rendering: optimizeLegibility; +} diff --git a/templates/web/css/highlight.css b/templates/web/css/highlight.css new file mode 100644 index 0000000..51496b8 --- /dev/null +++ b/templates/web/css/highlight.css @@ -0,0 +1,119 @@ +pre > code.sourceCode { white-space: pre; position: relative; font-size:0.9em} +pre > code.sourceCode > span { display: inline-block; line-height: 1.25; } +pre > code.sourceCode > span:empty { height: 1.2em; } +code.sourceCode > span { color: inherit; text-decoration: inherit; } +div.sourceCode { margin: 1em 0; } +pre.sourceCode { margin: 0; } +@media screen { + div.sourceCode { overflow: auto; } +} +@media print { + pre > code.sourceCode { white-space: pre-wrap; } + pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; } +} +pre.numberSource code +{ counter-reset: source-line 0; } +pre.numberSource code > span +{ position: relative; left: -4em; counter-increment: source-line; } +pre.numberSource code > span > a:first-child::before +{ content: counter(source-line); + position: relative; left: -1em; text-align: right; vertical-align: baseline; + border: none; display: inline-block; + -webkit-touch-callout: none; -webkit-user-select: none; + -khtml-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; + padding: 0 4px; width: 4em; +} +pre.numberSource { margin-left: 3em; border-left: 1px solid; padding-left: 4px; } + + +@media (prefers-color-scheme: light) or (prefers-color-scheme: no-preference) { + pre.numberSource code > span > a:first-child::before + { background-color: #ffffff; + color: #a0a0a0; + } + pre.numberSource { border-color: #a0a0a0; } + div.sourceCode + { color: #1f1c1b; background-color: #ffffff; } + @media screen { + pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } + } + code span. { color: #1f1c1b; } /* Normal */ + code span.al { color: #bf0303; background-color: #f7e6e6; font-weight: bold; } /* Alert */ + code span.an { color: #ca60ca; } /* Annotation */ + code span.at { color: #0057ae; } /* Attribute */ + code span.bn { color: #b08000; } /* BaseN */ + code span.bu { color: #644a9b; font-weight: bold; } /* BuiltIn */ + code span.cf { color: #1f1c1b; font-weight: bold; } /* ControlFlow */ + code span.ch { color: #924c9d; } /* Char */ + code span.cn { color: #aa5500; } /* Constant */ + code span.co { color: #898887; } /* Comment */ + code span.cv { color: #0095ff; } /* CommentVar */ + code span.do { color: #607880; } /* Documentation */ + code span.dt { color: #0057ae; } /* DataType */ + code span.dv { color: #b08000; } /* DecVal */ + code span.er { color: #bf0303; text-decoration: underline; } /* Error */ + code span.ex { color: #0095ff; font-weight: bold; } /* Extension */ + code span.fl { color: #b08000; } /* Float */ + code span.fu { color: #644a9b; } /* Function */ + code span.im { color: #ff5500; } /* Import */ + code span.in { color: #b08000; } /* Information */ + code span.kw { color: #1f1c1b; font-weight: bold; } /* Keyword */ + code span.op { color: #1f1c1b; } /* Operator */ + code span.ot { color: #006e28; } /* Other */ + code span.pp { color: #006e28; } /* Preprocessor */ + code span.re { color: #0057ae; background-color: #e0e9f8; } /* RegionMarker */ + code span.sc { color: #3daee9; } /* SpecialChar */ + code span.ss { color: #ff5500; } /* SpecialString */ + code span.st { color: #bf0303; } /* String */ + code span.va { color: #0057ae; } /* Variable */ + code span.vs { color: #bf0303; } /* VerbatimString */ + code span.wa { color: #bf0303; } /* Warning */ + + + +} + +@media (prefers-color-scheme: dark){ + pre.numberSource code > span > a:first-child::before + { background-color: #232629; + color: #7a7c7d; + } + pre.numberSource { border-color: 1px solid #7a7c7d;} + div.sourceCode + { color: #cfcfc2; background-color: #232629; } + @media screen { + pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } + } + code span. { color: #cfcfc2; } /* Normal */ + code span.al { color: #95da4c; background-color: #4d1f24; font-weight: bold; } /* Alert */ + code span.an { color: #3f8058; } /* Annotation */ + code span.at { color: #2980b9; } /* Attribute */ + code span.bn { color: #f67400; } /* BaseN */ + code span.bu { color: #7f8c8d; } /* BuiltIn */ + code span.cf { color: #fdbc4b; font-weight: bold; } /* ControlFlow */ + code span.ch { color: #3daee9; } /* Char */ + code span.cn { color: #27aeae; font-weight: bold; } /* Constant */ + code span.co { color: #7a7c7d; } /* Comment */ + code span.cv { color: #7f8c8d; } /* CommentVar */ + code span.do { color: #a43340; } /* Documentation */ + code span.dt { color: #2980b9; } /* DataType */ + code span.dv { color: #f67400; } /* DecVal */ + code span.er { color: #da4453; text-decoration: underline; } /* Error */ + code span.ex { color: #0099ff; font-weight: bold; } /* Extension */ + code span.fl { color: #f67400; } /* Float */ + code span.fu { color: #8e44ad; } /* Function */ + code span.im { color: #27ae60; } /* Import */ + code span.in { color: #c45b00; } /* Information */ + code span.kw { color: #cfcfc2; font-weight: bold; } /* Keyword */ + code span.op { color: #cfcfc2; } /* Operator */ + code span.ot { color: #27ae60; } /* Other */ + code span.pp { color: #27ae60; } /* Preprocessor */ + code span.re { color: #2980b9; background-color: #153042; } /* RegionMarker */ + code span.sc { color: #3daee9; } /* SpecialChar */ + code span.ss { color: #da4453; } /* SpecialString */ + code span.st { color: #f44f4f; } /* String */ + code span.va { color: #27aeae; } /* Variable */ + code span.vs { color: #da4453; } /* VerbatimString */ + code span.wa { color: #da4453; } /* Warning */ +} diff --git a/templates/web/css/normalize.css b/templates/web/css/normalize.css new file mode 100644 index 0000000..81c6f31 --- /dev/null +++ b/templates/web/css/normalize.css @@ -0,0 +1,427 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +}
\ No newline at end of file diff --git a/templates/web/css/style.css b/templates/web/css/style.css new file mode 100644 index 0000000..29cede2 --- /dev/null +++ b/templates/web/css/style.css @@ -0,0 +1,364 @@ +html{ + font-size: 80%; +} + +/* Typography*/ +body{ + font-family: "LatoLatinWeb", Helvetica, Arial, sans-serif; + line-height: 1.4; + color: #222; + background-color: #fff; + font-size: 1.5em; +} +p { + text-align: justify; +} +q, blockquote{ + font-style: italic; +} +h1, h2, h3, h4, h5, h6 { + text-decoration: none; + margin-top: 2ex; + margin-bottom: 0; + font-weight: 300; } +h1 { + font-size: 5.5rem; + line-height: 1.2; + text-align: center; + margin-bottom: 4rem; + margin-top: 0; + font-family: "LatoLatinLightWeb", Helvetica, Arial, sans-serif; +} +h1,h2,h3 { letter-spacing: -.1rem; } +h4 { letter-spacing: -.08rem;} +h5 { letter-spacing: -.05rem;} +h6 { letter-spacing: 0} + +h2 { font-size: 2.8rem; } +h3 { font-size: 2.3rem; } +h4 { font-size: 2.1rem; } +h5 { font-size: 1.8rem; } +h6 { font-size: 1.5rem; } + +@media (min-width: 550px) { + h1 { font-size: 8.0rem; } + h2 { font-size: 3.2rem; } + h3 { font-size: 2.7rem; } + h4 { font-size: 2.2rem; } + h5 { font-size: 2.0rem; } + h6 { font-size: 1.7rem; } +} +a{ + color: #1EAEDB; +} +hr{ + border: 0 +} +pre > code { + overflow: auto; + border: none; + border-radius: 0; +} + + + +/* Utils */ +.text-center{ + text-align: center; +} +.text-right{ + text-align: right; +} +.text-justify{ + text-align: justify; +} +.text-nodeco{ + text-decoration: none; +} +.text-nodeco-black{ + text-decoration: none; + color: #222; +} +.only-reader{ + font-size: 0; +} + + +/* Sections*/ +section{ + padding-bottom: 2rem; + margin-bottom: 0; +} + + +/* Images */ +img { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 3ex; + margin-bottom: 3ex; +} +img.round{ + border-radius: 50%; +} + + +/* Footer */ +.bar-bottom { + border-top: 1px solid #eee; + position: relative; + width: 100%; + margin: 0 auto; + margin-top: 10ex; + padding: 1rem 0; + box-sizing: border-box; + + font-size: 70%; +} + + +/* Container */ +.container { + max-width: 900px; + margin: auto; + width: 80%; +} +@media(max-width: 550px){ + .container{ + padding-left: 20px; + padding-right: 20px; + } +} + + +/* Navbar */ +.mainheader{ + top: 0; + display: block; + width: 100%; + background: #fff; + z-index: 99; + border-bottom: 1px solid #eee; + margin-bottom: 6.5rem; +} +@media(max-width: 550px){ + .mainheader{ + margin-bottom: 4rem; + } +} +.navbar { + width: 100%; + } +.navbar-link, +.navbar-control{ + text-transform: uppercase; + font-size: 0.9rem; + font-weight: 600; + letter-spacing: .1rem; + text-decoration: none; + line-height: 6rem; + display: inline-block; + color: #222; + } +.navbar-right, +.navbar-left{ + display: inline; +} +.navbar-separator{ + margin: 0 auto; +} +/* Large devices everything inline and the header floating */ +@media (min-width: 801px) { + .mainheader{position: sticky;} + .link-right { + margin-left: 15px; + margin-right: 0px; + } + .link-left{ + margin-right: 25px; + } + .nav-right{ + text-align: right; + } + .navbar-right{ + float: right; + } + .navbar-separator{ + display: none; + } + +} +/* Smaller devices leave the header at the top of the page and make it more + * vertical */ +@media (max-width: 800px){ + /* Main navbar toggle */ + /* TODO: BURGER? */ + .navbar-right, + .navbar-left{ + width: 100%; + min-width: 100%; + display: inline-flex; + flex: 1; + justify-content: space-around; + flex-flow: row; + } + .navbar-left{ + flex-flow: row wrap; + } + + .navbar-left .navbar-link{ + margin-left: 3ex; + margin-right: 3ex; + } + + .navbar-right .navbar-link{ + margin: auto; + line-height: 5rem; + } +} + + +/* Title page */ +.title-image { + width: 90%; +} +.title-image path{ + fill: #222; +} +@media (min-width: 550px){ + .title-image { width: 60%; } +} + + +/* Cards: Image | text */ +.card-picture *{ + height: auto; + width: 100%; +} +.card-picture{ + margin-left: auto; + margin-right: auto; + margin-top: 2ex; + margin-bottom: 2ex; + height: auto; + width: 150px; + min-width: 150px; +} +.card-picture-right{ + order 2; +} +.card-data{ + order: 1; +} +@media (min-width: 800px) { /*more than a tablet*/ + .card{ + margin-top: 1ex; + margin-bottom: 1ex; + + width: 100%; + min-width: 100%; + display: inline-flex; + flex: 1; + -webkit-flex: 1; /* Safari 6.1+ */ + -ms-flex: 1; /* IE 10 */ + justify-content: space-around; + align-items: center; + } + + .card-picture{ + margin: 2ex; + margin-right: 4ex; + order: 0; + } + .card-picture-right{ + margin: 2ex; + margin-left: 4ex; + order: 2; + } + + .card-data{ + flex-grow: 2; + flex-shrink: 2; + order: 1; + } +} + +/* Anchors */ +a.anchor{ + visibility: hidden; + text-decoration: none; + font-size: 0.8em; +} +h1:hover > a.anchor, +h2:hover > a.anchor, +h3:hover > a.anchor, +h4:hover > a.anchor, +h5:hover > a.anchor, +h6:hover > a.anchor{ + visibility: visible; +} + +:root{ + --bg-color: #FFF; + --tx-color: #222; + --link-color: #1EAEDB; + --border-color:#EEE; +} +@media (prefers-color-scheme: dark) { + :root { + --bg-color: #2F2F2F; + --tx-color: #FFF; + --link-color: #1EAEDB; + --border-color:#4A4A4A; + } +} + +/* Overwrite colors to vars if supported */ +body{ + color: var(--tx-color); + background-color: var(--bg-color); +} +.text-nodeco-black, .navbar-link{ + color: var(--tx-color); +} +.title-image path{ + fill: var(--tx-color); +} +.mainheader { + background-color: var(--bg-color); + border-color: var(--border-color); +} +a { + color: var(--link-color); +} +.bar-bottom { + border-color: var(--border-color); +} + + + +.flex-cols{ + width: 90%; +} +.col{ + max-width: 100%; +} +@media (min-width: 550px) { /*more than a phone*/ + .flex-cols{ + display: inline-flex; + flex: 1; + align-items: center; + justify-content: space-around; + width: 100%; + min-width: 100%; + } + .col{ + flex-grow: 1; + flex-shrink: 1; + flex-basis: 100px; + margin-left: 5%; + margin-right: 5%; + } + +} diff --git a/templates/web/fonts b/templates/web/fonts new file mode 120000 index 0000000..049a280 --- /dev/null +++ b/templates/web/fonts @@ -0,0 +1 @@ +../fonts/
\ No newline at end of file diff --git a/templates/web/js/colorscheme-switcher.js b/templates/web/js/colorscheme-switcher.js new file mode 100644 index 0000000..dc0a7bd --- /dev/null +++ b/templates/web/js/colorscheme-switcher.js @@ -0,0 +1,52 @@ +var theme_switch = document.getElementById("dark-light-switch"); +var body = document.getElementsByTagName("BODY")[0]; + + + +function init( color ){ + change(color, true); + localStorage.setItem('color', color); + theme_switch.setAttribute("color", color); +} + +function change(color, nowait){ + // Discard transition is nowait is set + if(nowait !== true){ + window.setTimeout(function() { + document.documentElement.classList.remove('color-theme-in-transition') + }, 1000) + document.documentElement.classList.add('color-theme-in-transition'); + } + + document.documentElement.setAttribute('data-theme', color); + theme_switch.setAttribute("color", color); + localStorage.setItem("color", color); +} + +function theme_change_requested(){ + color = theme_switch.getAttribute("color"); + if(color=="light") + change("dark"); + else + change("light"); +} + +function getCurrentColor(){ + // Color was set before in localStorage + var storage_color = localStorage.getItem("color"); + if(storage_color !== null){ + return storage_color; + } + + // If local storage is not set check the background of the page + // This is dependant of the CSS, be careful + var background = getComputedStyle(body).getPropertyValue("background-color"); + if(background == "rgb(255, 255, 255)") { + return "light"; + } else { + return "dark"; + } +} + +init( getCurrentColor() ) +theme_switch.addEventListener("click", theme_change_requested); |