Small design and layout tweaks

This commit is contained in:
Wesley Moore 2018-08-19 09:18:26 +10:00
parent 7659eeb4f1
commit 0dcb34a4d6
No known key found for this signature in database
GPG key ID: BF67766C0BC2D0EE
10 changed files with 42 additions and 49 deletions

1
Rules
View file

@ -48,6 +48,7 @@ end
compile '*' do
filter :rdiscount
layout 'page'
layout 'default'
filter :rubypants
end

View file

@ -1,4 +1,5 @@
$ans-serif: Carlito, Calibri, sans-serif
$header-colour: #242424
body
font-family: $ans-serif
@ -134,7 +135,7 @@ body > header
font-size: 18px
color: white
padding: 0.5em
background: #1C1C1C
background-color: $header-colour
a
-webkit-transition: border-bottom-color 500ms ease-out
@ -147,16 +148,16 @@ body > header
&:hover
border-bottom-color: rgba(255, 255, 255, 1.0)
span
display: none
#menu
float: right
padding-right: 0.25em
li
font-size: inherit
font-size: 14px
font-weight: bold
text-transform: uppercase
letter-spacing: 0.5px
#content
@ -303,17 +304,12 @@ body.articles #content nav
#respond
margin-top: 10px
padding: 10px
background-color: #ddd
margin: 3em 0
clear: both
h2
margin-top: 0
.short
font-size: smaller
#content
.published
font-family: $ans-serif
@ -521,13 +517,10 @@ body.weather
body
font-size: 20px
body > header span
float: right
display: inline
cursor: pointer
body > header
text-align: center
#menu
display: none
float: none
padding: 0.5em 0 0 0
line-height: 2

View file

@ -1,17 +1,20 @@
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0" />
<title><%=h [@item[:title], 'WezM.net by Wesley Moore'].compact.join(' - ') %></title>
<meta name="author" content="Wesley Moore" />
<% if @item[:extra] %><meta name="description" content="<%=h @item[:extra] %>"><% end %>
<% if @item[:keywords] %><meta name="keywords" content="<%=h @item[:keywords].join(',') %>"><% end %>
<!--[if lt IE 9]>
<script src="/js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/css/prettyPhoto.css?v=3.0.1" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="/css/reset.css" type="text/css" />
<link rel="stylesheet" href="/css/screen.css" type="text/css" />
<link rel="stylesheet" href="/css/rouge.css" type="text/css" />
<link rel="stylesheet" href="/css/prettyPhoto.css?v=3.0.1" type="text/css" charset="utf-8" />
<link rel="alternate" href="/feed/" type="application/atom+xml" title="WezM.net - All Articles" />
<link rel="alternate" href="/technical/feed/" type="application/atom+xml" title="WezM.net - Technical Articles" />
<link rel="alternate" href="/personal/feed/" type="application/atom+xml" title="WezM.net - Personal Articles" />
<link rel="author" href="http://www.wezm.net/" />
<script src="/js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.timers-1.1.2.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.prettyPhoto.js?v=3.0.1" type="text/javascript" charset="utf-8"></script>

View file

@ -1,12 +1,11 @@
<header>
<a href="/">WezM<sup>.net</sup></a>
<span>Menu</span>
<nav id="menu" class="inline">
<li><a href="/articles/">Articles</a></li>
<li><a href="/articles/">Archive</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/projects/">Projects</a></li>
<li>
<a href="/feed/"><img src="/images/feed-icon.svg" width="12" height="12" alt="White Feed Icon" /></a>&nbsp;<a href="/feed/">Feed</a>
<a href="/feed/"><img src="/images/feed-icon.svg" width="12" height="12" alt="White Feed Icon" />&nbsp;Feed</a>
</li>
</nav>
</header>

View file

@ -1,24 +1,19 @@
<% post_date = WezM::Helpers.parse_post_date(@item) %>
<% short = @item[:short_url] %>
<div class="published">
Published on
<abbr class="calender date" title="<%= post_date.iso8601 %>">
<span class="weekday"><%= post_date.strftime('%a') %></span>,
<span class="day"><%= post_date.day %></span>
<span class="month"><%= post_date.strftime('%B') %></span>
<span class="year"><%= post_date.year %></span>
</abbr>
</div>
<%= yield %>
<div id="respond">
<h2>
<img src="/images/comment.svg" width="32" height="32" alt="Comment icon" class="comment align-top" />
Stay in touch!
</h2>
<p>Follow me on <a href="https://twitter.com/wezm">Twitter</a>, or <a href="https://mastodon.social/@wezm">Mastodon</a>, <a href="/feed/">subscribe to the feed</a>, or <a href="mailto:wes@wezm.net">send me an email</a>.
</p>
<div class="text-right">
<span class="short">Short URL: <a href="<%= short %>"><%= short %></a></span>
<article>
<header>
<h1><a href="<%= @item.reps[:default].path %>"><%=h @item[:title] %></a></h1>
<div class="published">
Published on
<time datetime="<%= post_date.iso8601 %>"><%= post_date.strftime('%a, %d %B %Y') %></time>
</div>
</header>
<%= yield %>
<div id="respond">
<h2>
<img src="/images/comment.svg" width="32" height="32" alt="Comment icon" class="comment align-top" />
Stay in touch!
</h2>
<p>Follow me on <a href="https://twitter.com/wezm">Twitter</a>, or <a href="https://mastodon.social/@wezm">Mastodon</a>, <a href="/feed/">subscribe to the feed</a>, or <a href="mailto:wes@wezm.net">send me an email</a>.
</p>
</div>
</div>
</article>

View file

@ -12,7 +12,6 @@
<body<%= %Q( class="#{@item[:body_class]}") if @item[:body_class] %>>
<%= render '_header' %>
<div id="content">
<h1><a href="<%= @item.reps[:default].path %>"><%=h @item[:title] %></a></h1>
<%= yield %>
</div>
<%= render '_footer' %>

4
layouts/page.html Normal file
View file

@ -0,0 +1,4 @@
<div id="content">
<h1><a href="<%= @item.reps[:default].path %>"><%=h @item[:title] %></a></h1>
<%= yield %>
</div>

2
layouts/page.yaml Normal file
View file

@ -0,0 +1,2 @@
--- {}

View file

@ -2,6 +2,7 @@
# before nanoc starts compiling.
require 'json'
require 'rouge'
include Nanoc::Helpers::Rendering
include Nanoc::Helpers::Blogging

View file

@ -1,8 +1,4 @@
jQuery(function() {
$('body > header span').click(function() {
$('#menu').slideToggle('normal');
})
/*** Article Search ***/
function reset_search() {
$('#articles li').css({height: 'auto', opacity: 1.0});