Browse Source

template adjustments

master
mb@mb 3 years ago
parent
commit
47072c78d4
  1. 114
      theme/wttf/static/main.css
  2. 2
      theme/wttf/templates/base.html
  3. 68
      theme/wttf/templates/index.html
  4. 26
      theme/wttf/templates/page.html

114
theme/wttf/static/main.css

@ -39,16 +39,17 @@ body{
margin:0px;
font-size: 14px;
font-family: "headers";
/* 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;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* flex flow -- to keep the footer sticked at the bottom*/
section#content{
flex: 1;
}
h1{
font-size: 28px;
line-height:40px;
@ -71,7 +72,7 @@ h2{
}
/* small headlines on index.html */
h2.break{
border-bottom:20px solid rgba(240,240,240,0.4);
border-bottom:20px solid rgba(255, 255, 255, 0.48);
margin:20px 20px 22px 20px;
font-size: 12px;
}
@ -123,23 +124,7 @@ section{
.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;*/
background-color: rgba(255, 255, 255, 0.48);
}
/* blobs */
@ -153,20 +138,17 @@ section{
.events h1{
background-color: white;
}
.post{
background-color: rgba(240,240,240,0.4);
}
header{
position: relative;
width: 100%;
top:0;
left:0;
margin-top:30px; /* to leave some space for the menu */
}
#menu-wrapper{
position: relative;
width: calc(100% - 242px);
z-index: 1;
}
#title{
padding: 31px 40px;
@ -185,6 +167,7 @@ header{
color:black;
padding: 0.25em 0 0.25em 0.5em;
margin:0 0.9em 0 0.5em;
z-index: 10;
}
#menu{
display: none;
@ -198,7 +181,7 @@ header{
}
header #subtitle, header #logo{
position: absolute;
top:-20px;
top:0px;
right:20px;
width: 100px;
height: 104px;
@ -224,9 +207,10 @@ header{
}
#intro{
display: inline-block;
width: calc(60% - 42px);
font-size: 17px;
line-height: 1.35;
width: calc(60% - 120px);
font-size: 18px;
line-height: 1.7;
padding:30px 60px;
}
#intro #intro_wrapper{
margin: 5px 0px 0;
@ -236,9 +220,10 @@ header{
}
.gallery{
display: inline-block;
float: right;
width: calc(40% - 60px);
vertical-align: top;
margin: 20px 0 0 17px;
margin: 20px 20px 0 0;
}
h2.break#gallery{
margin:-4px 0 20px 0;
@ -248,6 +233,29 @@ header{
width: 50%;
border-radius: 15px 50px;
}
.post {
position: relative;
display: inline-block;
width: calc(60% - 40px);
left:20px;
margin:0;
clear: both;
}
.post:last-of-type{
margin-bottom:20px;
}
h2#posts{
width: 60%;
}
.post h1{
font-size: 18px;
line-height: 1.3;
margin-top:10px;
}
article{
margin-left: 10px;
}
.events .event{
display: inline-block;
vertical-align: top;
@ -256,6 +264,7 @@ header{
max-width: 600px;
padding:30px;
margin-top:20px;
margin-bottom:20px;
}
.events h2.break{
margin-bottom:0;
@ -270,29 +279,13 @@ header{
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{
text-align:left;
margin:-10px 0 15px;
margin:0 0 15px;
color:#3c0e02;
font-size: 12px;
}
@ -395,6 +388,7 @@ header{
}
footer{
bottom:0;
width: calc(100% - 40px);
margin:0;
padding:20px;
@ -438,17 +432,31 @@ footer{
}
#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%;
/*min-width: 100%;*/
}
#intro{
width: calc(100% - 40px);
padding:20px 40px;
}
.gallery h2.break, h2.break#posts, .events h2.break{
width: calc(50% + 20px);
}
.gallery{
width: calc(100% + 44px);
position: relative;
width: calc(100% + 40px);
margin: 20px 0;
float: none;
left: 20px;
}
.events .event{
width: calc(100% - 20px);
min-width: 0;
margin-bottom:0;
}
.events .event:last-of-type{
margin-bottom:20px;
}
.gallery h2.break{
width: calc(100% - 40px);
margin-top:20px;
}
#content.article .entry-content h1{

2
theme/wttf/templates/base.html

@ -8,7 +8,7 @@
<link rel="stylesheet" type="text/css" href="{{SITEURL}}/{{ THEME_STATIC_DIR }}{{ CSS_FILE }}" />
{% from 'syndication.html' import syndication with context %}
{{ syndication(article) }}
<link rel="icon" href="{{ SITEURL }}/favicon.ico" type="image/x-icon">
<link rel="icon" href="{{ SITEURL }}/images/favicon.png" type="image/x-icon">
{% if FEED_ALL_ATOM %}
<link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" />
{% endif %}

68
theme/wttf/templates/index.html

@ -4,20 +4,14 @@
<section id="content">
{% block indexpage %}
{% for page in pages %}
{% if page.title == 'ii-gallery' %}
<div class="gallery">
<h2 id="gallery" class="break">Wtt�F gallery</h2>
{{ page.content }}
</div>
{% endif %}
{% if page.title == 'i-introduction' %}
{% if page.title == 'Federated Ecosystems' %}
<div id="intro" class="box">
<div id="intro_wrapper">{{ page.content }}</div>
<div id="intro_wrapper">{{ page.summary }} <a href="{{page.url}}">→ read more</a></div>
</div>
{% endif %}
{% if page.title == 'iii-agenda' %}
<div class="events">
<h2 id="events" class="break">Wtt�F events</h2>
{% if page.title == 'Gallery' %}
<div class="gallery">
<h2 id="gallery" class="break">Wtt�F gallery</h2>
{{ page.content }}
</div>
{% endif %}
@ -25,7 +19,7 @@
{% endblock indexpage %}
<h2 id="posts" class="break">Wtt�F posts</h2>
{% for article in articles_page.object_list %}
{% if loop.index <= 25 %}
{% if article.category != 'gathering' %}
<div class="post box">
<article>
<h1 class="entry-title p-name">
@ -48,49 +42,15 @@
</div>
</article>
</div>
{% if loop.index < 25 %}
{% if loop.last %}
</section>
{% endif %}
{% endif %}
{# other items #}
{% else %}
{% if loop.first %}
</section>
<section id="list">
<ol id="posts-list" class="hfeed" start="{{ articles_paginator.per_page -1 }}">
{% endif %}
<li>
<article class="hentry">
<div class="head">
<h1 class="p-name entry-title">
<a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a>
</h1>
<div class="entry-subtitle">
<span class="entry-category">
<em>{{ article.category }}</em>
</span>
about
<span class="entry-tags">
{% for tag in article.tags %}
<span itemprop="keywords">
<a href="{{ SITEURL }}/{{ tag.url }}" rel="tag">{{ tag }}</a>
</span>
{% endfor %}
</span>
published on
<span class="entry-date dt-published">{{ article.date }}</span>
</div>
</div>
<div class="entry-content">
<p class="p-summary entry-content">{{ article.summary }}</p>
<span class="entry-readmore"><a class="readmore" href="{{ SITEURL }}/{{ article.url }}"> read more</a></span>
</div>
</article>
</li>
{% endif %}
</ol>
{% endfor %}
{% for page in pages %}
{% if page.title == 'iii-agenda' %}
<div class="events">
<h2 id="events" class="break">Wtt�F gatherings</h2>
{{ page.content }}
</div>
{% endif %}
{% endfor %}
</section>
{% endif %}

26
theme/wttf/templates/page.html

@ -1,15 +1,33 @@
{% extends "base.html" %}
{% block title %}{{ page.title }}{%endblock%}
{% block content %}
<h1>{{ page.title }}</h1>
{% import 'translations.html' as translations with context %}
{{ translations.translations_for(page) }}
{{ page.content }}
<section id="content" class="body article box">
<h1 class="entry-title p-name">
<a href="{{ SITEURL }}/{{ page.url }}">{{ page.title }}</a>
</h1>
<div class="entry-subtitle">
<span class="entry-category">
{{ page.category }}
</span>
about
<span class="entry-tags">
{% for tag in page.tags %}
<span itemprop="keywords">
<a href="{{ SITEURL }}/{{ tag.url }}" rel="tag">{{ tag }}</a>
</span>
{% endfor %}
</span>
, published on
<span class="entry-date dt-published">{{ page.date | strftime('%d %B %Y')}}</span>
</div>
<div class="entry-content e-content">{{ page.content }}</div>
{% if page.modified %}
<p>
Last updated: {{ page.locale_modified }}
</p>
{% endif %}
</section>
{% endblock %}
Loading…
Cancel
Save