Browse Source

Major style changes to tidy up home page

David Peach 1 week ago
parent
commit
9fff6bc48c
10 changed files with 325 additions and 52 deletions
  1. 29
    30
      layouts/index.html
  2. 2
    2
      layouts/partials/header.html
  3. 2
    0
      sass
  4. 67
    0
      scss/_blogroll.scss
  5. 28
    0
      scss/_global.scss
  6. 37
    0
      scss/_site-header.scss
  7. 29
    0
      scss/main.scss
  8. 130
    20
      static/css/main.css
  9. 1
    0
      static/css/main.css.map
  10. 0
    0
      static/scss/main.scss

+ 29
- 30
layouts/index.html View File

@@ -12,41 +12,40 @@
12 12
 <!-- RSS feed -->
13 13
 <link rel="alternate" type="application/rss+xml" href="https://davidpeach.co.uk/index.xml" />
14 14
 
15
-
16 15
 {{ partial "header.html" . }}
17 16
 
18
-
19
-<article class="b-article">
20
-    <h2>New site is coming... slowly.</h2>
21
-    <img src="/img/under-construction.gif" alt="animated stick-person digging" title="under construction">
22
-    <p>I am rebuilding a simple static website from the ground up using the Hugo static site generator. I will be using this website as a playground as well as documenting my processes and learning.</p>
23
-    <p>You can still access all of my old stuff <a href="https://2019.davidpeach.co.uk">here</a>. Using the excellent <a href="https://4042302.org/">404 to 302 technique</a>.</p>
17
+<article class="b-welcome">
18
+    <p>Welcome to my website. Here I will be writing about my discoveries and learnings on the web. My interest lies in the area of <strong>peer to peer web technologies</strong> to help put the power of the web into the hands of those who use it.</p>
24 19
 </article>
25 20
 
26
-<!-- Group by year. -->
27
-    {{ range .Data.Pages.GroupByDate "2006" }}
28
-    <h2>{{ .Key }}</h2>
29
-
30
-      <!-- Group by month. -->
31
-      {{ range .Pages.GroupByDate "January" }}
32
-      <h3>{{ .Key }}</h3>
33
-
34
-        <!-- Orders content according to the "date" field in front matter. -->
35
-        {{ range .Pages.GroupByDate "02" }}
36
-        <h4 class='postdate date'>{{ .Key }}</h4>
37
-        <ul> 
38
-          {{ range $index, $post := .Pages }}
39
-            <li>
40
-              <time datetime="{{ $post.Date.Format "2006-01-02T15:04:05Z0700" }}">
41
-                <span class='postdate day item-{{ $index }}'>{{ $post.Date.Format "Mon" }}</span>
42
-              </time>
43
-              <span class='postdate'>{{ $post.Date.Format "15:04" }}</span>
44
-              <a href="{{ .RelPermalink }}">{{ $post.Title }}</a>
21
+{{ range .Pages.GroupByDate "January 2006" }}
22
+<ul class="b-recent-posts">
23
+    
24
+    <li class="b-post-date-row">
25
+        <div class="b-post-date">
26
+            <!-- <span class="b-post-date__item b-post-date__day">Saturday</span> -->
27
+            <span class="b-post-date__item b-post-date__date">{{ .Key }}</span>
28
+            <!-- <span class="b-post-date__item b-post-date__month">December</span> -->
29
+        </div>
30
+        {{ range .Pages.GroupByDate "Monday 2th" }}
31
+        <h4 class="b-post-date-row__date">{{ .Key }}</h4>
32
+        <ul class="b-blogroll">
33
+            {{ range $index, $post := .Pages }}
34
+            <li class="b-blogroll__post">
35
+                <time class="b-blogroll__post__time" datetime="{{ $post.Date.Format "2006-01-02T15:04:05Z0700" }}">18:34</time>
36
+                <a href="{{ .RelPermalink }}">{{ $post.Title }}</a>
37
+                <p class="b-blogroll__post__excerpt">{{ $post.Summary }}</p>
45 38
             </li>
