typographical 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,39 @@
1
+ .catalogue {
2
+ &-item {
3
+ border-bottom: 1px solid $grey-2;
4
+ color: $default-color;
5
+ display: inline-block;
6
+ padding: 2rem 0;
7
+
8
+ &:hover .catalogue-line,
9
+ &:focus .catalogue-line {
10
+ width: 5rem;
11
+ }
12
+
13
+ &:last-child {
14
+ border: 0;
15
+ }
16
+ }
17
+
18
+ &-time {
19
+ color: $default-tint;
20
+ font-family: $serif-secondary;
21
+ letter-spacing: .5px;
22
+ }
23
+
24
+ &-title {
25
+ color: $default-shade;
26
+ display: block;
27
+ font-family: $sans-serif;
28
+ font-size: 2rem;
29
+ font-weight: 700;
30
+ margin: .5rem 0;
31
+ }
32
+
33
+ &-line {
34
+ @include transition(all .3s ease-out);
35
+ border-top: .2rem solid $accent-color;
36
+ display: block;
37
+ width: 2rem;
38
+ }
39
+ }
@@ -0,0 +1,46 @@
1
+ pre,
2
+ code {
3
+ font-family: $monospaced;
4
+ }
5
+
6
+ code {
7
+ background-color: $grey-3;
8
+ border-radius: 3px;
9
+ color: $code-color;
10
+ font-size: 85%;
11
+ padding: .25em .5em;
12
+ }
13
+
14
+ pre {
15
+ margin: 0 0 1rem;
16
+ }
17
+
18
+ pre code {
19
+ background-color: transparent;
20
+ color: inherit;
21
+ font-size: 100%;
22
+ padding: 0;
23
+ }
24
+
25
+ .highlight {
26
+ background-color: $grey-3;
27
+ border-radius: 3px;
28
+ line-height: 1.4;
29
+ margin: 0 0 1rem;
30
+ padding: 1rem;
31
+
32
+ pre {
33
+ margin-bottom: 0;
34
+ overflow-x: auto;
35
+ }
36
+
37
+ .lineno {
38
+ color: $default-tint;
39
+ display: inline-block; // Ensures the null space also isn't selectable
40
+ padding: 0 .75rem 0 .25rem;
41
+ // Make sure numbers aren't selectable
42
+ -webkit-user-select: none;
43
+ -moz-user-select: none;
44
+ user-select: none;
45
+ }
46
+ }
@@ -0,0 +1,106 @@
1
+ .container {
2
+ margin: 0 auto;
3
+ max-width: 800px;
4
+ width: 80%;
5
+ }
6
+
7
+ main,
8
+ footer,
9
+ .nav-container {
10
+ display: block;
11
+ margin: 0 auto;
12
+ max-width: 800px;
13
+ width: 80%;
14
+ }
15
+
16
+ .nav {
17
+ box-shadow: 0 2px 2px -2px $shadow-color;
18
+ overflow: auto;
19
+
20
+ &-container {
21
+ margin: 1rem auto;
22
+ position: relative;
23
+ text-align: center;
24
+ }
25
+
26
+ &-title {
27
+ @include transition(all .2s ease-out);
28
+ color: $default-color;
29
+ display: inline-block;
30
+ margin: 0;
31
+ padding-right: .2rem;
32
+
33
+ &:hover,
34
+ &:focus {
35
+ opacity: .6;
36
+ }
37
+ }
38
+
39
+ ul {
40
+ list-style-type: none;
41
+ margin: 1rem 0 0;
42
+ padding: 0;
43
+ text-align: center;
44
+ }
45
+
46
+ li {
47
+ @include transition(all .2s ease-out);
48
+ color: $default-color;
49
+ display: inline-block;
50
+ opacity: .6;
51
+ padding: 0 1rem 0 0;
52
+
53
+ &:last-child {
54
+ padding-right: 0;
55
+ }
56
+
57
+ &:hover,
58
+ &:focus {
59
+ opacity: 1;
60
+ }
61
+ }
62
+
63
+ a {
64
+ color: $default-color;
65
+ font-family: $sans-serif;
66
+ }
67
+ }
68
+
69
+ @media (min-width: 600px) {
70
+ .nav {
71
+ &-container {
72
+ text-align: left;
73
+ }
74
+
75
+ ul {
76
+ bottom: 0;
77
+ position: absolute;
78
+ right: 0;
79
+ }
80
+ }
81
+ }
82
+
83
+ footer {
84
+ font-family: $serif-secondary;
85
+ padding: 2rem 0;
86
+ text-align: center;
87
+
88
+ span {
89
+ color: $default-color;
90
+ font-size: .8rem;
91
+ }
92
+ }
93
+
94
+ .share-bar {
95
+ text-align: center;
96
+ }
97
+
98
+ .share-bar a {
99
+ margin: 0 0.15em;
100
+ color: $default-color;
101
+ font-size: 1.6em;
102
+ }
103
+
104
+ .share-bar a:hover {
105
+ color: $accent-color;
106
+ }
@@ -0,0 +1,36 @@
1
+
2
+ .multipage.paging {
3
+ margin: 7rem auto;
4
+ }
5
+
6
+ .multipage.paging ul {
7
+ display: inline;
8
+ background-color: #f0f0f0;
9
+ padding: 1rem;
10
+ border: 1px solid #999;
11
+ }
12
+
13
+ .multipage.paging ul li {
14
+ display: inline-block;
15
+ list-style-type: none;
16
+ margin: 0.5rem 1rem;
17
+ padding: 0;
18
+ }
19
+
20
+ .multipage.paging ul li.paging-collated {
21
+ margin-left: 3rem;
22
+ }
23
+
24
+ .multipage.paging a {
25
+ text-decoration: none;
26
+ }
27
+
28
+ .multipage.paging ul li a:hover {
29
+ background-color: white;
30
+ }
31
+
32
+ .multipage.pagebreak hr {
33
+ border: 2px solid #999;
34
+ height: 1px;
35
+ margin: 10rem auto;
36
+ }
@@ -0,0 +1,44 @@
1
+ .pagination {
2
+ border-top: .5px solid $grey-2;
3
+ font-family: $serif-secondary;
4
+ padding-top: 2rem;
5
+ position: relative;
6
+ text-align: center;
7
+
8
+ span {
9
+ color: $default-shade;
10
+ font-size: 1.1rem;
11
+ }
12
+
13
+ .top {
14
+ @include transition(all .3s ease-out);
15
+ color: $default-color;
16
+ font-family: $sans-serif;
17
+ font-size: 1.1rem;
18
+ opacity: .6;
19
+
20
+ &:hover {
21
+ opacity: 1;
22
+ }
23
+ }
24
+
25
+ .arrow {
26
+ @include transition(all .3s ease-out);
27
+ color: $default-color;
28
+ position: absolute;
29
+
30
+ &:hover,
31
+ &:focus {
32
+ opacity: .6;
33
+ text-decoration: none;
34
+ }
35
+ }
36
+
37
+ .left {
38
+ left: 0;
39
+ }
40
+
41
+ .right {
42
+ right: 0;
43
+ }
44
+ }
@@ -0,0 +1,63 @@
1
+ .post {
2
+ padding: 3rem 0;
3
+
4
+ &-info {
5
+ color: $default-tint;
6
+ font-family: $serif-secondary;
7
+ letter-spacing: 0.5px;
8
+ text-align: center;
9
+
10
+ span {
11
+ font-style: italic;
12
+ }
13
+ }
14
+
15
+ &-title {
16
+ color: $default-shade;
17
+ font-family: $sans-serif;
18
+ font-size: 4rem;
19
+ margin: 1rem 0;
20
+ text-align: center;
21
+ }
22
+
23
+ &-line {
24
+ border-top: 0.4rem solid $accent-color;
25
+ display: block;
26
+ margin: 0 auto 3rem;
27
+ width: 4rem;
28
+ }
29
+
30
+ p {
31
+ margin: 0 0 1em;
32
+ font-size: $base-font-size;
33
+ }
34
+
35
+ a:hover {
36
+ text-decoration: underline;
37
+ }
38
+
39
+ img {
40
+ margin: 0 auto 0.5rem;
41
+ }
42
+
43
+ img + em {
44
+ color: $default-tint;
45
+ display: block;
46
+ font-family: $sans-serif;
47
+ font-size: 0.9rem;
48
+ font-style: normal;
49
+ text-align: center;
50
+ }
51
+
52
+ // CSS for making emoji inline
53
+ img.emoji {
54
+ display: inline-block;
55
+ left: 0;
56
+ transform: none;
57
+ width: 1rem;
58
+ height: 1rem;
59
+ vertical-align: text-top;
60
+ padding: 0;
61
+ margin: 0;
62
+ }
63
+ }
@@ -0,0 +1,65 @@
1
+ .highlight .hll { background-color: #ffc; }
2
+ .highlight .c { color: #999; } /* Comment */
3
+ .highlight .err { color: #a00; background-color: #faa } /* Error */
4
+ .highlight .k { color: #069; } /* Keyword */
5
+ .highlight .o { color: #555 } /* Operator */
6
+ .highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */
7
+ .highlight .cp { color: #099 } /* Comment.Preproc */
8
+ .highlight .c1 { color: #999; } /* Comment.Single */
9
+ .highlight .cs { color: #999; } /* Comment.Special */
10
+ .highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */
11
+ .highlight .ge { font-style: italic } /* Generic.Emph */
12
+ .highlight .gr { color: #f00 } /* Generic.Error */
13
+ .highlight .gh { color: #030; } /* Generic.Heading */
14
+ .highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */
15
+ .highlight .go { color: #aaa } /* Generic.Output */
16
+ .highlight .gp { color: #009; } /* Generic.Prompt */
17
+ .highlight .gs { } /* Generic.Strong */
18
+ .highlight .gu { color: #030; } /* Generic.Subheading */
19
+ .highlight .gt { color: #9c6 } /* Generic.Traceback */
20
+ .highlight .kc { color: #069; } /* Keyword.Constant */
21
+ .highlight .kd { color: #069; } /* Keyword.Declaration */
22
+ .highlight .kn { color: #069; } /* Keyword.Namespace */
23
+ .highlight .kp { color: #069 } /* Keyword.Pseudo */
24
+ .highlight .kr { color: #069; } /* Keyword.Reserved */
25
+ .highlight .kt { color: #078; } /* Keyword.Type */
26
+ .highlight .m { color: #f60 } /* Literal.Number */
27
+ .highlight .s { color: #d44950 } /* Literal.String */
28
+ .highlight .na { color: #4f9fcf } /* Name.Attribute */
29
+ .highlight .nb { color: #366 } /* Name.Builtin */
30
+ .highlight .nc { color: #0a8; } /* Name.Class */
31
+ .highlight .no { color: #360 } /* Name.Constant */
32
+ .highlight .nd { color: #99f } /* Name.Decorator */
33
+ .highlight .ni { color: #999; } /* Name.Entity */
34
+ .highlight .ne { color: #c00; } /* Name.Exception */
35
+ .highlight .nf { color: #c0f } /* Name.Function */
36
+ .highlight .nl { color: #99f } /* Name.Label */
37
+ .highlight .nn { color: #0cf; } /* Name.Namespace */
38
+ .highlight .nt { color: #2f6f9f; } /* Name.Tag */
39
+ .highlight .nv { color: #033 } /* Name.Variable */
40
+ .highlight .ow { color: #000; } /* Operator.Word */
41
+ .highlight .w { color: #bbb } /* Text.Whitespace */
42
+ .highlight .mf { color: #f60 } /* Literal.Number.Float */
43
+ .highlight .mh { color: #f60 } /* Literal.Number.Hex */
44
+ .highlight .mi { color: #f60 } /* Literal.Number.Integer */
45
+ .highlight .mo { color: #f60 } /* Literal.Number.Oct */
46
+ .highlight .sb { color: #c30 } /* Literal.String.Backtick */
47
+ .highlight .sc { color: #c30 } /* Literal.String.Char */
48
+ .highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */
49
+ .highlight .s2 { color: #c30 } /* Literal.String.Double */
50
+ .highlight .se { color: #c30; } /* Literal.String.Escape */
51
+ .highlight .sh { color: #c30 } /* Literal.String.Heredoc */
52
+ .highlight .si { color: #a00 } /* Literal.String.Interpol */
53
+ .highlight .sx { color: #c30 } /* Literal.String.Other */
54
+ .highlight .sr { color: #3aa } /* Literal.String.Regex */
55
+ .highlight .s1 { color: #c30 } /* Literal.String.Single */
56
+ .highlight .ss { color: #fc3 } /* Literal.String.Symbol */
57
+ .highlight .bp { color: #366 } /* Name.Builtin.Pseudo */
58
+ .highlight .vc { color: #033 } /* Name.Variable.Class */
59
+ .highlight .vg { color: #033 } /* Name.Variable.Global */
60
+ .highlight .vi { color: #033 } /* Name.Variable.Instance */
61
+ .highlight .il { color: #f60 } /* Literal.Number.Integer.Long */
62
+
63
+ .css .o,
64
+ .css .o + .nt,
65
+ .css .nt + .nt { color: #999; }
@@ -0,0 +1,147 @@
1
+ p a, footer a, .post-list a, .relatedposts a, .support a {
2
+ color: $default-color;
3
+ outline: none;
4
+ text-decoration: none !important;
5
+ transition: all .2s ease-out;
6
+ background: linear-gradient($accent-color, $accent-color);
7
+ background-size: 100% .2em;
8
+ background-repeat: no-repeat;
9
+ background-position: left 0 bottom 0;
10
+ }
11
+
12
+ #results-container a {
13
+ color: $default-color;
14
+ text-decoration: none;
15
+ }
16
+
17
+ ul#results-container li {
18
+ color: $accent-color;
19
+ list-style-type: square;
20
+ }
21
+
22
+ input, textarea {
23
+ font-family: $serif-primary;
24
+ font-size: 1em;
25
+ border: none;
26
+ padding: 0.2em 0.5em;
27
+ width: 100%;
28
+ }
29
+
30
+ input:focus, textarea:focus {
31
+ outline: none;
32
+ }
33
+
34
+ .post-info a {
35
+ color: inherit;
36
+ text-decoration: none;
37
+ }
38
+
39
+ .post-info a:hover {
40
+ text-decoration: none;
41
+ }
42
+
43
+ .post .drop-cap {
44
+ font-size: 5.8em;
45
+ float: left;
46
+ line-height: 1;
47
+ margin: -0.09em 0.03em -0.1em -0.05em;
48
+ }
49
+
50
+ .post > p:first-of-type::first-line {
51
+ font-family: "Alegreya SC";
52
+ text-transform: lowercase;
53
+ letter-spacing: 0.01em;
54
+ }
55
+
56
+ .page .post-title, .post .post-title {
57
+ text-transform: lowercase;
58
+ }
59
+
60
+ .relatedposts ul li {
61
+ font-size: $base-font-size;
62
+ list-style-type: none;
63
+ }
64
+
65
+ .relatedposts {
66
+ margin-top: 3.5em;
67
+ }
68
+
69
+ .footer-icons {
70
+ color: $grey-2;
71
+ font-size: 3em;
72
+ margin-top: 0.2em;
73
+ }
74
+
75
+ .footer-icons .fas, .footer-icons .fab {
76
+ margin: 0 0.1em;
77
+ }
78
+
79
+ footer {
80
+ max-width: 640px;
81
+ }
82
+
83
+ @media (max-width: 600px) {
84
+ .nav-title {
85
+ font-size: 2em;
86
+ margin-top: 1em;
87
+ }
88
+
89
+ .nav-container ul {
90
+ font-size: 1.5em;
91
+ }
92
+
93
+ .nav-container ul a {
94
+ color: $grey-1;
95
+ }
96
+
97
+ .share-bar .share-buttons {
98
+ font-size: 1.3em;
99
+ }
100
+
101
+ .share-bar .share-buttons .fab {
102
+ margin: 0 0.1em;
103
+ }
104
+ }
105
+
106
+ ::selection {
107
+ background-color: $accent-color;
108
+ }
109
+
110
+ footer, .share-bar, .nav-container { /* Disable selection of some elements */
111
+ -webkit-touch-callout: none; /* iOS Safari */
112
+ -webkit-user-select: none; /* Safari */
113
+ -khtml-user-select: none; /* Konqueror HTML */
114
+ -moz-user-select: none; /* Firefox */
115
+ -ms-user-select: none; /* Internet Explorer/Edge */
116
+ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
117
+ }
118
+
119
+ @media (max-width: 600px) {
120
+ * {
121
+ -webkit-touch-callout: none; /* iOS Safari */
122
+ -webkit-user-select: none; /* Safari */
123
+ -khtml-user-select: none; /* Konqueror HTML */
124
+ -moz-user-select: none; /* Firefox */
125
+ -ms-user-select: none; /* Internet Explorer/Edge */
126
+ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
127
+ }
128
+ }
129
+
130
+ .post blockquote p {
131
+ font-size: 1.25em;
132
+ }
133
+
134
+ .post li {
135
+ font-size: $base-font-size;
136
+ }
137
+
138
+ p strong, li strong { // for abbreviations that need small caps
139
+ font-family: $sc-font;
140
+ font-weight: normal;
141
+ text-transform: lowercase;
142
+ letter-spacing: 0.01em;
143
+ }
144
+
145
+ .hidden {
146
+ display: none;
147
+ }