Browse Source

Beginning site restyle and homepage redesign

restyle-spring-2019
Annika Backstrom 3 months ago
parent
commit
c9ee180758

+ 1
- 5
assets/css/_components.scss View File

@@ -6,8 +6,6 @@
6 6
   font-size: 95%;
7 7
   font-style: italic;
8 8
   color: $gray-light;
9
-  padding-top: 1em;
10
-  border-top: 1px solid $light-border;
11 9
 
12 10
   a {
13 11
     color: $gray-light;
@@ -25,9 +23,7 @@
25 23
 
26 24
 .article-tag {
27 25
   display: inline-block;
28
-  background-color: $well-bg;
29
-  padding: 3px 5px;
30
-  @include border-radius(5px);
26
+  margin-right: 1ex;
31 27
 }
32 28
 
33 29
 .right {

+ 10
- 0
assets/css/_content.scss View File

@@ -20,4 +20,14 @@
20 20
     max-width: 100%;
21 21
     height: auto;
22 22
   }
23
+
24
+  article h1 {
25
+    margin-bottom: 0;
26
+  }
27
+
28
+  .subheading {
29
+    font-style: italic;
30
+    color: #999;
31
+    margin: 1ex 0;
32
+  }
23 33
 }

+ 1
- 1
assets/css/_footer.scss View File

