redesign for legibility and easier maintenance
This commit is contained in:
parent
d4fb622123
commit
9c1487e4e6
@ -8,7 +8,9 @@ http://roelof.info
|
||||
http://randomiser.info/
|
||||
http://majesticmoo.se
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
@font-face {
|
||||
font-family:'OrkneyRegular';
|
||||
src: url('../fonts/Orkney Regular.woff') format('truetype');
|
||||
@ -19,67 +21,50 @@ header {
|
||||
}
|
||||
|
||||
#banner {
|
||||
line-height: 1em;
|
||||
font-size: calc(0.7vh + 0.7vw + 0.25vmin);
|
||||
text-align:center;
|
||||
|
||||
text-align: center;
|
||||
font-size: 5rem;
|
||||
padding-bottom: 0.5em;
|
||||
padding-top: 1em;
|
||||
background: #EAEAEA;
|
||||
}
|
||||
|
||||
#sitename {
|
||||
color:#0074D9;
|
||||
text-decoration:none;
|
||||
}
|
||||
pre {
|
||||
font-family: 'Mono';
|
||||
}
|
||||
#menu{
|
||||
font-size:40px;
|
||||
#menu {
|
||||
font-size:2.5rem;
|
||||
margin-top:1.2em;
|
||||
font-weight:bold;
|
||||
margin-top: 1em;
|
||||
text-align:center;
|
||||
}
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height:1.6em;
|
||||
|
||||
color:#6363ff;
|
||||
background-color:#fdfdfd;
|
||||
max-width:80%;
|
||||
min-width:650px;
|
||||
margin: 40px auto;
|
||||
color:#0074D9;
|
||||
background-color:#f6f6f6;
|
||||
font-family:'OrkneyRegular';
|
||||
letter-spacing: 0.05em;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#index{
|
||||
max-width:80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#fe4a49;
|
||||
color:#FF4136;
|
||||
}
|
||||
|
||||
table{
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
font-size:60%;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
border: 1px solid #6363ff;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px dashed lightgrey;
|
||||
padding-left:1em;
|
||||
}
|
||||
|
||||
table thead tr {
|
||||
border-bottom: 1px solid #6363ff;
|
||||
background: #F8F8F8;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background: #F8F8F8;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#index{
|
||||
width:100%;
|
||||
width:100%;
|
||||
padding-top:2em;
|
||||
padding-bottom:1em;
|
||||
|
||||
}
|
||||
|
||||
@ -88,52 +73,109 @@ table tr:nth-child(even) {
|
||||
margin-top:0px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left:0px;
|
||||
|
||||
h1{
|
||||
font-size:2.5rem;
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
h2{
|
||||
font-size:2rem;
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
h3{
|
||||
font-size:1.5rem;
|
||||
text-decoration: underline;
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.summary p{
|
||||
font-size:0.8rem;
|
||||
text-align: left;
|
||||
margin:0;
|
||||
}
|
||||
.hentry{
|
||||
margin-top:2em;
|
||||
border-width: 1px;
|
||||
border-color: #444;
|
||||
border-color: #EAEAEA;
|
||||
border-style: hidden hidden dashed hidden;
|
||||
padding-top:2em;
|
||||
padding-bottom:2em;
|
||||
}
|
||||
|
||||
.entry-title{
|
||||
font-size:36px;
|
||||
font-weight:bold;
|
||||
margin-top:2em;
|
||||
font-size:3rem;
|
||||
font-weight:bold;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.entry-title span{
|
||||
width:100%;
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.entry-content{
|
||||
margin:auto;
|
||||
padding-bottom:1em;
|
||||
.toc{
|
||||
font-size: 0.8em;
|
||||
padding: 3em;
|
||||
float: right;
|
||||
line-height: 1.5em;
|
||||
border: 1px solid;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.toc .toctitle {
|
||||
font-size:1rem;
|
||||
}
|
||||
|
||||
.toc ul{
|
||||
/*list-style: none;*/
|
||||
margin-top:0px;
|
||||
}
|
||||
.entry-content{
|
||||
margin:auto;
|
||||
padding-bottom:1em;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.entry-content pre{
|
||||
font-size:20px;
|
||||
padding-left:1em;
|
||||
overflow: auto;
|
||||
background-color: #F8F8F8;
|
||||
line-height:1.2em;
|
||||
font-size: 18px;
|
||||
padding: 0.5em;
|
||||
overflow: auto;
|
||||
background-color: #EAEAEA;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.codehilite {
|
||||
max-width: 800px;
|
||||
margin:1em auto;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 18px;
|
||||
padding: 0.5em;
|
||||
background-color: #EAEAEA;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.entry-content img{
|
||||
max-height:100%;
|
||||
max-height:100%;
|
||||
}
|
||||
|
||||
.entry-content ul {
|
||||
font-size:20px;
|
||||
.entry-content ul{
|
||||
line-height:1.5;
|
||||
margin: auto;
|
||||
max-width:800px;
|
||||
}
|
||||
|
||||
.entry-content pre{
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.highlight{
|
||||
margin: auto;
|
||||
max-width:800px;
|
||||
@ -143,9 +185,7 @@ blockquote {
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
#content{
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
|
||||
#content p{
|
||||
line-height:1.6;
|
||||
@ -180,7 +220,8 @@ blockquote {
|
||||
text-align:center;
|
||||
|
||||
}
|
||||
.simple-footnotes{
|
||||
|
||||
.footnote{
|
||||
font-size:14px;
|
||||
margin:auto;
|
||||
max-width:800px;
|
||||
@ -192,27 +233,54 @@ blockquote {
|
||||
|
||||
.post-info {
|
||||
line-height: 1em;
|
||||
margin-top:1em;
|
||||
}
|
||||
|
||||
table{
|
||||
margin: 1em auto;
|
||||
max-width: 800px;
|
||||
font-size:0.9em;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
border: 1px solid #0074D9;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
border: 1px dashed #EAEAEA;
|
||||
padding-left:1em;
|
||||
padding-top:0.2em;
|
||||
}
|
||||
|
||||
table thead tr {
|
||||
border-bottom: 1px solid #0074D9;
|
||||
background: #EAEAEA;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background: #EAEAEA;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* some good ol' theft from https://codepo8.github.io/css-fork-on-github-ribbon/ */
|
||||
#forkongithub a {
|
||||
background:#fe4a49;
|
||||
background:#FF4136;
|
||||
color:#fff;
|
||||
text-decoration:none;
|
||||
font-family:arial,sans-serif;
|
||||
text-align:center;
|
||||
/*! font-family:arial,sans-serif; */
|
||||
text-align:right;
|
||||
font-weight:bold;
|
||||
padding:5px 40px;
|
||||
font-size:1rem;
|
||||
line-height:2rem;
|
||||
position:relative;
|
||||
transition:0.5s;}
|
||||
transition:0.5s;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#forkongithub a:hover{
|
||||
background:#6363ff;
|
||||
background:#0074D9;
|
||||
color:#fff;}
|
||||
|
||||
#forkongithub a::before,#forkongithub a::after{
|
||||
@ -242,9 +310,9 @@ blockquote {
|
||||
z-index:9999;
|
||||
}
|
||||
#forkongithub a{
|
||||
width:200px;
|
||||
width:210px;
|
||||
position:absolute;
|
||||
top:60px;
|
||||
top:30px;
|
||||
right:-60px;
|
||||
transform:rotate(45deg);
|
||||
-webkit-transform:rotate(45deg);
|
||||
@ -254,3 +322,4 @@ blockquote {
|
||||
box-shadow:4px 4px 10px rgba(0,0,0,0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -26,7 +26,8 @@
|
||||
{% import 'translations.html' as translations with context %}
|
||||
{{ translations.translations_for(article) }}
|
||||
</header>
|
||||
<footer class="post-info">
|
||||
<div class="post-info">
|
||||
<!-- <div class='summary'>{{ article.summary }}</div> -->
|
||||
<time class="published" datetime="{{ article.date.isoformat() }}">
|
||||
{{ article.locale_date }}
|
||||
</time>
|
||||
@ -41,8 +42,12 @@
|
||||
<a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
|
||||
{% endfor %}
|
||||
</address>
|
||||
|
||||
{% endif %}
|
||||
</footer><!-- /.post-info -->
|
||||
</div><!-- /.post-info -->
|
||||
{% if article.toc %}
|
||||
{{ article.toc }}
|
||||
{% endif %}
|
||||
<div class="entry-content">
|
||||
{{ article.content }}
|
||||
</div><!-- /.entry-content -->
|
||||
|
||||
@ -40,18 +40,13 @@
|
||||
{% endblock head %}
|
||||
</head>
|
||||
|
||||
<body id="index" class="home">
|
||||
<header id="banner">
|
||||
<pre>
|
||||
░█░█░█▀█░█▄█░█▀▀░█▀▄░█▀▄░█▀▀░█░█░█▀▀░█▀▀░█▀▄░█░█░█▀▀░█▀▄░░░░█▀▀░█░░░█░█░█▀▄
|
||||
░█▀█░█░█░█░█░█▀▀░█▀▄░█▀▄░█▀▀░█▄█░▀▀█░█▀▀░█▀▄░▀▄▀░█▀▀░█▀▄░░░░█░░░█░░░█░█░█▀▄
|
||||
░▀░▀░▀▀▀░▀░▀░▀▀▀░▀▀░░▀░▀░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀░
|
||||
</pre>
|
||||
<span id="subtitle">{{ SITESUBTITLE }}</span>
|
||||
|
||||
</header><!-- /#banner -->
|
||||
<span id="forkongithub"><a href="xmpp://hbsc@muc.lurk.org?join">Yes We're Config!™</a></span>
|
||||
<nav id="menu">
|
||||
<body>
|
||||
<header id="banner">
|
||||
<a href="{{ SITEURL }}" id="sitename">{{ SITENAME }}</a>
|
||||
<span id="subtitle">{{ SITESUBTITLE }}</span>
|
||||
<!-- /#banner -->
|
||||
|
||||
<nav id="menu">
|
||||
{% for title, link in MENUITEMS %}
|
||||
<a class="menu-item" href="{{ link }}">{{ title }}</a>
|
||||
{% endfor %}
|
||||
@ -66,8 +61,12 @@
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</ul></nav><!-- /#menu -->
|
||||
</ul></nav>
|
||||
</header><!-- /#menu -->
|
||||
<span id="forkongithub"><a href="xmpp://hbsc@muc.lurk.org?join">Yes We're Config!™</a></span>
|
||||
<div id='index' class='home'>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -7,11 +7,20 @@
|
||||
<ol id="post-list">
|
||||
{% for article in articles_page.object_list %}
|
||||
<ul><article class="hentry">
|
||||
<header> <span class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></span> </header>
|
||||
<footer class="post-info">
|
||||
<header>
|
||||
<div class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></div>
|
||||
</header>
|
||||
<div class="post-info">
|
||||
<time class="published" datetime="{{ article.date.isoformat() }}"> <sup>{{ article.locale_date }}</sup> </time>
|
||||
</footer><!-- /.post-info -->
|
||||
<div class="entry-content"> {{ article.content }}<div id="moaaar"><a href="/{{ article.url }}">moaaar</a></div> </div><!-- /.entry-content -->
|
||||
<!-- {% for tag in article.tags %}
|
||||
<span itemprop="keywords">
|
||||
<a href="{{ SITEURL }}/{{ tag.url }}" rel="tag">{{ tag }}</a>
|
||||
</span>{% endfor %} -->
|
||||
|
||||
</div><!-- /.post-info -->
|
||||
<div class="entry-content"> {{ article.content }}</div>
|
||||
<!-- /.entry-content -->
|
||||
<div id="moaaar"><a href="{{SITEURL}}/{{ article.url }}">moaaar</a></div>
|
||||
</article></ul>
|
||||
{% endfor %}
|
||||
</ol><!-- /#posts-list -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user