From 91e58a72058261f1be883f43d2c564554402c1ec Mon Sep 17 00:00:00 2001 From: Ekaitz Zarraga Date: Mon, 13 Jan 2020 15:24:57 +0100 Subject: Full CSS rework: - add light/dark colorscheme support (also for code) - remove Skeleton - Split elenq CSS in pelican-specific vs general --- themes/elenq/static/css/elenq-pelican.css | 86 ++++++ themes/elenq/static/css/elenq.css | 284 ++++++++++++++++++++ themes/elenq/static/css/prism.css | 78 +++++- themes/elenq/static/css/skeleton.css | 418 ------------------------------ themes/elenq/static/css/style.css | 346 ------------------------- 5 files changed, 434 insertions(+), 778 deletions(-) create mode 100644 themes/elenq/static/css/elenq-pelican.css create mode 100644 themes/elenq/static/css/elenq.css delete mode 100644 themes/elenq/static/css/skeleton.css delete mode 100644 themes/elenq/static/css/style.css (limited to 'themes/elenq/static') diff --git a/themes/elenq/static/css/elenq-pelican.css b/themes/elenq/static/css/elenq-pelican.css new file mode 100644 index 0000000..ffa92fa --- /dev/null +++ b/themes/elenq/static/css/elenq-pelican.css @@ -0,0 +1,86 @@ +/* PELICAN SPECIFIC*/ +/*****************************************************************************/ +.entry-content{ + margin-top: 1rem; +} + +.entry-content table{ + margin-left: auto; + margin-right: auto; +} + +ol, ul { + font-size: 1.7rem; + list-style-position: outside; + margin-left: 3rem; + margin-right: 3rem; +} +li{ + padding-left: 1ex; +} + +#post-list{ + list-style: none; + margin-left: 0; + margin-right: 0; +} +#post-list li{ + padding-left: 0; +} + +.footer-logo{ + width: 120px; + margin-top: 0; +} +.post-info{ + margin-bottom: 3rem; +} + +.hentry p{ /* Reduce margin in the news section*/ + margin-bottom: 1ex; +} + +.published{ + font-style: italic +} + +@media (min-width: 800px){ /*more than a tablet*/ + .hentry header{ + width: 100%; + min-width: 100%; + display: inline-flex; + flex: 1; + -webkit-flex: 1; /* Safari 6.1+ */ + -ms-flex: 1; /* IE 10 */ + justify-content: space-between; + flex-wrap: nowrap; + align-items: baseline; + } + .published{ + font-style: normal; + } +} + +/* Typography pelican + */ +.hentry .entry-content h1{ font-size: 2.2rem; } +.hentry .entry-content h2{ font-size: 2.0rem; } +.hentry .entry-content h3{ font-size: 1.8rem; } +.hentry .entry-content h4{ font-size: 1.6rem; } +.hentry .entry-content h5{ font-size: 1.4rem; } +.hentry .entry-content h6{ font-size: 1.2rem; } + + + +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; +} +h1 span.subtitle{ + font-size: 2.5rem; +} +h2.entry-title{ + font-size: 3.0rem; line-height: 1.2; +} diff --git a/themes/elenq/static/css/elenq.css b/themes/elenq/static/css/elenq.css new file mode 100644 index 0000000..ba04f2f --- /dev/null +++ b/themes/elenq/static/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/themes/elenq/static/css/prism.css b/themes/elenq/static/css/prism.css index cc87b8d..c24467d 100644 --- a/themes/elenq/static/css/prism.css +++ b/themes/elenq/static/css/prism.css @@ -10,16 +10,22 @@ https://prismjs.com/download.html#themes=prism&languages=bash+clojure+latex+lisp code[class*="language-"], pre[class*="language-"] { + background: none; + font-family: monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; - -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } - @media print { code[class*="language-"], pre[class*="language-"] { @@ -29,23 +35,27 @@ pre[class*="language-"] { /* Code blocks */ pre[class*="language-"] { + padding: 1em; + margin: .5em 0; overflow: auto; + border-radius: 0.3em; } -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #f5f2f0; +:not(pre) > code { + padding: .1em; + border-radius: .3em; + white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: slategray; + color: var(--comment); } .token.punctuation { - color: #999; + color: var(--punctuation); } .namespace { @@ -59,7 +69,7 @@ pre[class*="language-"] { .token.constant, .token.symbol, .token.deleted { - color: #905; + color: var(--property); } .token.selector, @@ -68,7 +78,7 @@ pre[class*="language-"] { .token.char, .token.builtin, .token.inserted { - color: #690; + color: var(--builtin); } .token.operator, @@ -76,25 +86,24 @@ pre[class*="language-"] { .token.url, .language-css .token.string, .style .token.string { - color: #9a6e3a; - background: hsla(0, 0%, 100%, .5); + color: var(--operator); } .token.atrule, .token.attr-value, .token.keyword { - color: #07a; + color: var(--keyword); } .token.function, .token.class-name { - color: #DD4A68; + color: var(--function); } .token.regex, .token.important, .token.variable { - color: #e90; + color: var(--variable); } .token.important, @@ -109,3 +118,44 @@ pre[class*="language-"] { cursor: help; } + +/** + * Prism default colorscheme + */ +@media (prefers-color-scheme: light) or (prefers-color-scheme: no-preference) { + :root{ + --base: black; + --comment: slategray; + --punctuation: #999; + --property: #905; + --builtin: #690; + --operator: #9a6e3a; + --keyword: #07a; + --function: #DD4A68; + --variable: #e90; + } +} + +/** + * Dracula Theme originally by Zeno Rocha [@zenorocha] + * https://draculatheme.com/ + * + * Ported for PrismJS by Albert Vallverdu [@byverdu] + * + * Strongly edited by Ekaitz Zárraga to fit on the default theme + */ + +@media (prefers-color-scheme: dark){ + :root{ + --base: #f8f8f2; + --comment: #6272a4; + --punctuation: #f8f8f2; + --property: #ff79c6; + --builtin: #50fa7b; + --operator: #f8f8f2; + --keyword: #8be9fd; + --function: #f1fa8c; + --variable: #ffb86c; + } +} + diff --git a/themes/elenq/static/css/skeleton.css b/themes/elenq/static/css/skeleton.css deleted file mode 100644 index f28bf6c..0000000 --- a/themes/elenq/static/css/skeleton.css +++ /dev/null @@ -1,418 +0,0 @@ -/* -* Skeleton V2.0.4 -* Copyright 2014, Dave Gamache -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 12/29/2014 -*/ - - -/* Table of contents -–––––––––––––––––––––––––––––––––––––––––––––––––– -- Grid -- Base Styles -- Typography -- Links -- Buttons -- Forms -- Lists -- Code -- Tables -- Spacing -- Utilities -- Clearing -- Media Queries -*/ - - -/* Grid -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.container { - position: relative; - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; } -.column, -.columns { - width: 100%; - float: left; - box-sizing: border-box; } - -/* For devices larger than 400px */ -@media (min-width: 400px) { - .container { - width: 85%; - padding: 0; } -} - -/* For devices larger than 550px */ -@media (min-width: 550px) { - .container { - width: 80%; } - .column, - .columns { - margin-left: 4%; } - .column:first-child, - .columns:first-child { - margin-left: 0; } - - .one.column, - .one.columns { width: 4.66666666667%; } - .two.columns { width: 13.3333333333%; } - .three.columns { width: 22%; } - .four.columns { width: 30.6666666667%; } - .five.columns { width: 39.3333333333%; } - .six.columns { width: 48%; } - .seven.columns { width: 56.6666666667%; } - .eight.columns { width: 65.3333333333%; } - .nine.columns { width: 74.0%; } - .ten.columns { width: 82.6666666667%; } - .eleven.columns { width: 91.3333333333%; } - .twelve.columns { width: 100%; margin-left: 0; } - - .one-third.column { width: 30.6666666667%; } - .two-thirds.column { width: 65.3333333333%; } - - .one-half.column { width: 48%; } - - /* Offsets */ - .offset-by-one.column, - .offset-by-one.columns { margin-left: 8.66666666667%; } - .offset-by-two.column, - .offset-by-two.columns { margin-left: 17.3333333333%; } - .offset-by-three.column, - .offset-by-three.columns { margin-left: 26%; } - .offset-by-four.column, - .offset-by-four.columns { margin-left: 34.6666666667%; } - .offset-by-five.column, - .offset-by-five.columns { margin-left: 43.3333333333%; } - .offset-by-six.column, - .offset-by-six.columns { margin-left: 52%; } - .offset-by-seven.column, - .offset-by-seven.columns { margin-left: 60.6666666667%; } - .offset-by-eight.column, - .offset-by-eight.columns { margin-left: 69.3333333333%; } - .offset-by-nine.column, - .offset-by-nine.columns { margin-left: 78.0%; } - .offset-by-ten.column, - .offset-by-ten.columns { margin-left: 86.6666666667%; } - .offset-by-eleven.column, - .offset-by-eleven.columns { margin-left: 95.3333333333%; } - - .offset-by-one-third.column, - .offset-by-one-third.columns { margin-left: 34.6666666667%; } - .offset-by-two-thirds.column, - .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } - - .offset-by-one-half.column, - .offset-by-one-half.columns { margin-left: 52%; } - -} - - -/* Base Styles -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* NOTE -html is set to 62.5% so that all the REM measurements throughout Skeleton -are based on 10px sizing. So basically 1.5rem = 15px :) */ -html { - font-size: 62.5%; } -body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ - line-height: 1.6; - font-weight: 400; - font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; } - - -/* Typography -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 2rem; - font-weight: 300; } -h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} -h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } -h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } -h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } -h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } -h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } - -/* Larger than phablet */ -@media (min-width: 550px) { - h1 { font-size: 5.0rem; } - h2 { font-size: 4.2rem; } - h3 { font-size: 3.6rem; } - h4 { font-size: 3.0rem; } - h5 { font-size: 2.4rem; } - h6 { font-size: 1.5rem; } -} - -p { - margin-top: 0; } - - -/* Links -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -a { - color: #1EAEDB; } -a:hover { - color: #0FA0CE; } - - -/* Buttons -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.button, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - display: inline-block; - height: 38px; - padding: 0 30px; - color: #555; - text-align: center; - font-size: 11px; - font-weight: 600; - line-height: 38px; - letter-spacing: .1rem; - text-transform: uppercase; - text-decoration: none; - white-space: nowrap; - background-color: transparent; - border-radius: 4px; - border: 1px solid #bbb; - cursor: pointer; - box-sizing: border-box; } -.button:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover, -.button:focus, -button:focus, -input[type="submit"]:focus, -input[type="reset"]:focus, -input[type="button"]:focus { - color: #333; - border-color: #888; - outline: 0; } -.button.button-primary, -button.button-primary, -input[type="submit"].button-primary, -input[type="reset"].button-primary, -input[type="button"].button-primary { - color: #FFF; - background-color: #33C3F0; - border-color: #33C3F0; } -.button.button-primary:hover, -button.button-primary:hover, -input[type="submit"].button-primary:hover, -input[type="reset"].button-primary:hover, -input[type="button"].button-primary:hover, -.button.button-primary:focus, -button.button-primary:focus, -input[type="submit"].button-primary:focus, -input[type="reset"].button-primary:focus, -input[type="button"].button-primary:focus { - color: #FFF; - background-color: #1EAEDB; - border-color: #1EAEDB; } - - -/* Forms -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea, -select { - height: 38px; - padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ - background-color: #fff; - border: 1px solid #D1D1D1; - border-radius: 4px; - box-shadow: none; - box-sizing: border-box; } -/* Removes awkward default styles on some inputs for iOS */ -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } -textarea { - min-height: 65px; - padding-top: 6px; - padding-bottom: 6px; } -input[type="email"]:focus, -input[type="number"]:focus, -input[type="search"]:focus, -input[type="text"]:focus, -input[type="tel"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -textarea:focus, -select:focus { - border: 1px solid #33C3F0; - outline: 0; } -label, -legend { - display: block; - margin-bottom: .5rem; - font-weight: 600; } -fieldset { - padding: 0; - border-width: 0; } -input[type="checkbox"], -input[type="radio"] { - display: inline; } -label > .label-body { - display: inline-block; - margin-left: .5rem; - font-weight: normal; } - - -/* Lists -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -ul { - list-style: circle inside; } -ol { - list-style: decimal inside; } -ol, ul { - padding-left: 0; - margin-top: 0; } -ul ul, -ul ol, -ol ol, -ol ul { - margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; } -li { - margin-bottom: 1rem; } - - -/* Code -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 4px; } -pre > code { - display: block; - padding: 1rem 1.5rem; - white-space: pre; } - - -/* Tables -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -th, -td { - padding: 12px 15px; - text-align: left; - border-bottom: 1px solid #E1E1E1; } -th:first-child, -td:first-child { - padding-left: 0; } -th:last-child, -td:last-child { - padding-right: 0; } - - -/* Spacing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -button, -.button { - margin-bottom: 1rem; } -input, -textarea, -select, -fieldset { - margin-bottom: 1.5rem; } -pre, -blockquote, -dl, -figure, -table, -p, -ul, -ol, -form { - margin-bottom: 2.5rem; } - - -/* Utilities -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.u-full-width { - width: 100%; - box-sizing: border-box; } -.u-max-full-width { - max-width: 100%; - box-sizing: border-box; } -.u-pull-right { - float: right; } -.u-pull-left { - float: left; } - - -/* Misc -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -hr { - margin-top: 3rem; - margin-bottom: 3.5rem; - border-width: 0; - border-top: 1px solid #E1E1E1; } - - -/* Clearing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -/* Self Clearing Goodness */ -.container:after, -.row:after, -.u-cf { - content: ""; - display: table; - clear: both; } - - -/* Media Queries -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* -Note: The best way to structure the use of media queries is to create the queries -near the relevant code. For example, if you wanted to change the styles for buttons -on small devices, paste the mobile query code up in the buttons section and style it -there. -*/ - - -/* Larger than mobile */ -@media (min-width: 400px) {} - -/* Larger than phablet (also point when grid becomes active) */ -@media (min-width: 550px) {} - -/* Larger than tablet */ -@media (min-width: 750px) {} - -/* Larger than desktop */ -@media (min-width: 1000px) {} - -/* Larger than Desktop HD */ -@media (min-width: 1200px) {} diff --git a/themes/elenq/static/css/style.css b/themes/elenq/static/css/style.css deleted file mode 100644 index 3b52122..0000000 --- a/themes/elenq/static/css/style.css +++ /dev/null @@ -1,346 +0,0 @@ -body{ - font-family: "LatoLatinWeb", Helvetica, Arial, sans-serif; - line-height: 1.6; - color: #222; -} - -.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; -} - -.text-minimal{ - font-size: 0.7em; -} - -.text-small{ - font-size: 0.9em; -} - -.only-reader{ - font-size: 0; -} - -section{ - padding-top: 2rem; - padding-bottom: 2rem; - margin-bottom: 0; -} -q, blockquote{ - font-style: italic; -} - - -img { - display: block; - margin-left: auto; - margin-right: auto; - margin-top: 3ex; - margin-bottom: 3ex; -} -img.round{ - border-radius: 50%; -} - - -hr.short{ - width: 100px; -} - - -.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: 800px; - margin: auto; -} - - - -.mainheader{ - top: 0; - display: block; - width: 100%; - background: #fff; - z-index: 99; - border-top: 1px solid #eee; - border-bottom: 1px solid #eee; - margin-bottom: 6.5rem; -} -.navbar { - width: 100%; - } -.navbar-link, -.navbar-control{ - text-transform: uppercase; - font-size: 11px; - font-weight: 600; - letter-spacing: .2rem; - text-decoration: none; - line-height: 6.5rem; - display: inline-block; - color: #222; - } -.navbar-right, -.navbar-left{ - display: inline; -} -.navbar-link.active, -.navbar-link:active { - color: #33C3F0; -} -.navbar-separator{ - margin: 0 auto; -} - - -/* Large devices everything inline and the header floating - */ -@media (min-width: 801px) { - .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 */ - .navbar-link{ - margin-left: 3ex; - margin-right: 3ex; - } - .navbar-right, - .navbar-left{ - 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; - flex-flow: row; - } - .navbar-left{ - flex-flow: row wrap; - } - - .link-right{ - margin: auto; - line-height: 5rem; - } -} - -/* Typography (overrides skeleton) - */ -h1, h2, h3, h4, h5, h6 { - text-decoration: none; - margin-top: 1ex; - margin-bottom: 0; - line-height: 2; - font-weight: 300; -} -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; -} -h1 span.subtitle{ - font-size: 2.5rem; -} -h2.entry-title{ - font-size: 3.0rem; line-height: 1.2; -} -h1 { font-size: 3.0rem; } -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; } -.hentry .entry-content h1{ font-size: 2.2rem; } -.hentry .entry-content h2{ font-size: 2.0rem; } -.hentry .entry-content h3{ font-size: 1.8rem; } -.hentry .entry-content h4{ font-size: 1.6rem; } -.hentry .entry-content h5{ font-size: 1.4rem; } -.hentry .entry-content h6{ font-size: 1.2rem; } - -@media (min-width: 550px) { - h1.main-title { - font-size: 5.0rem; - } - h2.entry-title{ - font-size: 4.0rem; - } - h1 { font-size: 4.2rem; } - 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; } -} - -p { - font-size: 1.7rem; - text-align: justify; -} - -/* 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; -} -@media (min-width: 800px){ /*more than a tablet*/ - .card{ - margin-top: 3ex; - margin-bottom: 3ex; - - 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; - } - - .card-data{ - flex-grow: 2; - flex-shrink: 2; - margin-left: 3ex; - } -} - - -.entry-content{ - margin-top: 1rem; -} - -.entry-content table{ - margin-left: auto; - margin-right: auto; -} - -ol, ul { - font-size: 1.7rem; - list-style-position: outside; - margin-left: 3rem; - margin-right: 3rem; -} -li{ - padding-left: 1ex; -} -#post-list{ - list-style: none; - margin-left: 0; - margin-right: 0; -} -#post-list li{ - padding-left: 0; -} - -.footer-logo{ - width: 120px; - margin-top: 0; -} -.post-info{ - margin-bottom: 3rem; -} - - -/* News section in the first page - */ - -.hentry p{ /* Reduce margin in the news section*/ - margin-bottom: 1ex; -} - -.published{ - font-style: italic -} - -@media (min-width: 800px){ /*more than a tablet*/ - .hentry header{ - width: 100%; - min-width: 100%; - display: inline-flex; - flex: 1; - -webkit-flex: 1; /* Safari 6.1+ */ - -ms-flex: 1; /* IE 10 */ - justify-content: space-between; - flex-wrap: nowrap; - align-items: baseline; - } - .published{ - font-style: normal; - } -} - - -/* Code rendering - */ -pre > code { - overflow: auto; - border: none; - border-radius: 0; -} -- cgit v1.2.3