rra
/
hbsc_site
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

redesign for legibility and easier maintenance

pull/1/head
rra 6 years ago
parent
d4fb622123
commit
9c1487e4e6
4 changed files with 174 additions and 92 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. 215
      pelican/themes/homebrewserver.club/static/css/main.css
  2. 9
      pelican/themes/homebrewserver.club/templates/article.html
  3. 25
      pelican/themes/homebrewserver.club/templates/base.html
  4. 17
      pelican/themes/homebrewserver.club/templates/index.html

215
pelican/themes/homebrewserver.club/static/css/main.css
View File

@ -8,7 +8,9 @@ http://roelof.info
http://randomiser.info/ http://randomiser.info/
http://majesticmoo.se http://majesticmoo.se
*/ */
html {
font-size: 20px;
}
@font-face { @font-face {
font-family:'OrkneyRegular'; font-family:'OrkneyRegular';
src: url('../fonts/Orkney Regular.woff') format('truetype'); src: url('../fonts/Orkney Regular.woff') format('truetype');
@ -19,67 +21,50 @@ header {
} }
#banner { #banner {
line-height: 1em; text-align: center;
font-size: calc(0.7vh + 0.7vw + 0.25vmin); font-size: 5rem;
text-align:center; padding-bottom: 0.5em;
padding-top: 1em;
background: #EAEAEA;
}
#sitename {
color:#0074D9;
text-decoration:none;
} }
pre { pre {
font-family: 'Mono'; font-family: 'Mono';
} }
#menu{ #menu {
font-size:40px; font-size:2.5rem;
margin-top:1.2em;
font-weight:bold; font-weight:bold;
margin-top: 1em;
text-align:center; text-align:center;
} }
html {
font-size: 20px;
}
body { body {
line-height:1.6em; line-height:1.6em;
color:#0074D9;
color:#6363ff; background-color:#f6f6f6;
background-color:#fdfdfd;
max-width:80%;
min-width:650px;
margin: 40px auto;
font-family:'OrkneyRegular'; font-family:'OrkneyRegular';
letter-spacing: 0.05em; letter-spacing: 0.05em;
margin:0;
} }
a { #index{
color:#fe4a49; max-width:80%;
} margin: auto;
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) { a {
background: #F8F8F8; color:#FF4136;
} }
#index{ #index{
width:100%; width:100%;
padding-top:2em;
padding-bottom:1em;
} }
@ -88,52 +73,109 @@ table tr:nth-child(even) {
margin-top:0px; 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{ .hentry{
margin-top:2em;
border-width: 1px; border-width: 1px;
border-color: #444; border-color: #EAEAEA;
border-style: hidden hidden dashed hidden; border-style: hidden hidden dashed hidden;
padding-top:2em;
padding-bottom:2em;
} }
.entry-title{ .entry-title{
font-size:36px; font-size:3rem;
font-weight:bold; font-weight:bold;
margin-top:2em; line-height: 1.2em;
} }
.entry-title span{ .entry-title span{
width:100%; width:100%;
display:inline-block; display:inline-block;
} }
.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{ .entry-content{
margin:auto; margin:auto;
padding-bottom:1em; padding-bottom:1em;
} }
.entry-content pre{ .entry-content pre{
font-size:20px; font-size: 18px;
padding-left:1em; padding: 0.5em;
overflow: auto; overflow: auto;
background-color: #F8F8F8; background-color: #EAEAEA;
line-height:1.2em; 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{ .entry-content img{
max-height:100%; max-height:100%;
} }
.entry-content ul { .entry-content ul{
font-size:20px;
line-height:1.5; line-height:1.5;
margin: auto; margin: auto;
max-width:800px; max-width:800px;
} }
.entry-content pre{
margin: auto;
}
.highlight{ .highlight{
margin: auto; margin: auto;
max-width:800px; max-width:800px;
@ -143,9 +185,7 @@ blockquote {
font-style:italic; font-style:italic;
} }
#content{
margin:auto;
}
#content p{ #content p{
line-height:1.6; line-height:1.6;
@ -180,7 +220,8 @@ blockquote {
text-align:center; text-align:center;
} }
.simple-footnotes{
.footnote{
font-size:14px; font-size:14px;
margin:auto; margin:auto;
max-width:800px; max-width:800px;
@ -192,27 +233,54 @@ blockquote {
.post-info { .post-info {
line-height: 1em; 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/ */ /* some good ol' theft from https://codepo8.github.io/css-fork-on-github-ribbon/ */
#forkongithub a { #forkongithub a {
background:#fe4a49; background:#FF4136;
color:#fff; color:#fff;
text-decoration:none; text-decoration:none;
font-family:arial,sans-serif; /*! font-family:arial,sans-serif; */
text-align:center; text-align:right;
font-weight:bold; font-weight:bold;
padding:5px 40px; padding:5px 40px;
font-size:1rem; font-size:1rem;
line-height:2rem; line-height:2rem;
position:relative; position:relative;
transition:0.5s;} transition:0.5s;
font-size: 14px;
}
#forkongithub a:hover{ #forkongithub a:hover{
background:#6363ff; background:#0074D9;
color:#fff;} color:#fff;}
#forkongithub a::before,#forkongithub a::after{ #forkongithub a::before,#forkongithub a::after{
@ -242,9 +310,9 @@ blockquote {
z-index:9999; z-index:9999;
} }
#forkongithub a{ #forkongithub a{
width:200px; width:210px;
position:absolute; position:absolute;
top:60px; top:30px;
right:-60px; right:-60px;
transform:rotate(45deg); transform:rotate(45deg);
-webkit-transform:rotate(45deg); -webkit-transform:rotate(45deg);
@ -254,3 +322,4 @@ blockquote {
box-shadow:4px 4px 10px rgba(0,0,0,0.8); box-shadow:4px 4px 10px rgba(0,0,0,0.8);
} }
} }

9
pelican/themes/homebrewserver.club/templates/article.html
View File

@ -26,7 +26,8 @@
{% import 'translations.html' as translations with context %} {% import 'translations.html' as translations with context %}
{{ translations.translations_for(article) }} {{ translations.translations_for(article) }}
</header> </header>
<footer class="post-info"> <div class="post-info">
<!-- <div class='summary'>{{ article.summary }}</div> -->
<time class="published" datetime="{{ article.date.isoformat() }}"> <time class="published" datetime="{{ article.date.isoformat() }}">
{{ article.locale_date }} {{ article.locale_date }}
</time> </time>
@ -41,8 +42,12 @@
<a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a> <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
{% endfor %} {% endfor %}
</address> </address>
{% endif %} {% endif %}
</footer><!-- /.post-info --> </div><!-- /.post-info -->
{% if article.toc %}
{{ article.toc }}
{% endif %}
<div class="entry-content"> <div class="entry-content">
{{ article.content }} {{ article.content }}
</div><!-- /.entry-content --> </div><!-- /.entry-content -->

25
pelican/themes/homebrewserver.club/templates/base.html
View File

@ -40,18 +40,13 @@
{% endblock head %} {% endblock head %}
</head> </head>
<body id="index" class="home"> <body>
<header id="banner"> <header id="banner">
<pre> <a href="{{ SITEURL }}" id="sitename">{{ SITENAME }}</a>
░█░█░█▀█░█▄█░█▀▀░█▀▄░█▀▄░█▀▀░█░█░█▀▀░█▀▀░█▀▄░█░█░█▀▀░█▀▄░░░░█▀▀░█░░░█░█░█▀▄ <span id="subtitle">{{ SITESUBTITLE }}</span>
░█▀█░█░█░█░█░█▀▀░█▀▄░█▀▄░█▀▀░█▄█░▀▀█░█▀▀░█▀▄░▀▄▀░█▀▀░█▀▄░░░░█░░░█░░░█░█░█▀▄ <!-- /#banner -->
░▀░▀░▀▀▀░▀░▀░▀▀▀░▀▀░░▀░▀░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀░
</pre> <nav id="menu">
<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">
{% for title, link in MENUITEMS %} {% for title, link in MENUITEMS %}
<a class="menu-item" href="{{ link }}">{{ title }}</a> <a class="menu-item" href="{{ link }}">{{ title }}</a>
{% endfor %} {% endfor %}
@ -66,8 +61,12 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% 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 %} {% block content %}
{% endblock %} {% endblock %}
</div>
</body> </body>
</html> </html>

17
pelican/themes/homebrewserver.club/templates/index.html
View File

@ -7,11 +7,20 @@
<ol id="post-list"> <ol id="post-list">
{% for article in articles_page.object_list %} {% for article in articles_page.object_list %}
<ul><article class="hentry"> <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> <header>
<footer class="post-info"> <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> <time class="published" datetime="{{ article.date.isoformat() }}"> <sup>{{ article.locale_date }}</sup> </time>
</footer><!-- /.post-info --> <!-- {% for tag in article.tags %}
<div class="entry-content"> {{ article.content }}<div id="moaaar"><a href="/{{ article.url }}">moaaar</a></div> </div><!-- /.entry-content --> <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> </article></ul>
{% endfor %} {% endfor %}
</ol><!-- /#posts-list --> </ol><!-- /#posts-list -->

Write Preview
Loading…
Cancel
Save