Style improvements
* Use gray background on blog post pages * Remove header on landing page * Add web font for DejaVu Sans ExtraLightpull/1/head
parent
8f21141fad
commit
c0725199d9
|
|
@ -1,8 +1,16 @@
|
|||
$dch-color: #09192f;
|
||||
|
||||
@font-face {
|
||||
font-family: 'DejaVu Sans';
|
||||
font-weight: 100;
|
||||
src: url("fonts/dejavusans-extralight.woff") format("woff");
|
||||
}
|
||||
|
||||
/* Global styles */
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: #09192f;
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -18,6 +26,10 @@ body {
|
|||
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
|
||||
}
|
||||
|
||||
body.index {
|
||||
background-color: $dch-color;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #ffffff;
|
||||
|
|
@ -41,6 +53,15 @@ h6 {
|
|||
}
|
||||
}
|
||||
|
||||
header.page-header {
|
||||
background-color: #09192f;
|
||||
box-shadow: 2px 2px 8px 0 #000000;
|
||||
z-index: 100;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
svg#dustin-logo {
|
||||
margin-bottom: -35px;
|
||||
}
|
||||
|
|
@ -51,21 +72,25 @@ svg#dustin-logo path {
|
|||
|
||||
nav.main-nav ul {
|
||||
list-style: none;
|
||||
margin-right: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav.main-nav li {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
border-right: 1px solid #ffffff;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav.main-nav li:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
nav.main-nav li a {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
nav.main-nav a:link,
|
||||
nav.main-nav a:visited,
|
||||
nav.main-nav a:active,
|
||||
|
|
@ -73,6 +98,10 @@ nav.main-nav a:hover {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav.main-nav li:hover {
|
||||
background-color: #333f58;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
|
||||
main.main-content {
|
||||
|
|
@ -84,12 +113,18 @@ main.main-content {
|
|||
}
|
||||
|
||||
main.main-content div.main-content {
|
||||
margin: auto;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 10in;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1000px) and (min-width: 1000px) {
|
||||
.index main.main-content div.main-content {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.home h1.my-name {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
|
@ -97,6 +132,7 @@ main.main-content div.main-content {
|
|||
font-weight: lighter;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
font-family: 'DejaVu Sans';
|
||||
}
|
||||
|
||||
.home ul.my-attributes {
|
||||
|
|
@ -125,6 +161,7 @@ main.main-content div.main-content {
|
|||
|
||||
.recent-posts h3.post-title {
|
||||
margin-bottom: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.recent-posts a {
|
||||
|
|
@ -135,18 +172,38 @@ main.main-content div.main-content {
|
|||
margin-bottom: 2.5em;
|
||||
}
|
||||
|
||||
.recent-posts a.post-summary {
|
||||
display: block;
|
||||
color: #eeeeee;
|
||||
}
|
||||
|
||||
.recent-posts a.post-summary:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.post {
|
||||
background-color: #282828;
|
||||
padding: 1rem;
|
||||
box-shadow: 1px 1px 8px 0 #000000;
|
||||
}
|
||||
|
||||
article.post .post-title {
|
||||
margin-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
article.post .post-date {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.post pre {
|
||||
margin: 0 .25em;
|
||||
padding: .25em .5em;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer.page-footer {
|
||||
font-size: 9pt;
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,7 +1,11 @@
|
|||
{% block init -%}
|
||||
{% set page_class = "" %}
|
||||
{% endblock -%}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
|
|
@ -11,12 +15,12 @@
|
|||
rel="stylesheet"
|
||||
href="{{ get_url(path='style.css', trailing_slash=false) }}"
|
||||
/>
|
||||
<style></style>
|
||||
<title>Dustin C. Hatch</title>
|
||||
{% block links %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="{{ page_class }}">
|
||||
{% block header %}
|
||||
<header class="page-header">
|
||||
<div class="logo">
|
||||
<a href="{{ config.base_url }}">
|
||||
|
|
@ -25,12 +29,13 @@
|
|||
</div>
|
||||
<nav class="main-nav">
|
||||
<ul>
|
||||
<li><a href="{{ config.base_url }}">Home</a></li>
|
||||
<li><a href="{{ get_url(path='/blog') }}">Blog</a></li>
|
||||
<li><a href="{{ config.base_url }}">Home</a></li
|
||||
><li><a href="{{ get_url(path='/blog') }}">Blog</a></li
|
||||
>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{% endblock header %}
|
||||
<main id="content" class="main-content" role="main">
|
||||
<div class="main-content">
|
||||
{% block content %}{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
{% extends "base.html" %}
|
||||
{% block init %}
|
||||
{% set page_class = "index" %}
|
||||
{% endblock%}
|
||||
{% block links %}
|
||||
<link rel="alternate" type="application/atom+xml" title="Atom Feed"
|
||||
href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
|
||||
{% endblock %}
|
||||
{% block header %}{% endblock %}
|
||||
{% block content %}
|
||||
<section class="home">
|
||||
<h1 class="my-name">Dustin C. Hatch</h1>
|
||||
|
|
@ -16,17 +20,17 @@
|
|||
<h2>Recent Posts</h2>
|
||||
{% set blog = get_section(path="blog/_index.md") %}
|
||||
{% for page in blog.pages | slice(end=3) %}
|
||||
<div class="post-summary">
|
||||
<h3 class="post-title"><a href="{{ page.path }}">{{ page.title }}</a></h3>
|
||||
<a href="{{ page.path }}" class="post-summary">
|
||||
<h3 class="post-title">{{ page.title }}</h3>
|
||||
<div class="post-date">
|
||||
<time datetime="{{ page.date }}">{{ page.date | date(format="%b %d") }}</time>
|
||||
<time datetime="{{ page.date }}">{{ page.date | date(format="%d %b %Y") }}</time>
|
||||
</div>
|
||||
{% if page.summary %}
|
||||
<p>{{ page.summary }}</p>
|
||||
{% else %}
|
||||
<p>{{ page.content | striptags | split(pat=" ") | slice(end=20) | join(sep=" ") | safe }}{% if page.word_count > 20 %}…{% endif %}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue