jekyll-theme-quartz 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,37 @@
1
+ /**
2
+ * Styles for the archive pages
3
+ */
4
+
5
+ .taxonomies {
6
+ list-style: none;
7
+ padding: 0;
8
+ display: grid;
9
+ grid-template-columns: repeat(2, 1fr);
10
+ gap: var(--spacing);
11
+ margin-top: calc(2 * var(--spacing));
12
+ margin-bottom: calc(2 * var(--spacing));
13
+ }
14
+
15
+ .taxonomy {
16
+ display: flex;
17
+ justify-content: space-between;
18
+ border-bottom: 2px solid var(--body-color-light);
19
+ font-weight: bold;
20
+ color: inherit;
21
+
22
+ &:hover,
23
+ &:focus {
24
+ text-decoration: none;
25
+ color: var(--body-color-dark);
26
+ }
27
+ }
28
+
29
+ .archive-date {
30
+ font-family: var(--code-font);
31
+ }
32
+
33
+ @media screen and (min-width: $screen-laptop) {
34
+ .taxonomies {
35
+ grid-template-columns: repeat(3, 1fr);
36
+ }
37
+ }
@@ -0,0 +1,166 @@
1
+ /**
2
+ * Some base settings for common tags
3
+ */
4
+
5
+ * {
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ body {
10
+ color: var(--body-color);
11
+ background-color: var(--body-bg);
12
+ font-family: var(--body-font);
13
+ font-size: var(--body-font-size);
14
+ line-height: var(--line-height);
15
+ }
16
+
17
+ h1, h2, h3, h4, h5, h6 {
18
+ font-family: var(--title-font);
19
+ }
20
+
21
+ a {
22
+ color: var(--accent-color);
23
+ text-decoration: none;
24
+
25
+ &:hover,
26
+ &:focus {
27
+ text-decoration: underline;
28
+ }
29
+ }
30
+
31
+ figure {
32
+ margin: 0;
33
+ }
34
+
35
+ figcaption {
36
+ font-size: .8em;
37
+ }
38
+
39
+ article img {
40
+ display: block;
41
+ max-width: 100%;
42
+ margin: 1em 0;
43
+ border-radius: var(--border-radius);
44
+ }
45
+
46
+ blockquote {
47
+ border-left: .2em solid var(--body-color-light);
48
+ padding-left: var(--spacing);
49
+ margin-left: 0;
50
+ margin-right: 0;
51
+ font-style: italic;
52
+
53
+ i, em {
54
+ font-style: normal;
55
+ }
56
+ }
57
+
58
+ ul, ol {
59
+ padding-left: calc(2 * var(--spacing));
60
+ margin: var(--spacing) 0;
61
+ }
62
+
63
+ li {
64
+ ul, ol {
65
+ margin: 0;
66
+ }
67
+
68
+ > p {
69
+ margin-top: 0;
70
+ }
71
+ }
72
+
73
+ table {
74
+ width: 100%;
75
+ border-collapse: collapse;
76
+ margin: var(--spacing) 0;
77
+ }
78
+
79
+ td, th {
80
+ padding: .25em .5em;
81
+ border-bottom: 1px solid var(--body-color-light);
82
+ }
83
+
84
+ thead th {
85
+ border-bottom-color: currentColor;
86
+ }
87
+
88
+ hr {
89
+ border: 0;
90
+ border-top: 1px solid var(--body-color-light);
91
+ }
92
+
93
+ code, pre {
94
+ font-family: var(--code-font);
95
+ font-size: .9em;
96
+ }
97
+
98
+ code {
99
+ padding: .1em .25em;
100
+ background-color: var(--body-fg);
101
+ border-radius: var(--border-radius);
102
+ }
103
+
104
+ pre {
105
+ overflow: auto;
106
+ padding: 1em;
107
+ margin: 1em 0;
108
+
109
+ code {
110
+ padding: 0;
111
+ background-color: inherit;
112
+ }
113
+ }
114
+
115
+ .highlight {
116
+ border-radius: var(--border-radius);
117
+ background-color: var(--body-fg);
118
+ }
119
+
120
+ .rouge-table {
121
+ border: 0;
122
+ margin: 0;
123
+
124
+ td,
125
+ th {
126
+ border: 0;
127
+ padding: 0;
128
+ }
129
+
130
+ pre {
131
+ padding: 0;
132
+ margin: 0;
133
+ }
134
+
135
+ .gutter {
136
+ user-select: none;
137
+ opacity: .5;
138
+ padding-right: 1em;
139
+ }
140
+ }
141
+
142
+ a[href^="#fn:"],
143
+ a[href^="#fnref:"] {
144
+ display: inline-block;
145
+ margin-left: .1em;
146
+ font-weight: bold;
147
+ }
148
+
149
+ // List of footnotes
150
+ .footnotes {
151
+ font-size: .8em;
152
+ }
153
+
154
+ #markdown-toc {
155
+ font-size: .8em;
156
+ padding: 2em 3em;
157
+ margin: 2em 0;
158
+ border: solid var(--body-color-light);
159
+ border-width: 1px 0;
160
+
161
+ &::before {
162
+ display: block;
163
+ margin-left: -3em;
164
+ content: "TOC";
165
+ }
166
+ }
@@ -0,0 +1,21 @@
1
+ .post-comments {
2
+ margin: var(--spacing) 0;
3
+ }
4
+
5
+ @media screen and (min-width: $screen-tablet) {
6
+ .post-comments {
7
+ padding: 0 var(--spacing);
8
+ }
9
+ }
10
+
11
+ @media screen and (min-width: $screen-laptop) {
12
+ .post-comments {
13
+ padding: 0 calc(var(--spacing) * 4);
14
+ }
15
+ }
16
+
17
+ @media screen and (min-width: $screen-desktop) {
18
+ .post-comments {
19
+ padding: 0 calc(var(--spacing) * 6);
20
+ }
21
+ }
@@ -0,0 +1,40 @@
1
+ .footer {
2
+ text-align: center;
3
+ font-size: .8em;
4
+ color: var(--header-color-dark);
5
+ background-color: var(--header-bg);
6
+ margin-top: auto;
7
+ padding-bottom: calc(var(--spacing) * 3);
8
+ }
9
+
10
+ .social a {
11
+ color: inherit;
12
+ margin-left: var(--spacing);
13
+ margin-right: var(--spacing);
14
+
15
+ &:hover,
16
+ &:focus {
17
+ text-decoration: none;
18
+ color: var(--header-color);
19
+ }
20
+ }
21
+
22
+ .column {
23
+ margin: var(--spacing) 0;
24
+ }
25
+
26
+ @media screen and (min-width: $screen-laptop) {
27
+ .footer {
28
+ text-align: left;
29
+
30
+ .columns {
31
+ display: grid;
32
+ grid-template-columns: repeat(4, 1fr);
33
+ gap: var(--spacing);
34
+ }
35
+ }
36
+
37
+ .social a {
38
+ margin-left: 0;
39
+ }
40
+ }
@@ -0,0 +1,88 @@
1
+ .site-header {
2
+ color: var(--header-color);
3
+ background: var(--header-bg) no-repeat center center;
4
+ background-size: cover;
5
+ }
6
+
7
+ .site-header-shield {
8
+ width: 100%;
9
+ height: 100%;
10
+ background-color: rgba(0,0,0,0.3);
11
+ }
12
+
13
+ .site-header-content {
14
+ text-align: center;
15
+ padding: calc(var(--spacing) * 4) 0;
16
+ }
17
+
18
+ .site-title {
19
+ margin: 0;
20
+ }
21
+
22
+ .site-title a {
23
+ color: inherit;
24
+
25
+ &:hover,
26
+ &:focus {
27
+ text-decoration: none;
28
+ }
29
+ }
30
+
31
+ .site-tagline {
32
+ margin: 0;
33
+ opacity: 0.8;
34
+ }
35
+
36
+ .nav {
37
+ padding: calc(var(--spacing) * 2) 0;
38
+ font-weight: bold;
39
+ font-size: .8em;
40
+
41
+ .active {
42
+ color: var(--header-color);
43
+ }
44
+ }
45
+
46
+ .nav-item {
47
+ margin-right: var(--spacing);
48
+ color: var(--header-color-dark);
49
+
50
+ &:hover,
51
+ &:focus {
52
+ text-decoration: none;
53
+ color: var(--header-color);
54
+ }
55
+ }
56
+
57
+ .site-header-small-content {
58
+ display: flex;
59
+
60
+ .site-title {
61
+ padding: var(--spacing) 0;
62
+ margin-right: var(--spacing);
63
+ }
64
+
65
+ .nav {
66
+ display: flex;
67
+ justify-content: center;
68
+ align-items: center;
69
+ padding: var(--spacing) 0;
70
+ }
71
+ }
72
+
73
+ @media screen and (min-width: $screen-tablet) {
74
+ .site-header-content {
75
+ padding: calc(var(--spacing) * 6) 0;
76
+ }
77
+ }
78
+
79
+ @media screen and (min-width: $screen-laptop) {
80
+ .site-header-content {
81
+ padding: calc(var(--spacing) * 8) 0;
82
+ }
83
+
84
+ .large-header .nav {
85
+ position: relative;
86
+ top: -70px;
87
+ }
88
+ }
@@ -0,0 +1,90 @@
1
+ /**
2
+ * rougify style gruvbox.dark
3
+ */
4
+
5
+ .highlight table td { padding: 5px; }
6
+ .highlight table pre { margin: 0; }
7
+ .highlight, .highlight .w {
8
+ color: #fbf1c7;
9
+ }
10
+ .highlight .err {
11
+ color: #fb4934;
12
+ background-color: #282828;
13
+ font-weight: bold;
14
+ }
15
+ .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
16
+ color: #928374;
17
+ font-style: italic;
18
+ }
19
+ .highlight .cp {
20
+ color: #8ec07c;
21
+ }
22
+ .highlight .nt {
23
+ color: #fb4934;
24
+ }
25
+ .highlight .o, .highlight .ow {
26
+ color: #fbf1c7;
27
+ }
28
+ .highlight .p, .highlight .pi {
29
+ color: #fbf1c7;
30
+ }
31
+ .highlight .gi {
32
+ color: #b8bb26;
33
+ background-color: #282828;
34
+ }
35
+ .highlight .gd {
36
+ color: #fb4934;
37
+ background-color: #282828;
38
+ }
39
+ .highlight .gh {
40
+ color: #b8bb26;
41
+ font-weight: bold;
42
+ }
43
+ .highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
44
+ color: #fb4934;
45
+ }
46
+ .highlight .kc {
47
+ color: #d3869b;
48
+ }
49
+ .highlight .kt {
50
+ color: #fabd2f;
51
+ }
52
+ .highlight .kd {
53
+ color: #fe8019;
54
+ }
55
+ .highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
56
+ color: #b8bb26;
57
+ font-style: italic;
58
+ }
59
+ .highlight .si {
60
+ color: #b8bb26;
61
+ font-style: italic;
62
+ }
63
+ .highlight .sr {
64
+ color: #b8bb26;
65
+ font-style: italic;
66
+ }
67
+ .highlight .sa {
68
+ color: #fb4934;
69
+ }
70
+ .highlight .se {
71
+ color: #fe8019;
72
+ }
73
+ .highlight .nn {
74
+ color: #8ec07c;
75
+ }
76
+ .highlight .nc {
77
+ color: #8ec07c;
78
+ }
79
+ .highlight .no {
80
+ color: #d3869b;
81
+ }
82
+ .highlight .na {
83
+ color: #b8bb26;
84
+ }
85
+ .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
86
+ color: #d3869b;
87
+ }
88
+ .highlight .ss {
89
+ color: #83a598;
90
+ }
@@ -0,0 +1,90 @@
1
+ /**
2
+ * rougify style gruvbox.light
3
+ */
4
+
5
+ .highlight table td { padding: 5px; }
6
+ .highlight table pre { margin: 0; }
7
+ .highlight, .highlight .w {
8
+ color: #282828;
9
+ }
10
+ .highlight .err {
11
+ color: #9d0006;
12
+ background-color: #fbf1c7;
13
+ font-weight: bold;
14
+ }
15
+ .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
16
+ color: #928374;
17
+ font-style: italic;
18
+ }
19
+ .highlight .cp {
20
+ color: #427b58;
21
+ }
22
+ .highlight .nt {
23
+ color: #9d0006;
24
+ }
25
+ .highlight .o, .highlight .ow {
26
+ color: #282828;
27
+ }
28
+ .highlight .p, .highlight .pi {
29
+ color: #282828;
30
+ }
31
+ .highlight .gi {
32
+ color: #79740e;
33
+ background-color: #fbf1c7;
34
+ }
35
+ .highlight .gd {
36
+ color: #9d0006;
37
+ background-color: #fbf1c7;
38
+ }
39
+ .highlight .gh {
40
+ color: #79740e;
41
+ font-weight: bold;
42
+ }
43
+ .highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
44
+ color: #9d0006;
45
+ }
46
+ .highlight .kc {
47
+ color: #8f3f71;
48
+ }
49
+ .highlight .kt {
50
+ color: #b57614;
51
+ }
52
+ .highlight .kd {
53
+ color: #af3a03;
54
+ }
55
+ .highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
56
+ color: #79740e;
57
+ font-style: italic;
58
+ }
59
+ .highlight .si {
60
+ color: #79740e;
61
+ font-style: italic;
62
+ }
63
+ .highlight .sr {
64
+ color: #79740e;
65
+ font-style: italic;
66
+ }
67
+ .highlight .sa {
68
+ color: #9d0006;
69
+ }
70
+ .highlight .se {
71
+ color: #af3a03;
72
+ }
73
+ .highlight .nn {
74
+ color: #427b58;
75
+ }
76
+ .highlight .nc {
77
+ color: #427b58;
78
+ }
79
+ .highlight .no {
80
+ color: #8f3f71;
81
+ }
82
+ .highlight .na {
83
+ color: #79740e;
84
+ }
85
+ .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
86
+ color: #8f3f71;
87
+ }
88
+ .highlight .ss {
89
+ color: #076678;
90
+ }
@@ -0,0 +1,19 @@
1
+ .wrapper {
2
+ display: flex;
3
+ flex-direction: column;
4
+ min-height: 100vh;
5
+ }
6
+
7
+ .main {
8
+ z-index: 10;
9
+ }
10
+
11
+ .outer {
12
+ padding: 0 4vw;
13
+ }
14
+
15
+ .inner {
16
+ margin: 0 auto;
17
+ max-width: $screen-desktop;
18
+ width: 100%;
19
+ }
@@ -0,0 +1,69 @@
1
+ .pagination {
2
+ margin: var(--spacing) 0;
3
+ display: grid;
4
+ grid-template-columns: repeat(2, 1fr);
5
+ font-size: .8em;
6
+
7
+ .prev, .next {
8
+ padding: var(--spacing);
9
+ border: 1px solid;
10
+ }
11
+
12
+ .prev {
13
+ border-radius: var(--border-radius) 0 0 var(--border-radius);
14
+ }
15
+
16
+ .next {
17
+ border-radius: 0 var(--border-radius) var(--border-radius) 0;
18
+ }
19
+
20
+ .home-prev, .home-next {
21
+ text-align: center;
22
+ }
23
+
24
+ .unable {
25
+ color: var(--body-color-light);
26
+ border-style: dashed;
27
+ }
28
+
29
+ a {
30
+ color: var(--body-color-light);
31
+
32
+ &:hover,
33
+ &:focus {
34
+ text-decoration: none;
35
+ background-color: var(--body-fg);
36
+ }
37
+ }
38
+ }
39
+
40
+ .post-prev {
41
+ text-align: left;
42
+ }
43
+
44
+ .post-next {
45
+ text-align: right;
46
+ }
47
+
48
+ @media screen and (min-width: $screen-tablet) {
49
+ .post-pagination {
50
+ padding: 0 var(--spacing);
51
+ }
52
+ }
53
+
54
+ @media screen and (min-width: $screen-laptop) {
55
+ .post-pagination {
56
+ padding: 0 calc(var(--spacing) * 4);
57
+ }
58
+
59
+ .pagination:not(.post-pagination) {
60
+ position: relative;
61
+ top: -70px;
62
+ }
63
+ }
64
+
65
+ @media screen and (min-width: $screen-desktop) {
66
+ .post-pagination {
67
+ padding: 0 calc(var(--spacing) * 6);
68
+ }
69
+ }