Index

joshstock.in / 7d8bf7d

Source for serving and static templating/compiling of https://joshstock.in.

Latest Commit

{#}TimeHashSubjectAuthor#(+)(-)GPG?
3701 Jan 2020 22:44f528068Make the banner image scroll with the page on articlesJosh Stockin132N

Blob @ joshstock.in / resources / templates / blog.css

text/css2150 bytesdownload raw
1@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500&display=swap');
2@import url('https://fonts.googleapis.com/css?family=Fira+Mono&display=swap');
3body {
4 font-family: 'Fira Sans', sans-serif;
5 color: #252525;
6 padding: 0;
7 margin: 0;
8 box-sizing: border-box;
9}
10a {
11 color: #0077a4;
12}
13code {
14 font-family: 'Fira Mono', monospace;
15}
16.gist .gist-file {
17 overflow: auto;
18 margin: 0;
19 margin-bottom: 1.5em;
20}
21.gist table {
22 table-layout: fixed;
23}
24#copyright {
25 padding: 20px 0;
26}
27
28hr {
29 border-color: #eee;
30}
31
32.blog-page {
33 position: absolute;
34 width: 100%;
35 top: 20vh;
36}
37.blog-center {
38 max-width: 700px;
39 padding: 2em 2.5em;
40 margin: 0 auto;
41 font-size: 1em;
42 line-height: 1.5;
43 background-color: #fff;
44}
45.blog-center h1 {
46 margin-top:0;
47}
48.blog-center h2 {
49 margin-top:1em;
50 margin-bottom:0.25em;
51}
52.blog-center h2 a {
53 color: #252525;
54 text-decoration: none;
55}
56.blog-center h2 a:hover {
57 text-decoration: underline;
58}
59.blog-center p, ul {
60 margin-top:0;
61 margin-bottom:1em;
62}
63.blog-banner {
64 width:100%;
65 height: 40vh;
66 background-size: cover;
67 background-position: center;
68 margin: 0;
69 user-select: none;
70 transition: transform 1s linear;
71}
72.blog-banner.thumb {
73 height: 250px;
74}
75h1.blog-top-1 {
76 margin-top:1em;
77 margin-bottom:0;
78}
79p.blog-top-2 {
80 margin-top:0;
81}
82.blog-img-full {
83 max-width: 100%;
84 display: inline-block;
85 margin: 10px 0 10px 0;
86}
87.blog-img-right {
88 max-height: 500px;
89 max-width: 50%;
90 margin: 0 0 10px 20px;
91 float: right;
92}
93.blog-img-left {
94 max-height: 500px;
95 max-width: 50%;
96 margin: 0 20px 10px 0;
97 float: left;
98}
99.blog-listing {
100 box-shadow: 0 4px 8px 0 #b5b5b5;
101 border-radius: 10px;
102 margin-bottom: 4em;
103 transition: box-shadow 100ms;
104}
105.blog-listing .blog-top-1 {
106 margin-top: 0;
107}
108.blog-listing .blog-banner {
109 border-radius: 10px 10px 0 0;
110}
111.blog-listing:hover {
112 box-shadow: 0 4px 8px 0 #959595;
113}
114.blog-listing-container {
115 padding:1em;
116}
117.blog-listing code {
118 margin-right: 10px;
119}
120
121@media (max-width: 840px) {
122 .blog-center {
123 padding: 1em;
124 }
125 .blog-page {
126 top: 40vw;
127 }
128 .blog-banner, .blog-banner.thumb {
129 height: 40vw;
130 }
131 .blog-img-right, .blog-img-left {
132 max-width: 50%;
133 }
134}
135