Finished new template.
h3rald h3rald@h3rald.com
Sun, 15 Apr 2018 18:17:10 +0200
11 files changed,
195 insertions(+),
155 deletions(-)
jump to
M
assets/styles/style.css
→
assets/styles/style.css
@@ -33,6 +33,10 @@
--primary-background: #fefefe; --light-background: #f5f5f5; --dark-background: #32373d; + + --success-color: #10a887; + --warning-color: #F17F42; + --error-color: #da3c3c; } html {@@ -96,6 +100,13 @@ margin-bottom: calc(var(--leading) * 0);
} a, b, i, strong, em, small, code { line-height: calc(var(--leading) * 0); +} +pre, code { + font-family: 'Hack', monospace; +} +code.hljs { + font-size: calc(var(--base-font-size) * 0.75); + line-height: calc(var(--leading) * 0.75); } small, sub, sup, time, .panel-header, hr::before, footer { font-size: calc(var(--base-font-size) * 0.75);@@ -153,6 +164,7 @@ }
.content { border-radius: 4px; padding: 0 calc(var(--leading) * 0.5); + padding-bottom: calc(var(--leading) * 0.25); } .container-fluid { padding: 0 calc(var(--leading) * 0.5);@@ -188,6 +200,28 @@ display:block;
text-align: center; } +.card:last-child .card-footer::after { + content: none; +} + +.card-footer { + text-align: center; + margin: auto; +} + +.label { + padding: calc(var(--leading) * 0.15); + border-radius: 2px; +} + +.card-footer .action::after { + content: '\00B7'; +} + +.card-footer .action:last-child::after { + content: none; +} + .panel-header { text-align: right; }@@ -221,6 +255,19 @@ font-size: 0.85rem; /* Compensate */
vertical-align: text-bottom; } +.clearfix { + clear: both; +} + +img { + max-width: 100%; +} + +pre code, img { + border-radius: 4px; +} + + /***** * THEME@@ -273,37 +320,26 @@ .sidebar hr, .main hr, .panel-header {
color: var(--secondary-inverted-text-color); } - -/* - - -354871 +.label { + color: var(--primary-inverted-text-color); +} -A22600 - - * */ - -code, pre { - color: #333; - background-color: #f8f8f8; - font-family: 'Hack', monospace; +.label-success { + background: var(--success-color); } -pre code { - border: 1px solid #CBD0F0; +.label-warning { + background: var(--warning-color); } -.clearfix { - clear: both; +.label-error { + background: var(--error-color); } -img { - max-width: 100%; - border: 1px solid #CBD0F0; +code, pre { + background-color: var(--light-background); } -.projects .badge[data-badge]::after { - transform: translate(0rem,-.1rem); - vertical-align: baseline; - font-weight: normal; +pre code, img { + border: 1px solid var(--line-color); }
M
contents/h3rald.html
→
contents/h3rald.html
@@ -6,7 +6,7 @@ github: h3rald
active: true home: /h3rald/ summary: "This very web site, in its 9th incarnation. H3RALD.com has been operative since 2004 and through the years its backend changed from being pure vanilla HTML, to server-side PHP (Prado and CakePHP) to Ruby (Rails, Nanoc), and finally Nim (HastySite)." -version: 9.0.0 +version: 9.1.0 ----- <p>The H3RALD.com domain was bought in March 2004 and since than has always been my home on the Internet. Through the years, a total of 9 major versions of this web site has been released, each featuring some change in the backend.</p> <p>Currently, this site is fully static (minus a few AJAX calls) and is powered by my very own static site generator, HastySite (soon to be released) and by <a href="/litestore/">LiteStore</a> (for the archive search functionality).</p>@@ -30,7 +30,7 @@ <ul>
<li>Web Server: <a href="http://wiki.nginx.org/Main">Nginx</a></li> <li>Database: <a href="/litestore/">LiteStore</a> (for the archive search functionality only)</li> <li>Framework/<span class="caps">CMS</span>/Other: HastySite (static site generator)</li> - <li>Programming Language: <a href="https://nim-lang.org">Nim</a></li> + <li>Programming Language: <a href="https://nim-lang.org">Nim</a>, <a href="https://min-lang-org">min</a></li> </ul> </div> </div>
M
templates/_archives.mustache
→
templates/_archives.mustache
@@ -1,54 +1,29 @@
<div class="container archives"> - <div class="input-group archives-search"> + <!-- <input type="text" class="form-input search-input" placeholder="Search articles..."> - <button class="btn input-group-btn clear-button d-none"><i class="ent ent-circle-with-cross"></i></button> - <button class="btn btn-primary input-group-btn search-button"><i class="ent ent-magnifying-glass"></i></button> - </div> + <a class="clear-button d-none"><i class="ent ent-circle-with-cross"></i></a> + <a class="search-button"><i class="ent ent-magnifying-glass"></i></a> <div class="loading clearfix"></div> <div class="no-search-results d-none clearfix"> <div class="empty"> <p class="empty-title h5">No results found</p> <p class="empty-subtitle">There are no articles matching your query.</p> - <div class="empty-action"> - <button class="btn btn-primary archives-button">Go back</button> - </div> + <a class="archives-button">← Go back</a> </div> </div> <div class="search-results d-none clearfix"> </div> + --> <div class="timeline clearfix d-none"> {{#archives}} - <div class="timeline-item"> - <div class="timeline-left"> - <div class="timeline-icon icon-lg"> - <i class="ent ent-calendar"></i> - </div> - </div> - <div class="timeline-content"> - <div class="tile"> - <div class="tile-content"> - <p class="tile-subtitle">{{month}}</p> - </div> - </div> - </div> - </div> + <h3>{{month}}</h3> + <ul> {{#articles}} - <div class="timeline-item"> - <div class="timeline-left"> - <div class="timeline-icon"> - </div> - </div> - <div class="timeline-content"> - <div class="tile"> - <div class="tile-content"> - <p class="tile-subtitle"> - {{date}} — <a href="/{{id}}">{{title}}</a> - </p> - </div> - </div> - </div> - </div> + <li> + {{date}} — <a href="/{{id}}">{{title}}</a> + </li> {{/articles}} + </ul> {{/archives}} </div> </div>
A
templates/_highlight.mustache
@@ -0,0 +1,5 @@
+<script src="/js/highlight.pack.js"></script> +<script> + hljs.configure({tabReplace: ' '}); + hljs.initHighlightingOnLoad(); +</script>
M
templates/_page_header.mustache
→
templates/_page_header.mustache
@@ -1,6 +1,6 @@
<header class="col-md-9"> <h2>{{title}}</h2> {{#subtitle}} - <h3>{{subtitle}}</h3> + <p class="primary-subtitle">{{subtitle}}</p> {{/subtitle}} </header>
M
templates/_project.mustache
→
templates/_project.mustache
@@ -1,14 +1,14 @@
- <div class="card project-card"> + <div class="card"> <div class="card-header"> <div class="card-title h5"> - {{title}} {{#active}} <small class="label label-success">active</small> {{/active}} {{#inactive}} <small class="label label-warning">inactive</small> {{/inactive}} - <span class="badge" data-badge="v{{version}}"></span> + {{title}} + · v{{version}} </div> </div> <div class="card-body">@@ -16,20 +16,20 @@ {{summary}}
</div> <div class="card-footer"> {{#home}} - <a href="{{home}}" class="btn btn-link"> + <a href="{{home}}" class="action"> info </a> {{/home}} {{#github}} - <a href="https://github.com/h3rald/{{github}}" class="btn btn-link"> + <a href="https://github.com/h3rald/{{github}}" class="action"> source </a> - <a href="https://github.com/h3rald/{{github}}/issues" class="btn btn-link"> + <a href="https://github.com/h3rald/{{github}}/issues" class="action"> issues </a> {{/github}} {{#docs}} - <a href="{{docs}}" class="btn btn-link"> + <a href="{{docs}}" class="action"> docs </a> {{/docs}}
M
templates/article.mustache
→
templates/article.mustache
@@ -1,26 +1,30 @@
<!DOCTYPE html> <html lang="en"> {{> _head}} - <body> - <div id="wrap"> - {{> _header}} - <main class="container"> - <article class="{{content-type}}"> - <div class="row"> - {{> _page_header}} - <time datetime="{{date-iso8601}}"><i class="ent ent-calendar"></i> {{date}}</time> - </div> + <body> + <div class="main container-fluid"> + <div class="row"> + <div class="col-xs-12 sidebar"> + {{> _header}} + </div> + </div> + <div class="row"> + <div class="col-xs-12"> + <article class="{{content-type}} box content"> + {{> _page_header}} + <time datetime="{{date-iso8601}}"><i class="ent ent-calendar"></i> {{date}}</time> <div class="body-text" class="hyphenate"> {{{contents}}} - </div> - </article> - </main> - {{> _footer}} - </div> - <script src="/js/highlight.pack.js"></script> - <script> - hljs.configure({tabReplace: ' '}); - hljs.initHighlightingOnLoad(); - </script> - </body> + </div> + </article> + </div> + </div> + <div class="row"> + <div class="col-xs-12"> + {{> _footer}} + </div> + </div> + </div> + {{> _highlight}} + </body> </html>
M
templates/page.mustache
→
templates/page.mustache
@@ -1,20 +1,28 @@
<!DOCTYPE html> <html lang="en"> {{> _head}} - <body> - <div id="wrap"> - {{> _header}} - <main id="main" class="container"> - <article class="{{content-type}}"> - <div class="row"> - {{> _page_header}} - </div> + <body> + <div class="main container-fluid"> + <div class="row"> + <div class="col-xs-12 sidebar"> + {{> _header}} + </div> + </div> + <div class="row"> + <div class="col-xs-12"> + <article class="{{content-type}} box content"> + {{> _page_header}} <div id="body-text" class="hyphenate"> {{{contents}}} - </div> - </article> - </main> - {{> _footer}} - </div> - </body> + </div> + </article> + </div> + </div> + <div class="row"> + <div class="col-xs-12"> + {{> _footer}} + </div> + </div> + </div> + </body> </html>
M
templates/project.mustache
→
templates/project.mustache
@@ -2,45 +2,49 @@ <!DOCTYPE html>
<html lang="en"> {{> _head}} <body> - <div id="wrap"> - {{> _header}} - <main class="container"> - <article class="{{content-type}}"> + <div class="main container-fluid"> <div class="row"> - {{> _page_header}} + <div class="col-xs-12 sidebar"> + {{> _header}} + </div> </div> - {{#github}} - <div class="card project-card"> - <div class="card-footer"> - <a href="https://github.com/h3rald/{{github}}" class="btn btn-link"> - source - </a> - <a href="https://github.com/h3rald/{{github}}/issues" class="btn btn-link"> - issues - </a> - {{#docs}} - <a href="{{docs}}" class="btn btn-link"> - docs - </a> - {{/docs}} - <br/> - <img src="https://img.shields.io/github/release/h3rald/{{github}}/all.svg" style="vertical-align: middle;"/> - <img src="https://img.shields.io/github/license/h3rald/{{github}}.svg" style="vertical-align: middle;"/> - <img src="https://img.shields.io/github/last-commit/h3rald/{{github}}.svg" style="vertical-align: middle;"/> + <div class="row"> + <div class="col-xs-12"> + <article class="{{content-type}} box content"> + {{> _page_header}} + {{#github}} + <div class="card project-card"> + <div class="card-footer"> + <a href="https://github.com/h3rald/{{github}}" class="action"> + source + </a> + <a href="https://github.com/h3rald/{{github}}/issues" class="action"> + issues + </a> + {{#docs}} + <a href="{{docs}}" class="action"> + docs + </a> + {{/docs}} + <br/> + <img src="https://img.shields.io/github/release/h3rald/{{github}}/all.svg" style="vertical-align: middle;"/> + <img src="https://img.shields.io/github/license/h3rald/{{github}}.svg" style="vertical-align: middle;"/> + <img src="https://img.shields.io/github/last-commit/h3rald/{{github}}.svg" style="vertical-align: middle;"/> + </div> + </div> + {{/github}} + <div class="hyphenate"> + {{{contents}}} + </div> + </article> </div> </div> - {{/github}} - <div class="body-text" class="hyphenate"> - {{{contents}}} + <div class="row"> + <div class="col-xs-12"> + {{> _footer}} + </div> </div> - </article> - </main> - {{> _footer}} - </div> - <script src="/js/highlight.pack.js"></script> - <script> - hljs.configure({tabReplace: ' '}); - hljs.initHighlightingOnLoad(); - </script> + </div> + {{> _highlight}} </body> </html>
M
templates/projects.mustache
→
templates/projects.mustache
@@ -1,25 +1,33 @@
<!DOCTYPE html> <html lang="en"> {{> _head}} - <body> - <div id="wrap"> - {{> _header}} - <main id="main" class="container"> - <article class="projects"> - <div class="row"> - {{> _page_header}} - </div> - <div class="body-text hyphenate"> + <body> + <div class="main container-fluid"> + <div class="row"> + <div class="col-xs-12 sidebar"> + {{> _header}} + </div> + </div> + <div class="row"> + <div class="col-xs-12"> + <article class="{{content-type}} box content"> + {{> _page_header}} + <div id="body-text" class="hyphenate"> {{#active-projects}} {{> _project}} {{/active-projects}} {{#inactive-projects}} {{> _project}} {{/inactive-projects}} - </div> - </article> - </main> - {{> _footer}} - </div> - </body> + </div> + </article> + </div> + </div> + <div class="row"> + <div class="col-xs-12"> + {{> _footer}} + </div> + </div> + </div> + </body> </html>