Browse Source

feat(themes/simplest): Provide tooling to generate CSS.

jackyalcine 7 months ago
parent
commit
1d7120b389
Signed by: Jacky Alciné <yo@jacky.wtf> GPG Key ID: 537A4F904B15268D

+ 1
- 0
.gitignore View File

@@ -0,0 +1 @@
1
+.sass-cache

+ 4
- 0
themes/simplest/Makefile View File

@@ -0,0 +1,4 @@
1
+all: build
2
+
3
+build:
4
+	scss --style compressed --trace -r bourbon src/main.scss assets/theme.css

+ 2
- 0
themes/simplest/assets/theme.css
File diff suppressed because it is too large
View File


+ 7
- 0
themes/simplest/assets/theme.css.map
File diff suppressed because it is too large
View File


+ 215
- 0
themes/simplest/src/_layout.scss View File

@@ -0,0 +1,215 @@
1
+* {
2
+  &,
3
+  &:before,
4
+  &:after {
5
+    box-sizing: border-box;
6
+  }
7
+}
8
+
9
+html,
10
+body {
11
+  width: 100%;
12
+  height: 100%;
13
+}
14
+
15
+.clearfix {
16
+  &:before {
17
+    content: " ";
18
+    display: table;
19
+  }
20
+
21
+  &:after {
22
+    content: " ";
23
+    display: table;
24
+    clear: both;
25
+  }
26
+
27
+  *zoom: 1;
28
+}
29
+
30
+body {
31
+  background-color: $base-background-color;
32
+  font-weight: 400;
33
+}
34
+
35
+hr {
36
+  border-top: none;
37
+  border-bottom: 2px solid lighten($light-gray-color, 7%);
38
+  width: 100%;
39
+  margin: $small-spacing 0;
40
+}
41
+
42
+.container {
43
+  padding: $base-spacing;
44
+  margin-left: auto;
45
+  margin-right: auto;
46
+  max-width: 800px;
47
+}
48
+
49
+.pull-left {
50
+  float: left;
51
+}
52
+
53
+.pull-right {
54
+  float: right;
55
+}
56
+
57
+.link {
58
+  display: inline-block;
59
+  padding-bottom: .08em;
60
+  border-bottom: 2px solid $light-gray-color;
61
+
62
+  // @include transition(border 300ms linear);
63
+
64
+  &:hover,
65
+  &:focus,
66
+  &:active {
67
+    border-color: darken($light-gray-color, 10%);
68
+  }
69
+}
70
+
71
+.site-header {
72
+  border-top: 5px solid $light-gray-color;
73
+  border-bottom: 1px solid lighten($light-gray-color, 5%);
74
+  margin-bottom: $small-spacing;
75
+  min-height: 80px;
76
+}
77
+
78
+.intro {
79
+  .author-name {
80
+    background-color: $action-color;
81
+    color: $white-color;
82
+    display: inline-block;
83
+    padding: 0 .3em;
84
+  }
85
+
86
+  a {
87
+    @extend .link;
88
+  }
89
+}
90
+
91
+.logo {
92
+  float: left;
93
+  margin: 0 0 1em 0;
94
+  cursor: pointer;
95
+  text-transform: uppercase;
96
+  letter-spacing: 0.8px;
97
+  font-size: 20px;
98
+  line-height: 28px;
99
+  font-weight: 300;
100
+
101
+  span {
102
+    font-weight: 700;
103
+  }
104
+}
105
+
106
+.nav {
107
+  min-height: 64px;
108
+}
109
+
110
+.navbar {
111
+  float: right;
112
+  margin: 0;
113
+  position: relative;
114
+  padding: 0;
115
+  pointer-events: all;
116
+  cursor: pointer;
117
+
118
+  li {
119
+    display: inline-block;
120
+    padding: 0 .6em;
121
+  }
122
+
123
+  a {
124
+    @extend .link;
125
+  }
126
+}
127
+
128
+.post-list {
129
+  background-color: lighten($light-gray-color, 17%);
130
+  padding: $base-spacing 0;
131
+}
132
+
133
+.post-item {
134
+  padding-bottom: $small-spacing;
135
+  margin-bottom: $base-spacing;
136
+  border-bottom: 1px solid lighten($light-gray-color, 5%);
137
+
138
+  strong {
139
+    font-weight: 700;
140
+  }
141
+
142
+  &:last-child {
143
+    border-bottom: 0;
144
+    margin-bottom: 0;
145
+  }
146
+
147
+  .readmore {
148
+    font-style: italic;
149
+  }
150
+}
151
+
152
+.post-meta {
153
+  color: $medium-gray-color;
154
+  font-style: italic;
155
+}
156
+
157
+.post-link,
158
+.post a,
159
+.page a {
160
+  @extend .link;
161
+}
162
+
163
+.post {
164
+  @extend .clearfix;
165
+}
166
+
167
+.pagination {
168
+  li, a, span {
169
+    display: inline-block;
170
+  }
171
+
172
+  a, span {
173
+    font-size: rem(12);
174
+    padding: .5em;
175
+  }
176
+
177
+  .prev, .next {
178
+    @extend .link;
179
+  }
180
+}
181
+
182
+.share {
183
+  padding: $base-spacing 0 0;
184
+
185
+  @extend .pull-right;
186
+
187
+  h4 {
188
+    display: inline-block;
189
+  }
190
+}
191
+
192
+.disqus {
193
+  background-color: lighten($light-gray-color, 16%);
194
+  padding: $base-spacing 0;
195
+
196
+  hr {
197
+    margin: $base-spacing 0;
198
+  }
199
+}
200
+
201
+.site-footer {
202
+  @extend .clearfix;
203
+
204
+  padding: $base-spacing 0;
205
+
206
+  a {
207
+    @extend .link;
208
+  }
209
+
210
+  small {
211
+    display: block;
212
+    font-size: rem(12);
213
+    color: darken($medium-gray-color, 10%);
214
+  }
215
+}

