Images and fonts

content/Web Development/email-deliverability.md

 Title: Email Deliverability
 Date: November 1, 2015
-
-<img src="/media/mailbox-on-the-street.jpg" class="inline-left" alt="a red mailbox">
+Cover: /media/postbox.jpg
 
 Email may be simple conceptually, but actually getting a message to a recipient's inbox seems to get harder every year. This is primarily caused by the arms race between mail service providers and spammers, phishers, and other bad actors. New offensive tactics lead to new defensive tactics, in the form of new protocols and rules. For the innocent server admin sending a few notifications, this results in quite a game of catch-up.
 

content/Web Development/setting-up-debian-8.md

 Title: Setting up a Debian 8 development machine
 Description: My process for setting up a new development server.
 Date: May 7, 2015 18:17
+Cover: /media/debian.jpg
 
 This post was going to be a note in Evernote, but [their](http://chrisshattuck.com/blog/adding-syntax-highlighting-code-snippets-evernote) [interface](https://discussion.evernote.com/topic/44714-request-embed-code-snippets-with-auto-formatting-and-syntax-highlighting/) [is](http://www.quora.com/The-best-way-to-make-Evernote-support-Code-Syntax-Highlighting-and-Formatting) [completely](https://discussion.evernote.com/topic/67201-feature-request-syntax-highlighting-for-code/) [unusable](https://discussion.evernote.com/topic/40770-quick-way-to-format-text-that-is-a-code-snippet/) for storing code, so it's going here. These are steps I took to set up a [Debian 8](https://www.debian.org/News/2015/20150426) server for personal websites, perhaps small web apps, and other projects in PHP and Python.
 

content/pages/_home.md

@@ -6,7 +6,7 @@ Save_As: index.html
 Description: I'm Anton, and I have a passion for solving problems with technology. I'm an experienced full-stack developer, currently employed by Rutgers OIT. This is my personal site.
 
 <p style="margin: -1em 0;">
-    <img src="/media/thumbnails/300x_/anton-sc-close.png" class="inline-right" style="width:150px;">
+    <img src="/media/thumbnails/300x_/anton-sc-close.png" class="inline-right profile">
 </p>
 
 ### Hi! My name is Anton.

pelicanconf.py

@@ -5,7 +5,6 @@ from __future__ import unicode_literals
 AUTHOR = 'Anton Sarukhanov'
 SITENAME = 'Anton Sarukhanov'
 SITESUBTITLE = 'Full-Stack Developer'
-PROFILE_IMG = '/media/anton-sc-close.png'
 
 PLUGINS = ['advthumbnailer']
 

theme/static/css/style.css

+/********** Fonts **********/
+@font-face {
+    font-family: 'Asap';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Asap'),
+        local('Asap-Regular'),
+        url(../fonts/asap/Asap-Regular.ttf) format('truetype'),
+        url(../fonts/asap/Asap-Regular.woff) format('woff'),
+        url(../fonts/asap/Asap-Regular.eot) format('embedded-opentype');
+}
+@font-face {
+    font-family: 'Asap';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Asap'),
+        local('Asap-Italic'),
+        url(../fonts/asap/Asap-Italic.ttf) format('truetype'),
+        url(../fonts/asap/Asap-Italic.woff) format('woff'),
+        url(../fonts/asap/Asap-Italic.eot) format('embedded-opentype');
+}
+@font-face {
+    font-family: 'Asap';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Asap'),
+        local('Asap-Bold'),
+        url(../fonts/asap/Asap-Bold.ttf) format('truetype'),
+        url(../fonts/asap/Asap-Bold.woff) format('woff'),
+        url(../fonts/asap/Asap-Bold.eot) format('embedded-opentype');
+}
+@font-face {
+    font-family: 'Asap';
+    font-style: italic;
+    font-weight: 700;
+    src: local('Asap'),
+        local('Asap-BoldItalic'),
+        url(../fonts/asap/Asap-BoldItalic.ttf) format('truetype'),
+        url(../fonts/asap/Asap-BoldItalic.woff) format('woff'),
+        url(../fonts/asap/Asap-BoldItalic.eot) format('embedded-opentype');
+}
+@font-face {
+    font-family: 'Headland One';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Headland One'),
+        local('HeadlandOne-Regular'),
+        url(../fonts/headlandone/HeadlandOne-Regular.ttf) format('truetype'),
+        url(../fonts/headlandone/HeadlandOne-Regular.woff) format('woff'),
+        url(../fonts/headlandone/HeadlandOne-Regular.eot) format('embedded-opentype');
+}
+
+
 /********** General **********/
 html {
     background-color: #eee;
+    overflow-y: scroll;
 }
 body {
-    font: 18px sans-serif;
+    font-size: 18px;
+    font-family: 'Asap', sans-serif;
     margin: 0 auto;
     padding: .5em 1.5em 1.5em;
 }
@@ -29,30 +84,39 @@ main .hero {
     margin: .3em 0 .3em .3em;
     max-width: 50%;
 }
-.inline-left{
+.inline-left {
     float: left;
     margin: .3em .3em .3em 0;
     max-width: 50%;
 }
-
+img.profile {
+    margin: 1em;
+    width: 150px;
+}
 /* Headings */
 h1 {
     font-size: 1.5em;
+    font-family: 'Headland One', serif;
 }
 h2 {
-    font-size: 1.17em;
+    font-size: 1.17;
+    font-family: 'Headland One', serif;
 }
 h3 {
-    font-size: 1em;
+    font-size: 1;
+    font-family: 'Headland One', serif;
 }
 h4 {
-    font-size: .83em;
+    font-size: .83;
+    font-family: 'Headland One', serif;
 }
 h5 {
-    font-size: .67em;
+    font-size: .67;
+    font-family: 'Headland One', serif;
 }
 h6 {
-    font-size: .5em;
+    font-size: .5;
+    font-family: 'Headland One', serif;
 }
 h1:first-child,
 h2:first-child,
@@ -87,7 +151,8 @@ ul.posts li:before {
     color: #aaa;
     content: '\00bb';
 }
-ul.projects {
+ul.projects,
+ul.posts-large {
     list-style-type: none;
     padding: 0;
     margin-right: -1em;
@@ -96,18 +161,25 @@ ul.projects {
     display: flex;
     flex-wrap: wrap;
 }
-ul.projects li {
-    flex: 1 1 10em;
+ul.projects li,
+ul.posts-large li {
+    flex: 1 1 15em;
     padding: .25em;
     margin: .25em;
 }
-ul.projects img {
+ul.posts-large li:not(.has-cover) {
+    flex-basis: 100%;
+}
+ul.projects img,
+ul.posts-large img {
     width: 100%;
 }
-ul.projects h3 {
+ul.projects h3,
+ul.posts-large h3 {
     margin: 0;
 }
-ul.projects p {
+ul.projects p,
+ul.posts-large p {
     margin-top: 0;
 }