From 8330a1ce986f8f64975805f5a9cb07d89da5c44c Mon Sep 17 00:00:00 2001 From: "Marcel Kapfer (mmk2410)" Date: Tue, 26 Apr 2016 19:09:39 +0200 Subject: [PATCH] CSS rewritten in SASS Ref T30 --- src/sass/no-nav.sass | 46 ++++++++ src/sass/rangitaki.sass | 249 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 295 insertions(+) create mode 100644 src/sass/no-nav.sass create mode 100644 src/sass/rangitaki.sass diff --git a/src/sass/no-nav.sass b/src/sass/no-nav.sass new file mode 100644 index 0000000..88c82a0 --- /dev/null +++ b/src/sass/no-nav.sass @@ -0,0 +1,46 @@ +/* + * Rangitaki Project + * + * The MIT License + * + * Copyright 2015 mmk2410. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + * A stylesheet for overriding the default styles if the navigation drawer is disabled + */ + +.nav + display: none + +.nav-img + display: none + +@media screen and (min-width: 1440px) + .header + left: 0 + + .main + margin-left: 0 + width: 100% + +@media screen and (max-width: 720px) + + .title + left: 25px diff --git a/src/sass/rangitaki.sass b/src/sass/rangitaki.sass new file mode 100644 index 0000000..030aa3f --- /dev/null +++ b/src/sass/rangitaki.sass @@ -0,0 +1,249 @@ +/* + * Rangitaki Project + * + * The MIT License + * + * Copyright 2015 mmk2410. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + * A stylesheet for overriding the default styles if the navigation drawer is disabled + */ + +/* BODY */ + +body + margin-top: 94px + +.main + height: 100% + margin-left: 0 + +.overlay + opacity: 0 + position: fixed + top: 0 + left: 0 + background-color: black + width: 100% + z-index: 30 + height: 100% + display: none + +/* HEADER */ +.header + top: 0 + right: 0 + left: 0 + width: 100% + height: 64px + position: absolute + +.title + color: #fff + font-size: 23px + text-decoration: none + line-height: 64px + vertical-align: middle + left: 75px + +.title > a + text-decoration: none + color: #fff + +.fadeout + position: absolute + height: 64px + top: 0 + right: 0 + width: 40px + +.nav-img + height: 26px + padding: 19px + cursor: pointer + +/* NAV DRAWER */ + +.nav + width: 300px + position: fixed + height: 100% + top: 0 + left: -301px + z-index: 40 + +.nav-item, .nav-item-static + text-decoration: none + text-indent: 0 + display: inline-block + height: 48px + vertical-align: middle + width: 284px + line-height: 48px + padding-left: 16px + transition: background-color 125ms ease-in-out 0ms + +.nav-close + cursor: pointer + +.nav-close-img + height: 35px + padding: 12px + +.nav-item + cursor: pointer + +.divider + width: 100% + +/* MAIN */ + +.card + margin-right: auto + margin-left: auto + width: 75% + padding: 24px + margin-bottom: 40px + max-width: 1160px + +.card a + -moz-hyphens: auto + -epub-hyphens: auto + -ms-hyphens: auto + -webkit-hyphens: auto + hyphens: auto + word-wrap: break-word + +.card a:hover + +.headline + display: block + padding-bottom: 8px + +.card img + max-width: 100% + max-height: 400px + display: block + margin-left: auto + margin-right: auto + +.date + +.articletext + +.author + display: block + +.tag + +/* FAB */ + +.fabmenu + position: fixed + bottom: 20px + right: 20px + +.fab + height: 60px + width: 60px + border-radius: 30px + cursor: pointer + +.fab-img + width: 28px + padding: 15px + +.subfab + height: 45px + width: 45px + border-radius: 30px + margin-right: auto + margin-left: auto + margin-bottom: 25px + display: none + +.subfab-img + width: 22px + padding: 12px + +/* BUTTON */ + +.pag_buttons + margin-right: auto + margin-left: auto + width: calc(75% + 48px) + margin-bottom: 80px + max-width: 1160px + text-align: right + +.button + text-decoration: none + color: #fff + line-height: 36px + min-width: 64px + text-align: center + height: 36px + padding: 8px + margin-top: 4px + margin-bottom: 5px + cursor: pointer + +.pag_next + margin-left: 8px + +/* FOOTER */ + +.footer + +.footer a + transition: border-bottom-color 150ms ease-in-out 100ms + +.footer a:hover + border-bottom-color: #383838 + +@media screen and (min-width: 1440px) + + .nav + left: 0 + padding-top: 64px + + .nav-close-img + display: none + + .nav-close + display: none + + .nav-img + display: none + + .header + left: 300px + + .main + margin-left: 300px + width: calc(100% - 300px) + +@media screen and (max-width: 720px) + + .card + width: 82% + + .pag_buttons + width: calc(82% + 48px)