Browse Source

footer: add social links, restyle

master
Annika Backstrom 3 months ago
parent
commit
1c1bb28034
Signed by: Annika Backstrom <annika@sixohthree.com> GPG Key ID: 1FB1723D467863F4
4 changed files with 42 additions and 42 deletions
  1. 27
    1
      assets/css/_footer.scss
  2. 0
    31
      assets/css/_home.scss
  3. 0
    2
      content/pages/home.md
  4. 15
    8
      themes/histrionic/templates/base.html

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

@@ -1,4 +1,7 @@
1 1
 footer {
2
+  display: flex;
3
+  flex-direction: column;
4
+
2 5
   border-top: 1px dotted #D6D6D6;
3 6
 
4 7
   margin-top: 3rem;
@@ -6,7 +9,30 @@ footer {
6 9
 
7 10
   font-size: 0.8em;
8 11
 
9
-  > p {
12
+  @include media(">tablet") {
13
+    flex-direction: row;
14
+  }
15
+
16
+  > ul {
17
+    flex: 1;
18
+  }
19
+}
20
+
21
+
22
+.footer--icons {
23
+  @include media(">tablet") {
24
+    text-align: right;
25
+  }
26
+
27
+  svg {
28
+    height: 30px;
29
+    width: 30px;
30
+    display: inline-block;
31
+  }
32
+
33
+  li {
10 34
     display: inline-block;
35
+    list-style-type: none;
36
+    flex: 0 0 auto;
11 37
   }
12 38
 }

+ 0
- 31
assets/css/_home.scss View File

@@ -29,34 +29,3 @@ body.index {
29 29
     }
30 30
   }
31 31
 }
32
-
33
-.social-icons {
34
-  margin: 1em 0;
35
-  padding: 0;
36
-
37
-  svg {
38
-    height: 30px;
39
-    width: 30px;
40
-    display: inline-block;
41
-  }
42
-
43
-  li {
44
-    display: inline-block;
45
-    list-style-type: none;
46
-    flex: 0 0 auto;
47
-    padding: 0;
48
-    margin: 0 5px;
49
-  }
50
-}
51
-
52
-@include media("<tablet") {
53
-  body.index .content {
54
-    display: block;
55
-  }
56
-
57
-  .profile-photo {
58
-    max-width: 300px;
59
-    margin: 0 auto;
60
-  }
61
-}
62
-

+ 0
- 2
content/pages/home.md View File

@@ -15,5 +15,3 @@ Professionally speaking, I'm a Software Engineer based in New Hampshire, US. I
15 15
 work remotely for [Etsy, Inc.](https://www.etsy.com), creating cool tools for
16 16
 Etsy employees. I'm also involved in [MyTransHealth](http://mytranshealth.com/),
17 17
 a resource connecting trans\* folx with qualified health care professionals.
18
-
19
-You can find me on Mastodon at [@annika@xoxo.zone](https://xoxo.zone/@annika).

+ 15
- 8
themes/histrionic/templates/base.html View File

@@ -40,14 +40,21 @@
40 40
     </div>
41 41
 
42 42
     <footer>
43
-      <div>
44
-        <div>
45
-          <p role="contentinfo">
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>.
47
-          Feeds: <a href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" rel="alternate">atom</a>.
48
-          </p>
49
-        </div>
50
-      </div>
43
+      <ul class="footer--links list-unstyled">
44
+        <li>&copy; Annika Backstrom 2019 <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4</a></li>
45
+        <li>Powered by <a href="https://blog.getpelican.com/">Pelican</a></li>
46
+        <li>Feeds: <a href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}" rel="alternate">atom</a>, <a href="{{ SITEURL }}/{{ FEED_ALL_RSS }}" rel="alternate">rss</a></li>
47
+      </ul>
48
+      <ul class="footer--icons p-0 m-0">
49
+        {% for title, url, svg in SOCIAL %}
50
+          <li class="p-0 m-x-1">
51
+            <a href="{{ url }}" title="{{ title }}" rel="me">
52
+              {% set svg_file = 'svg/' + svg %}
53
+              {% include svg_file ignore missing without context %}
54
+            </a>
55
+          </li>
56
+        {% endfor %}
57
+      </ul>
51 58
     </footer>
52 59
 
53 60
     {% if GOOGLE_ANALYTICS %}

Loading…
Cancel
Save