rra
/
wttf
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

template adjustments

master
mb@mb 6 years ago
parent
fec00905ac
commit
47072c78d4
4 changed files with 98 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 114
      theme/wttf/static/main.css
  2. 2
      theme/wttf/templates/base.html
  3. 62
      theme/wttf/templates/index.html
  4. 26
      theme/wttf/templates/page.html

114
theme/wttf/static/main.css
View File

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

2
theme/wttf/templates/base.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" type="text/css" href="{{SITEURL}}/{{ THEME_STATIC_DIR }}{{ CSS_FILE }}" /> <link rel="stylesheet" type="text/css" href="{{SITEURL}}/{{ THEME_STATIC_DIR }}{{ CSS_FILE }}" />
{% from 'syndication.html' import syndication with context %} {% from 'syndication.html' import syndication with context %}
{{ syndication(article) }} {{ 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 %} {% 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" /> <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 %} {% endif %}

62
theme/wttf/templates/index.html
View File

@ -4,20 +4,14 @@
<section id="content"> <section id="content">
{% block indexpage %} {% block indexpage %}
{% for page in pages %} {% for page in pages %}
{% if page.title == 'ii-gallery' %} {% if page.title == 'Federated Ecosystems' %}
<div class="gallery">
<h2 id="gallery" class="break">Wtt�F gallery</h2>
{{ page.content }}
</div>
{% endif %}
{% if page.title == 'i-introduction' %}
<div id="intro" class="box"> <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> </div>
{% endif %} {% endif %}
{% if page.title == 'iii-agenda' %} {% if page.title == 'Gallery' %}
<div class="events"> <div class="gallery">
<h2 id="events" class="break">Wtt�F events</h2> <h2 id="gallery" class="break">Wtt�F gallery</h2>
{{ page.content }} {{ page.content }}
</div> </div>
{% endif %} {% endif %}
@ -25,7 +19,7 @@
{% endblock indexpage %} {% endblock indexpage %}
<h2 id="posts" class="break">Wtt�F posts</h2> <h2 id="posts" class="break">Wtt�F posts</h2>
{% for article in articles_page.object_list %} {% for article in articles_page.object_list %}
{% if loop.index <= 25 %} {% if article.category != 'gathering' %}
<div class="post box"> <div class="post box">
<article> <article>
<h1 class="entry-title p-name"> <h1 class="entry-title p-name">
@ -48,49 +42,15 @@
</div> </div>
</article> </article>
</div> </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 %} {% 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 %} {% endfor %}
</span> {% for page in pages %}
published on {% if page.title == 'iii-agenda' %}
<span class="entry-date dt-published">{{ article.date }}</span> <div class="events">
</div> <h2 id="events" class="break">Wtt�F gatherings</h2>
</div> {{ page.content }}
<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> </div>
</article>
</li>
{% endif %} {% endif %}
</ol>
{% endfor %} {% endfor %}
</section> </section>
{% endif %} {% endif %}

26
theme/wttf/templates/page.html
View File

@ -1,15 +1,33 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}{{ page.title }}{%endblock%} {% block title %}{{ page.title }}{%endblock%}
{% block content %} {% 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 %} {% if page.modified %}
<p> <p>
Last updated: {{ page.locale_modified }} Last updated: {{ page.locale_modified }}
</p> </p>
{% endif %} {% endif %}
</section>
{% endblock %} {% endblock %}

Write Preview
Loading…
Cancel
Save