@@ -1,7 +1,7 @@
1 1
 footer {
2 2
   border-top: 1px dotted #D6D6D6;
3 3
 
4
-  margin-top: 1rem;
4
+  margin-top: 3rem;
5 5
   padding: 1rem 0;
6 6
 
7 7
   font-size: 0.8em;

+ 14
- 34
assets/css/_header.scss View File

@@ -1,45 +1,25 @@
1 1
 header {
2
-  display: flex;
3
-
4
-  line-height: 2em;
5
-  text-transform: lowercase;
6
-
7
-  margin-bottom: 3em;
8
-
9 2
   h1 {
10
-    margin: 0;
11
-    padding: 0;
12
-    color: default;
13
-    flex: 1;
14
-    font-size: 1em;
15
-    line-height: inherit;
3
+    font-size: 36px;
4
+    font-weight: bold;
16 5
 
17
-    @include media("<tablet") {
18
-      display: none;
6
+    @include media(">tablet") {
7
+      font-size: 48px;
19 8
     }
20
-  }
21
-
22
-  a {
23
-    text-decoration: none;
24
-  }
25
-
26
-  nav {
27
-    text-align: right;
28
-    flex: 1;
29
-  }
30
-
31
-  ul {
32
-    display: flex;
33
-    justify-content: flex-end;
34 9
 
35
-    @extend .list-unstyled;
10
+    a {
11
+      text-decoration: none;
12
+    }
36 13
   }
37 14
 
38
-  li {
39
-    margin: 0 1em;
15
+  nav > ul {
16
+    list-style: none;
17
+    margin: 0;
18
+    padding: 0;
40 19
 
41
-    &:last-child {
42
-      margin-right: 0;
20
+    > li {
21
+      display: inline;
22
+      text-transform: lowercase;
43 23
     }
44 24
   }
45 25
 }

+ 29
- 29
assets/css/_home.scss View File

@@ -1,20 +1,36 @@
1
-body.index .content {
2
-  display: flex;
3
-}
4
-
5
-.profile-photo {
6
-  flex: 1;
7
-  padding: 0 1em;
8
-}
1
+body.index {
2
+  .content {
3
+    h2 {
4
+      display: inline;
5
+      border: none;
6
+      text-transform: lowercase;
7
+
8
+      &:after {
9
+        content: ":";
10
+      }
11
+    }
12
+  }
9 13
 
10
-.profile-about {
11
-  flex: 3;
14
+  nav.pages {
15
+    display: inline;
16
+    clear: right;
17
+
18
+    ul {
19
+      margin: 0;
20
+      padding: 0;
21
+      list-style: none;
22
+      display: inline;
23
+
24
+      li {
25
+        margin: 0;
26
+        padding: 0;
27
+        display: inline;
28
+      }
29
+    }
30
+  }
12 31
 }
13 32
 
14 33
 .social-icons {
15
-  display: flex;
16
-  justify-content: center;
17
-  flex-direction: row;
18 34
   margin: 1em 0;
19 35
   padding: 0;
20 36
 
@@ -33,22 +49,6 @@ body.index .content {
33 49
   }
34 50
 }
35 51
 
36
-.headshot {
37
-  width: 100%;
38
-  padding-bottom: 100%;
39
-
40
-  margin: 0 auto;
41
-
42
-  @include border-radius(50%);
43
-
44
-  background-image: url(/theme/images/headshot.1456006614.jpg);
45
-  background-size: contain;
46
-
47
-  > h1 {
48
-    display: none;
49
-  }
50
-}
51
-
52 52
 @include media("<tablet") {
53 53
   body.index .content {
54 54
     display: block;

+ 2
- 3
assets/css/_layout.scss View File

@@ -1,5 +1,4 @@
1 1
 body {
2
-  max-width: 900px;
3
-  margin: 0 auto;
4
-  padding: 1em;
2
+  margin: 1em;
3
+  max-width: 800px;
5 4
 }

+ 2
- 2
assets/css/main.scss View File

@@ -10,8 +10,8 @@ $green: #40c517;
10 10
 $link-color: hsl(205, 75%, 52%);
11 11
 $link-color-alt: $text-color;
12 12
 
13
-$body-font: Palatino, serif;
14
-$heading-font: Palatino, serif;
13
+$body-font: sans-serif;
14
+$heading-font: sans-serif;
15 15
 $code-font: "Ubuntu Mono", Monaco, monospace;
16 16
 $font-size-base: 1.2em;
17 17
 

+ 11
- 29
content/pages/home.md View File

@@ -1,37 +1,19 @@
1
-Title: sixohthree.com
1
+Title: sixohthree.com - Annika Backstrom
2 2
 Date: 2017-08-09 23:21
3 3
 Updated: 2018-07-21 13:57
4 4
 Template: home
5 5
 URL:
6 6
 save_as: index.html
7 7
 
8
-Hi, I'm Annika Backstrom. This is my Internet website where I
9
-prove to myself that I exist.
8
+Hi, I'm Annika Backstrom. This is my Internet website where I prove to myself
9
+that I exist. Sometimes I [write](/blog) about things like
10
+[Ansible](/tag/ansible) and [Docker](/tag/docker). I also keep a running list of
11
+[people and organizations I donate to](/giving), and [games I've played or would
12
+like to play](/games).
10 13
 
11
-Professionally speaking, I'm a remote Software Engineer based in New
12
-Hampshire, US, which is somewhere around here:
14
+Professionally speaking, I'm a Software Engineer based in New Hampshire, US. I
15
+work remotely for [Etsy, Inc.](https://www.etsy.com), creating cool tools for
16
+Etsy employees. I'm also involved in [MyTransHealth](http://mytranshealth.com/),
17
+a resource connecting trans\* folx with qualified health care professionals.
13 18
 
14
-![Map of the United States][map]
15
-
16
-I work for [Etsy, Inc.][etsy] on the Customer Resolutions team,
17
-creating cool tools for Etsy employees. Before Etsy I did web stuff for
18
-[Plymouth State University][psu], and before *that* I did database,
19
-engineering, and web stuff for [Stonewall Cable][stonewallcable].
20
-
21
-I'm also involved in [MyTransHealth][mytranshealth], a resource connecting trans\* folx with
22
-qualified health care professionals.
23
-
24
-Recently, I've written about [Docker][docker] and [Ansible][ansible]
25
-in [my blog][blog]. I also keep a running list of [people and organizations I
26
-donate to][giving], and [games I've played or would like to play][games].
27
-
28
-  [map]: /media/sixohthree.com/map.png "A map of the United States, with a pin over New Hampshire on the east side of the map"
29
-  [etsy]: https://www.etsy.com/
30
-  [psu]: https://www.plymouth.edu/
31
-  [stonewallcable]: http://www.stonewallcable.com/
32
-  [blog]: /blog
33
-  [mytranshealth]: http://mytranshealth.com/
34
-  [giving]: /giving
35
-  [docker]: /tag/docker
36
-  [ansible]: /tag/ansible
37
-  [games]: /games
19
+You can find me on Mastodon at [@annika@xoxo.zone](https://xoxo.zone/@annika).

+ 1
- 1
pelicanconf.py View File

@@ -44,7 +44,7 @@ PATH_METADATA = '(?P<content_path>.*)'
44 44
 BLOG_VERSION = check_output(['git', 'rev-parse', '--short', 'HEAD']).strip().decode('utf-8')
45 45
 
46 46
 TIMEZONE = 'America/New_York'
47
-DEFAULT_DATE_FORMAT = '%B %-d %Y'
47
+DEFAULT_DATE_FORMAT = '%-d %B %Y'
48 48
 
49 49
 # Don't parse html files
50 50
 READERS = {'html': None}

+ 2
- 2
themes/histrionic/templates/archives.html View File

@@ -5,8 +5,8 @@
5 5
 {% endblock %}
6 6
 
7 7
 {% block content %}
8
-  <div class="row">
9
-    <div class="cute-12-tablet">
8
+  <div>
9
+    <div>
10 10
       <h1>Archives for {{ SITENAME }}</h1>
11 11
 
12 12
       <ul class="list-unstyled">

+ 3
- 3
themes/histrionic/templates/article.html View File

@@ -30,11 +30,11 @@
30 30
 {% endblock %}
31 31
 
32 32
 {% block content %}
33
-<div class="row">
34
-  <article class="cute-12-tablet">
33
+<div>
34
+  <article>
35 35
     <h1>{{ article.title }}</h1>
36
+    <div class="subheading">by <address class="vcard author">{{ article.author }}</address> in <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>, on {{ article.locale_date }}</div>
36 37
     {{ article.content }}
37
-    {% include 'metadata.inc.html' %}
38 38
   </article>
39 39
 </div>
40 40
 {% endblock %}

+ 2
- 11
themes/histrionic/templates/base.html View File

@@ -29,28 +29,19 @@
29 29
 
30 30
   <body class="{% block body_classes %}{% endblock %}">
31 31
 
32
-    {% if HEADER_PAGES %}
33 32
     <header role="banner">
34 33
       <h1>
35 34
         <a href="{{ SITEURL|default("/") }}">sixohthree.com</a>
36 35
       </h1>
37
-      <nav class="pages">
38
-        <ul class="p-0 m-0">
39
-          {% for page_title, page_url in HEADER_PAGES %}
40
-            <li><a href="{{ SITEURL }}/{{ page_url }}">{{ page_title }}</a></li>
41
-          {% endfor %}
42
-        </ul>
43
-      </nav>
44 36
     </header>
45
-    {% endif %}
46 37
 
47 38
     <div role="main" class="content">
48 39
       {% block content %}{% endblock %}
49 40
     </div>
50 41
 
51 42
     <footer>
52
-      <div class="row">
53
-        <div class="cute-12-tablet">
43
+      <div>
44
+        <div>
54 45
           <p role="contentinfo">
55 46
           Unless otherwise noted, content on this site was created by Annika Backstrom and is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>. Powered by <a href="https://blog.getpelican.com/">Pelican</a>.
56 47
           Feeds: <a href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" rel="alternate">atom</a>.

+ 10
- 4
themes/histrionic/templates/category.html View File

@@ -6,13 +6,19 @@
6 6
   <meta name="robots" value="noindex,follow">
7 7
 {% endblock %}
8 8
 
9
+{% block body_classes %}archive{% endblock %}
10
+
9 11
 {% block content %}
10 12
 
11
-<h1>Posts categorized under: {{ category }}</h1>
13
+<h1>Posts categorized &ldquo;{{ category }}&rdquo;</h1>
12 14
 
13
-{% for article in articles_page.object_list %}
14
-  {% include 'article_summary.inc.html' %}
15
-{% endfor %}
15
+<ol>
16
+  {% for article in articles_page.object_list %}
17
+    <li>
18
+      {% include 'article_link.inc.html' %}
19
+    </li>
20
+  {% endfor %}
21
+</ol>
16 22
 
17 23
 {% include 'pagination.inc.html' %}
18 24
 

+ 1
- 18
themes/histrionic/templates/home.html View File

@@ -5,24 +5,7 @@
5 5
 {% block title %}{{ page.title }}{% endblock %}
6 6
 
7 7
 {% block content %}
8
-  <div class="profile-photo">
9
-    <div class="headshot">
10
-      <h1>Annika Backstrom</h1>
11
-    </div>
12
-    <ul class="social-icons">
13
-      {% for title, url, svg in SOCIAL %}
14
-        <li>
15
-          <a href="{{ url }}" title="{{ title }}" rel="me">
16
-            {% set svg_file = 'svg/' + svg %}
17
-            {% include svg_file ignore missing without context %}
18
-          </a>
19
-        </li>
20
-      {% endfor %}
21
-    </ul>
22
-  </div>
23
-  <div class="profile-about">
24
-    {{ page.content }}
25
-  </div>
8
+  {{ page.content }}
26 9
 {% endblock %}
27 10
 
28 11
 {# set:filetype=jinja #}

+ 2
- 2
themes/histrionic/templates/page.html View File

@@ -5,8 +5,8 @@
5 5
 {% block title %}{{ page.title }} - {{ SITENAME }}{% endblock %}
6 6
 
7 7
 {% block content %}
8
-  <div class="row">
9
-    <div class="cute-12-tablet">
8
+  <div>
9
+    <div>
10 10
     <h1>{{ page.title }}</h1>
11 11
 
12 12
     {{ page.content }}

+ 10
- 6
themes/histrionic/templates/tag.html View File

@@ -6,14 +6,18 @@
6 6
   <meta name="robots" value="noindex,follow">
7 7
 {% endblock %}
8 8
 
9
-{% block content %}
9
+{% block body_classes %}archive{% endblock %}
10 10
 
11
-<h1>Post tagged: {{ tag }}</h1>
11
+{% block content %}
12 12
 
13
-{% for article in articles_page.object_list %}
14
-  {% include 'article_summary.inc.html' %}
15
-{% endfor %}
13
+<h1>Post tagged &ldquo;{{ tag }}&rdquo;</h1>
16 14
 
17
-{% include 'pagination.inc.html' %}
15
+<ol>
16
+  {% for article in articles_page.object_list %}
17
+    <li>
18
+      {% include 'article_link.inc.html' %}
19
+    </li>
20
+  {% endfor %}
21
+</ol>
18 22
 
19 23
 {% endblock %}

Loading…
Cancel
Save