harms-columns-front-page 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,93 @@
1
+ body
2
+ div
3
+ &.header
4
+ width: 100%
5
+ margin-top: 80px
6
+ @media screen and ($tablet)
7
+ margin-top: 60px
8
+ padding: 80px 0
9
+ @media screen and ($tablet)
10
+ padding: 40px 0
11
+ @media screen and ($mobile)
12
+ padding: 20px 0
13
+ background-color: $green
14
+ display: flex
15
+ justify-content: center
16
+ align-items: center
17
+ .header-content
18
+ width: 100%
19
+ margin-left: $site-margin
20
+ margin-right: $site-margin
21
+ @media screen and ($mobile)
22
+ margin-left: $site-margin/2
23
+ margin-right: $site-margin/2
24
+ max-width: $max-width
25
+ display: flex
26
+ align-items: center
27
+ justify-content: space-between
28
+ @media screen and ($tablet)
29
+ flex-direction: column
30
+ justify-content: center
31
+ .header-right
32
+ display: flex
33
+ justify-content: flex-end
34
+ align-items: center
35
+ @media screen and ($tablet)
36
+ margin-top: 20px
37
+ flex-wrap: wrap
38
+ justify-content: center
39
+ @media screen and ($mobile)
40
+ margin-top: 10px
41
+ a
42
+ margin: 0 10px
43
+ @media screen and ($tablet)
44
+ margin: 10px 5px 0 5px
45
+ &:last-of-type
46
+ margin-right: 0
47
+ @media screen and ($tablet)
48
+ margin-right: 5px
49
+ .social-icon
50
+ max-height: 36px
51
+ .header-left
52
+ .header-text
53
+ @media screen and ($tablet)
54
+ text-align: center
55
+ display: flex
56
+ justify-content: center
57
+ align-items: center
58
+ @media screen and ($tablet)
59
+ flex-direction: column
60
+ .profile-image
61
+ margin-right: 20px
62
+ @media screen and ($tablet)
63
+ margin-right: 0
64
+ margin-bottom: 20px
65
+ @media screen and ($mobile)
66
+ margin-bottom: 10px
67
+ width: 120px
68
+ min-width: 120px
69
+ min-height: 120px
70
+ height: 120px
71
+ @media screen and ($tablet)
72
+ width: 100px
73
+ height: 100px
74
+ min-width: 100px
75
+ min-height: 100px
76
+ @media screen and ($mobile)
77
+ width: 80px
78
+ height: 80px
79
+ min-width: 80px
80
+ min-height: 80px
81
+ border-radius: 100%
82
+ background-position: center
83
+ background-repeat: no-repeat
84
+ background-size: cover
85
+ p
86
+ &.sub-title
87
+ font-size: 20px
88
+ @media screen and ($tablet)
89
+ font-size: 16px
90
+ @media screen and ($mobile)
91
+ font-size: 15px
92
+ font-weight: 400
93
+ color: $white
@@ -0,0 +1,24 @@
1
+ h1
2
+ font-size: 35px
3
+ @media screen and ($tablet)
4
+ font-size: 30px
5
+ @media screen and ($mobile)
6
+ font-size: 25px
7
+ color: $white
8
+ font-weight: 700
9
+ margin-bottom: 10px
10
+
11
+ h2
12
+ font-size: 30px
13
+ color: $green
14
+ font-weight: 600
15
+ margin-bottom: 30px
16
+
17
+ h3
18
+ font-size: 20px
19
+ font-weight: 600
20
+ margin-bottom: 10px
21
+ &.light
22
+ color: $white
23
+ &.dark
24
+ color: $black
data/_sass/_nav.sass ADDED
@@ -0,0 +1,195 @@
1
+ html
2
+ // &.search-open
3
+ // body
4
+ // nav
5
+ // ul
6
+ // li
7
+ &.mobile-menu-open
8
+ body
9
+ nav
10
+ border-bottom: solid $white
11
+ border-width: 100vh
12
+ transition: border-width 1s ease
13
+ ul
14
+ .mobile
15
+ &.menu-button
16
+ .menu-button-container
17
+ .menu-button-line
18
+ &#line-1
19
+ top: 6px
20
+ transform: rotate(-45deg)
21
+ &#line-2
22
+ width: 0
23
+ &#line-3
24
+ bottom: 6px
25
+ transform: rotate(45deg)
26
+
27
+ body
28
+ nav
29
+ z-index: 1
30
+ border-bottom: 0px solid $white
31
+ border-width: 0
32
+ transition: border-width 1s ease
33
+ width: 100%
34
+ height: 80px
35
+ @media screen and ($tablet)
36
+ height: 60px
37
+ background-color: $white
38
+ position: fixed
39
+ top: 0
40
+ left: 0
41
+ -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
42
+ -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
43
+ box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
44
+ display: flex
45
+ align-items: center
46
+ justify-content: center
47
+ ul
48
+ .mobile
49
+ list-style-type: none
50
+ height: 100%
51
+ box-sizing: border-box
52
+ display: none
53
+ justify-content: center
54
+ align-items: center
55
+ &.menu-button
56
+ position: relative
57
+ z-index: 2
58
+ width: 25px
59
+ &:hover
60
+ cursor: pointer
61
+ .menu-button-container
62
+ .menu-button-line
63
+ background-color: $blue
64
+ .menu-button-container
65
+ position: relative
66
+ width: 100%
67
+ height: 14px
68
+ .menu-button-line
69
+ width: 25px
70
+ height: 2px
71
+ background-color: $black
72
+ position: absolute
73
+ left: 0
74
+ &#line-1
75
+ top: 0
76
+ transition: top .3s ease, transform .3s ease, background-color .3s ease
77
+ &#line-2
78
+ top: 6px
79
+ transition: width .3s ease, background-color .3s ease
80
+ &#line-3
81
+ bottom: 0
82
+ transition: bottom .3s ease, transform .3s ease, background-color .3s ease
83
+ a
84
+ text-decoration: none
85
+ font-weight: 600
86
+ font-size: 13px
87
+ color: $black
88
+ transition: color .3s ease
89
+ &:hover
90
+ color: $blue
91
+ transition: color .3s ease
92
+ #search-icon
93
+ .cls-2
94
+ stroke: $black
95
+ transition: stroke .3s ease
96
+ &:hover
97
+ .cls-2
98
+ stroke: $blue
99
+ transition: stroke .3s ease
100
+ &.desktop-nav
101
+ position: relative
102
+ display: flex
103
+ width: 100%
104
+ height: 100%
105
+ justify-content: space-between
106
+ max-width: $max-width
107
+ margin-left: $site-margin
108
+ margin-right: $site-margin
109
+ @media screen and ($mobile)
110
+ margin-left: $site-margin/2
111
+ margin-right: $site-margin/2
112
+ li
113
+ transition: opacity .3s ease, transform .3s ease
114
+ list-style-type: none
115
+ height: 100%
116
+ box-sizing: border-box
117
+ display: flex
118
+ @media screen and ($tablet)
119
+ display: none
120
+ justify-content: center
121
+ align-items: center
122
+ &.mobile
123
+ display: none
124
+ @media screen and ($tablet)
125
+ display: flex
126
+ &.active
127
+ border-top: 5px solid $white
128
+ border-bottom: 5px solid $blue
129
+ a
130
+ color: $blue
131
+ a
132
+ text-decoration: none
133
+ font-weight: 600
134
+ font-size: 13px
135
+ color: $black
136
+ transition: color .3s ease
137
+ &:hover
138
+ color: $blue
139
+ transition: color .3s ease
140
+ #search-icon
141
+ .cls-2
142
+ stroke: $black
143
+ transition: stroke .3s ease
144
+ &:hover
145
+ .cls-2
146
+ stroke: $blue
147
+ transition: stroke .3s ease
148
+
149
+ div
150
+ &.mobile-nav-content
151
+ position: fixed
152
+ z-index: 1
153
+ top: 50%
154
+ transform: translateY(-50%)
155
+ right: 0
156
+ display: none
157
+ background: none
158
+ width: 100vw
159
+ justify-content: center
160
+ align-items: center
161
+ ul
162
+ text-align: center
163
+ display: flex
164
+ height: 100%
165
+ justify-content: center
166
+ align-items: center
167
+ flex-direction: column
168
+ li
169
+ list-style-type: none
170
+ margin: 10px
171
+ padding: 10px 0
172
+ transform: translateX(-10px)
173
+ transition: opacity .3s ease, transform .3s ease
174
+ opacity: 0
175
+ &.active
176
+ border-bottom: 1px solid $blue
177
+ a
178
+ color: $blue
179
+ a
180
+ text-decoration: none
181
+ font-weight: 600
182
+ font-size: 13px
183
+ color: $black
184
+ transition: color .3s ease
185
+ &:hover
186
+ color: $blue
187
+ transition: color .3s ease
188
+ #search-icon
189
+ .cls-2
190
+ stroke: $black
191
+ transition: stroke .3s ease
192
+ &:hover
193
+ .cls-2
194
+ stroke: $blue
195
+ transition: stroke .3s ease
data/_sass/_posts.sass ADDED
@@ -0,0 +1,66 @@
1
+ .wrapper
2
+ .post
3
+ h3
4
+ &.with-img
5
+ margin-left: 330px
6
+ @media screen and ($tablet)
7
+ margin-left: 230px
8
+ @media screen and ($mobile)
9
+ margin-left: 0
10
+ margin-bottom: 50px
11
+ padding-bottom: 50px
12
+ border-bottom: 1px solid $light-grey
13
+ &:last-of-type
14
+ border-bottom: none
15
+ margin-bottom: 0
16
+ .post-contents
17
+ .right
18
+ display: flex
19
+ justify-content: flex-start
20
+ align-items: flex-start
21
+ flex-direction: column
22
+ flex-grow: 1
23
+ .date
24
+ font-size: 13px
25
+ color: $dark-grey
26
+ margin-bottom: 12px
27
+ font-style: italic
28
+ display: block
29
+ .left
30
+ flex: 1 0 auto
31
+ @media screen and ($mobile)
32
+ width: 100%
33
+ img
34
+ margin-right: 30px
35
+ margin-top: -30px
36
+ width: 300px
37
+ @media screen and ($tablet)
38
+ width: 200px
39
+ @media screen and ($mobile)
40
+ width: 100%
41
+ margin: 0
42
+ margin-bottom: 20px
43
+ display: flex
44
+ justify-content: center
45
+ align-items: flex-start
46
+ flex-direction: row
47
+ @media screen and ($mobile)
48
+ flex-direction: column
49
+ p
50
+ font-size: 15px
51
+ color: $dark-grey
52
+ line-height: 2
53
+ .button
54
+ margin-top: 10px
55
+ &.single-post
56
+ .date
57
+ font-size: 13px
58
+ color: $dark-grey
59
+ margin-bottom: 15px
60
+ font-style: italic
61
+ display: block
62
+ margin-top: -20px
63
+ p
64
+ font-size: 15px
65
+ color: $dark-grey
66
+ line-height: 2
data/_sass/_reset.sass ADDED
@@ -0,0 +1,39 @@
1
+ /* http://meyerweb.com/eric/tools/css/reset/
2
+ * v2.0 | 20110126
3
+ * License: none (public domain)
4
+
5
+ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
6
+ margin: 0
7
+ padding: 0
8
+ border: 0
9
+ font-size: 100%
10
+ font: inherit
11
+ vertical-align: baseline
12
+
13
+ /* HTML5 display-role reset for older browsers
14
+
15
+ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
16
+ display: block
17
+
18
+ body
19
+ line-height: 1
20
+
21
+ ol, ul
22
+ list-style: none
23
+
24
+ blockquote, q
25
+ quotes: none
26
+
27
+ blockquote
28
+ &:before, &:after
29
+ content: ''
30
+ content: none
31
+
32
+ q
33
+ &:before, &:after
34
+ content: ''
35
+ content: none
36
+
37
+ table
38
+ border-collapse: collapse
39
+ border-spacing: 0
@@ -0,0 +1,83 @@
1
+ html
2
+ body
3
+ #search-results
4
+ -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
5
+ -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
6
+ box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
7
+ background-color: $light-grey
8
+ color: $dark-grey
9
+ font-size: 15px
10
+ z-index: 0
11
+ font-weight: 300
12
+ position: fixed
13
+ top: 80px
14
+ @media screen and ($tablet)
15
+ top: 60px
16
+ left: 0
17
+ width: 100%
18
+ padding: $section-margin/2 $site-margin
19
+ @media screen and ($mobile)
20
+ padding: $section-margin/4 $site-margin/2
21
+ article
22
+ margin: 20px 0
23
+ nav
24
+ div
25
+ &.search-container
26
+ width: 100%
27
+ z-index: 10
28
+ box-sizing: border-box
29
+ padding-right: $site-margin
30
+ display: none
31
+ position: absolute
32
+ top: 0
33
+ left: 50%
34
+ transform: translateX(-50%)
35
+ height: 100%
36
+ max-width: 1280px
37
+ // margin-left: $site-margin
38
+ // margin-right: $site-margin
39
+ // @media screen and ($mobile)
40
+ // margin-left: $site-margin/2
41
+ // margin-right: $site-margin/2
42
+ .close-search
43
+ background-color: $white
44
+ position: absolute
45
+ top: 0
46
+ right: 0
47
+ height: 100%
48
+ display: flex
49
+ justify-content: flex-end
50
+ align-items: center
51
+ .close-search-button
52
+ position: relative
53
+ height: 25px
54
+ width: 25px
55
+ &:hover
56
+ cursor: pointer
57
+ .close-search-line
58
+ background-color: $blue
59
+ .close-search-line
60
+ width: 25px
61
+ position: absolute
62
+ top: 11px
63
+ right: 0
64
+ height: 2px
65
+ background-color: $black
66
+ transition: background-color .3s ease
67
+ &#line-a
68
+ transform: rotate(45deg)
69
+ &#line-b
70
+ transform: rotate(-45deg)
71
+ form
72
+ width: 100%
73
+ height: 100%
74
+ input
75
+ font-family: 'Open Sans', sans-serif
76
+ width: 100%
77
+ height: 100%
78
+ font-size: 20px
79
+ padding: 0
80
+ border: none
81
+ color: $black
82
+ &:focus
83
+ outline: none
@@ -0,0 +1,171 @@
1
+ body
2
+ .wrapper
3
+ .post
4
+ ul
5
+ display: block
6
+ font-size: 15px
7
+ color: $dark-grey
8
+ line-height: 2
9
+ margin: 5px 0
10
+ margin-left: 18px
11
+ li
12
+ list-style-type: disc
13
+ &.single-post
14
+ ul
15
+ display: block
16
+ font-size: 15px
17
+ color: $dark-grey
18
+ line-height: 2
19
+ margin: 5px 0
20
+ margin-left: 18px
21
+ li
22
+ list-style-type: disc
23
+ &.page
24
+ ul
25
+ display: block
26
+ font-size: 15px
27
+ color: $dark-grey
28
+ line-height: 2
29
+ margin: 5px 0
30
+ margin-left: 18px
31
+ li
32
+ list-style-type: disc
33
+ figure
34
+ &.highlight
35
+ margin: 20px 0
36
+ code
37
+ span
38
+ display: inline-block
39
+ margin: 5px 0
40
+ /**
41
+ * Code formatting
42
+ pre
43
+ font-size: 15px
44
+ border: 1px solid $light-grey
45
+ border-radius: 3px
46
+ background-color: $light-grey
47
+
48
+ code
49
+ font-size: 15px
50
+ border: 1px solid $light-grey
51
+ border-radius: 3px
52
+ background-color: $light-grey
53
+ padding: 1px 5px
54
+
55
+ pre
56
+ padding: 8px 12px
57
+ overflow-x: auto
58
+ > code
59
+ border: 0
60
+ padding-right: 0
61
+ padding-left: 0
62
+
63
+
64
+ /**
65
+ * Syntax highlighting styles
66
+
67
+ .highlight
68
+ background: #fff
69
+
70
+ .highlighter-rouge .highlight
71
+ background: #eef
72
+
73
+ .highlight
74
+ .c
75
+ color: #998
76
+ font-style: italic
77
+ .err
78
+ color: #a61717
79
+ background-color: #e3d2d2
80
+ .k, .o
81
+ font-weight: bold
82
+ .cm
83
+ color: #998
84
+ font-style: italic
85
+ .cp
86
+ color: #999
87
+ font-weight: bold
88
+ .c1
89
+ color: #998
90
+ font-style: italic
91
+ .cs
92
+ color: #999
93
+ font-weight: bold
94
+ font-style: italic
95
+ .gd
96
+ color: #000
97
+ background-color: #fdd
98
+ .x
99
+ color: #000
100
+ background-color: #faa
101
+ .ge
102
+ font-style: italic
103
+ .gr
104
+ color: #a00
105
+ .gh
106
+ color: #999
107
+ .gi
108
+ color: #000
109
+ background-color: #dfd
110
+ .x
111
+ color: #000
112
+ background-color: #afa
113
+ .go
114
+ color: #888
115
+ .gp
116
+ color: #555
117
+ .gs
118
+ font-weight: bold
119
+ .gu
120
+ color: #aaa
121
+ .gt
122
+ color: #a00
123
+ .kc, .kd, .kp, .kr
124
+ font-weight: bold
125
+ .kt
126
+ color: #458
127
+ font-weight: bold
128
+ .m
129
+ color: #099
130
+ .s
131
+ color: #d14
132
+ .na
133
+ color: #008080
134
+ .nb
135
+ color: #0086B3
136
+ .nc
137
+ color: #458
138
+ font-weight: bold
139
+ .no
140
+ color: #008080
141
+ .ni
142
+ color: #800080
143
+ .ne, .nf
144
+ color: #900
145
+ font-weight: bold
146
+ .nn
147
+ color: #555
148
+ .nt
149
+ color: #000080
150
+ .nv
151
+ color: #008080
152
+ .ow
153
+ font-weight: bold
154
+ .w
155
+ color: #bbb
156
+ .mf, .mh, .mi, .mo
157
+ color: #099
158
+ .sb, .sc, .sd, .s2, .se, .sh, .si, .sx
159
+ color: #d14
160
+ .sr
161
+ color: #009926
162
+ .s1
163
+ color: #d14
164
+ .ss
165
+ color: #990073
166
+ .bp
167
+ color: #999
168
+ .vc, .vg, .vi
169
+ color: #008080
170
+ .il
171
+ color: #099
Binary file
data/assets/jt.jpg ADDED
Binary file