static/css/blog.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

:root {
    --blog-bg: var(--body-bg);
    --blog-fg: var(--body-fg);

    --blog-date-color: #69dbd6;

    --blog-h1-fg: #bf87d0;
    --blog-h2-fg: #bf87d0;
    --blog-h3-fg: #ff7070;
    --blog-h4-fg: #76d674;
    --blog-h5-fg: #9c80f4;
    --blog-h6-fg: #ef7b7a;
}

#site-blog-page a {
    text-decoration: none;
}

#site-blog-page h1 { color: var(--blog-h1-fg); }
#site-blog-page h2 { color: var(--blog-h2-fg); }
#site-blog-page h3 { color: var(--blog-h3-fg); }
#site-blog-page h4 { color: var(--blog-h4-fg); }
#site-blog-page h5 { color: var(--blog-h5-fg); }
#site-blog-page h6 { color: var(--blog-h6-fg); }

#blog-list .blog-post-wrapper {
    padding: 0.3rem 0;
}

#blog-list .blog-section-wrapper {
    margin: 2rem 0;
}

#blog-list .blog-section {
    background-color: var(--listitem-bg1);
    margin: 0;
    padding: 0.5rem 0 0 0.8rem;
    border-radius: 1rem 1rem 0 0;
    border-bottom: 1px dotted var(--blog-date-color);
}

#blog-list .blog-post-wrapper:nth-child(even) {
    background-color: var(--listitem-bg2);
}

#blog-list .blog-post-wrapper:nth-child(odd) {
    background-color: var(--listitem-bg1);
}

#blog-list .blog-post {
    display: grid;
    grid-template-columns: 4rem 1fr;
    align-items: start;
    padding-left: 0.8rem;
}

#blog-list .blog-post time {
    color: var(--blog-date-color);
}

#blog-list .blog-post .title {
    color: var(--blog-fg);
}

#blog-post header h1 {
    text-align: center;
}

#blog-post-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#blog-post hr {
    border: 1px solid var(--blog-h1-fg);
}

article#blog-post img {
  display: block;
  margin: 1rem auto;
  max-width: 90%;
  max-height: 30rem;
  border: 1px solid var(--blog-h1-fg);
}

/* linked images have different colored borders */
article#blog-post a img {
  border: 1px solid var(--link-fg);
}