diff --git a/theme/wttf/static/main.css b/theme/wttf/static/main.css index f2ddcdb..e31768f 100644 --- a/theme/wttf/static/main.css +++ b/theme/wttf/static/main.css @@ -39,24 +39,47 @@ body{ margin:0px; font-size: 14px; font-family: "headers"; - background-color: #ccd1cab3; - /*background: linear-gradient(to bottom right, #c2c2c2, #fff7f7, #e4e3e3);*/ + + /* oranje salmon */ + /*background: linear-gradient(to bottom, #ff7b43ff, salmon, #ff7b43ff, salmon);*/ + + /* licht blauwig/paars */ + background: linear-gradient(to bottom, #dcdeff, #ffd0cb, #dcdeff, #ffd0cb); + word-break: normal; + color:#3c0e02; } h1{ - font-size: 42px; - line-height:45px; + font-size: 28px; + line-height:40px; margin-top: 0.3em; margin-bottom: 0.3em; - font-size: 36px; font-family: "headers"; font-weight: bold; } -h2, h3, h4, h5, h6{ +h2, h3, h4, h5, h6, h2 a, h3 a, h4 a{ font-family: "headers"; font-weight: bold; margin-bottom: 0; padding-bottom: 0; + text-decoration: none; +} +h2{ + border-bottom:1px solid; + font-size: 12px; + margin:10px 0 7px 0; +} + /* small headlines on index.html */ + h2.break{ + border-bottom:20px solid rgba(240,240,240,0.4); + margin:20px 20px 22px 20px; + font-size: 12px; + } +h3{ + font-size: 70%; + border-bottom:1px solid; + margin:0; + font-weight: normal; } p{ margin: 0 0 1em 0; @@ -82,156 +105,196 @@ a, a:active, a:visited{ } hr{ border:0; - border-bottom:1px solid; + border-bottom:1px solid black; } em{ font-style: italic; } +sup{ + line-height: 0; +} section{ - width: calc(100% - 4em); - padding:0 2em; + width: 100%; + padding:0; } + +/* outlined box around white blobs */ +.box{ + margin:20px 0 0 20px; + padding:10px 20px; + + /* grey */ + background-color: rgba(240,240,240,0.4); + + /* green */ + /*background-color: rgb(122, 233, 139); */ + + /* blue */ + /*background-color: rgb(139, 198, 255); */ + + /* lila */ + /*background-color: rgb(220, 205, 221); */ + + /* donker oranje/bruin */ + /*background-color: rgba(93, 44, 44, 0.17); */ + + /*border:1px solid #3c0e02;*/ +} + +/* blobs */ +#title, .post, .events h1{ + border: 0; + border-radius: 15px 50px; +} + #title{ + background:linear-gradient(45deg, #dcdeffb4, #ffd0cb4d, #dcdeffb4, #ffd0cb4d); + } + .events h1{ + background-color: white; + } + .post{ + background-color: rgba(240,240,240,0.4); + } + header{ - top:0; + position: relative; width: 100%; - height: auto; - margin:0 0 5em 0; - padding:0; - text-align: left; + top:0; + left:0; + margin-top:30px; /* to leave some space for the menu */ } - #menu{ - width: auto; - margin:0; - padding:90px 1em; - font-size: 5vw; + #menu-wrapper{ + position: relative; + width: calc(100% - 242px); + } + #title{ + padding: 31px 40px; + font-size: 32px; line-height: 1.35; - color:white; - background-color: #fb4817; - background: linear-gradient(to bottom, salmon, #ff7f4d, #ccd1cab3); } - #menu.main{ + #title.main{ position: relative; z-index: 10; } - #menu a{ + #title a{ text-decoration: none; } - #menu.main .indent{ - padding-left:60px; - } - #menu #subtitle{ - margin:2em 2em 1em 60px; - font-family: 'serif'; - font-size: 32px; - font-weight: normal; - line-height: 1.3; - color:white; - } - #menu img.shape{ - width:20px; - height: 20px; - position: absolute; - opacity: 0.15; - filter: alpha(opacity=15); /* For IE8 and earlier */ - } - #menu select{ - height:5vw; + #title select{ vertical-align: middle; color:black; - padding: 0 0 0 1em; - margin:0 1em; - } - #menu.sticky{ - position: fixed; - font-size: 1.1em; - width: calc(100% - 2em); - top:0; - left:0; - padding:2px 1em 2px 2em; - margin:0; - background-color: #fb4817; + padding: 0.25em 0 0.25em 0.5em; + margin:0 0.9em 0 0.5em; } - #menu.sticky{ - z-index: 1; + #menu{ + display: none; + font-size: 12px; + } + #menu svg{ + width:100%; } - #menu.sticky a{ - color:white; - text-decoration: none; + #menu path{ + fill:transparent; } - #menu.sticky #character{ - display: none; + header #subtitle, header #logo{ + position: absolute; + top:-20px; + right:20px; + width: 100px; + height: 104px; + padding:20px; + text-align: center; + font-family: 'serif'; + font-size: 14px; + font-weight: normal; + line-height: 1.2; + color:black; + } + header #logo img{ + width: 100%; + border: 1px solid; + border-radius: 15px 50px; } - #menu.sticky select{ - padding:0; - height: auto; - margin:0 0.5em; - font-size: 12px; + header #logo{ + display: none; } #content{ - margin-bottom:5em; + margin:0em; } - #agenda{ - width: calc(50% - 6.5em); - float: left; - padding: 1em 1.5em 2em 4em; - margin:0 0 2em 0; - background-color: #6ade4e; - color:#3c0e02; - border-radius: 15px; + #intro{ + display: inline-block; + width: calc(60% - 42px); + font-size: 17px; + line-height: 1.35; } - #agenda h2{ - margin-bottom:-1em; + #intro #intro_wrapper{ + margin: 5px 0px 0; } - #agenda h3{ - margin:2em 0 0.5em 0; + #intro em{ + font-size: 95%; } - #agenda h3:before{ - content:'⟿'; - margin-left:-1.8em; - padding-right: 0.5em; + .gallery{ + display: inline-block; + width: calc(40% - 60px); + vertical-align: top; + margin: 20px 0 0 17px; + } + h2.break#gallery{ + margin:-4px 0 20px 0; } - #agenda strong{ - font-family: "headers"; - font-weight: bold; - font-size: 130%; - line-height: 1.2; + .gallery img{ + float: left; + width: 50%; + border-radius: 15px 50px; } - .featured { - max-width: calc(50% - 1.5em); - float: left; - margin:2em 0; - color:rgb(0, 5, 33); - } - - .featured:nth-of-type(even) { - float:right; - } - .featured:nth-of-type(odd) { - clear: left; - } - .featured:last-of-type{ - margin-bottom:5em; - } - .entry-title{ - border: 0; - border-radius: 15px 50px; - background-color: white; - padding: 2em; - text-align: center; - } - .entry-title a{ + .events .event{ + display: inline-block; + vertical-align: top; + width: calc(33% - 86.5px); + min-width: 240px; + max-width: 600px; + padding:30px; + margin-top:20px; + } + .events h2.break{ + margin-bottom:0; + } + .event a{ color:#3c0e02; text-decoration: none; } + .events h1{ + width: calc(100% - 92px); + margin: -10px 10px 30px -10px; + padding: 2em; + text-align: center; + } + .post { + position: relative; + width: calc(100% - 82px); + left:20px; + margin:0; + clear: both; + } + .post:last-of-type{ + margin-bottom:20px; + } + .post h1{ + font-size: 18px; + } + article{ + margin-left: 10px; + } + .entry-title a{ + color:#3c0e02; + text-decoration: none; + } .entry-subtitle{ - font-size: 16px; - line-height: 1.5; text-align:left; - margin:1em 0 2em; - padding:0 20px; + margin:-10px 0 15px; color:#3c0e02; + font-size: 12px; } .entry-category{ font-weight: bold; @@ -255,6 +318,9 @@ header{ .entry-content a{ text-decoration: underline; } + .entry-content h2 a, .entry-content h3 a{ + text-decoration: none; + } .entry-readmore a{ text-decoration: underline; } @@ -263,23 +329,44 @@ header{ text-decoration: underline; color:#3c0e02; } + .footnote{ + font-size: 80%; + color:black; + } /* article pages */ #content.article{ + width: calc(100% - 80px); + margin:20px; } - #content.article .entry-title{ - margin:3em 3em 2em 2em; - } #content.article h1, #content.article h2, #content.article h3{ clear: both; } #content.article .entry-content{ - font-size: 18px; + font-size: 20px; letter-spacing: 0.03em; line-height: 1.7; - max-width: 900px; + max-width: 750px; margin:0 0 5em 50px; } + #content.article .entry-content h1{ + font-size: 115%; + line-height: 1.25; + margin: 1em 0 0; + } + #content.article .entry-title{ + padding:1.5em 40px; + background-color: white; + border: 0; + border-radius: 15px 50px; + } + #content.article .entry-subtitle{ + margin:15px 0 40px 22px; + } + #content.article .entry-content iframe{ + width: 100%; + min-height: 32vw; + } #content.article .entry-content .img{ width: 80%; margin:2em 0; @@ -308,106 +395,89 @@ header{ } footer{ - width: calc(100% - 4em); + width: calc(100% - 40px); margin:0; - padding:2em; + padding:20px; left:0; background-color: black; color:white; clear:both; + font-family: "serif"; + font-size: 100%; + line-height: 1.2; } + footer p{ + width: 200px; + margin:0 20px 0 0; + display: inline-block; + vertical-align: top; + } @media only screen and (orientation:portrait) { body { - + width: calc(100% - 80px); } h1{ font-size: 26px; line-height: 1.4; } - header{ - margin:0 0 2em 0; + header #title{ + line-height: 1.65; } - #menu{ - clear:both; - max-width: 100%; - padding:1em 1em 1em 1em; - font-size: 12vw; - } - #menu.sticky{ - font-size: 1em; - padding:0.5em 1em; - } - #menu title{ - vertical-align: top; + header #title select{ + margin-left:auto; } - #menu.main .indent{ - padding-left:0; - } - #menu select{ - height: auto; - } - #menu.sticky select{ - float: right; - position: absolute; - top: 40px; - right: 10px; - padding: 1em; - } - #menu.sticky #character{ - display: inline-block; - } - #menu #subtitle{ - width: calc(100% - 2em); - top: 18em; - left: 1em; - margin: 2em 1em 1em 1em; - font-family: 'serif'; - font-size: 22px; - line-height: 1.6; - } - #menu img.shape{ - width: 12px; - height: 12px; - } - #agenda{ - width: calc(100% - 6em); - margin: 1em 0px; - padding:1em 2.5em 2em 3.5em; - } - .featured{ - max-width: 100%; !important - clear:both; !important - float: none; - margin-top:0; - } - .featured:nth-child(even) { - clear:both; !important + header #logo, header #subtitle{ + position: relative; + width: 100%; + height: auto; + top: 0; + left: 0; + margin: 20px 20px 0 20px; + } + #menu-wrapper, #intro, .events, .gallery .img a img, .gallery .img a, .post, footer, footer p, #content.article, #content.article .entry-content, #content.article .entry-content .img{ + width: 100%; + min-width: 100%; + } + .gallery{ + width: calc(100% + 44px); + } + .events .event{ + width: calc(100% - 20px); + min-width: 0; + } + .gallery h2.break{ + width: calc(100% - 40px); + margin-top:20px; + } + #content.article .entry-content h1{ + font-size: 120%; + line-height: 1.25; + margin: 20px 0 10px 0; + } + #content.article .entry-content{ + font-size: 14px; + line-height: 1.4; + width: calc(100% + 5px); + margin:0 0 0 -20px; + } + #content.article .entry-content blockquote{ + margin:20px; } - .entry-title{ - margin:1em 0 0; - padding:1.5em 1em; + #content.article .entry-content a{ + word-break:break-all; } - .entry-content{ - max-width: 100%; - padding:0; - font-size: 5vw; - line-height: 1.7; + #content.article .entry-content .footnote{ + width: calc(100% - 20px); } - #content.article{ - margin:0 0 2em 0; - left:0; + #content.article .entry-subtitle{ + width:calc(100% - 40px); } - #content.article .entry-title{ - margin:2em 0 0 0; - padding:1.5em 1em; - } - #content.article .entry-content{ - font-size: 20px; - line-height: 1.6; - } footer{ - padding:1em 2em; + width: calc(100% + 40px); } + footer p:first-of-type{ + margin-bottom:10px; + } } \ No newline at end of file diff --git a/theme/wttf/templates/article.html b/theme/wttf/templates/article.html index 4e8b61e..1b3c776 100644 --- a/theme/wttf/templates/article.html +++ b/theme/wttf/templates/article.html @@ -6,21 +6,8 @@ {% endif %} {% endblock %} -{% block header %} -

- Welcome to - the - - Federation -

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

{{ article.title }}

@@ -36,7 +23,7 @@ {% endfor %} - ⟿ published on + , published on
{{ article.content }}
diff --git a/theme/wttf/templates/base.html b/theme/wttf/templates/base.html index 7abb13a..95ef6bb 100644 --- a/theme/wttf/templates/base.html +++ b/theme/wttf/templates/base.html @@ -2,7 +2,7 @@ {% block head %} - {% block title %}{{ SITENAME }} ⟿ {{ SUBTITLE }}{% endblock title %} + {% block title %}{{ SITENAME }} - {{ SUBTITLE }}{% endblock title %} @@ -34,38 +34,32 @@ {% endif %} {% endblock head %} - {% block content %} @@ -78,15 +72,4 @@ {% endfor %} - diff --git a/theme/wttf/templates/index.html b/theme/wttf/templates/index.html index 77dd1c8..4148891 100644 --- a/theme/wttf/templates/index.html +++ b/theme/wttf/templates/index.html @@ -2,14 +2,31 @@ {% block content %} {% if articles %}
+ {% block indexpage %} {% for page in pages %} - {% if page.title == 'agenda' %} -
{{ page.content }}
+ {% if page.title == 'ii-gallery' %} + + {% endif %} + {% if page.title == 'i-introduction' %} +
+
{{ page.content }}
+
+ {% endif %} + {% if page.title == 'iii-agenda' %} +
+

Wtt�F events

+ {{ page.content }} +
{% endif %} {% endfor %} + {% endblock indexpage %} +

Wtt�F posts

{% for article in articles_page.object_list %} - {% if loop.index <= 5 %} - - {% if loop.index < 5 %} + {% if loop.index < 25 %} {% if loop.last %}
{% endif %} {% endif %} - {% if loop.index == 5 %} -
-
- Other articles -
-