From fc476ec89f95a8011ae132dfda05d05ff4642d7a Mon Sep 17 00:00:00 2001 From: Ekaitz Zárraga Date: Fri, 6 Apr 2018 12:01:09 +0200 Subject: Template V1 --- themes/elenq/static/css/style.css | 315 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 315 insertions(+) create mode 100644 themes/elenq/static/css/style.css (limited to 'themes/elenq/static/css/style.css') diff --git a/themes/elenq/static/css/style.css b/themes/elenq/static/css/style.css new file mode 100644 index 0000000..0f27a5f --- /dev/null +++ b/themes/elenq/static/css/style.css @@ -0,0 +1,315 @@ +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: 3ex; +} +.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 fixed on top + */ +@media (min-width: 801px) { + .mainheader{ + position: fixed; + height: 6.5rem; + } + + /* Push content down, because the header is floating over it */ + .content:before{ + display: block; + content: " "; + height: 10rem; + visibility: hidden; + } + + .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.2; text-align: center; + margin-bottom: 2rem; + margin-top: 2rem; + font-family: "LatoLatinLightWeb", Helvetica, Arial, sans-serif; +} +h2.entry-title{ + font-size: 4.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: 5.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: 3rem; +} + +.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; +} -- cgit v1.2.3