46
-          {{ end }}
39
+            {{ end }}
47 40
         </ul>
48
-      {{ end }}
49
-    {{ end }}
50
-  {{ end }}
41
+        {{ end }}
42
+    </li>
43
+    
44
+</ul>
45
+{{ end }}
46
+
47
+<div>
48
+    <p>For any of my posts that were published before Match 14th 2019, please head to the archived version of <a href="https://2019.davidpeach.co.uk">my old site</a>. Old links will continue to work, forwarding you to their new homes.</p>
49
+</div>   
51 50
 </body>
52 51
 </html>

+ 2
- 2
layouts/partials/header.html View File

@@ -5,8 +5,8 @@
5 5
     <img src="/img/take-your-heart.jpg" alt="A red and black cartoon hat with a white flaming eye mask." class="b-site-header__image">
6 6
 </header>
7 7
 
8
-<address>
8
+<!-- <address>
9 9
     <p style="font-weight: bold;">All old posts: <a href="https://2019.davidpeach.co.uk">https://2019.davidpeach.co.uk</a></p>
10 10
     <p>Mastodon: <a href="https://mastodon.davidpeach.co.uk/@david">https://mastodon.davidpeach.co.uk/@david</a></p>
11 11
     <p>Email: <a href="mailto:mail@davidpeach.co.uk">mail@davidpeach.co.uk</a></p>
12
-</address>
12
+</address> -->

+ 2
- 0
sass View File

@@ -0,0 +1,2 @@
1
+#!/bin/bash
2
+sass --watch ./scss/main.scss ./static/css/main.css

+ 67
- 0
scss/_blogroll.scss View File

@@ -0,0 +1,67 @@
1
+ul {
2
+    padding: 0;
3
+}
4
+li {
5
+    list-style-type: none;
6
+}
7
+
8
+.b-recent-posts {
9
+    margin-bottom: 100px;
10
+}
11
+
12
+.b-post-date-row {
13
+    &__date {
14
+        margin: .5em 0;
15
+        padding: 5px 0 5px 10px;
16
+        position: relative;
17
+        font-weight: normal;
18
+        left: -13px;
19
+        font-size: 2em;
20
+        border-left: 3px solid $mainColor;
21
+    }
22
+}
23
+
24
+.b-post-date {
25
+    background-color: $mainColor;
26
+    position:relative;
27
+    margin: 0;
28
+    padding: 12px 12px 12px 0;
29
+    text-align: center;
30
+    font-size: 2em;
31
+    display: inline-block;
32
+ 
33
+    &::after {
34
+        content: "";
35
+        width: 300px;
36
+        background-color: $mainColor; 
37
+        height: 100%;
38
+        position: absolute;
39
+        top: 0;
40
+        right: 100%;
41
+    }
42
+
43
+    &__item {
44
+        display: block;
45
+        color: #fff;
46
+        align-self: end;
47
+        padding-right: .25rem;
48
+    }
49
+}
50
+
51
+.b-blogroll {
52
+    font-size: 1.5em;
53
+    line-height: 1.5;
54
+
55
+    &__post {
56
+        margin-bottom: .2em;
57
+    }
58
+
59
+    &__post__time {
60
+        font-weight: bold;
61
+        color: $mainColor;
62
+    }
63
+
64
+    &__post__excerpt {
65
+        font-size: 1rem;
66
+    }
67
+}

+ 28
- 0
scss/_global.scss View File

@@ -0,0 +1,28 @@
1
+@font-face {
2
+  font-family: 'MyWebFont';
3
+  src: url('../fonts/metropolis/Metropolis-Light.otf') format('opentype');
4
+}
5
+
6
+*, *::before, *::after {
7
+    box-sizing: border-box;
8
+}
9
+
10
+html {
11
+    font-family: 'MyWebFont';
12
+    font-size: 16px;
13
+}
14
+
15
+body {
16
+    background-color: #fff;
17
+    padding: 1em 10%;
18
+    margin: 0;
19
+    font-size: 100%;
20
+
21
+    @media(min-width: 48rem) {
22
+        font-size: 110%;
23
+    }
24
+}
25
+
26
+.area-heading {
27
+    font-size: 2.5em;
28
+}

