From 43af214d1eed432eaba1093f432038f18692d9c2 Mon Sep 17 00:00:00 2001 From: "mb@mb" Date: Wed, 16 May 2018 16:24:30 +0200 Subject: [PATCH] theme update (edited the color scheme, finetuned header, added a mobile media query css) --- theme/wttf/static/main.css | 184 ++++++++++++++++++++++++------ theme/wttf/templates/article.html | 21 +++- theme/wttf/templates/base.html | 49 ++++++-- theme/wttf/templates/index.html | 21 +++- 4 files changed, 218 insertions(+), 57 deletions(-) diff --git a/theme/wttf/static/main.css b/theme/wttf/static/main.css index 53bd527..c9c0d9d 100644 --- a/theme/wttf/static/main.css +++ b/theme/wttf/static/main.css @@ -14,8 +14,7 @@ body{ margin:0px; font-size: 14px; font-family: "serif"; - color:midnightblue; - background-color: #ff6341; + background-color: #bab3feb3; word-break: normal; } h1{ @@ -25,8 +24,6 @@ h1{ margin-bottom: 0.3em; font-size: 36px; font-family: "headers"; - /*color:midnightblue;*/ - /*text-align:center;*/ font-weight: bold; } @@ -37,9 +34,9 @@ blockquote{ font-weight:bold; } -a{ - /*color:lightseagreen;*/ - text-decoration: none; +a, a:active, a:visited{ + color:inherit; + text-decoration: underline; } hr{ border:0; @@ -52,23 +49,49 @@ section{ } header{ top:0; + width: 100%; height: auto; margin:0 0 5em 0; - text-align: center; + padding:0; + text-align: left; } #menu{ - width: 100%; + width: auto; margin:0; - font-size: 9vw; - line-height: 1.2; + padding:90px 1em; + font-size: 5vw; + line-height: 1.35; color:white; - padding:90px 0; - background-color: black; + background-color: #3c0e02; } #menu.main{ position: relative; z-index: 10; } + #menu.main .indent{ + padding-left:1em; + } + #menu #subtitles{ + position: absolute; + width: calc(50% - 6em); + top:0; + left:calc(50% + 4em); + margin:2em; + font-family: 'serif'; + font-size: 18px; + font-weight: normal; + line-height: 1.8; + color:white; + } + #menu #subtitles div{ + display: inline-block; + /*padding-right: 5px;*/ + } + #menu img.shape{ + width:20px; + height: 20px; + position: absolute; + } #menu select{ height:5vw; vertical-align: middle; @@ -78,19 +101,20 @@ header{ } #menu.sticky{ position: fixed; - font-size: 2em; - width: 100%; + font-size: 1.5em; + width: calc(100% - 2em); top:0; left:0; - padding:10px 0; + padding:8px 1em 8px 2em; margin:0; - background-color: black; + background-color: #3c0e02; } #menu.sticky{ z-index: 1; } #menu.sticky a{ color:white; + text-decoration: none; } #menu.sticky select{ padding:0; @@ -102,6 +126,11 @@ header{ margin-bottom:5em; } + #agenda{ + width: calc(50% - 8em); + padding-left:2em; + float: left; + } .featured { max-width: calc(50% - 1.5em); float: left; @@ -109,11 +138,10 @@ header{ color:rgb(0, 5, 33); } - .featured:nth-child(even) { + .featured:nth-of-type(even) { float:right; - margin-top: 10em; } - .featured:nth-child(odd) { + .featured:nth-of-type(odd) { clear: left; } .featured:last-of-type{ @@ -127,39 +155,53 @@ header{ text-align: center; } .entry-title a{ - color:#ff6341; + color:#3c0e02; + text-decoration: none; } - .entry-subtitle{ - font-size: 12px; + .entry-subtitle{ + font-size: 16px; line-height: 1.5; text-align:left; - margin:2em 0 1em; + margin:1em 0 2em; padding:0 20px; - color:white; - /*margin-left:50px;*/ + color:#3c0e02; + } + .entry-category{ + font-weight: bold; + } + .entry-content #summary p:last-of-type{ + display: inline; + } + .entry-content #summary a.readmore, .entry-content #summary a.readmore:active, .entry-content #summary a.readmore:visited{ + color:#4d4b5d; } .entry-content{ - font: 16px serif; + font: 18px serif; line-height: 28px; letter-spacing: 0.01em; - /*background-color: midnightblue;*/ padding:0 20px; color:black; } + .entry-content a{ + text-decoration: underline; + } .entry-readmore a{ text-decoration: underline; } .entry-tags a{ font-weight:bold; text-decoration: underline; - color:white; + color:#3c0e02; } /* article pages */ #content.article{ max-width:900px; - margin:0 auto 5em auto; + margin:0 0 5em 50px; } + #content.article .entry-title{ + margin:3em 3em 2em 2em; + } #content.article .entry-content{ font-size: 21px; line-height: 1.7; @@ -185,7 +227,7 @@ footer{ margin:0; padding:2em; left:0; - background-color: rgb(228, 43, 3); + background-color: #9b98b0; color:white; clear:both; } @@ -194,21 +236,87 @@ footer{ @media only screen and (orientation:portrait) { body { + } + h1{ + font-size: 26px; + line-height: 1.4; + } + header{ + margin:0 0 2em 0; } #menu{ clear:both; max-width: 100%; + padding:1em 1em 7em 1em; + font-size: 12vw; + } + #menu.sticky{ + font-size: 1em; + padding:0.5em 1em; + } + #menu title{ + vertical-align: top; + } + #menu.main .indent{ + padding-left:0; + } + #menu select{ + height: auto; + } + #menu.sticky select{ + float: right; + position: absolute; + top: 40px; + } + #menu #subtitles{ + width: calc(100% - 2em); + height: 95vh; + top: 55vh; + left: 1em; + margin: 1em; + font-family: 'serif'; + font-size: 16px; + line-height: 1.6; + } + #menu img.shape{ + width: 12px; + height: 12px; + } + #agenda{ + width: 100%; + margin:0; + padding:0; } .featured{ - max-width: calc(100% - 8em); !important + max-width: 100%; !important clear:both; !important + float: none; } - .featured:nth-child(even) { - clear:both; !important + .featured:nth-child(even) { + clear:both; !important + } + .entry-title{ + margin:0; + padding:1.5em 1em; + } + .entry-content{ + max-width: 100%; + padding:0; + font-size: 15px; + } + #content.article{ + margin:0 0 2em 0; + left:0; } - .entry-content{ - max-width: 80%; + #content.article .entry-title{ + margin:0; + padding:1.5em 1em; + } + #content.article .entry-content{ + font-size: 13px; + line-height: 1.8; + } + footer{ + padding:1em 2em; } - - } \ No newline at end of file diff --git a/theme/wttf/templates/article.html b/theme/wttf/templates/article.html index 0e27f79..0b69164 100644 --- a/theme/wttf/templates/article.html +++ b/theme/wttf/templates/article.html @@ -6,15 +6,28 @@ {% endif %} {% endblock %} +{% block header %} +

+ Welcome to + the + + Federation +

+{% endblock %} + {% block content %}

{{ article.title }}

- A + A(n) - {{ article.category }} + {{ article.category }} about @@ -24,8 +37,8 @@ {% endfor %} - published on - {{ article.date }} + ⟿ published on + {{ article.date | strftime('%d %B %Y')}}
{{ article.content }}
diff --git a/theme/wttf/templates/base.html b/theme/wttf/templates/base.html index 67e5687..f5cd59a 100644 --- a/theme/wttf/templates/base.html +++ b/theme/wttf/templates/base.html @@ -7,7 +7,7 @@ - + {% if FEED_ALL_ATOM %} {% endif %} @@ -33,22 +33,37 @@ {% endif %} {% endblock head %} + {% block content %} {% endblock %} + diff --git a/theme/wttf/templates/index.html b/theme/wttf/templates/index.html index 3b2b3ff..68e4c65 100644 --- a/theme/wttf/templates/index.html +++ b/theme/wttf/templates/index.html @@ -2,6 +2,11 @@ {% block content %} {% if articles %}
+ {% for page in pages %} + {% if page.title == 'agenda' %} +
{{ page.content }}
+ {% endif %} + {% endfor %} {% for article in articles_page.object_list %} {% if loop.index <= 5 %}
@@ -10,9 +15,9 @@ {{ article.title }}
- A + A(n) - {{ article.category }} + {{ article.category }} about @@ -22,10 +27,18 @@ {% endfor %} - published on + ⟿ published on {{ article.date | strftime('%d %B %Y') }}
-
{{ article.content }}
+
+ {% if article.has_summary == True %} +
{{ article.summary }} + Read more ... +
+ {% else %} + {{ article.content }} + {% endif %} +
{% if loop.index < 5 %}