Skip to content

Commit c7e1974

Browse files
committed
20.0 alpha 2
[index] - tweak css to adapt to mobile sizes - small style changes [macros] - allow colors in icons
1 parent 2653347 commit c7e1974

2 files changed

Lines changed: 27 additions & 21 deletions

File tree

src/static/css/index.sass

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -141,20 +141,23 @@ video#background
141141
margin: 1em
142142

143143
.hoverborder
144-
border: 2px solid transparent
144+
border: 2px solid hsla(0, 0%, 100%, 1%)
145145
border-radius: base.$radius
146+
backdrop-filter: blur(3px)
146147

147148
&:hover
148149
border-color: colors.$light
150+
backdrop-filter: blur(9px)
149151

150152
.project
151153
.project-title
152154
font-weight: bold
153-
font-size: max(1.2em, 2vw)
154155
display: flex
156+
text-align: left
155157

156158
.emoji
157159
margin-right: 0.5em
160+
vertical-align: middle
158161

159162
.info
160163
margin-left: 0.5em
@@ -191,16 +194,15 @@ video#background
191194

192195
#featured-grid
193196
display: grid
194-
gap: 2.5rem
197+
gap: max(1em, 2vw)
195198

196199
.project
197200
display: grid
198201
grid-template-columns: repeat(2, minmax(0, 1fr))
199-
gap: 0.625rem
200202
text-align: left
201203

202204
& > *
203-
margin: 1em 1em 1em 1em
205+
margin: 1em
204206

205207
.project-img-container
206208
display: block
@@ -232,9 +234,16 @@ video#background
232234
flex-direction: column
233235
display: flex
234236

237+
.project-title
238+
font-size: max(1.2em, 2vw)
239+
235240
.project-tech
236241
font-size: 1.5em
237242

243+
.project-links a
244+
padding: min(10px, 1vw) min(15, 1.5vw)
245+
font-size: min(1em, max(1.5vw, 12px))
246+
238247
&:hover .project-img
239248
.main
240249
opacity: 0
@@ -245,7 +254,7 @@ video#background
245254
#project-list
246255
display: grid
247256
grid-template-columns: repeat(2, minmax(0, 1fr))
248-
gap: 1.25rem
257+
gap: max(0.5em, 2vw)
249258

250259
.project
251260
display: flex
@@ -258,30 +267,29 @@ video#background
258267
.project-tech
259268
opacity: 1
260269

261-
.project-links a.button
262-
background-color: colors.$white
263-
color: colors.$primary
264-
265270
.project-title
266-
display: flex
267271
font-size: max(1.1em, 1.5vw)
268272

269273
.project-description
270274
text-align: left
271275

272276
.project-links
273277
position: absolute
274-
top: 0.75rem
275-
right: 0.75rem
278+
top: 0.95rem
279+
right: 0.95rem
276280
overflow: hidden
277281

278282
.button
279283
background-color: transparent
284+
padding: 0
280285
color: colors.$white
281286

287+
img
288+
filter: invert(1) grayscale(1) brightness(2)
289+
282290
.project-tech
283291
opacity: 0
284-
margin-left: 1vw
292+
margin-left: max(0.4em, 1vw)
285293
font-size: max(0.75em, 1.5vw)
286294

287295
.icon

src/static/macros.njk

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,11 @@ permalink: false
88
{% endfor %}
99
{% endmacro %}
1010

11-
{% macro renderIcon(svg, invert=false) %}
12-
{% if invert %}
13-
{% set invert = ' invert' %}
14-
{% else %}
15-
{% set invert = '' %}
16-
{% endif %}
17-
<img src="/assets/icons/tech/{{ svg }}.svg" class="icon{{ invert }}" alt="{{ svg }}" title="{{ svg }}">
11+
{% macro renderIcon(svg, invert=false, color=false) %}
12+
{% set invert = ' invert' if invert else '' %}
13+
{% set color = ' color' if color else '' %}
14+
{% set classes = 'icon' + invert + color %}
15+
<img src="/assets/icons/tech/{{ svg }}.svg" class="{{ classes }}" alt="{{ svg }}" title="{{ svg }}">
1816
{% endmacro %}
1917

2018
{% macro renderLinks(project, names=true) %}

0 commit comments

Comments
 (0)