joak
/
varia.website
forked from varia/varia.website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

adding css changes, varia website new style!

transformations
mb@mb 7 years ago
parent
5bb4d73180
commit
a94a58e1f3
5 changed files with 164 additions and 77 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. 161
      themes/cetcat/static/css/main.css
  2. BIN
      themes/cetcat/static/fonts/cmunobx.ttf
  3. 59
      themes/cetcat/templates/article.html
  4. 7
      themes/cetcat/templates/base.html
  5. 14
      themes/cetcat/templates/index.html

161
themes/cetcat/static/css/main.css
View File

@ -10,6 +10,18 @@
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: "CMUconcrete";
src:url('../fonts/cmunorm.ttf');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: "CMUconcrete";
src:url('../fonts/cmunobx.ttf');
font-weight: bold;
font-style: normal;
}
@font-face{
font-family: "liberation";
src:url('../fonts/cmunit.ttf');
@ -25,21 +37,31 @@ body{
margin:0 auto 5em auto;
padding: 0px 15px;
font-family: "liberation", monospace;
font-size: 18px;
line-height:1.7;
font-size: 16px;
line-height:1.8;
font-style: normal;
background-color: rgb(252, 255, 120);
color:black;
}
header {
width:calc(100% - 50px);
margin-top:15px;
margin-top:0;
margin-bottom:4em;
padding-bottom:1em;
font-size: 12px;
line-height: 1.7;
letter-spacing: 0;
}
#content.index header{
font-family: 'CMUconcrete';
font-size: 26px;
line-height: 1.6;
letter-spacing: .035em;
}
#content.index header em{
font-size: 100%;
padding-right: 10px;
}
#content{
margin-top:1em;
}
@ -58,8 +80,7 @@ hr, .separator hr {
border:0;
border-top:1px dotted #7e5211;
color: black;
margin-top:1em;
margin-bottom:1em;
margin:2em 0;
}
blockquote {
@ -90,6 +111,7 @@ p{
margin:0 0 1em 0;
}
em{
font-family: 'liberation';
letter-spacing: 0;
font-size: 125%;
line-height: 1.0;
@ -113,14 +135,14 @@ pre{
#translation{
position: absolute;
font-size: 12px;
top:-5px;
right:5px;
top:0px;
right:15px;
margin:0;
padding:0;
text-align: right;
}
#translation li{
list-style: none;
display: inline-block;
}
#translation li.active a{
text-decoration: none;
@ -137,10 +159,6 @@ pre{
.summary p{
display: inline;
}
.summary img{
width: 100%;
margin:0 0 1em 0;
}
.long-read .hentry{
width:calc(400px + 2em);
}
@ -153,67 +171,116 @@ pre{
padding:0;
vertical-align: top;
}
.hentry .article-info{
width: 200px;
}
/* title */
.hentry .article-info .entry-title{
width: 100%;
font-family: "cmusans";
font-size: 190%;
font-weight: bold;
line-height: 1.10;
margin:0;
}
.hentry .article-info .entry-title a{
text-decoration: none;
8}
.hentry .article-info .entry-title a{
text-decoration: none;
}
/* date */
.event-details{
width: 100%;
font-family: 'CMUconcrete';
font-size: 12px;
margin:.5em 0 1em 0;
}
/* ascii art styling */
.hentry pre{
font-size: 14.4px;
font-weight: normal;
}
.event-details{
font-weight: bold;
margin:.5em 0 1em 0;
/* featured image */
.hentry .article-info .featured-image img{
width:200px;
max-height: 100%;
}
/* double-blocks for super important categories */
.hentry.longread, .hentry.longread .article-info, .hentry.longread .featured-image img{
width: calc(400px + 2em);
}
/****************************/
/* article */
#content.body .entry-title{
display:inline-block;
font-family: "cmusans";
font-size: 180%;
line-height: 1.25;
font-weight: bold;
margin:30px 0 30px 275px;
color:#7e5211;
width: calc(100% - 275px);
}
.article-info, .post-info{
color:#7e5211;
}
.article-info{
width:200px;
float: left;
margin-bottom:1em;
}
.article-info .post-info time sup{
font-size: 100%;
}
.article-info .entry-title{
width:100%;
display:inline-block;
font-family: "cmusans";
font-size: 280%;
line-height: 1.5;
font-weight: bold;
}
.entry-content, #page-content{
width: 800px;
margin:0;
}
.entry-content img, .summary img, #page-content img{
max-width:100%;
}
.entry-content .seperator hr, #page-content hr{
max-width: 50%;
.article-info .featured-image img{
max-width: 200px;
max-height: 300px;
}
.post-info{
font-size: 14px;
font-style: italic;
line-height: 0.95;
}
.post-info sup{
font-size: 100%;
.post-info{
font-size: 14px;
font-style: italic;
line-height: 0.95;
}
.post-info .categories{
margin: 5px 0;
.post-info sup{
font-size: 100%;
}
.post-info .categories{
margin: 5px 0;
}
.entry-content-container, #page-content-container{
width: calc(100% - 285px);
background-color: rgba(255,255,0,.3);
float: right;
padding:30px;
margin-bottom:25px;
}
.entry-content, #page-content{
position: relative;
max-width: 700px;
margin:0 auto 0 20px;
}
.entry-content img, #page-content img{
max-height:400px;
}
.entry-content .seperator hr, #page-content hr{
width:100%;
}
/* Roel's complex footnote effect */
.entry-content span.simple-footnote-container{
float: left;
width: 200px;
margin-left:-270px;
}
.entry-content span.simple-footnote-content{
font-size: 12px;
line-height: 1.1;
word-wrap:break-word;
}
.entry-content blockquote{
font-size: 150%;
margin:0 3em;
line-height: 1.5;
}
/****************************/
/* other */
@ -246,8 +313,8 @@ pre{
}
/* add a monochrome filter over past events */
.past-event img{
filter:opacity(0.1);
.featured-image.past-event img{
filter:opacity(0.25);
/*filter: url("/images/filter.svg#monochrome");
-webkit-filter: url("/images/filter.svg#monochrome");*/
}

BIN
themes/cetcat/static/fonts/cmunobx.ttf
View File

Binary file not shown.

59
themes/cetcat/templates/article.html
View File

@ -18,35 +18,50 @@
{% block content %}
<section id="content" class="body">
<header id="banner">
{% for p in pages %}
{% if p.title == 'header' %}
<div id="title">{{ p.content }}</div>
{% endif %}
{% endfor %}
</header>
<div class="entry-title">
{{ article.title }}
</div>
<div class="article-info">
<div class="entry-title">
{{ article.title }}
<div class="featured-image">
{% if article.featured_image %}
<img src="{{ article.featured_image }}">
{% endif %}
</div>
<div class="event-details">
{% if article.event_start %}
{{ article.event_start }}
{% endif %}
</div>
</div>
<div class="entry-content">
{{ article.content }}
<div class="separator"><hr></div>
</div><!-- /.entry-content -->
<div class="post-info">
{% if article.category %}
<div class="categories">
<span itemprop="articleSection">
→ <a href="{{ article.category.url }}" rel="category">{{ article.category }}</a>
</span>
</div>
{% endif %}
{% if article.translations %}
<div id="article-translation">
{% for translation in article.translations %}
→ <a href="{{ translation.url }}">{{ translation.lang }}</a>
{% endfor %}
<div class="post-info">
{% if article.category %}
<div class="categories">
<span itemprop="articleSection">
→ <a href="{{ article.category.url }}" rel="category">{{ article.category }}</a>
</span>
</div>
{% endif %}
{% if article.translations %}
<div id="article-translation">
{% for translation in article.translations %}
→ <a href="{{ translation.url }}">{{ translation.lang }}</a>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
<div class="entry-content-container">
<div class="entry-content">
{{ article.content }}
<div class="separator"><hr></div>
</div><!-- /.entry-content -->
</div><!-- /.entry-content-container -->
</section>
{% endblock %}

7
themes/cetcat/templates/base.html
View File

@ -32,13 +32,6 @@
<li><a href="feeds/all-{{ DEFAULT_LANG }}.rss.xml" type="application/rss+xml"><i class="fa fa-rss "></i>RSS</a></li>
{% endif %}
</div>
<header id="banner">
{% for p in pages %}
{% if p.title == 'header' %}
<div id="title">{{ p.content }}</div>
{% endif %}
{% endfor %}
</header>
{% block content %}
{% endblock %}

14
themes/cetcat/templates/index.html
View File

@ -1,6 +1,13 @@
{% extends "base.html" %}
{% block content %}
<section id="content" class="index">
<header id="banner">
{% for p in pages %}
{% if p.title == 'header' %}
<div id="title">{{ p.content }}</div>
{% endif %}
{% endfor %}
</header>
{% block content_title %}
{% endblock %}
{% if articles_page.has_other_pages() %}
@ -23,8 +30,13 @@
{% endif %}
</div>
<div class="featured-image {{past}}">
{% if article.featured_image %}
<img src="{{ article.featured_image }}">
{% endif %}
</div>
</div>
<div class="summary {{past}}">{{ article.summary }}
<div class="summary">{{ article.summary }}
<span>
<a href="{{ article.url }}">
{% if DEFAULT_LANG == 'en' %}

Write Preview
Loading…
Cancel
Save