+ 96
- 0
themes/simplest/src/_syntax-highlighting.scss View File

@@ -0,0 +1,96 @@
1
+/**
2
+* Syntax highlighting styles
3
+*/
4
+.highlight {
5
+  margin: $base-spacing 0;
6
+  padding: 0;
7
+  box-shadow: 0px 0px 2px rgba($black-color, .1);
8
+
9
+  .highlighter-rouge &, &, .hll, pre, code {
10
+    background-color: lighten($light-gray-color, 13%) !important;
11
+  }
12
+
13
+  pre {
14
+    margin: 0;
15
+    padding: $base-spacing;
16
+    white-space: pre;
17
+    line-height: 23px;
18
+    overflow-x: auto;
19
+    margin-bottom: 0;
20
+    word-break: inherit;
21
+    word-wrap: inherit;
22
+
23
+    &, code {
24
+      color: $base-font-color;
25
+    }
26
+
27
+    code {
28
+      white-space: pre;
29
+      padding: 0 !important;
30
+
31
+      * {
32
+        white-space: nowrap; // this sets all children inside to nowrap
33
+      }
34
+    }
35
+  }
36
+
37
+  .c     { color: #998; font-style: italic } // Comment
38
+  .err   { color: #a61717; background-color: #e3d2d2 } // Error
39
+  .k     { font-weight: bold } // Keyword
40
+  .o     { font-weight: bold } // Operator
41
+  .cm    { color: #998; font-style: italic } // Comment.Multiline
42
+  .cp    { color: #999; font-weight: bold } // Comment.Preproc
43
+  .c1    { color: #998; font-style: italic } // Comment.Single
44
+  .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special
45
+  .gd    { color: #000; background-color: #fdd } // Generic.Deleted
46
+  .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
47
+  .ge    { font-style: italic } // Generic.Emph
48
+  .gr    { color: #a00 } // Generic.Error
49
+  .gh    { color: #999 } // Generic.Heading
50
+  .gi    { color: #000; background-color: #dfd } // Generic.Inserted
51
+  .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
52
+  .go    { color: #888 } // Generic.Output
53
+  .gp    { color: #555 } // Generic.Prompt
54
+  .gs    { font-weight: bold } // Generic.Strong
55
+  .gu    { color: #aaa } // Generic.Subheading
56
+  .gt    { color: #a00 } // Generic.Traceback
57
+  .kc    { font-weight: bold } // Keyword.Constant
58
+  .kd    { font-weight: bold } // Keyword.Declaration
59
+  .kp    { font-weight: bold } // Keyword.Pseudo
60
+  .kr    { font-weight: bold } // Keyword.Reserved
61
+  .kt    { color: #458; font-weight: bold } // Keyword.Type
62
+  .m     { color: #099 } // Literal.Number
63
+  .s     { color: #d14 } // Literal.String
64
+  .na    { color: #008080 } // Name.Attribute
65
+  .nb    { color: #0086B3 } // Name.Builtin
66
+  .nc    { color: #458; font-weight: bold } // Name.Class
67
+  .no    { color: #008080 } // Name.Constant
68
+  .ni    { color: #800080 } // Name.Entity
69
+  .ne    { color: #900; font-weight: bold } // Name.Exception
70
+  .nf    { color: #900; font-weight: bold } // Name.Function
71
+  .nn    { color: #555 } // Name.Namespace
72
+  .nt    { color: #000080 } // Name.Tag
73
+  .nv    { color: #008080 } // Name.Variable
74
+  .ow    { font-weight: bold } // Operator.Word
75
+  .w     { color: #bbb } // Text.Whitespace
76
+  .mf    { color: #099 } // Literal.Number.Float
77
+  .mh    { color: #099 } // Literal.Number.Hex
78
+  .mi    { color: #099 } // Literal.Number.Integer
79
+  .mo    { color: #099 } // Literal.Number.Oct
80
+  .sb    { color: #d14 } // Literal.String.Backtick
81
+  .sc    { color: #d14 } // Literal.String.Char
82
+  .sd    { color: #d14 } // Literal.String.Doc
83
+  .s2    { color: #d14 } // Literal.String.Double
84
+  .se    { color: #d14 } // Literal.String.Escape
85
+  .sh    { color: #d14 } // Literal.String.Heredoc
86
+  .si    { color: #d14 } // Literal.String.Interpol
87
+  .sx    { color: #d14 } // Literal.String.Other
88
+  .sr    { color: #009926 } // Literal.String.Regex
89
+  .s1    { color: #d14 } // Literal.String.Single
90
+  .ss    { color: #990073 } // Literal.String.Symbol
91
+  .bp    { color: #999 } // Name.Builtin.Pseudo
92
+  .vc    { color: #008080 } // Name.Variable.Class
93
+  .vg    { color: #008080 } // Name.Variable.Global
94
+  .vi    { color: #008080 } // Name.Variable.Instance
95
+  .il    { color: #099 } // Literal.Number.Integer.Long
96
+}

+ 46
- 0
themes/simplest/src/_variables.scss View File

@@ -0,0 +1,46 @@
1
+// Typography
2
+$base-font-family: 'Open Sans', sans-serif;
3
+// $base-font-family: 'Merriweather', "Georgia", serif;
4
+$heading-font-family: $base-font-family;
5
+
6
+// Font Sizes
7
+$base-font-size: 1em;
8
+
9
+// Line height
10
+$base-line-height: 1.5;
11
+$heading-line-height: 1.2;
12
+
13
+// Other Sizes
14
+$base-border-radius: .52em;
15
+$base-spacing: $base-line-height * 1em;
16
+$small-spacing: $base-spacing / 2;
17
+$base-z-index: 0;
18
+
19
+// Colors
20
+$primary-color: #ec2028;
21
+$action-color: $primary-color;
22
+$white-color: #fff;
23
+$black-color: #000;
24
+$blue-color: #477dca;
25
+$dark-gray-color: #333;
26
+$medium-gray-color: #999;
27
+$light-gray-color: #ccc;
28
+
29
+// Font Colors
30
+$base-font-color: rgba($dark-gray-color, .8);
31
+
32
+// Border
33
+$base-border-color: $light-gray-color;
34
+$base-border: 1px solid $base-border-color;
35
+
36
+// Background Colors
37
+$base-background-color: $white-color;
38
+$secondary-background-color: tint($base-border-color, 80%);
39
+
40
+// Forms
41
+$form-box-shadow: inset 0 1px 3px rgba($black-color, 0.06);
42
+$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3);
43
+
44
+// Animations
45
+$base-duration: 150ms;
46
+$base-timing: ease;

+ 11
- 0
themes/simplest/src/base/_base.scss View File

@@ -0,0 +1,11 @@
1
+// Bitters 1.1.0
2
+// http://bitters.bourbon.io
3
+// Copyright 2013-2015 thoughtbot, inc.
4
+// MIT License
5
+
6
+@import "reset";
7
+@import "buttons";
8
+@import "forms";
9
+@import "lists";
10
+@import "tables";
11
+@import "typography";

+ 37
- 0
themes/simplest/src/base/_buttons.scss View File

@@ -0,0 +1,37 @@
1
+// #{$all-buttons} {
2
+
3
+.button {
4
+  appearance: none;
5
+  background-color: $action-color;
6
+  border: 0;
7
+  border-radius: $base-border-radius;
8
+  color: $white-color;
9
+  cursor: pointer;
10
+  display: inline-block;
11
+  font-family: $base-font-family;
12
+  font-size: $base-font-size;
13
+  -webkit-font-smoothing: antialiased;
14
+  font-weight: 600;
15
+  line-height: 1;
16
+  padding: $small-spacing $base-spacing;
17
+  text-decoration: none;
18
+  transition: background-color $base-duration $base-timing;
19
+  user-select: none;
20
+  vertical-align: middle;
21
+  white-space: nowrap;
22
+
23
+  &:hover,
24
+  &:focus {
25
+    background-color: shade($action-color, 20%);
26
+    color: $white-color;
27
+  }
28
+
29
+  &:disabled {
30
+    cursor: not-allowed;
31
+    opacity: 0.5;
32
+
33
+    &:hover {
34
+      background-color: $action-color;
35
+    }
36
+  }
37
+}

+ 90
- 0
themes/simplest/src/base/_forms.scss View File

@@ -0,0 +1,90 @@
1
+fieldset {
2
+  background-color: $secondary-background-color;
3
+  border: $base-border;
4
+  margin: 0 0 $small-spacing;
5
+  padding: $base-spacing;
6
+}
7
+
8
+input,
9
+label,
10
+select {
11
+  display: block;
12
+  font-family: $base-font-family;
13
+  font-size: $base-font-size;
14
+}
15
+
16
+label {
17
+  font-weight: 600;
18
+  margin-bottom: $small-spacing / 2;
19
+
20
+  &.required::after {
21
+    content: "*";
22
+  }
23
+
24
+  abbr {
25
+    display: none;
26
+  }
27
+}
28
+
29
+#{$all-text-inputs},
30
+select[multiple=multiple] {
31
+  background-color: $base-background-color;
32
+  border: $base-border;
33
+  border-radius: $base-border-radius;
34
+  box-shadow: $form-box-shadow;
35
+  box-sizing: border-box;
36
+  font-family: $base-font-family;
37
+  font-size: $base-font-size;
38
+  margin-bottom: $small-spacing;
39
+  padding: $base-spacing / 3;
40
+  transition: border-color $base-duration $base-timing;
41
+  width: 100%;
42
+
43
+  &:hover {
44
+    border-color: shade($base-border-color, 20%);
45
+  }
46
+
47
+  &:focus {
48
+    border-color: $action-color;
49
+    box-shadow: $form-box-shadow-focus;
50
+    outline: none;
51
+  }
52
+
53
+  &:disabled {
54
+    background-color: shade($base-background-color, 5%);
55
+    cursor: not-allowed;
56
+
57
+    &:hover {
58
+      border: $base-border;
59
+    }
60
+  }
61
+}
62
+
63
+textarea {
64
+  resize: vertical;
65
+}
66
+
67
+input[type="search"] {
68
+  appearance: none;
69
+}
70
+
71
+input[type="checkbox"],
72
+input[type="radio"] {
73
+  display: inline;
74
+  margin-right: $small-spacing / 2;
75
+
76
+  + label {
77
+    display: inline-block;
78
+  }
79
+}
80
+
81
+input[type="file"] {
82
+  margin-bottom: $small-spacing;
83
+  width: 100%;
84
+}
85
+
86
+select {
87
+  margin-bottom: $base-spacing;
88
+  max-width: 100%;
89
+  width: auto;
90
+}

+ 31
- 0
themes/simplest/src/base/_lists.scss View File

@@ -0,0 +1,31 @@
1
+ul,
2
+ol {
3
+  list-style-type: none;
4
+  margin: 0;
5
+  padding: 0;
6
+
7
+  &%default-ul {
8
+    list-style-type: disc;
9
+    margin-bottom: $small-spacing;
10
+    padding-left: $base-spacing;
11
+  }
12
+
13
+  &%default-ol {
14
+    list-style-type: decimal;
15
+    margin-bottom: $small-spacing;
16
+    padding-left: $base-spacing;
17
+  }
18
+}
19
+
20
+dl {
21
+  margin-bottom: $small-spacing;
22
+
23
+  dt {
24
+    font-weight: bold;
25
+    margin-top: $small-spacing;
26
+  }
27
+
28
+  dd {
29
+    margin: 0;
30
+  }
31
+}

+ 54
- 0
themes/simplest/src/base/_reset.scss View File

@@ -0,0 +1,54 @@
1
+/* http://meyerweb.com/eric/tools/css/reset/
2
+   v2.0 | 20110126
3
+   License: none (public domain)
4
+*/
5
+
6
+html, body, div, span, applet, object, iframe,
7
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8
+a, abbr, acronym, address, big, cite, code,
9
+del, dfn, em, img, ins, kbd, q, s, samp,
10
+small, strike, strong, sub, sup, tt, var,
11
+b, u, i, center,
12
+dl, dt, dd, ol, ul, li,
13
+fieldset, form, label, legend,
14
+table, caption, tbody, tfoot, thead, tr, th, td,
15
+article, aside, canvas, details, embed,
16
+figure, figcaption, footer, header, hgroup,
17
+menu, nav, output, ruby, section, summary,
18
+time, mark, audio, video {
19
+  margin: 0;
20
+  padding: 0;
21
+  border: 0;
22
+  font-size: 100%;
23
+  font: inherit;
24
+  vertical-align: baseline;
25
+}
26
+
27
+/* HTML5 display-role reset for older browsers */
28
+article, aside, details, figcaption, figure,
29
+footer, header, hgroup, menu, nav, section {
30
+  display: block;
31
+}
32
+
33
+body {
34
+  line-height: 1;
35
+}
36
+
37
+ol, ul {
38
+  list-style: none;
39
+}
40
+
41
+blockquote, q {
42
+  quotes: none;
43
+}
44
+
45
+blockquote:before, blockquote:after,
46
+q:before, q:after {
47
+  content: '';
48
+  content: none;
49
+}
50
+
51
+table {
52
+  border-collapse: collapse;
53
+  border-spacing: 0;
54
+}

+ 25
- 0
themes/simplest/src/base/_tables.scss View File

@@ -0,0 +1,25 @@
1
+table {
2
+  border-collapse: collapse;
3
+  font-feature-settings: "kern", "liga", "tnum";
4
+  margin: $small-spacing 0;
5
+  table-layout: fixed;
6
+  width: 100%;
7
+}
8
+
9
+th {
10
+  border-bottom: 1px solid shade($base-border-color, 25%);
11
+  font-weight: 600;
12
+  padding: $small-spacing 0;
13
+  text-align: left;
14
+}
15
+
16
+td {
17
+  border-bottom: $base-border;
18
+  padding: $small-spacing 0;
19
+}
20
+
21
+tr,
22
+td,
23
+th {
24
+  vertical-align: middle;
25
+}

+ 109
- 0
themes/simplest/src/base/_typography.scss View File

@@ -0,0 +1,109 @@
1
+@import url("//fonts.googleapis.com/css?family=Open+Sans:400,300,700");
2
+// @import url("//fonts.googleapis.com/css?family=Merriweather:400,300,700");
3
+
4
+body {
5
+  color: $base-font-color;
6
+  font-family: $base-font-family;
7
+  font-feature-settings: "kern", "liga", "pnum";
8
+  font-size: $base-font-size;
9
+  line-height: $base-line-height;
10
+}
11
+
12
+h1,
13
+h2,
14
+h3,
15
+h4,
16
+h5,
17
+h6 {
18
+  font-family: $heading-font-family;
19
+  font-size: $base-font-size;
20
+  line-height: $heading-line-height;
21
+  margin: 0 0 $small-spacing;
22
+  font-weight: 300;
23
+}
24
+
25
+h1 {
26
+  font-size: rem(30);
27
+}
28
+
29
+h2 {
30
+  font-size: rem(26);
31
+}
32
+
33
+h3 {
34
+  font-size: rem(24);
35
+}
36
+
37
+h4 {
38
+  font-size: rem(20);
39
+}
40
+
41
+h5,
42
+h6 {
43
+  font-size: rem(16);
44
+}
45
+
46
+p {
47
+  margin: 0 0 $small-spacing;
48
+
49
+  &.lead {
50
+    font-size: rem(22);
51
+    font-weight: 300;
52
+  }
53
+}
54
+
55
+a {
56
+  color: $action-color;
57
+  text-decoration: none;
58
+  transition: color $base-duration $base-timing;
59
+
60
+  &:active,
61
+  &:focus,
62
+  &:hover {
63
+    color: shade($action-color, 25%);
64
+  }
65
+}
66
+
67
+hr {
68
+  border-bottom: $base-border;
69
+  border-left: 0;
70
+  border-right: 0;
71
+  border-top: 0;
72
+  margin: $base-spacing 0;
73
+}
74
+
75
+img,
76
+picture {
77
+  margin: 0;
78
+  max-width: 100%;
79
+}
80
+
81
+blockquote {
82
+  padding: 0 0 0 $base-spacing;
83
+  margin: $base-spacing 0;
84
+  color: $medium-gray-color;
85
+  line-height: 1.8;
86
+  border-left: $small-spacing solid $light-gray-color;
87
+}
88
+
89
+code {
90
+  background: none;
91
+  border-radius: 0;
92
+  border: none;
93
+  font-family: "Courier New", monospace;
94
+  font-size: 0.9em;
95
+  margin: 0;
96
+  padding: 0 5px;
97
+  background-color: lighten($light-gray-color, 13%);
98
+}
99
+
100
+pre {
101
+  -webkit-overflow-scrolling: touch;
102
+  font-family: "Courier New", monospace;
103
+  font-size: 0.9em;
104
+  margin: 0;
105
+
106
+  code {
107
+    line-height: 1.75em;
108
+  }
109
+}

+ 8
- 0
themes/simplest/src/main.scss View File

@@ -0,0 +1,8 @@
1
+
2
+@import "bourbon";
3
+
4
+@import "variables";
5
+@import "base/base";
6
+
7
+@import "layout";
8
+@import "syntax-highlighting";

Loading…
Cancel
Save