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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 176
      theme/wttf/static/main.css
  2. 21
      theme/wttf/templates/article.html
  3. 35
      theme/wttf/templates/base.html
  4. 21
      theme/wttf/templates/index.html

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

@ -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;
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
}
.entry-title{
margin:0;
padding:1.5em 1em;
}
.entry-content{
max-width: 80%;
max-width: 100%;
padding:0;
font-size: 15px;
}
#content.article{
margin:0 0 2em 0;
left:0;
}
#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;
}
}

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

@ -6,15 +6,28 @@
{% endif %}
{% 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 %}
<section id="content" class="body article">
<h1 class="entry-title p-name">
<a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
</h1>
<div class="entry-subtitle">
A
A(n)
<span class="entry-category">
<em>{{ article.category }}</em>
{{ article.category }}
</span>
about
<span class="entry-tags">
@ -24,8 +37,8 @@
</span>
{% endfor %}
</span>
published on
<span class="entry-date dt-published">{{ article.date }}</span>
⟿ published on
<span class="entry-date dt-published">{{ article.date | strftime('%d %B %Y')}}</span>
</div>
<div class="entry-content e-content">{{ article.content }}</div>
</section>

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

@ -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" />
{% endif %}
{% endblock head %}
<script src="/theme/js/jquery-2.1.3.js" type="text/javascript"></script>
</head>
<body id="index" class="home">
<header id="banner">
{% block header %}
<h1 id="menu" class="main">
Welcome <br>to
the
<div id="title">
Welcome
<div class="indent">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>
<br>Federation
</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 id="menu" class="sticky">
<a href="{{SITEURL}}">Welcome to
<a href="/{{SITEURL}}">Welcome to
the
<select onchange="window.location.href=this.value">
{%- for t, article in tags|sort %}
@ -57,6 +72,7 @@
</select>
Federation</a>
</h1>
{% endblock %}
</header>
{% block content %}
{% endblock %}
@ -68,4 +84,15 @@
{% endfor %}
</footer>
</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>

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

@ -2,6 +2,11 @@
{% block content %}
{% if articles %}
<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 %}
{% if loop.index <= 5 %}
<div class="featured">
@ -10,9 +15,9 @@
<a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
</h1>
<div class="entry-subtitle">
A
A(n)
<span class="entry-category">
<em>{{ article.category }}</em>
{{ article.category }}
</span>
about
<span class="entry-tags">
@ -22,10 +27,18 @@
</span>
{% endfor %}
</span>
published on
⟿ published on
<span class="entry-date dt-published">{{ article.date | strftime('%d %B %Y') }}</span>
</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>
</div>
{% if loop.index < 5 %}

Write Preview
Loading…
Cancel
Save