+ 37
- 0
scss/_site-header.scss View File

@@ -0,0 +1,37 @@
1
+.b-site-header {
2
+    
3
+    text-align: center;
4
+    padding: 1em 0;
5
+
6
+    @media (min-width: 28.1rem) {
7
+        font-size: 1.3em;
8
+        text-align: left;
9
+        display: grid;
10
+        grid-template-rows: 50px 50px;
11
+        grid-template-columns: 100px auto;
12
+        grid-template-areas: 'image title'
13
+                             'image tagline';
14
+        grid-column-gap: 1em;
15
+    }
16
+}
17
+
18
+.b-site-header__title {
19
+    grid-area: title;
20
+    margin: 0;
21
+}
22
+
23
+.b-site-header__tagline {
24
+    grid-area: tagline;
25
+    margin: 0;
26
+}
27
+
28
+.b-site-header__image {
29
+    max-width: 100%;
30
+    max-height: 100%;
31
+    grid-area: image;
32
+    // border-radius: 50%;
33
+
34
+    @media(max-width: 28rem) {
35
+        width: 50%;
36
+    }
37
+}

+ 29
- 0
scss/main.scss View File

@@ -0,0 +1,29 @@
1
+$mainColor: salmon;
2
+@import 'global';
3
+@import 'site-header';
4
+@import 'blogroll';
5
+
6
+.b-welcome {
7
+    margin: 2em 0 3.5em;
8
+}
9
+a {
10
+    color: $mainColor;
11
+
12
+    &:visited, &:active {
13
+        color: darken($mainColor, 20%);
14
+    }
15
+}
16
+p {
17
+    max-width: 45rem;
18
+    font-size: 1.3em;
19
+    line-height: 1.5;
20
+}
21
+
22
+.b-article {
23
+    line-height: 1.5;
24
+    font-size: 1.2em;
25
+}
26
+
27
+.b-article p {
28
+    max-width: 45rem;
29
+}

+ 130
- 20
static/css/main.css View File

@@ -1,45 +1,155 @@
1 1
 @font-face {
2
-  font-family: 'MyWebFont';
3
-  src: url('../fonts/metropolis/Metropolis-Light.otf') format('opentype');
2
+  font-family: "MyWebFont";
3
+  src: url("../fonts/metropolis/Metropolis-Light.otf") format("opentype");
4
+}
5
+*, *::before, *::after {
6
+  box-sizing: border-box;
4 7
 }
5 8
 
6 9
 html {
7
-    font-family: 'MyWebFont';
10
+  font-family: "MyWebFont";
11
+  font-size: 16px;
8 12
 }
9 13
 
10 14
 body {
11
-    background-color: #fff;
12
-    padding: 1em;
13
-    margin: 0;
15
+  background-color: #fff;
16
+  padding: 1em 10%;
17
+  margin: 0;
18
+  font-size: 100%;
19
+}
20
+@media (min-width: 48rem) {
21
+  body {
22
+    font-size: 110%;
23
+  }
24
+}
25
+
26
+.area-heading {
27
+  font-size: 2.5em;
14 28
 }
15 29
 
16 30
 .b-site-header {
17
-    padding: 1em;
31
+  text-align: center;
32
+  padding: 1em 0;
33
+}
34
+@media (min-width: 28.1rem) {
35
+  .b-site-header {
36
+    font-size: 1.3em;
37
+    text-align: left;
18 38
     display: grid;
19 39
     grid-template-rows: 50px 50px;
20
-    grid-template-columns: 100px 500px;
21
-    grid-template-areas: 'image title'
22
-                         'image tagline';
40
+    grid-template-columns: 100px auto;
41
+    grid-template-areas: "image title" "image tagline";
23 42
     grid-column-gap: 1em;
43
+  }
24 44
 }
45
+
25 46
 .b-site-header__title {
26
-    grid-area: title;
47
+  grid-area: title;
48
+  margin: 0;
27 49
 }
