harms-columns-front-page 0.0.1

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,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