plainwhite 0.8 → 0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,12 +7,14 @@ layout: default
7
7
  <h2 class="post-title">{{ page.title | escape }}</h2>
8
8
  </a>
9
9
  <div class="post-meta">
10
+ <div class="post-date"><i class="icon-calendar"></i>{{ page.date | date: date_format }}</div>
11
+ {%- if page.categories.size > 0 -%}
10
12
  <ul class="post-categories">
11
13
  {%- for tag in page.categories -%}
12
14
  <li>{{ tag }}</li>
13
15
  {%- endfor -%}
14
16
  </ul>
15
- <div class="post-date"><i class="icon-calendar"></i>{{ page.date | date: date_format }}</div>
17
+ {%- endif -%}
16
18
  </div>
17
19
  <div class="post">
18
20
  {{ content }}
@@ -0,0 +1,117 @@
1
+ .dark,
2
+ .dark * {
3
+ $dark_text_color: #f6f6f6;
4
+ $dark_link_color: #4da3ff;
5
+ background-color: #171717;
6
+ color: $dark_text_color;
7
+ border-color: #e6e6e6;
8
+
9
+ .about{
10
+ img.light {
11
+ display: none;
12
+ }
13
+ img.dark {
14
+ display: inline;
15
+ }
16
+ }
17
+ .post p {
18
+ color: #ddd;
19
+ }
20
+
21
+ .social [class^="icon-"] {
22
+ color: $dark_text_color
23
+ }
24
+
25
+ #posts-label {
26
+ color: $dark_text_color;
27
+ border-bottom: 1px solid #272727;
28
+ }
29
+
30
+ @import 'ext/solarized-dark';
31
+ .highlight, .highlight *
32
+ {
33
+ background-color: #00080a;
34
+ color: #93a1a1;
35
+ }
36
+
37
+ div.highlight-dark {
38
+ padding: 5px 20px;
39
+ }
40
+ pre.highlight-dark, code {
41
+ font-family: 'Consolas', Menlo, monospace;
42
+ line-height: 1.4em;
43
+ tab-size: 4;
44
+ }
45
+
46
+ .post-categories {
47
+ li {
48
+ background-color: #333;
49
+ color: #fff;
50
+ }
51
+ }
52
+
53
+ a {
54
+ color: $dark_link_color;
55
+ }
56
+ #title a {
57
+ color: #fff;
58
+ &:hover {
59
+ color: $dark_link_color;
60
+ }
61
+ }
62
+
63
+ .posts-labelgroup {
64
+
65
+ border-bottom: 1px solid #333;
66
+ .search-results {
67
+ background-color: #333;
68
+
69
+ a {
70
+ color: white;
71
+
72
+ &:hover {
73
+ background-color: #171717;
74
+ }
75
+ }
76
+ }
77
+
78
+ .search-section i {
79
+ background-color: transparent;
80
+ }
81
+ }
82
+
83
+ .posts-labelgroup:hover {
84
+
85
+ i {
86
+ color: white;
87
+ }
88
+
89
+ input {
90
+ color: white;
91
+ }
92
+ }
93
+
94
+
95
+ .posts-labelgroup.focus-within {
96
+
97
+ .search-section {
98
+ background-color: #333;
99
+ }
100
+
101
+ input {
102
+ color: $dark_text_color;
103
+ }
104
+
105
+ i {
106
+ color: white;
107
+ }
108
+ }
109
+ }
110
+ .dark table {
111
+ th, td {
112
+ border: 1px solid #333;
113
+ }
114
+ th {
115
+ background-color: #0d0d0d;
116
+ }
117
+ }
@@ -1,11 +1,11 @@
1
1
  @font-face {
2
2
  font-family: 'fontello';
3
- src: url('../font/fontello.eot?26793073');
4
- src: url('../font/fontello.eot?26793073#iefix') format('embedded-opentype'),
5
- url('../font/fontello.woff2?26793073') format('woff2'),
6
- url('../font/fontello.woff?26793073') format('woff'),
7
- url('../font/fontello.ttf?26793073') format('truetype'),
8
- url('../font/fontello.svg?26793073#fontello') format('svg');
3
+ src: url('../font/fontello.eot?37382099');
4
+ src: url('../font/fontello.eot?37382099#iefix') format('embedded-opentype'),
5
+ url('../font/fontello.woff2?37382099') format('woff2'),
6
+ url('../font/fontello.woff?37382099') format('woff'),
7
+ url('../font/fontello.ttf?37382099') format('truetype'),
8
+ url('../font/fontello.svg?37382099#fontello') format('svg');
9
9
  font-weight: normal;
10
10
  font-style: normal;
11
11
  }
