/
style.sass
267 lines (226 loc) · 5.67 KB
/
style.sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
#app
font-family: Avenir, Helvetica, Arial, sans-serif
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-align: center
color: #2c3e50
margin-top: 60px
html, body
overscroll-behavior-y: none
overscroll-behavior-x: none
scroll-behavior: smooth
font-family: Avenir, Helvetica, Arial, sans-serif
// scroll-snap-type: y mandatory
background-color: black
height: 100%
margin: 0
#bg
position: fixed
top: 0
left: 0
$mobile-breakpoint: 800px
#business-card
width: 100%
box-sizing: border-box
overflow: hidden
background: url("media/background.png")
background-size: cover
height: 100%
background-attachment: fixed
position: relative
width: 100%
display: grid
grid-template-columns: 10% 400px auto 40% 10%
grid-template-rows: 20% 200px auto
@media screen and (max-width: $mobile-breakpoint)
grid-template-columns: 100%
grid-template-rows: 200px auto
scroll-snap-align: end
#card
color: #222222
background-color: #eeeeee
outline: 8px #222222 solid
grid-row-start: 2
grid-row-end: 3
grid-column-start: 2
grid-column-end: 3
@media screen and (max-width: $mobile-breakpoint)
grid-column-start: 1
grid-column-end: 2
grid-row-start: 1
grid-row-end: 2
h1
margin-left: 24px
margin-bottom: 0px
font-weight: 300
font-size: 36px
subtitle
margin-left: 24px
color: #333333
font-weight: 100
p
color: #333333
font-weight: 300
margin-left: 24px
a
color: #555555
#object-wrap
grid-row-start: 1
grid-row-end: 4
grid-column-start: 3
grid-column-end: 6
display: flex
flex-direction: column
align-items: center
justify-content: center
@media screen and (max-width: $mobile-breakpoint)
grid-row-start: 2
grid-row-end: 3
grid-column-start: 1
grid-column-end: 2
cursor: grab
#object
width: 100%
max-width: 95vh
aspect-ratio: 1 / 1
opacity: 1
filter: blur(0px)
transition: opacity 0.6s ease-out, filter 1.5s ease-out 0.4s
&.unloaded
opacity: 0
filter: blur(20px)
@media screen and (max-width: $mobile-breakpoint)
max-width: 85vh
.swipedown
bottom: 0px
position: absolute
width: 10%
p
-webkit-text-stroke: 2px black solid
text-align: center
color: white
font-size: 24px
font-weight: bold
text-transform: uppercase
letter-spacing: 4px
.contacts
position: absolute
bottom: 0px
padding: 15px
left: 0px
right: 0px
display: flex
flex-direction: row
justify-content: flex-end
gap: 16px
@media screen and (max-width: $mobile-breakpoint)
justify-content: center
a
color: #eeeeee
padding: 8px 12px 8px 12px
outline: 2px solid #eeeeee
text-decoration: none
font-size: 22px
font-family: monospace
font-weight: 300
letter-spacing: 2px
transition: outline 0.2s, background-color 0.2s
background-color: rgba(255, 255, 255, 0)
&:hover
outline: 5px solid white
background-color: rgba(255, 255, 255, 0.2)
#portfolio
min-height: 100%
width: 100%
background-color: #eeeeee
display: grid
grid-template-columns: auto 1fr
grid-template-rows: 1fr
///I
grid-template-areas: "title projects"
@media screen and (max-width: $mobile-breakpoint)
grid-template-rows: auto 1fr
grid-template-columns: 1fr
grid-template-areas: "title" "projects"
.title
grid-area: title
h1
font-size: 48px
color: #333333
margin: 20px 0px 0px 20px
position: sticky
top: 20px
@media screen and (max-width: $mobile-breakpoint)
margin: 20px 0px -20px 60px
.projects
grid-area: projects
display: flex
flex-direction: column
padding-top: 40px
padding-right: 40px
padding-bottom: 80px
padding-left: 40px
gap: 20px
.project
padding: 20px 10px 10px 20px
box-shadow: rgba(170, 170, 160, 0.2) 0px 0px 0px 2px
max-width: 700px
border: 1px #aaaaaa solid
border-radius: 20px
display: grid
grid-template-columns: 1fr auto
grid-template-rows: 1fr auto
grid-template-areas: "text text" ".buttons"
transition: box-shadow 0.2s
background-color: #f3f3f3
opacity: 0
transform: translateY(10px)
transition: opacity 0.4s ease-in-out 0.1s, transform 0.4s ease-in-out 0.1s, box-shadow 0.2s ease-in-out
&.visible
opacity: 1
transform: translateY(0px)
&:hover
box-shadow: rgba(170, 170, 160, 0.2) 0px 0px 0px 5px
.text
grid-area: text
h2
font-size: 32px
margin: 0
color: #444444
.description
color: #444444
margin: 0
.tools
margin-top: 8px
width: 100%
overflow-x: auto
display: flex
gap: 8px
span
color: #a5a5a5
.buttons
grid-area: buttons
display: flex
align-items: center
gap: 8px
a.try
color: #444444
padding: 8px 12px 8px 12px
text-decoration: none
font-size: 22px
font-family: monospace
font-weight: 700
letter-spacing: 2px
transition: outline 0.2s, background-color 0.2s
background-color: rgba(44, 44, 44, 0)
&:hover
color: #222222
a.github
display: block
height: 40px
width: 40px
img
height: 100%
opacity: 0.8
&:hover
opacity: 1