50
+
28 51
 .b-site-header__tagline {
29
-    grid-area: tagline;
52
+  grid-area: tagline;
53
+  margin: 0;
30 54
 }
55
+
31 56
 .b-site-header__image {
32
-    max-width: 100%;
33
-    max-height: 100%;
34
-    grid-area: image;
35
-    border-radius: 50%;
57
+  max-width: 100%;
58
+  max-height: 100%;
59
+  grid-area: image;
60
+}
61
+@media (max-width: 28rem) {
62
+  .b-site-header__image {
63
+    width: 50%;
64
+  }
65
+}
66
+
67
+ul {
68
+  padding: 0;
69
+}
70
+
71
+li {
72
+  list-style-type: none;
73
+}
74
+
75
+.b-recent-posts {
76
+  margin-bottom: 100px;
77
+}
78
+
79
+.b-post-date-row__date {
80
+  margin: 0.5em 0;
81
+  padding: 5px 0 5px 10px;
82
+  position: relative;
83
+  font-weight: normal;
84
+  left: -13px;
85
+  font-size: 2em;
86
+  border-left: 3px solid salmon;
87
+}
88
+
89
+.b-post-date {
90
+  background-color: salmon;
91
+  position: relative;
92
+  margin: 0;
93
+  padding: 12px 12px 12px 0;
94
+  text-align: center;
95
+  font-size: 2em;
96
+  display: inline-block;
97
+}
98
+.b-post-date::after {
99
+  content: "";
100
+  width: 300px;
101
+  background-color: salmon;
102
+  height: 100%;
103
+  position: absolute;
104
+  top: 0;
105
+  right: 100%;
106
+}
107
+.b-post-date__item {
108
+  display: block;
109
+  color: #fff;
110
+  align-self: end;
111
+  padding-right: 0.25rem;
112
+}
113
+
114
+.b-blogroll {
115
+  font-size: 1.5em;
116
+  line-height: 1.5;
117
+}
118
+.b-blogroll__post {
119
+  margin-bottom: 0.2em;
120
+}
121
+.b-blogroll__post__time {
122
+  font-weight: bold;
123
+  color: salmon;
124
+}
125
+.b-blogroll__post__excerpt {
126
+  font-size: 1rem;
127
+}
128
+
129
+.b-welcome {
130
+  margin: 2em 0 3.5em;
131
+}
132
+
133
+a {
134
+  color: salmon;
135
+}
136
+a:visited, a:active {
137
+  color: #f7270f;
138
+}
139
+
140
+p {
141
+  max-width: 45rem;
142
+  font-size: 1.3em;
143
+  line-height: 1.5;
36 144
 }
37 145
 
38 146
 .b-article {
39
-    line-height: 1.5;
40
-    font-size: 1.2em;
147
+  line-height: 1.5;
148
+  font-size: 1.2em;
41 149
 }
42 150
 
43 151
 .b-article p {
44
-    max-width: 45rem;
45
-}
152
+  max-width: 45rem;
153
+}
154
+
155
+/*# sourceMappingURL=main.css.map */

+ 1
- 0
static/css/main.css.map View File

@@ -0,0 +1 @@
1
+{"version":3,"sourceRoot":"","sources":["../../scss/_global.scss","../../scss/_site-header.scss","../../scss/_blogroll.scss","../../scss/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EANJ;IAOQ;;;;AAIR;EACI;;;AC1BJ;EAEI;EACA;;AAEA;EALJ;IAMQ;IACA;IACA;IACA;IACA;IACA;IAEA;;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;;AAGA;EANJ;IAOQ;;;;AClCR;EACI;;;AAEJ;EACI;;;AAGJ;EACI;;;AAIA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI,kBCxBQ;EDyBR;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA,kBCnCI;EDoCJ;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;AAIR;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA,OC5DI;;AD+DR;EACI;;;AC3DR;EACI;;;AAEJ;EACI,OATQ;;AAWR;EACI;;;AAGR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI","file":"main.css"}

+ 0
- 0
static/scss/main.scss View File


Loading…
Cancel
Save