@@ -15,7 +15,7 @@
15
15
  @media screen and (-webkit-min-device-pixel-ratio:0) {
16
16
  @font-face {
17
17
  font-family: 'fontello';
18
- src: url('../font/fontello.svg?26793073#fontello') format('svg');
18
+ src: url('../font/fontello.svg?37382099#fontello') format('svg');
19
19
  }
20
20
  }
21
21
  */
@@ -24,7 +24,7 @@
24
24
  font-family: "fontello";
25
25
  font-style: normal;
26
26
  font-weight: normal;
27
- speak: none;
27
+ speak: never;
28
28
 
29
29
  display: inline-block;
30
30
  text-decoration: inherit;
@@ -56,6 +56,17 @@
56
56
  }
57
57
 
58
58
  .icon-calendar:before { content: '\e800'; } /* '' */
59
+ .icon-calendar-1:before { content: '\e801'; } /* '' */
60
+ .icon-search:before { content: '\e805'; } /* '' */
59
61
  .icon-github-circled:before { content: '\f09b'; } /* '' */
62
+ .icon-pinterest-squared:before { content: '\f0d3'; } /* '' */
63
+ .icon-youtube:before { content: '\f167'; } /* '' */
64
+ .icon-instagram:before { content: '\f16d'; } /* '' */
65
+ .icon-flickr:before { content: '\f16e'; } /* '' */
66
+ .icon-dribbble:before { content: '\f17d'; } /* '' */
67
+ .icon-gitlab:before { content: '\f296'; } /* '' */
68
+ .icon-telegram:before { content: '\f2c6'; } /* '' */
60
69
  .icon-twitter-squared:before { content: '\f304'; } /* '' */
