dustin
/
dustin.web
1
0
Fork 0
Code Pull Requests Releases Activity

Style improvements 

* Use gray background on blog post pages
* Remove header on landing page
* Add web font for DejaVu Sans ExtraLight
pull/1/head
Dustin 2021-07-28 20:22:41 -05:00
parent 8f21141fad
commit c0725199d9
4 changed files with 83 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
sass/style.scss
View File

@ -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 */ /* Global styles */
html, html,
body { body {
background-color: #09192f; background-color: #121212;
color: #ffffff; color: #ffffff;
box-sizing: border-box; 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 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:link,
a:visited { a:visited {
color: #ffffff; 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 { svg#dustin-logo {
margin-bottom: -35px; margin-bottom: -35px;
} }
@ -51,21 +72,25 @@ svg#dustin-logo path {
nav.main-nav ul { nav.main-nav ul {
list-style: none; list-style: none;
margin-right: 1em; margin: 0;
padding: 0; padding: 0;
} }
nav.main-nav li { nav.main-nav li {
display: inline; display: inline-block;
margin: 0; margin: 0;
padding: 0 1em; padding: 0;
border-right: 1px solid #ffffff;
} }
nav.main-nav li:last-child { nav.main-nav li:last-child {
border-right: none; border-right: none;
} }
nav.main-nav li a {
display: block;
padding: 1em;
}
nav.main-nav a:link, nav.main-nav a:link,
nav.main-nav a:visited, nav.main-nav a:visited,
nav.main-nav a:active, nav.main-nav a:active,
@ -73,6 +98,10 @@ nav.main-nav a:hover {
text-decoration: none; text-decoration: none;
} }
nav.main-nav li:hover {
background-color: #333f58;
}
/* Body */ /* Body */
main.main-content { main.main-content {
@ -84,12 +113,18 @@ main.main-content {
} }
main.main-content div.main-content { main.main-content div.main-content {
margin: auto; margin: 0 auto;
width: 100%; width: 100%;
max-width: 10in; max-width: 10in;
padding: 0 1em; 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 { .home h1.my-name {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@ -97,6 +132,7 @@ main.main-content div.main-content {
font-weight: lighter; font-weight: lighter;
text-align: center; text-align: center;
margin-bottom: 0; margin-bottom: 0;
font-family: 'DejaVu Sans';
} }
.home ul.my-attributes { .home ul.my-attributes {
@ -125,6 +161,7 @@ main.main-content div.main-content {
.recent-posts h3.post-title { .recent-posts h3.post-title {
margin-bottom: 0; margin-bottom: 0;
text-decoration: underline;
} }
.recent-posts a { .recent-posts a {
@ -135,18 +172,38 @@ main.main-content div.main-content {
margin-bottom: 2.5em; margin-bottom: 2.5em;
} }
.recent-posts a.post-summary {
display: block;
color: #eeeeee;
}
.recent-posts a.post-summary:hover {
color: #ffffff;
}
.post-date { .post-date {
font-size: 10pt; font-size: 10pt;
} }
.post {
background-color: #282828;
padding: 1rem;
box-shadow: 1px 1px 8px 0 #000000;
}
article.post .post-title { article.post .post-title {
margin-bottom: 0; margin: 0;
} }
article.post .post-date { article.post .post-date {
margin-bottom: 3em; margin-bottom: 3em;
} }
.post pre {
margin: 0 .25em;
padding: .25em .5em;
}
/* Footer */ /* Footer */
footer.page-footer { footer.page-footer {
font-size: 9pt; font-size: 9pt;

BIN
static/fonts/dejavusans-extralight.woff Normal file
View File

Binary file not shown.

15
templates/base.html
View File

@ -1,7 +1,11 @@
{% block init -%}
{% set page_class = "" %}
{% endblock -%}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link <link
rel="stylesheet" rel="stylesheet"
@ -11,12 +15,12 @@
rel="stylesheet" rel="stylesheet"
href="{{ get_url(path='style.css', trailing_slash=false) }}" href="{{ get_url(path='style.css', trailing_slash=false) }}"
/> />
<style></style>
<title>Dustin C. Hatch</title> <title>Dustin C. Hatch</title>
{% block links %}{% endblock %} {% block links %}{% endblock %}
</head> </head>
<body> <body class="{{ page_class }}">
{% block header %}
<header class="page-header"> <header class="page-header">
<div class="logo"> <div class="logo">
<a href="{{ config.base_url }}"> <a href="{{ config.base_url }}">
@ -25,12 +29,13 @@
</div> </div>
<nav class="main-nav"> <nav class="main-nav">
<ul> <ul>
<li><a href="{{ config.base_url }}">Home</a></li> <li><a href="{{ config.base_url }}">Home</a></li
<li><a href="{{ get_url(path='/blog') }}">Blog</a></li> ><li><a href="{{ get_url(path='/blog') }}">Blog</a></li
>
</ul> </ul>
</nav> </nav>
</header> </header>
{% endblock header %}
<main id="content" class="main-content" role="main"> <main id="content" class="main-content" role="main">
<div class="main-content"> <div class="main-content">
{% block content %}{% endblock %} {% block content %}{% endblock %}

12
templates/index.html
View File

@ -1,8 +1,12 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block init %}
{% set page_class = "index" %}
{% endblock%}
{% block links %} {% block links %}
<link rel="alternate" type="application/atom+xml" title="Atom Feed" <link rel="alternate" type="application/atom+xml" title="Atom Feed"
href="{{ get_url(path="atom.xml", trailing_slash=false) }}"> href="{{ get_url(path="atom.xml", trailing_slash=false) }}">
{% endblock %} {% endblock %}
{% block header %}{% endblock %}
{% block content %} {% block content %}
<section class="home"> <section class="home">
<h1 class="my-name">Dustin C. Hatch</h1> <h1 class="my-name">Dustin C. Hatch</h1>
@ -16,17 +20,17 @@
<h2>Recent Posts</h2> <h2>Recent Posts</h2>
{% set blog = get_section(path="blog/_index.md") %} {% set blog = get_section(path="blog/_index.md") %}
{% for page in blog.pages | slice(end=3) %} {% for page in blog.pages | slice(end=3) %}
<div class="post-summary"> <a href="{{ page.path }}" class="post-summary">
<h3 class="post-title"><a href="{{ page.path }}">{{ page.title }}</a></h3> <h3 class="post-title">{{ page.title }}</h3>
<div class="post-date"> <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> </div>
{% if page.summary %} {% if page.summary %}
<p>{{ page.summary }}</p> <p>{{ page.summary }}</p>
{% else %} {% else %}
<p>{{ page.content | striptags | split(pat=" ") | slice(end=20) | join(sep=" ") | safe }}{% if page.word_count > 20 %}…{% endif %}</p> <p>{{ page.content | striptags | split(pat=" ") | slice(end=20) | join(sep=" ") | safe }}{% if page.word_count > 20 %}…{% endif %}</p>
{% endif %} {% endif %}
</div> </a>
{% endfor %} {% endfor %}
</div> </div>
</section> </section>