Continue redesign
This commit is contained in:
Bill Niblock
parent
fe5610ad70
commit
7285356d64
3 changed files with 127 additions and 97 deletions
|
|
@ -27,24 +27,19 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="pure-g pure-u-1-5 menu">
|
||||
<div class="pure-u-1">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>Projects</li>
|
||||
<ul id="projects">
|
||||
{% for pr in site.projects limit:3 %}
|
||||
<li>{{ pr.title }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<li>Posts</li>
|
||||
<ul id="posts">
|
||||
{% for post in site.posts limit:3 %}
|
||||
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</ul>
|
||||
<div class="pure-u-1" id="tags">
|
||||
</div>
|
||||
<div class="pure-g" id="footer">
|
||||
<div class="pure-u-1" id="about">
|
||||
<h2>The Site</h2>
|
||||
<p>This site is a small slice of internet real-estate that I use for
|
||||
occasional writing. Nothing I say is visionary or profound. I
|
||||
will tend to focus on technology, gaming, and philosophy.</p>
|
||||
<h2>The Vagabond</h2>
|
||||
<p>My name is Bill Niblock. I'm a computer scientist by education, a
|
||||
technologist by trade, a gamer by hobby, and a philosopher by
|
||||
mistake.</p>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<a href="https://github.com/VagabondAzulien">
|
||||
<img src="{{ site.url }}/src/images/github_light.png"
|
||||
|
|
|
|||
38
index.html
38
index.html
|
|
@ -3,31 +3,13 @@
|
|||
tabtitle: Home
|
||||
---
|
||||
|
||||
<article>
|
||||
<h1>Welcome</h1>
|
||||
<p>Welcome to The Internet Vagabond, a small slice of Internet
|
||||
real-estate for Bill Niblock. Nothing I say is visionary or
|
||||
profound, and sometimes it makes sense. You can find a list of
|
||||
any posts and projects I've made available in the menu on the right.
|
||||
Just click the menu button in the upper-right to view it.</p>
|
||||
|
||||
<h2>About the Site</h2>
|
||||
<p>The Internet Vagabond is a simple website I use for the rare
|
||||
blog posts I make, information about me and the projects I work
|
||||
on, and a digital plot of e-land. It is programmed as much in
|
||||
HTML and CSS as possible, and designed with a small footprint.
|
||||
The site is hosted on GitHub, and utilizes Jekyll for further
|
||||
organization and optimization. If you're interested in more
|
||||
technical details, check out the GitHub Project page for this
|
||||
repository [WIP]. You can easily get to it via the menu on the right.</p>
|
||||
|
||||
<h2>About the Vagabond</h2>
|
||||
<p>I'm a computer scientist by education, a technologist by
|
||||
trade, a gamer by hobby, a philosopher by choice, and the list goes
|
||||
on. I'm quite fond of Linux, in particular the command line, and the myriad
|
||||
of fascinating and intricate programs which call them home. I'm an avid
|
||||
gamer, though I tend to shy away from the AAA releases. I am actively
|
||||
pursuing a better understanding of Stoicism, and, more generally, our
|
||||
universe. Learning is my ultimate passion, and I act accordingly to live my
|
||||
passions every day.</p>
|
||||
</article>
|
||||
{% for post in site.posts %}
|
||||
<div id="posts">
|
||||
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
|
||||
<div class="pure-g" id="details">
|
||||
<div class="pure-u-1-2" id="date">Published: {{ post.date }}</div>
|
||||
<div class="pure-u-1-2" id="tags">Tagged: {{ post.tags }}</div>
|
||||
</div>
|
||||
<div id="desc">{{ post.short_desc }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
|
|||
133
src/styles.css
133
src/styles.css
|
|
@ -16,7 +16,7 @@ a,a:visited,a:link,a:focus {
|
|||
}
|
||||
|
||||
a:hover {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**********
|
||||
|
|
@ -78,6 +78,26 @@ a:hover {
|
|||
color: darkgrey;
|
||||
}
|
||||
|
||||
#about {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
#about p {
|
||||
line-height: 1.5em; letter-spacing: 0.1em;
|
||||
text-align: left;
|
||||
padding: 0em 1em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#about h2 {
|
||||
text-align: right;
|
||||
padding: 10px;
|
||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.6em;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position: absolute; bottom: 1em; left: 0px; right: 0px;
|
||||
text-align: center;
|
||||
|
|
@ -89,49 +109,21 @@ a:hover {
|
|||
color: darkgrey;
|
||||
}
|
||||
|
||||
/********
|
||||
* *
|
||||
* Body *
|
||||
* *
|
||||
/*********
|
||||
* Index *
|
||||
********/
|
||||
#content {
|
||||
margin: 0em 5em;
|
||||
|
||||
#posts a,a:visited,a:link,a:focus {
|
||||
color: darkgrey;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
article {
|
||||
margin: 50px auto; padding: 10px;
|
||||
line-height: 1.5em; letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
padding: 10px;
|
||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.5em;
|
||||
}
|
||||
|
||||
article h1::first-letter {
|
||||
margin: 0px; padding: 0px;
|
||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
#posts a:hover {
|
||||
font-style: normal;
|
||||
color: white;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid darkgrey;
|
||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.6em;
|
||||
}
|
||||
|
||||
article h3 {
|
||||
text-align: right;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid darkgrey;
|
||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.6em;
|
||||
}
|
||||
|
||||
article h4 {
|
||||
#posts #details {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
border-top: 1px solid darkgrey;
|
||||
|
|
@ -139,7 +131,68 @@ article h4 {
|
|||
color: darkgrey; letter-spacing: 0.4em;
|
||||
}
|
||||
|
||||
article p {
|
||||
padding: 0px 25px;
|
||||
#posts #date {
|
||||
text-align: left;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#posts #tags {
|
||||
text-align: right;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#posts #desc {
|
||||
padding: 0em 2em 2em 2em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/********
|
||||
* *
|
||||
* Blog *
|
||||
* *
|
||||
********/
|
||||
#content {
|
||||
margin: 5em;
|
||||
line-height: 1.5em; letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
#content h1 {
|
||||
padding: 10px;
|
||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.5em;
|
||||
}
|
||||
|
||||
#content h1::first-letter {
|
||||
margin: 0px; padding: 0px;
|
||||
font: 1.2em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#content h2 {
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid darkgrey;
|
||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.6em;
|
||||
}
|
||||
|
||||
#content h3 {
|
||||
text-align: right;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid darkgrey;
|
||||
font: 1.0em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.6em;
|
||||
}
|
||||
|
||||
#content h4 {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
border-top: 1px solid darkgrey;
|
||||
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||
color: darkgrey; letter-spacing: 0.4em;
|
||||
}
|
||||
|
||||
#content p {
|
||||
padding: 0em 2em;
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue