ceevee 0.1.0

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.
@@ -0,0 +1,28 @@
1
+ .header {
2
+
3
+ }
4
+
5
+ .nav {
6
+ padding-top: 24px;
7
+ padding-bottom: 48px;
8
+ text-align: center;
9
+ }
10
+
11
+ .nav-icon {
12
+ margin-right: 10px;
13
+ }
14
+
15
+ .nav-link {
16
+ text-decoration: none;
17
+ color: #3B5998 !important;
18
+ font-size: 24px;
19
+ font-weight: bold;
20
+ margin-left: 16px;
21
+ margin-right: 16px;
22
+ text-transform: uppercase;
23
+ padding: 3px 32px;
24
+ }
25
+
26
+ .nav-link-active {
27
+ border-bottom: 4px solid #3B5998;
28
+ }
@@ -0,0 +1,255 @@
1
+ /**
2
+ * Site header
3
+ */
4
+ .site-header {
5
+ border-top: 5px solid $grey-color-dark;
6
+ border-bottom: 1px solid $grey-color-light;
7
+ min-height: $spacing-unit * 1.865;
8
+
9
+ // Positioning context for the mobile navigation icon
10
+ position: relative;
11
+ }
12
+
13
+ .site-title {
14
+ @include relative-font-size(1.625);
15
+ font-weight: 300;
16
+ line-height: $base-line-height * $base-font-size * 2.25;
17
+ letter-spacing: -1px;
18
+ margin-bottom: 0;
19
+ float: left;
20
+
21
+ &,
22
+ &:visited {
23
+ color: $grey-color-dark;
24
+ }
25
+ }
26
+
27
+ .site-nav {
28
+ float: right;
29
+ line-height: $base-line-height * $base-font-size * 2.25;
30
+
31
+ .nav-trigger {
32
+ display: none;
33
+ }
34
+
35
+ .menu-icon {
36
+ display: none;
37
+ }
38
+
39
+ .page-link {
40
+ color: $text-color;
41
+ line-height: $base-line-height;
42
+
43
+ // Gaps between nav items, but not on the last one
44
+ &:not(:last-child) {
45
+ margin-right: 20px;
46
+ }
47
+ }
48
+
49
+ @include media-query($on-palm) {
50
+ position: absolute;
51
+ top: 9px;
52
+ right: $spacing-unit / 2;
53
+ background-color: $background-color;
54
+ border: 1px solid $grey-color-light;
55
+ border-radius: 5px;
56
+ text-align: right;
57
+
58
+ label[for="nav-trigger"] {
59
+ display: block;
60
+ float: right;
61
+ width: 36px;
62
+ height: 36px;
63
+ z-index: 2;
64
+ cursor: pointer;
65
+ }
66
+
67
+ .menu-icon {
68
+ display: block;
69
+ float: right;
70
+ width: 36px;
71
+ height: 26px;
72
+ line-height: 0;
73
+ padding-top: 10px;
74
+ text-align: center;
75
+
76
+ > svg {
77
+ fill: $grey-color-dark;
78
+ }
79
+ }
80
+
81
+ input ~ .trigger {
82
+ clear: both;
83
+ display: none;
84
+ }
85
+
86
+ input:checked ~ .trigger {
87
+ display: block;
88
+ padding-bottom: 5px;
89
+ }
90
+
91
+ .page-link {
92
+ display: block;
93
+ padding: 5px 10px;
94
+
95
+ &:not(:last-child) {
96
+ margin-right: 0;
97
+ }
98
+ margin-left: 20px;
99
+ }
100
+ }
101
+ }
102
+
103
+
104
+
105
+ /**
106
+ * Site footer
107
+ */
108
+ .site-footer {
109
+ border-top: 1px solid $grey-color-light;
110
+ padding: $spacing-unit 0;
111
+ }
112
+
113
+ .footer-heading {
114
+ @include relative-font-size(1.125);
115
+ margin-bottom: $spacing-unit / 2;
116
+ }
117
+
118
+ .contact-list,
119
+ .social-media-list {
120
+ list-style: none;
121
+ margin-left: 0;
122
+ }
123
+
124
+ .footer-col-wrapper {
125
+ @include relative-font-size(0.9375);
126
+ color: $grey-color;
127
+ margin-left: -$spacing-unit / 2;
128
+ @extend %clearfix;
129
+ }
130
+
131
+ .footer-col {
132
+ float: left;
133
+ margin-bottom: $spacing-unit / 2;
134
+ padding-left: $spacing-unit / 2;
135
+ }
136
+
137
+ .footer-col-1 {
138
+ width: -webkit-calc(35% - (#{$spacing-unit} / 2));
139
+ width: calc(35% - (#{$spacing-unit} / 2));
140
+ }
141
+
142
+ .footer-col-2 {
143
+ width: -webkit-calc(20% - (#{$spacing-unit} / 2));
144
+ width: calc(20% - (#{$spacing-unit} / 2));
145
+ }
146
+
147
+ .footer-col-3 {
148
+ width: -webkit-calc(45% - (#{$spacing-unit} / 2));
149
+ width: calc(45% - (#{$spacing-unit} / 2));
150
+ }
151
+
152
+ @include media-query($on-laptop) {
153
+ .footer-col-1,
154
+ .footer-col-2 {
155
+ width: -webkit-calc(50% - (#{$spacing-unit} / 2));
156
+ width: calc(50% - (#{$spacing-unit} / 2));
157
+ }
158
+
159
+ .footer-col-3 {
160
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
161
+ width: calc(100% - (#{$spacing-unit} / 2));
162
+ }
163
+ }
164
+
165
+ @include media-query($on-palm) {
166
+ .footer-col {
167
+ float: none;
168
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
169
+ width: calc(100% - (#{$spacing-unit} / 2));
170
+ }
171
+ }
172
+
173
+
174
+
175
+ /**
176
+ * Page content
177
+ */
178
+ .page-content {
179
+ padding: $spacing-unit 0;
180
+ flex: 1;
181
+ }
182
+
183
+ .page-heading {
184
+ @include relative-font-size(2);
185
+ }
186
+
187
+ .post-list-heading {
188
+ @include relative-font-size(1.75);
189
+ }
190
+
191
+ .post-list {
192
+ margin-left: 0;
193
+ list-style: none;
194
+
195
+ > li {
196
+ margin-bottom: $spacing-unit;
197
+ }
198
+ }
199
+
200
+ .post-meta {
201
+ font-size: $small-font-size;
202
+ color: $grey-color;
203
+ }
204
+
205
+ .post-link {
206
+ display: block;
207
+ @include relative-font-size(1.5);
208
+ }
209
+
210
+
211
+
212
+ /**
213
+ * Posts
214
+ */
215
+ .post-header {
216
+ margin-bottom: $spacing-unit;
217
+ }
218
+
219
+ .post-title {
220
+ @include relative-font-size(2.625);
221
+ letter-spacing: -1px;
222
+ line-height: 1;
223
+
224
+ @include media-query($on-laptop) {
225
+ @include relative-font-size(2.25);
226
+ }
227
+ }
228
+
229
+ .post-content {
230
+ margin-bottom: $spacing-unit;
231
+
232
+ h2 {
233
+ @include relative-font-size(2);
234
+
235
+ @include media-query($on-laptop) {
236
+ @include relative-font-size(1.75);
237
+ }
238
+ }
239
+
240
+ h3 {
241
+ @include relative-font-size(1.625);
242
+
243
+ @include media-query($on-laptop) {
244
+ @include relative-font-size(1.375);
245
+ }
246
+ }
247
+
248
+ h4 {
249
+ @include relative-font-size(1.25);
250
+
251
+ @include media-query($on-laptop) {
252
+ @include relative-font-size(1.125);
253
+ }
254
+ }
255
+ }
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Reset some basic elements
3
+ */
4
+ body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {
5
+ margin: 0;
6
+ padding: 0;
7
+ font-family: 'Lato';
8
+ line-height: 150%;
9
+ font-size: 16px;
10
+ }
11
+
12
+ body {
13
+ background: linear-gradient(to left, #1d5c94, #032b56);
14
+ background: linear-gradient(to right, #EEE, #FFF);
15
+ }
16
+
17
+ a, a:hover, a:active, a:focus, a:visited {
18
+ color: #777;
19
+ }
20
+
21
+ .container {
22
+ position: relative;
23
+ }
24
+
25
+ .main {
26
+ padding-left: 290px;
27
+ padding-right: 20px;
28
+ max-width: 1200px;
29
+ box-sizing: border-box;
30
+ }
@@ -0,0 +1,52 @@
1
+ .post {
2
+
3
+ }
4
+
5
+ .post-title {
6
+ color: #3B5998;
7
+ font-size: 36px;
8
+ font-weight: bold;
9
+ }
10
+
11
+ .post-tagline {
12
+ font-size: 16px;
13
+ color: #333;
14
+ font-weight: normal;
15
+ margin-bottom: 16px;
16
+ }
17
+
18
+ .post-meta {
19
+ font-size: 12px;
20
+ line-height: 100%;
21
+ color: #777;
22
+ margin: 16px 0;
23
+ text-decoration: underline;
24
+ }
25
+
26
+ .post-image {
27
+ height: 350px;
28
+ > span {
29
+ width: 100%;
30
+ height: 100%;
31
+ display: block;
32
+ background-size: cover;
33
+ background-position: 50% 50%;
34
+ }
35
+ }
36
+
37
+ .post-content {
38
+ font-size: 16px;
39
+ line-height: 150%;
40
+ color: #333;
41
+ text-align: justify;
42
+ > p {
43
+ margin: 16px 0;
44
+ }
45
+ }
46
+
47
+ .post-end {
48
+ width: 100px;
49
+ height: 1px;
50
+ border-top: 2px solid #DDD;
51
+ margin: 32px auto 32px auto;
52
+ }
@@ -0,0 +1,56 @@
1
+ .post-preview {
2
+ display: flex;
3
+ flex-direction: row;
4
+ background-color: #FFF;
5
+ margin-bottom: 32px;
6
+ border-radius: 10px;
7
+ border: 1px solid #DDD;
8
+ overflow: hidden;
9
+ text-decoration: none;
10
+ box-shadow: 0 1px 1px 0 rgba(31, 35, 46, 0.15);
11
+ transition: all .3s ease;
12
+ }
13
+
14
+ .post-preview:hover {
15
+ transform: translate(0px, -2px);
16
+ box-shadow: 0 15px 45px -10px rgba(10, 16, 34, 0.2);
17
+ }
18
+
19
+ .post-preview-image {
20
+ width: 25%;
21
+ > span {
22
+ width: 100%;
23
+ height: 100%;
24
+ display: block;
25
+ background-size: cover;
26
+ background-position: 50% 50%;
27
+ }
28
+ }
29
+
30
+ .post-preview-text {
31
+ flex: 1;
32
+ padding: 10px;
33
+ }
34
+
35
+ .post-preview-title {
36
+ color: #3B5998;
37
+ font-size: 24px;
38
+ font-weight: bold;
39
+ display: inline-block;
40
+ }
41
+
42
+ .post-preview-title:hover {
43
+ text-decoration: underline;
44
+ }
45
+
46
+ .post-preview-date {
47
+ font-size: 12px;
48
+ line-height: 100%;
49
+ color: #777;
50
+ }
51
+
52
+ .post-preview-tagline {
53
+ margin-top: 16px;
54
+ font-size: 16px;
55
+ color: #777;
56
+ }
File without changes
@@ -0,0 +1,57 @@
1
+ .project-preview_container {
2
+ display: flex;
3
+ flex-direction: row;
4
+ flex-wrap: wrap;
5
+ }
6
+
7
+ .project-preview {
8
+ width: calc(100% * (1/3) - 32px);
9
+ display: flex;
10
+ flex-direction: column;
11
+ background-color: #FFF;
12
+ margin-bottom: 32px;
13
+ margin-right: 32px;
14
+ border-radius: 10px;
15
+ border: 1px solid #DDD;
16
+ box-sizing: border-box;
17
+ overflow: hidden;
18
+ text-decoration: none;
19
+ box-shadow: 0 1px 1px 0 rgba(31, 35, 46, 0.15);
20
+ transition: all .3s ease;
21
+ }
22
+
23
+ .project-preview:hover {
24
+ transform: translate(0px, -2px);
25
+ box-shadow: 0 15px 45px -10px rgba(10, 16, 34, 0.2);
26
+ }
27
+
28
+ .project-preview-image {
29
+ height: 200px;
30
+ > span {
31
+ width: 100%;
32
+ height: 100%;
33
+ display: block;
34
+ background-size: cover;
35
+ background-position: 50% 50%;
36
+ }
37
+ }
38
+
39
+ .project-preview-text {
40
+ flex: 1;
41
+ padding: 10px;
42
+ }
43
+
44
+ .project-preview-title {
45
+ color: #3B5998;
46
+ font-size: 24px;
47
+ font-weight: bold;
48
+ text-align: center;
49
+ }
50
+
51
+ .project-preview-title:hover {
52
+ text-decoration: underline;
53
+ }
54
+
55
+ .project-preview-tagline {
56
+ margin-top: 16px;
57
+ }