20 changed files with 515 additions and 909 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
@ -1,8 +1,12 @@
|
||||
<div class="page-navigation"> |
||||
<ul> |
||||
{% if page.is_home != true %} |
||||
<li> |
||||
<a class="home" href="{{ site.baseurl }}/" title="Back to |
||||
Homepage">Home</a> |
||||
<span>·</span> |
||||
Homepage">Home</a></li> |
||||
{% endif %} |
||||
<a href="#main" title="Back to top">Top</a></span> |
||||
<li> |
||||
<a href="#top" title="Back to top">Top</a></span> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
@ -1,17 +1,29 @@
|
||||
<div class="page-navigation"> |
||||
<ul> |
||||
|
||||
{% if page.previous.url %} |
||||
<li> |
||||
<a href="{{ site.baseurl }}{{ page.previous.url }}.html" |
||||
title="PREV: {{ page.previous.title }}"><<</a> |
||||
</li> |
||||
{% endif %} |
||||
|
||||
<li> |
||||
<a href="{{ site.baseurl }}/" title="Back to Homepage">Home</a> |
||||
</li> |
||||
|
||||
<li> |
||||
<a href="#top" title="Back to top">Top</a> |
||||
</li> |
||||
|
||||
{% if page.next.url %} |
||||
<li> |
||||
<a href="{{ site.baseurl }}{{ page.next.url }}.html" title="NEXT: |
||||
{{page.next.title}}"><<</a> |
||||
<span> · </span> |
||||
{% endif %} |
||||
<a href="{{ site.baseurl }}/" title="Back to |
||||
Homepage">Home</a> |
||||
<span> · </span> |
||||
<a href="#main" title="Back to top">Top</a> |
||||
{% if page.previous.url %} |
||||
<span> · </span> |
||||
<a href="{{ site.baseurl }}{{ page.previous.url }}.html" |
||||
title="PREV: {{ page.previous.title }}">>></a> |
||||
{% endif %} |
||||
{{page.next.title}}">>></a> |
||||
</li> |
||||
{% endif %} |
||||
|
||||
</ul> |
||||
</div> |
||||
|
||||
|
||||
|
||||
@ -1,19 +1,46 @@
|
||||
{% assign site_tags = site.tags | sort %} |
||||
{% comment %} This is pure madness: an O(n^2) loop is not acceptable but |
||||
there is no other solution I am aware of using this templating |
||||
language. Using uniq to filter different frequencies should |
||||
lead to a better best case (if all frequencies are equal |
||||
we get O(n) with n being the number of tags, otherwise |
||||
if all freqencies are different we get O(n^2) {% endcomment %} |
||||
|
||||
{% comment %} |
||||
<!--Tags summary with links as pararaphs --> |
||||
{% endcomment %} |
||||
{% comment %} Get all unique tags {% endcomment %} |
||||
{% for t in site.tags %} |
||||
{% assign tag_frequency = tag_frequency | append: t[1].size | append: '#' %} |
||||
{% endfor %} |
||||
|
||||
{% assign tag_frequency = tag_frequency | split: '#' %} |
||||
{% assign tag_frequency_iterator = tag_frequency | sort | reverse %} |
||||
{% assign tag_frequency = tag_frequency_iterator | uniq %} |
||||
|
||||
<article> |
||||
<div class="tag-list"> |
||||
{% for tag in site_tags %} |
||||
{% assign tagg = tag[0] | slugify %} |
||||
{% if page.is_home %} |
||||
{% capture link %}{{ site.baseurl }}/tags/#{{ tagg }}{% endcapture %} |
||||
<a href="{{ link }}">{{ tag[0] }}</a> |
||||
{% else %} |
||||
<a href="#{{ tagg }}">{{ tag[0] }}</a> |
||||
{% endif %} |
||||
{% for f in tag_frequency %} |
||||
{% comment %} Nice: srt to int: {% endcomment %} |
||||
{% assign freq = f | plus: 0 %} |
||||
{% for t in site.tags %} |
||||
{% if freq == t[1].size %} |
||||
{% assign sorted_tags_by_freq = sorted_tags_by_freq | append: t[0] | append: '#' %} |
||||
{% endif %} |
||||
{% endfor %} |
||||
{% endfor %} |
||||
</div> |
||||
</article> |
||||
|
||||
{% assign sorted_tags_by_freq = sorted_tags_by_freq | split: '#' %} |
||||
|
||||
<div class="tag-list"> |
||||
<ul> |
||||
{% for tag in sorted_tags_by_freq %} |
||||
<li> |
||||
{% assign tagg = tag | slugify %} |
||||
{% if page.is_home %} |
||||
{% assign freq = tag_frequency_iterator[forloop.index0] | plus: 0 %} |
||||
{% if freq >= site.min_tag_score %} |
||||
{% capture link %}{{ site.baseurl }}/tags/#{{ tagg }}{% endcapture %} |
||||
<a href="{{ link }}">{{ tag }} [{{ freq }}]</a> |
||||
{% endif %} |
||||
{% else %} |
||||
<a href="#{{ tagg }}">{{ tag }}</a> |
||||
{% endif %} |
||||
</li> |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
||||
|
||||
@ -1,485 +1,365 @@
|
||||
body { |
||||
background-color: #e6e6e6; |
||||
font-style: normal; |
||||
font-weight: 400; |
||||
font-size: 1.5em; |
||||
font-family: 'HiLo-DecoRegular'; |
||||
padding: 20px; |
||||
margin: 0; |
||||
-webkit-font-smoothing: antialiased; |
||||
-webkit-text-size-adjust: 100%; |
||||
@media (min-width: 992px) { |
||||
padding: 35px 50px; |
||||
} |
||||
/* For mobile phones */ |
||||
@media only screen and (max-width: 700px) { |
||||
body { |
||||
margin-left: 0.40625em; |
||||
margin-right: 0.40625em; |
||||
} |
||||
|
||||
.post { |
||||
pre { |
||||
font-size:0.8125em; |
||||
line-height: 2em; |
||||
|
||||
padding-left: 0.8125em; |
||||
padding-right: 0.8125em; |
||||
} |
||||
} |
||||
} |
||||
|
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5 { |
||||
margin: 45px 0 25px; |
||||
/* For desktops */ |
||||
@media only screen and (min-width: 700px) { |
||||
body { |
||||
margin-left: 5%; |
||||
margin-right: 5%; |
||||
@media only screen and (max-width: 1375px) { |
||||
margin-left: 10%; |
||||
margin-right: 10%; |
||||
} |
||||
@media only screen and (min-width: 1920px) { |
||||
margin-left: 25%; |
||||
margin-right: 25%; |
||||
} |
||||
} |
||||
|
||||
.post { |
||||
pre { |
||||
font-size: 1.1375em; |
||||
line-height: 2em; |
||||
|
||||
padding-left: 1.625em; |
||||
padding-right: 1.625em; |
||||
} |
||||
} |
||||
} |
||||
|
||||
img { |
||||
max-width: 100%; |
||||
body { |
||||
text-align: left; |
||||
text-rendering: optimizeLegibility; |
||||
background-color: #dadada; |
||||
line-height: 1.625em; /* 16×1.625=26pt */ |
||||
font-family: "Arial Black", Gadget, sans-serif; |
||||
font-size: 1.080625em; |
||||
word-spacing: 0em; |
||||
} |
||||
|
||||
a { |
||||
outline: none; |
||||
color: inherit; |
||||
text-decoration: none; |
||||
border-bottom: 1px solid #555; |
||||
&.image { |
||||
display: block; |
||||
text-align: center; |
||||
border: 0; |
||||
border-radius: 5px; |
||||
margin: 30px 0; |
||||
} |
||||
a:hover { |
||||
transition: 0.3s; |
||||
} |
||||
mark { |
||||
background: #fffc76; |
||||
padding: 0 5px; |
||||
|
||||
/* Use for abbreviations only. */ |
||||
abbr { |
||||
letter-spacing: 0.1em; |
||||
} |
||||
|
||||
blockquote { |
||||
border-left: 5px solid #ccc; |
||||
margin: 40px 0; |
||||
padding: 5px 30px; |
||||
background: #eee; |
||||
font-size: 1.08625em; |
||||
line-height: 1.08625em; |
||||
font-family: "Comic Sans MS", cursive, serif; |
||||
background-color: #ffffff; |
||||
box-shadow: inset 0 0 0.40625em grey; |
||||
border-radius: 0.8125em; |
||||
padding-left: 1.625em; |
||||
padding-top: 0.8125em; |
||||
padding-bottom: 0.8125em; |
||||
margin: 0; |
||||
} |
||||
|
||||
.logo { |
||||
position: relative; |
||||
margin: 0 auto 35px; |
||||
text-align: center; |
||||
animation-duration: 0.7s; |
||||
animation-fill-mode: both; |
||||
animation-name: bounce; |
||||
-webkit-animation-duration: 0.7s; |
||||
-webkit-animation-fill-mode: both; |
||||
-webkit-animation-name: bounce; |
||||
a { |
||||
background: #e6e6e6 url("gravatar_wrapper.svg"); |
||||
text-decoration: none; |
||||
font-weight: 700; |
||||
height: 100px; |
||||
width: 100px; |
||||
font-size: 2.25em; |
||||
border-radius: 100%; |
||||
display: inline-block; |
||||
text-align: center; |
||||
line-height: 100px; |
||||
border: 5px solid #e6e6e6; |
||||
box-sizing: border-box; |
||||
-webkit-transition-duration: 0.8s; |
||||
transition-duration: 0.8s; |
||||
&:hover, |
||||
&:focus { |
||||
background: #f14e32; |
||||
} |
||||
&:hover + .logo-prompt, |
||||
&:focus + .logo-prompt { |
||||
display: inline-block !important; |
||||
} |
||||
.avatar { |
||||
margin-top: 5px; |
||||
-webkit-border-radius: 50%; |
||||
-moz-border-radius: 50%; |
||||
border-radius: 50%; |
||||
} |
||||
@media (max-width : 480px) {&:hover + .logo-prompt, |
||||
&:focus + .logo-prompt { |
||||
display: none !important; |
||||
} |
||||
} |
||||
} |
||||
.logo-prompt { |
||||
position: absolute; |
||||
display: none; |
||||
vertical-align: middle; |
||||
padding: 5px; |
||||
border-radius: 3px; |
||||
background: #666; |
||||
background: rgba(0,0,0,0.5); |
||||
margin-left: 15px; |
||||
color: #fff; |
||||
font-size: 1.23525em; |
||||
h1 { |
||||
line-height: 1.625em; |
||||
margin-top: 0.40625em; |
||||
margin-bottom: 0.40625em; |
||||
} |
||||
|
||||
h2 { |
||||
line-height: 1.263157em; |
||||
margin-top: 1.263157em; |
||||
margin-bottom: 1.263157em; |
||||
} |
||||
|
||||
p { |
||||
text-indent: 0; |
||||
line-height: 1.625em; |
||||
margin-top: 1.625em; |
||||
margin-bottom: 1.625em; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: underline; |
||||
text-decoration-color: #d9d9d9; |
||||
text-align: center; |
||||
line-height: 1.2; |
||||
top: 50%; |
||||
margin-top: -10px; |
||||
&:before { |
||||
content: ""; |
||||
border-width: 5px 5px 5px 0; |
||||
border-style: solid; |
||||
border-color: transparent #666; |
||||
border-color: transparent rgba(0,0,0,.5); |
||||
position: absolute; |
||||
top: 50%; |
||||
left: -5px; |
||||
margin-top: -5px; |
||||
} |
||||
} |
||||
color: #666666; |
||||
} |
||||
|
||||
iframe { |
||||
margin: 45px 0 !important; |
||||
a:hover { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
ul { |
||||
list-style-type: circle; |
||||
margin: 40px 0; |
||||
padding-left: 50px; |
||||
li { |
||||
word-wrap: break-word; |
||||
} |
||||
img { |
||||
margin: 40px 0; |
||||
border-radius: 5px; |
||||
} |
||||
list-style-type: circle; |
||||
} |
||||
|
||||
ol { |
||||
margin: 40px 0; |
||||
padding-left: 50px; |
||||
li { |
||||
word-wrap: break-word; |
||||
} |
||||
img { |
||||
margin: 40px 0; |
||||
border-radius: 5px; |
||||
} |
||||
.post { |
||||
pre { |
||||
border: none; |
||||
border-radius: 1.625em; |
||||
box-shadow: inset 0 0 0.8125em grey; |
||||
background-color: #e6e6e6; |
||||
white-space: pre-wrap; |
||||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ |
||||
white-space: -pre-wrap; /* Opera 4-6 */ |
||||
white-space: -o-pre-wrap; /* Opera 7 */ |
||||
word-wrap: break-word; /* Internet Explorer 5.5+ */ |
||||
} |
||||
} |
||||
|
||||
sup { |
||||
vertical-align: top; |
||||
position: relative; |
||||
top: -0.5em; |
||||
margin-left: 1px; |
||||
.post-metadata, .page-metadata, .footer, .comment { |
||||
box-shadow: inset 0 0 0.40625em grey; |
||||
background-color: #ffffff; |
||||
} |
||||
|
||||
time { |
||||
color: #555; |
||||
.post-metadata, .page-metadata, .footer, .comment, .index .post-list-metadata { |
||||
border-radius: 1.625em; |
||||
padding-left: 1.625em; |
||||
padding-bottom: 0.40625em; |
||||
} |
||||
|
||||
code, |
||||
pre { |
||||
font-family: Consolas, monospace, x; |
||||
.post-metadata, .page-metadata, .footer, .comment, .comment-content, .index .post-list-metadata { |
||||
margin-bottom: 1.625em; |
||||
} |
||||
|
||||
code { |
||||
color: #f14e32; |
||||
background: #eee; |
||||
padding: 2px 6px; |
||||
font-size: 15.0px; |
||||
.page-metadata, .footer, .comment, .index .post-list-metadata { |
||||
padding-top: 0.40625em; |
||||
} |
||||
|
||||
pre { |
||||
display: block; |
||||
margin-top: 0; |
||||
margin-bottom: 1rem; |
||||
font-size: 1.6rem; |
||||
line-height: 1.4; |
||||
white-space: pre; |
||||
overflow-x: auto; |
||||
background-color: #f9f9f9; |
||||
border: 1px solid #ddd; |
||||
padding: 1rem; |
||||
code { |
||||
/* font-size: 100%; */ |
||||
color: inherit; |
||||
background-color: transparent; |
||||
padding: 0; |
||||
} |
||||
.post-metadata, .page-metadata, .footer, .comment, .index .post-list-metadata { |
||||
padding-right: 1.625em; |
||||
} |
||||
|
||||
table { |
||||
width: 100%; |
||||
table-layout: fixed; |
||||
margin: 45px 0; |
||||
thead { |
||||
background: #f2f2f2; |
||||
} |
||||
th { |
||||
text-align: left; |
||||
padding: 8px 10px; |
||||
border-bottom: 15px solid #fff; |
||||
} |
||||
td { |
||||
padding: 4px 0; |
||||
} |
||||
|
||||
.top, .page-navigation, .tag-list { |
||||
ul { |
||||
margin: 0; |
||||
padding: 0; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
li { |
||||
display: block; |
||||
float: left; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
|
||||
iframe { |
||||
width: 100%; |
||||
.top, .page-navigation { |
||||
ul { |
||||
font-size: 0.8125em; |
||||
margin-bottom: 1.625em; |
||||
background-color: #666666; |
||||
border-radius: 0.8125em; |
||||
} |
||||
|
||||
li { |
||||
border-right: 0.05em solid #ffffff; |
||||
} |
||||
|
||||
a { |
||||
display: block; |
||||
color: #ffffff; |
||||
text-align: center; |
||||
padding: 0.8125em 0.8125em; |
||||
} |
||||
|
||||
li a:hover { |
||||
background-color: #000000; |
||||
} |
||||
|
||||
.rss { |
||||
border-left: 0.05em solid #ffffff; |
||||
border-right: none; |
||||
float:right |
||||
} |
||||
} |
||||
|
||||
article { |
||||
max-width: 500px; |
||||
margin: 0 auto; |
||||
.title { |
||||
line-height: 1.4em; |
||||
text-align: center; |
||||
} |
||||
.divider { |
||||
background: #ddd; |
||||
background: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),color-stop(#ccc),to(rgba(255,255,255,0))); |
||||
background: -webkit-linear-gradient(left,rgba(255,255,255,0),#ccc,rgba(255,255,255,0)); |
||||
background: linear-gradient(to right,rgba(255,255,255,0),#ccc,rgba(255,255,255,0)); |
||||
height: 1px; |
||||
margin: 2em 0; |
||||
} |
||||
.center { |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
} |
||||
hr { |
||||
border: 0; |
||||
border-bottom: 1px solid #000; |
||||
margin: 30px 0; |
||||
} |
||||
p { |
||||
font-size: 22.5px; |
||||
line-height: 1.9em; |
||||
word-wrap: break-word; |
||||
} |
||||
.comment { |
||||
font-size: 22.5px; |
||||
line-height: 1.9em; |
||||
word-wrap: break-word; |
||||
padding-top: 5px; |
||||
padding-bottom: 5px; |
||||
.comment-headers { |
||||
font-style: italic; |
||||
font-weight: bold; |
||||
.index { |
||||
.post-list-div { |
||||
margin-top: 0.8125em; |
||||
margin-bottom: 0.8125em; |
||||
} |
||||
|
||||
.post-list-date { |
||||
float: right; |
||||
} |
||||
|
||||
.post-list-excerpt { |
||||
font-family: serif; |
||||
font-size: 0.8125em; |
||||
} |
||||
} |
||||
.tag-list { |
||||
font-size: 20px; |
||||
color: #555; |
||||
|
||||
a { |
||||
-webkit-transition-duration: 0.4s; |
||||
transition-duration: 0.4s; |
||||
white-space: nowrap; |
||||
text-decoration: none; |
||||
width: 30px; |
||||
height: 15px; |
||||
border-radius: 8px; |
||||
text-align: left; |
||||
color: #000000; |
||||
border: none; |
||||
background-color: #d6d6d6; |
||||
text-align: center; |
||||
} |
||||
a:hover { |
||||
background: #ffffff; |
||||
} |
||||
} |
||||
.footnote { |
||||
border: 0; |
||||
color: #0087BE; |
||||
} |
||||
.footnotes { |
||||
margin: 50px auto; |
||||
display: block; |
||||
p { |
||||
line-height: 1rem; |
||||
font-weight: normal; |
||||
} |
||||
ol { |
||||
margin: 0; |
||||
padding-left: 15px; |
||||
li { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.post-list-metadata { |
||||
background-color: #ffffff; |
||||
box-shadow: 0 0.203125em 0.203125em 0 grey, 0 0.203125em 0.203125em 0 grey; |
||||
} |
||||
.reversefootnote { |
||||
border: 0; |
||||
color: #0087BE; |
||||
|
||||
.post-list-metadata:hover { |
||||
background-color: #404040; |
||||
transition: 0.3s; |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tag-posts { |
||||
.tag-list { |
||||
ul { |
||||
margin-top: 0em; |
||||
margin-bottom: 0.40625em; |
||||
} |
||||
|
||||
li { |
||||
margin-top: 0.203125em; |
||||
margin-bottom: 0.40625em; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
border: none; |
||||
margin-top: 0em; |
||||
margin-left: 0.8125em; |
||||
padding: 0.40625em; |
||||
font-size: 0.8125em; |
||||
background-color: #ffffff; |
||||
border-radius: 0.8125em; |
||||
} |
||||
color: #000000; |
||||
} |
||||
|
||||
.back { |
||||
text-align: center; |
||||
a { |
||||
text-decoration: none; |
||||
margin: 40px auto 0; |
||||
display: inline-block; |
||||
padding: 10px; |
||||
border: 0; |
||||
&:before { |
||||
content: "<<"; |
||||
margin-right: 5px; |
||||
color: #000; |
||||
} |
||||
} |
||||
li a:hover { |
||||
background-color: #404040; |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
|
||||
.page-navigation, |
||||
.footer { |
||||
text-align: center; |
||||
max-width: 500px; |
||||
margin: 0 auto; |
||||