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

theme update (edited the color scheme, finetuned header, added a mobile media query css)

master
mb@mb 7 years ago
parent
59531f2307
commit
43af214d1e
4 changed files with 218 additions and 57 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. 184
      theme/wttf/static/main.css
  2. 21
      theme/wttf/templates/article.html
  3. 49
      theme/wttf/templates/base.html
  4. 21
      theme/wttf/templates/index.html

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

@ -14,8 +14,7 @@ body{
margin:0px; margin:0px;
font-size: 14px; font-size: 14px;
font-family: "serif"; font-family: "serif";
color:midnightblue; background-color: #bab3feb3;
background-color: #ff6341;
word-break: normal; word-break: normal;
} }
h1{ h1{
@ -25,8 +24,6 @@ h1{
margin-bottom: 0.3em; margin-bottom: 0.3em;
font-size: 36px; font-size: 36px;
font-family: "headers"; font-family: "headers";
/*color:midnightblue;*/
/*text-align:center;*/
font-weight: bold; font-weight: bold;
} }
@ -37,9 +34,9 @@ blockquote{
font-weight:bold; font-weight:bold;
} }
a{ a, a:active, a:visited{
/*color:lightseagreen;*/ color:inherit;
text-decoration: none; text-decoration: underline;
} }
hr{ hr{
border:0; border:0;
@ -52,23 +49,49 @@ section{
} }
header{ header{
top:0; top:0;
width: 100%;
height: auto; height: auto;
margin:0 0 5em 0; margin:0 0 5em 0;
text-align: center; padding:0;
text-align: left;
} }
#menu{ #menu{
width: 100%; width: auto;
margin:0; margin:0;
font-size: 9vw; padding:90px 1em;
line-height: 1.2; font-size: 5vw;
line-height: 1.35;
color:white; color:white;
padding:90px 0; background-color: #3c0e02;
background-color: black;
} }
#menu.main{ #menu.main{
position: relative; position: relative;
z-index: 10; 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{ #menu select{
height:5vw; height:5vw;
vertical-align: middle; vertical-align: middle;
@ -78,19 +101,20 @@ header{
} }
#menu.sticky{ #menu.sticky{
position: fixed; position: fixed;
font-size: 2em; font-size: 1.5em;
width: 100%; width: calc(100% - 2em);
top:0; top:0;
left:0; left:0;
padding:10px 0; padding:8px 1em 8px 2em;
margin:0; margin:0;
background-color: black; background-color: #3c0e02;
} }
#menu.sticky{ #menu.sticky{
z-index: 1; z-index: 1;
} }
#menu.sticky a{ #menu.sticky a{
color:white; color:white;
text-decoration: none;
} }
#menu.sticky select{ #menu.sticky select{
padding:0; padding:0;
@ -102,6 +126,11 @@ header{
margin-bottom:5em; margin-bottom:5em;
} }
#agenda{
width: calc(50% - 8em);
padding-left:2em;
float: left;
}
.featured { .featured {
max-width: calc(50% - 1.5em); max-width: calc(50% - 1.5em);
float: left; float: left;
@ -109,11 +138,10 @@ header{
color:rgb(0, 5, 33); color:rgb(0, 5, 33);
} }
.featured:nth-child(even) { .featured:nth-of-type(even) {
float:right; float:right;
margin-top: 10em;
} }
.featured:nth-child(odd) { .featured:nth-of-type(odd) {
clear: left; clear: left;
} }
.featured:last-of-type{ .featured:last-of-type{
@ -127,39 +155,53 @@ header{
text-align: center; text-align: center;
} }
.entry-title a{ .entry-title a{
color:#ff6341; color:#3c0e02;
text-decoration: none;
} }
.entry-subtitle{ .entry-subtitle{
font-size: 12px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
text-align:left; text-align:left;
margin:2em 0 1em; margin:1em 0 2em;
padding:0 20px; padding:0 20px;
color:white; color:#3c0e02;
/*margin-left:50px;*/ }
.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{ .entry-content{
font: 16px serif; font: 18px serif;
line-height: 28px; line-height: 28px;
letter-spacing: 0.01em; letter-spacing: 0.01em;
/*background-color: midnightblue;*/
padding:0 20px; padding:0 20px;
color:black; color:black;
} }
.entry-content a{
text-decoration: underline;
}
.entry-readmore a{ .entry-readmore a{
text-decoration: underline; text-decoration: underline;
} }
.entry-tags a{ .entry-tags a{
font-weight:bold; font-weight:bold;
text-decoration: underline; text-decoration: underline;
color:white; color:#3c0e02;
} }
/* article pages */ /* article pages */
#content.article{ #content.article{
max-width:900px; 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{ #content.article .entry-content{
font-size: 21px; font-size: 21px;
line-height: 1.7; line-height: 1.7;
@ -185,7 +227,7 @@ footer{
margin:0; margin:0;
padding:2em; padding:2em;
left:0; left:0;
background-color: rgb(228, 43, 3); background-color: #9b98b0;
color:white; color:white;
clear:both; clear:both;
} }
@ -194,21 +236,87 @@ footer{
@media only screen and (orientation:portrait) { @media only screen and (orientation:portrait) {
body { body {
}
h1{
font-size: 26px;
line-height: 1.4;
}
header{
margin:0 0 2em 0;
} }
#menu{ #menu{
clear:both; clear:both;
max-width: 100%; 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{ .featured{
max-width: calc(100% - 8em); !important max-width: 100%; !important
clear:both; !important clear:both; !important
float: none;
} }
.featured:nth-child(even) { .featured:nth-child(even) {
clear:both; !important 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{ #content.article .entry-title{
max-width: 80%; margin:0;
padding:1.5em 1em;
}
#content.article .entry-content{
font-size: 13px;
line-height: 1.8;
}
footer{
padding:1em 2em;
} }
} }

21
theme/wttf/templates/article.html
View File

@ -6,15 +6,28 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block header %}
<h1 id="menu" class="sticky">
<a href="/{{SITEURL}}">Welcome to
the
<select onchange="window.location.href=this.value">
{%- for t, article in tags|sort %}
<option value="{{SITEURL}}/{{ t.url }}" {% if t == tag %}selected{% endif %}>{{ t }}</option>
{% endfor %}
</select>
Federation</a>
</h1>
{% endblock %}
{% block content %} {% block content %}
<section id="content" class="body article"> <section id="content" class="body article">
<h1 class="entry-title p-name"> <h1 class="entry-title p-name">
<a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a> <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
</h1> </h1>
<div class="entry-subtitle"> <div class="entry-subtitle">
A A(n)
<span class="entry-category"> <span class="entry-category">
<em>{{ article.category }}</em> {{ article.category }}
</span> </span>
about about
<span class="entry-tags"> <span class="entry-tags">
@ -24,8 +37,8 @@
</span> </span>
{% endfor %} {% endfor %}
</span> </span>
published on ⟿ published on
<span class="entry-date dt-published">{{ article.date }}</span> <span class="entry-date dt-published">{{ article.date | strftime('%d %B %Y')}}</span>
</div> </div>
<div class="entry-content e-content">{{ article.content }}</div> <div class="entry-content e-content">{{ article.content }}</div>
</section> </section>

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

@ -7,7 +7,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 }}" />
<!-- <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/arima-koshi" type="text/css"/> --> <!-- <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/arima-koshi" type="text/css"/> -->
<!-- <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/liberation-serif" type="text/css"/> --> <!-- <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/liberation-serif" type="text/css"/> -->
<link rel="icon" href="{{ SITEURL}}/favicon.ico" type="image/x-icon"> <link rel="icon" href="{{ SITEURL}}/favicon.ico" 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 %}
@ -33,22 +33,37 @@
<link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL|format(tag.slug) }}{% else %}{{ TAG_FEED_RSS|format(tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" /> <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL|format(tag.slug) }}{% else %}{{ TAG_FEED_RSS|format(tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
{% endif %} {% endif %}
{% endblock head %} {% endblock head %}
<script src="/theme/js/jquery-2.1.3.js" type="text/javascript"></script>
</head> </head>
<body id="index" class="home"> <body id="index" class="home">
<header id="banner"> <header id="banner">
{% block header %}
<h1 id="menu" class="main"> <h1 id="menu" class="main">
Welcome <br>to <div id="title">
the Welcome
<select onchange="window.location.href=this.value"> <div class="indent">to the
{%- for t, article in tags|sort %} <select onchange="window.location.href=this.value">
<option value="{{SITEURL}}/{{ t.url }}" {% if t == tag %}selected{% endif %}>{{ t }}</option> {%- for t, article in tags|sort %}
{% endfor %} <option value="{{SITEURL}}/{{ t.url }}" {% if t == tag %}selected{% endif %}>{{ t }}</option>
</select> {% endfor %}
<br>Federation </select>
</div>
<div class="indent">Federation</div>
</div>
<div id="subtitles">
<div>⟿ social media ⟿</div>
<div>chats ⟿</div>
<div>ecosystems ⟿</div>
<div>open protocols ⟿</div>
<div>(XMPP, ActivityPub, OStatus, ...) ⟿</div>
<div>design ⟿</div>
<div>language ⟿</div>
<div>user experiences (UX) ⟿</div>
</div>
</h1> </h1>
<h1 id="menu" class="sticky"> <h1 id="menu" class="sticky">
<a href="{{SITEURL}}">Welcome to <a href="/{{SITEURL}}">Welcome to
the the
<select onchange="window.location.href=this.value"> <select onchange="window.location.href=this.value">
{%- for t, article in tags|sort %} {%- for t, article in tags|sort %}
@ -57,15 +72,27 @@
</select> </select>
Federation</a> Federation</a>
</h1> </h1>
{% endblock %}
</header> </header>
{% block content %} {% block content %}
{% endblock %} {% endblock %}
<footer> <footer>
{% for page in pages %} {% for page in pages %}
{% if page.title == 'colophon' %} {% if page.title == 'colophon' %}
{{ page.content }} {{ page.content }}
{%endif%} {%endif%}
{% endfor %} {% endfor %}
</footer> </footer>
</body> </body>
<script type="text/javascript">
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
for(var i = 0; i < 30; i++){
var t = getRandom(-5,95);
var l = getRandom(-5,98);
var s = getRandom(1,6);
$('header #menu.main').append('<img class="shape" src="/theme/img/shape'+s.toString()+'.svg" style="top:'+t.toString()+'%; left:'+l.toString()+'%;"/>');
}
</script>
</html> </html>

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

@ -2,6 +2,11 @@
{% block content %} {% block content %}
{% if articles %} {% if articles %}
<section id="content"> <section id="content">
{% for page in pages %}
{% if page.title == 'agenda' %}
<div id="agenda">{{ page.content }}</div>
{% endif %}
{% endfor %}
{% for article in articles_page.object_list %} {% for article in articles_page.object_list %}
{% if loop.index <= 5 %} {% if loop.index <= 5 %}
<div class="featured"> <div class="featured">
@ -10,9 +15,9 @@
<a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a> <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
</h1> </h1>
<div class="entry-subtitle"> <div class="entry-subtitle">
A A(n)
<span class="entry-category"> <span class="entry-category">
<em>{{ article.category }}</em> {{ article.category }}
</span> </span>
about about
<span class="entry-tags"> <span class="entry-tags">
@ -22,10 +27,18 @@
</span> </span>
{% endfor %} {% endfor %}
</span> </span>
published on ⟿ published on
<span class="entry-date dt-published">{{ article.date | strftime('%d %B %Y') }}</span> <span class="entry-date dt-published">{{ article.date | strftime('%d %B %Y') }}</span>
</div> </div>
<div class="entry-content e-content">{{ article.content }}</div> <div class="entry-content e-content">
{% if article.has_summary == True %}
<div id="summary">{{ article.summary }}
<a href="{{ SITEURL }}/{{ article.url }}" class="readmore">Read more ...</a>
</div>
{% else %}
{{ article.content }}
{% endif %}
</div>
</article> </article>
</div> </div>
{% if loop.index < 5 %} {% if loop.index < 5 %}

Write Preview
Loading…
Cancel
Save