61
- .icon-linkedin-squared:before { content: '\f30c'; } /* '' */
70
+ .icon-facebook-squared:before { content: '\f308'; } /* '' */
71
+ .icon-linkedin-squared:before { content: '\f30c'; } /* '' */
72
+ .icon-soundcloud:before { content: '\f348'; } /* '' */
@@ -0,0 +1,87 @@
1
+ /* Solarized Dark
2
+
3
+ For use with Jekyll and Pygments
4
+
5
+ http://ethanschoonover.com/solarized
6
+
7
+ SOLARIZED HEX ROLE
8
+ --------- -------- ------------------------------------------
9
+ base03 #002b36 background
10
+ base01 #586e75 comments / secondary content
11
+ base1 #93a1a1 body text / default code / primary content
12
+ orange #cb4b16 constants
13
+ red #dc322f regex, special keywords
14
+ blue #268bd2 reserved keywords
15
+ cyan #2aa198 strings, numbers
16
+ green #859900 operators, other keywords
17
+ */
18
+
19
+ .highlight { background-color: #002b36; color: #93a1a1 }
20
+ .highlight .c { color: #586e75 } /* Comment */
21
+ .highlight .err { color: #93a1a1 } /* Error */
22
+ .highlight .g { color: #93a1a1 } /* Generic */
23
+ .highlight .k { color: #859900 } /* Keyword */
24
+ .highlight .l { color: #93a1a1 } /* Literal */
25
+ .highlight .n { color: #93a1a1 } /* Name */
26
+ .highlight .o { color: #859900 } /* Operator */
27
+ .highlight .x { color: #cb4b16 } /* Other */
28
+ .highlight .p { color: #93a1a1 } /* Punctuation */
29
+ .highlight .cm { color: #586e75 } /* Comment.Multiline */
30
+ .highlight .cp { color: #859900 } /* Comment.Preproc */
31
+ .highlight .c1 { color: #586e75 } /* Comment.Single */
32
+ .highlight .cs { color: #859900 } /* Comment.Special */
33
+ .highlight .gd { color: #2aa198 } /* Generic.Deleted */
34
+ .highlight .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
35
+ .highlight .gr { color: #dc322f } /* Generic.Error */
36
+ .highlight .gh { color: #cb4b16 } /* Generic.Heading */
37
+ .highlight .gi { color: #859900 } /* Generic.Inserted */
38
+ .highlight .go { color: #93a1a1 } /* Generic.Output */
39
+ .highlight .gp { color: #93a1a1 } /* Generic.Prompt */
40
+ .highlight .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
41
+ .highlight .gu { color: #cb4b16 } /* Generic.Subheading */
42
+ .highlight .gt { color: #93a1a1 } /* Generic.Traceback */
43
+ .highlight .kc { color: #cb4b16 } /* Keyword.Constant */
44
+ .highlight .kd { color: #268bd2 } /* Keyword.Declaration */
45
+ .highlight .kn { color: #859900 } /* Keyword.Namespace */
46
+ .highlight .kp { color: #859900 } /* Keyword.Pseudo */
47
+ .highlight .kr { color: #268bd2 } /* Keyword.Reserved */
48
+ .highlight .kt { color: #dc322f } /* Keyword.Type */
49
+ .highlight .ld { color: #93a1a1 } /* Literal.Date */
50
+ .highlight .m { color: #2aa198 } /* Literal.Number */
51
+ .highlight .s { color: #2aa198 } /* Literal.String */
52
+ .highlight .na { color: #93a1a1 } /* Name.Attribute */
53
+ .highlight .nb { color: #B58900 } /* Name.Builtin */
54
+ .highlight .nc { color: #268bd2 } /* Name.Class */
55
+ .highlight .no { color: #cb4b16 } /* Name.Constant */
56
+ .highlight .nd { color: #268bd2 } /* Name.Decorator */
57
+ .highlight .ni { color: #cb4b16 } /* Name.Entity */
58
+ .highlight .ne { color: #cb4b16 } /* Name.Exception */
59
+ .highlight .nf { color: #268bd2 } /* Name.Function */
60
+ .highlight .nl { color: #93a1a1 } /* Name.Label */
61
+ .highlight .nn { color: #93a1a1 } /* Name.Namespace */
62
+ .highlight .nx { color: #93a1a1 } /* Name.Other */
63
+ .highlight .py { color: #93a1a1 } /* Name.Property */
64
+ .highlight .nt { color: #268bd2 } /* Name.Tag */
65
+ .highlight .nv { color: #268bd2 } /* Name.Variable */
66
+ .highlight .ow { color: #859900 } /* Operator.Word */
67
+ .highlight .w { color: #93a1a1 } /* Text.Whitespace */
68
+ .highlight .mf { color: #2aa198 } /* Literal.Number.Float */
69
+ .highlight .mh { color: #2aa198 } /* Literal.Number.Hex */
70
+ .highlight .mi { color: #2aa198 } /* Literal.Number.Integer */
71
+ .highlight .mo { color: #2aa198 } /* Literal.Number.Oct */
72
+ .highlight .sb { color: #586e75 } /* Literal.String.Backtick */
73
+ .highlight .sc { color: #2aa198 } /* Literal.String.Char */
74
+ .highlight .sd { color: #93a1a1 } /* Literal.String.Doc */
75
+ .highlight .s2 { color: #2aa198 } /* Literal.String.Double */
76
+ .highlight .se { color: #cb4b16 } /* Literal.String.Escape */
77
+ .highlight .sh { color: #93a1a1 } /* Literal.String.Heredoc */
78
+ .highlight .si { color: #2aa198 } /* Literal.String.Interpol */
79
+ .highlight .sx { color: #2aa198 } /* Literal.String.Other */
80
+ .highlight .sr { color: #dc322f } /* Literal.String.Regex */
81
+ .highlight .s1 { color: #2aa198 } /* Literal.String.Single */
82
+ .highlight .ss { color: #2aa198 } /* Literal.String.Symbol */
83
+ .highlight .bp { color: #268bd2 } /* Name.Builtin.Pseudo */
84
+ .highlight .vc { color: #268bd2 } /* Name.Variable.Class */
85
+ .highlight .vg { color: #268bd2 } /* Name.Variable.Global */
86
+ .highlight .vi { color: #268bd2 } /* Name.Variable.Instance */
87
+ .highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */
@@ -1,197 +1,336 @@
1
- @import 'ext/fonts';
2
- @import 'ext/normalize';
3
- @import 'syntax';
1
+ @import "ext/fonts";
2
+ @import "ext/normalize";
3
+ @import "syntax";
4
4
 
5
- $linkColor: #0A59B0;
5
+ $linkColor: #0a59b0;
6
6
  $mobileW: 768px;
7
7
  $smallMobileW: 480px;
8
8
  $bigScreenW: 1600px;
9
9
  $leftWidth: 220px;
10
10
 
11
- *,*:before,*:after {
12
- box-sizing: border-box;
11
+ *,
12
+ *:before,
13
+ *:after {
14
+ box-sizing: border-box;
13
15
  }
14
16
 
15
17
  body {
16
- font-family: 'Raleway', sans-serif;
17
- font-size: 16px;
18
- line-height: 1.2em;
19
- margin: 0;
20
- -webkit-font-smoothing: antialiased;
21
- -moz-osx-font-smoothing: grayscale;
18
+ font-family: "Raleway", sans-serif;
19
+ font-size: 16px;
20
+ line-height: 1.2em;
21
+ margin: 0;
22
+ -webkit-font-smoothing: antialiased;
23
+ -moz-osx-font-smoothing: grayscale;
22
24
  }
23
25
 
24
- img, embed, object, video {
25
- max-width: 100%;
26
+ img,
27
+ embed,
28
+ object,
29
+ video {
30
+ max-width: 100%;
26
31
  }
27
32
 
28
33
  a {
29
- color: #000;
30
- transition: color 0.3s;
31
- &:hover {
32
- color: $linkColor;
33
- }
34
+ color: #000;
35
+ transition: color 0.3s;
36
+ &:hover {
37
+ color: $linkColor;
38
+ }
34
39
  }
35
40
 
36
41
  h2 {
37
- margin: 0.7em 0;
42
+ margin: 0.7em 0;
43
+ @media screen and (max-width: $mobileW) {
44
+ margin: 0.3em 0;
45
+ }
38
46
  }
39
47
  main {
40
- margin: 0 90px;
41
- display: flex;
42
- height: 100%;
43
-
44
- @media screen and (min-width: $bigScreenW) {
45
- margin: 0 auto;
46
- max-width: 1440px;
47
- }
48
- @media screen and (max-width: 1280px) {
49
- margin: 0 75px;
50
- }
51
- @media screen and (max-width: 1024px){
52
- margin: 0 35px;
53
- }
54
-
55
- @media screen and (max-width: $mobileW) {
56
- margin: 0 10px;
57
- flex-direction: column;
58
- }
59
- @media screen and (max-width: $smallMobileW) {
60
- margin: 0;
61
- }
62
-
63
- .content {
64
- @media screen and (min-width: $mobileW + 1){
65
- max-width: calc(100% - #{$leftWidth});
66
- margin-left: $leftWidth;
67
- width: 100%;
68
- }
69
- }
70
- .about {
71
- display: flex;
72
- height: 100vh;
73
- padding-bottom: 15vh;
74
- @media screen and (max-width: $mobileW) {
75
- height: auto;
76
- padding: 10vh 0;
77
- }
78
- @media screen and (min-width: $mobileW + 1) {
79
- position: fixed;
80
- }
81
- min-width: $leftWidth;
82
- justify-content: center;
83
- flex-direction: column;
84
- align-items: center;
85
- h2 {
86
- font-size: 22px;
87
- margin-top: 25px;
88
- margin-bottom: 0;
89
- color: #222222;
90
- font-weight: normal;
91
- }
92
- .tagline {
93
- font-size: 22px;
94
- margin-top: 17px;
95
- color: #aaa;
96
- }
97
- img {
98
- max-width: 150px;
99
- }
100
- }
48
+ margin: 0 90px;
49
+ display: flex;
50
+ height: 100%;
51
+
52
+ @media screen and (min-width: $bigScreenW) {
53
+ margin: 0 auto;
54
+ max-width: 1440px;
55
+ }
56
+ @media screen and (max-width: 1280px) {
57
+ margin: 0 75px;
58
+ }
59
+ @media screen and (max-width: 1024px) {
60
+ margin: 0 35px;
61
+ }
62
+
63
+ @media screen and (max-width: $mobileW) {
64
+ margin: 0 10px;
65
+ flex-direction: column;
66
+ }
67
+ @media screen and (max-width: $smallMobileW) {
68
+ margin: 0;
69
+ }
70
+
71
+ .content {
72
+ @media screen and (min-width: $mobileW + 1) {
73
+ max-width: calc(100% - #{$leftWidth});
74
+ margin-left: $leftWidth;
75
+ width: 100%;
76
+ }
77
+ }
78
+ .about {
79
+ display: flex;
80
+ height: 100vh;
81
+ padding-bottom: 15vh;
82
+ @media screen and (max-width: $mobileW) {
83
+ height: auto;
84
+ padding: 5vh 30px;
85
+ }
86
+ @media screen and (max-width: $smallMobileW) {
87
+ padding: 5vh 20px;
88
+ }
89
+ @media screen and (min-width: $mobileW + 1) {
90
+ position: fixed;
91
+ max-width: 280px;
92
+ }
93
+ min-width: $leftWidth;
94
+ justify-content: center;
95
+ flex-direction: column;
96
+ align-items: center;
97
+ h2 {
98
+ font-size: 22px;
99
+ margin-top: 25px;
100
+ margin-bottom: 0;
101
+ color: #222222;
102
+ font-weight: normal;
103
+ }
104
+ .tagline {
105
+ text-align: center;
106
+ font-size: 22px;
107
+ margin-top: 0px;
108
+ color: #aaa;
109
+ white-space: pre-wrap;
110
+ line-height: normal;
111
+ }
112
+ img {
113
+ max-width: 150px;
114
+ }
115
+ img.dark {
116
+ display: none;
117
+ }
118
+ .about-header {
119
+ display: flex;
120
+ flex-direction: column;
121
+ .about-title {
122
+ display: flex;
123
+ flex-direction: column;
124
+ align-items: center;
125
+ margin-bottom: 17px;
126
+ }
127
+ }
128
+ }
129
+ }
130
+ #title {
131
+ a {
132
+ text-decoration: none;
133
+ }
101
134
  }
102
135
  .social {
103
- list-style-type: none;
104
- padding: 0;
105
- margin-top: 0;
106
- li {
107
- float: left;
108
- i {
109
- font-size: 34px;
110
- }
111
- }
136
+ list-style-type: none;
137
+ padding: 0;
138
+ display: flex;
139
+ flex-wrap: wrap;
140
+ justify-content: center;
141
+ a {
142
+ margin-bottom: .5em;
143
+ }
144
+ li {
145
+ i {
146
+ font-size: 34px;
147
+ }
148
+ }
149
+ }
150
+
151
+ .navigation {
152
+ width: 80%;
153
+
154
+ ul {
155
+ list-style-type: none;
156
+ padding: 0;
157
+ margin-top: 0;
158
+
159
+ li:last-child {
160
+ a {
161
+ border-bottom: 0;
162
+ }
163
+ }
164
+
165
+ a {
166
+ display: block;
167
+ font-family: 'Merriweather';
168
+ text-align: center;
169
+ padding: 1rem 0;
170
+ text-decoration: none;
171
+ border-bottom: 1px solid #ececec;
172
+
173
+ @media screen and (max-width: $mobileW) {
174
+ padding: 2rem 0;
175
+ }
176
+ }
177
+ }
178
+ }
179
+
180
+ .post-wrapper {
181
+ border-bottom: 1px solid #ececec;
182
+ margin-bottom: 1rem;
183
+ padding-bottom: 1rem;
112
184
  }
113
185
 
114
186
  .post-categories {
115
- list-style-type: none;
116
- margin: 0;
117
- padding: 0;
118
- li {
119
- font-size: 14px;
120
- float: left;
121
- background-color: #f0f0f0;
122
- padding: 5px 20px;
123
- border-radius: 2px;
124
- @media screen and (max-width: $mobileW){
125
- margin-top: 5px;
126
- }
127
- margin-right: 10px;
128
- margin-bottom: 10px;
129
- }
187
+ list-style-type: none;
188
+ margin: 0;
189
+ padding: 0;
190
+ li {
191
+ font-size: 14px;
192
+ float: left;
193
+ background-color: #e3e3e3;
194
+ padding: 5px 20px;
195
+ border-radius: 2px;
196
+ @media screen and (max-width: $mobileW) {
197
+ margin-top: 5px;
198
+ }
199
+ margin-right: 10px;
200
+ }
130
201
  }
131
202
  .post-date {
132
- margin-right: 10px;
133
- color: #555;
134
- min-width: 150px;
203
+ margin-right: 10px;
204
+ color: #555;
205
+ min-width: 150px;
135
206
  }
136
207
  .post-meta {
137
- display: flex;
138
- justify-content: space-between;
139
- align-items: center;
140
- @media screen and (max-width: $mobileW){
141
- flex-direction: column-reverse;
142
- align-items: baseline;
143
- .post-date {
144
- margin-bottom: 16px;
145
- }
146
- }
208
+ display: flex;
209
+ justify-content: space-between;
210
+ align-items: center;
211
+ min-height: 30px;
212
+ @media screen and (max-width: $mobileW) {
213
+ flex-direction: column;
214
+ align-items: baseline;
215
+ .post-date {
216
+ margin: 10px 0;
217
+ }
218
+ }
147
219
  }
148
220
  .post-link {
149
- text-decoration: none;
221
+ text-decoration: none;
150
222
  }
151
223
 
152
224
  .post-title {
153
- line-height: 1.2em;
154
- font-size: 28px;
155
- }
156
- .posts, .post-container {
157
- list-style-type: none;
158
- margin: 45px 30px;
159
- @media screen and (max-width: $smallMobileW){
160
- margin-left: 20px;
161
- margin-right: 20px;
162
- }
163
- @media screen and (max-width: $mobileW){
164
- padding: 0 !important;
165
- margin-top: 0;
166
- }
225
+ line-height: 1.2em;
226
+ font-size: 28px;
227
+ margin-bottom: 10px;
167
228
  }
229
+ .posts,
168
230
  .post-container {
169
- padding-left: 30px;
231
+ list-style-type: none;
232
+ margin: 45px 30px;
233
+ @media screen and (max-width: $smallMobileW) {
234
+ margin-left: 20px;
235
+ margin-right: 20px;
236
+ }
237
+ @media screen and (max-width: $mobileW) {
238
+ padding: 0 !important;
239
+ margin-top: 0;
240
+ }
241
+ }
242
+ .post-container {
243
+ padding-left: 30px;
170
244
  }
171
245
  .post {
172
- font-family: 'Merriweather', sans-serif;
173
- font-weight: 300;
174
- color: #222;
175
- line-height: 1.9em;
176
- a {
177
- color: $linkColor;
178
- text-decoration: none;
179
- transition: border-bottom 0.4s;
180
- &:hover {
181
- border-bottom: 0.5px solid $linkColor;
182
- }
183
- }
184
- h1, h2, h3, h4, h5, h6 {
185
- font-family: Raleway, sans-serif;
186
- }
246
+ font-family: "Merriweather", sans-serif;
247
+ font-weight: 300;
248
+ color: #222;
249
+ line-height: 1.9em;
250
+ p {
251
+ margin-top: 10px;
252
+ }
253
+ a {
254
+ color: $linkColor;
255
+ text-decoration: none;
256
+ transition: border-bottom 0.4s;
257
+ &:hover {
258
+ border-bottom: 0.5px solid $linkColor;
259
+ }
260
+ }
261
+ h1,
262
+ h2,
263
+ h3,
264
+ h4,
265
+ h5,
266
+ h6 {
267
+ font-family: Raleway, sans-serif;
268
+ }
269
+ }
270
+ .posts-labelgroup {
271
+ margin: 0 0 0.67em 0;
272
+ display: flex;
273
+ align-items: baseline;
274
+ border-bottom: 1px solid #eee;
187
275
  }
188
276
 
189
277
  #posts-label {
190
- border-bottom: 1px solid #eee;
191
- font-size: 15px;
192
- color: #777;
193
- text-transform: uppercase;
194
- letter-spacing: 0.5px;
195
- padding-bottom: 10px;
196
- font-weight: normal;
278
+ font-size: 15px;
279
+ color: #555;
280
+ text-transform: uppercase;
281
+ letter-spacing: 0.5px;
282
+ padding: 10px 0;
283
+ font-weight: normal;
284
+ margin: 0;
285
+ overflow: hidden;
286
+ transition: width 0.1s;
287
+ }
288
+ table {
289
+ th, td {
290
+ padding: 8px 13px;
291
+ border: 1px solid #dfe2e5;
292
+ }
293
+ th {
294
+ background-color: #eee;
295
+ font-family: Raleway;
296
+ }
297
+ }
298
+
299
+ footer {
300
+ display: none;
301
+ }
302
+ @media screen and (max-width: $mobileW) {
303
+ .about {
304
+ .about-header.condensed {
305
+ align-items: start;
306
+ align-self: start;
307
+ .about-title {
308
+ flex-direction: row;
309
+ margin-bottom: 10px;
310
+ img {
311
+ max-height: 40px;
312
+ }
313
+ h2 {
314
+ margin: 0 10px;
315
+ }
316
+ }
317
+ .tagline {
318
+ font-size: 18px;
319
+ margin-bottom: 0px;
320
+ }
321
+ }
322
+ .about-footer.condensed {
323
+ display: none;
324
+ }
325
+ }
326
+ footer.condensed {
327
+ display: flex;
328
+ flex-direction: column;
329
+ align-items: center;
330
+ margin: 0 40px;
331
+ @media screen and (max-width: $smallMobileW){
332
+ margin: 0 20px;
333
+ }
334
+ border-top: 1px solid #eee;
335
+ }
197
336
  }