jekyll-theme-tao 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,168 @@
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-family: var(--body-font);
37
+ font-size: .8em;
38
+ }
39
+
40
+ article img {
41
+ display: block;
42
+ max-width: 100%;
43
+ margin: 1em 0;
44
+ border-radius: .5em;
45
+ }
46
+
47
+ blockquote {
48
+ border-left: .2em solid var(--body-color-light);
49
+ padding-left: var(--spacing);
50
+ margin-left: 0;
51
+ margin-right: 0;
52
+ font-style: italic;
53
+
54
+ i, em {
55
+ font-style: normal;
56
+ }
57
+ }
58
+
59
+ ul, ol {
60
+ padding-left: calc(2 * var(--spacing));
61
+ margin: var(--spacing) 0;
62
+ }
63
+
64
+ li {
65
+ ul, ol {
66
+ margin: 0;
67
+ }
68
+
69
+ > p {
70
+ margin-top: 0;
71
+ }
72
+ }
73
+
74
+ table {
75
+ width: 100%;
76
+ border-collapse: collapse;
77
+ margin: var(--spacing) 0;
78
+ }
79
+
80
+ td, th {
81
+ padding: .25em .5em;
82
+ border-bottom: 1px solid var(--body-color-light);
83
+ }
84
+
85
+ thead th {
86
+ border-bottom-color: currentColor;
87
+ }
88
+
89
+ hr {
90
+ border: 0;
91
+ border-top: 1px solid var(--body-color-light);
92
+ }
93
+
94
+ code, pre {
95
+ font-family: var(--code-font);
96
+ font-size: .9em;
97
+ }
98
+
99
+ code {
100
+ padding: .1em .25em;
101
+ background-color: var(--body-fg);
102
+ border-radius: .5em;
103
+ }
104
+
105
+ pre {
106
+ overflow: auto;
107
+ padding: 1em;
108
+ margin: 1em 0;
109
+
110
+ code {
111
+ padding: 0;
112
+ background-color: inherit;
113
+ }
114
+ }
115
+
116
+ .highlight {
117
+ border-radius: .5em;
118
+ background-color: var(--body-fg);
119
+ }
120
+
121
+ .rouge-table {
122
+ border: 0;
123
+ margin: 0;
124
+
125
+ td,
126
+ th {
127
+ border: 0;
128
+ padding: 0;
129
+ }
130
+
131
+ pre {
132
+ padding: 0;
133
+ margin: 0;
134
+ }
135
+
136
+ .gutter {
137
+ user-select: none;
138
+ opacity: .5;
139
+ padding-right: 1em;
140
+ }
141
+ }
142
+
143
+ a[href^="#fn:"],
144
+ a[href^="#fnref:"] {
145
+ display: inline-block;
146
+ margin-left: .1em;
147
+ font-weight: bold;
148
+ }
149
+
150
+ // List of footnotes
151
+ .footnotes {
152
+ font-size: .8em;
153
+ }
154
+
155
+ #markdown-toc {
156
+ font-family: var(--body-font);
157
+ font-size: .8em;
158
+ padding: 2em 3em;
159
+ margin: 2em 0;
160
+ border: solid var(--body-color-light);
161
+ border-width: 1px 0;
162
+
163
+ &::before {
164
+ display: block;
165
+ margin-left: -3em;
166
+ content: "TOC";
167
+ }
168
+ }
@@ -0,0 +1,44 @@
1
+ /**
2
+ * Styles for the footer
3
+ */
4
+
5
+ .footer {
6
+ margin-top: auto;
7
+ margin-bottom: var(--spacing);
8
+ padding-top: calc(3 * var(--spacing));
9
+ color: var(--body-color-light);
10
+ text-align: center;
11
+
12
+ .columns {
13
+ font-size: .8em;
14
+ }
15
+ }
16
+
17
+ .social a {
18
+ color: inherit;
19
+ margin-left: var(--spacing);
20
+ margin-right: var(--spacing);
21
+
22
+ &:hover,
23
+ &:focus {
24
+ text-decoration: none;
25
+ color: var(--body-color-dark);
26
+ }
27
+ }
28
+
29
+
30
+ @media screen and (min-width: $screen-laptop) {
31
+ .footer {
32
+ text-align: left;
33
+
34
+ .columns {
35
+ display: grid;
36
+ grid-template-columns: repeat(3, 1fr);
37
+ gap: var(--spacing);
38
+ }
39
+ }
40
+
41
+ .social a {
42
+ margin-left: 0;
43
+ }
44
+ }
@@ -0,0 +1,49 @@
1
+ /**
2
+ * Styles for the header
3
+ */
4
+
5
+ .masthead {
6
+ margin-top: var(--spacing);
7
+ margin-bottom: calc(3 * var(--spacing));
8
+ }
9
+
10
+ .masthead-title {
11
+ margin: 0;
12
+
13
+ a {
14
+ color: inherit;
15
+
16
+ &:hover,
17
+ &:focus {
18
+ text-decoration: none;
19
+ color: var(--body-color-dark);
20
+ }
21
+ }
22
+ }
23
+
24
+ .masthead-tagline {
25
+ margin-top: 0;
26
+ margin-bottom: 0;
27
+ color: var(--body-color-light);
28
+ }
29
+
30
+ .nav {
31
+ font-weight: bold;
32
+ font-size: .8em;
33
+ margin-top: calc(2 * var(--spacing));
34
+
35
+ .active {
36
+ color: var(--body-color-dark);
37
+ }
38
+ }
39
+
40
+ .nav-item {
41
+ margin-right: var(--spacing);
42
+ color: var(--body-color-light);
43
+
44
+ &:hover,
45
+ &:focus {
46
+ text-decoration: none;
47
+ color: var(--body-color-dark);
48
+ }
49
+ }
@@ -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,57 @@
1
+ /**
2
+ * Styles for the home page
3
+ */
4
+
5
+ .post-entry {
6
+ margin-bottom: calc(2 * var(--spacing));
7
+
8
+ .thumbnail-container {
9
+ margin-top: var(--spacing);
10
+ border-radius: .5em;
11
+ overflow: hidden;
12
+ }
13
+
14
+ .thumbnail-container img {
15
+ margin-top : -20%;
16
+ margin-bottom : -20%;
17
+ }
18
+ }
19
+
20
+ .pagination {
21
+ margin-top: calc(2 * var(--spacing));
22
+ display: grid;
23
+ grid-template-columns: repeat(2, 1fr);
24
+ font-size: .8em;
25
+
26
+ .prev, .next {
27
+ padding: var(--spacing);
28
+ border: 1px solid;
29
+ }
30
+
31
+ .prev {
32
+ border-radius: 1em 0 0 1em;
33
+ }
34
+
35
+ .next {
36
+ border-radius: 0 1em 1em 0;
37
+ }
38
+
39
+ .home-prev, .home-next {
40
+ text-align: center;
41
+ }
42
+
43
+ .unable {
44
+ color: var(--body-color-light);
45
+ border-style: dashed;
46
+ }
47
+
48
+ a {
49
+ color: var(--body-color-light);
50
+
51
+ &:hover,
52
+ &:focus {
53
+ text-decoration: none;
54
+ background-color: var(--body-fg);
55
+ }
56
+ }
57
+ }
@@ -0,0 +1,57 @@
1
+ /**
2
+ * Styles for the pages and posts
3
+ */
4
+
5
+ .page-content,
6
+ .post-content {
7
+ font-family: var(--text-font);
8
+ }
9
+
10
+ .page-title,
11
+ .post-title {
12
+ margin: 0;
13
+ }
14
+
15
+ .post-subtitle {
16
+ margin: 0;
17
+ color: var(--body-color-light);
18
+ }
19
+
20
+ .post-meta {
21
+ color: var(--body-color-light);
22
+ font-size: .8em;
23
+ }
24
+
25
+ .post-meta-top {
26
+ margin-bottom: var(--spacing);
27
+ display: grid;
28
+ grid-template-columns: 2fr 1fr;
29
+ gap: var(--spacing);
30
+ }
31
+
32
+ .post-categories {
33
+ text-align: right;
34
+ }
35
+
36
+ a.post-category,
37
+ a.post-tag {
38
+ color: inherit;
39
+
40
+ &:hover,
41
+ &:focus {
42
+ text-decoration: none;
43
+ color: var(--body-color-dark);
44
+ }
45
+ }
46
+
47
+ .post-meta-bottom {
48
+ margin-top: var(--spacing);
49
+ }
50
+
51
+ .post-prev {
52
+ text-align: left;
53
+ }
54
+
55
+ .post-next {
56
+ text-align: right;
57
+ }
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Some variables the user can overwrite
3
+ */
4
+
5
+ // Some common breakpoints for widths of devices. Refer: https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/
6
+ $screen-tablet: 480px;
7
+ $screen-laptop: 768px;
8
+ $screen-desktop: 1024px;
9
+
10
+ :root {
11
+ --spacing: 1em;
12
+
13
+ --body-bg: var(--oc-white);
14
+ --body-fg: var(--oc-gray-1);
15
+ --body-color-light: var(--oc-gray-6);
16
+ --body-color: var(--oc-gray-8);
17
+ --body-color-dark: var(--oc-black);
18
+ --accent-color: var(--oc-orange-8);
19
+
20
+ --body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
21
+ --title-font: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
22
+ --text-font: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
23
+ --code-font: 'Courier New', Courier, monospace;
24
+ --line-height: 1.5;
25
+ --body-font-size: 16px;
26
+ }
27
+
28
+ @media (prefers-color-scheme: dark) {
29
+ :root {
30
+ --body-bg: var(--oc-gray-9);
31
+ --body-fg: var(--oc-gray-8);
32
+ --body-color-light: var(--oc-gray-6);
33
+ --body-color: var(--oc-gray-3);
34
+ --body-color-dark: var(--oc-white);
35
+ --accent-color: var(--oc-blue-3);
36
+ }
37
+ }
38
+
39
+ @media screen and (min-width: $screen-laptop) {
40
+ :root {
41
+ --body-font-size: 18px;
42
+ }
43
+ }
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Styles for the wrapper
3
+ */
4
+
5
+ .wrapper {
6
+ display: flex;
7
+ flex-direction: column;
8
+ margin-left: auto;
9
+ margin-right: auto;
10
+ padding: var(--spacing);
11
+ max-width: calc(600px + 2 * var(--spacing)); // Refer: https://socialtriggers.com/perfect-content-width/
12
+ min-height: 100vh;
13
+ }
@@ -0,0 +1,12 @@
1
+ @import "variables";
2
+ @import "base";
3
+ @import "wrapper";
4
+ @import "header";
5
+ @import "page";
6
+ @import "home";
7
+ @import "footer";
8
+ @import "archive";
9
+ @import "highlight-light";
10
+ @media (prefers-color-scheme: dark) {
11
+ @import "highlight-dark";
12
+ }