Skip to content

Commit f58641a

Browse files
svvimmingsvvimming
committed
feat: responsive styling down to tiny until 'how it works' section
1 parent 9c5ae15 commit f58641a

File tree

7 files changed

+237
-44
lines changed

7 files changed

+237
-44
lines changed

‎components/blocks/accordion-block.vue

+20
Original file line numberDiff line numberDiff line change
@@ -97,17 +97,31 @@ const getIconComponent = (icon) => {
9797
align-items: center;
9898
padding: toRem(16) 0;
9999
cursor: pointer;
100+
@include tiny {
101+
padding: toRem(10) 0;
102+
padding-right: toRem(38);
103+
}
100104
.icon {
101105
width: toRem(30);
102106
height: toRem(30);
103107
margin-right: toRem(22);
108+
@include tiny {
109+
width: toRem(22);
110+
height: toRem(22);
111+
min-width: toRem(22);
112+
}
104113
}
105114
:deep(.plus-minus-icon) {
106115
position: absolute;
107116
right: 0;
108117
top: calc(50% - toRem(15));
109118
width: toRem(30);
110119
height: toRem(30);
120+
@include tiny {
121+
width: toRem(22);
122+
height: toRem(22);
123+
top: calc(50% - toRem(11));
124+
}
111125
circle {
112126
@include transitionDefault;
113127
fill: rgba($codGray, 0);
@@ -121,6 +135,12 @@ const getIconComponent = (icon) => {
121135
max-height: 0;
122136
overflow: hidden;
123137
transition: max-height 300ms cubic-bezier(0.33, 0.2, 0.41, 0.99);
138+
@include mini {
139+
padding: 0 toRem(48);
140+
}
141+
@include tiny {
142+
padding: 0 toRem(41);
143+
}
124144
.text {
125145
@include p2;
126146
margin-bottom: toRem(16);

‎components/blocks/code-block.vue

+32
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ const lines = computed(() => {
4444
padding: toRem(24);
4545
background-color: $codeBlack;
4646
border-radius: toRem(6);
47+
@include mini {
48+
padding: toRem(7) toRem(13);
49+
}
4750
}
4851
4952
.code-line {
@@ -55,6 +58,9 @@ const lines = computed(() => {
5558
@include medium {
5659
margin-bottom: 0;
5760
}
61+
@include mini {
62+
overflow: hidden;
63+
}
5864
&.heading {
5965
color: $eastSide;
6066
}
@@ -64,18 +70,44 @@ const lines = computed(() => {
6470
display: inline-block;
6571
white-space: nowrap;
6672
@include inlineCode;
73+
@include tiny {
74+
font-size: 0.75rem;
75+
}
6776
&.id,
6877
&.type {
6978
width: 12%;
7079
@include medium {
7180
width: 20%;
7281
}
82+
@include tiny {
83+
width: 13%;
84+
}
85+
}
86+
&.id {
87+
@include small {
88+
display: none;
89+
}
90+
@include mini {
91+
display: inline-block;
92+
}
93+
@include tiny {
94+
width: 10%;
95+
}
7396
}
7497
&.path {
7598
width: 40%;
7699
@include medium {
77100
width: 60%;
78101
}
102+
@include small {
103+
width: 80%;
104+
}
105+
@include mini {
106+
width: 60%;
107+
}
108+
@include tiny {
109+
width: 62%;
110+
}
79111
}
80112
&.scan-state {
81113
width: 21%;

‎components/button/cta.vue

+3
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,9 @@ const props = defineProps({
219219
border: 2px solid $sageGreen;
220220
background-color: rgba($sageGreen, 0);
221221
@include transitionDefault;
222+
@include mini {
223+
padding: toRem(6);
224+
}
222225
.button-content {
223226
display: flex;
224227
}

‎components/card.vue

+4
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,10 @@ const iconComponent = computed(() => {
9999
@include small {
100100
padding: toRem(15);
101101
}
102+
@include tiny {
103+
padding: toRem(13) toRem(10);
104+
padding-bottom: 0;
105+
}
102106
.content {
103107
position: relative;
104108
z-index: 2;

‎components/site-header.vue

+88-36
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,30 @@
1717
<!-- =========================================================== Desktop -->
1818
<div class="grid-noGutter-noBottom main-content">
1919

20-
<div class="col-3_md-2">
20+
<div class="col-3_md-2_sm-4_mi-6">
2121
<NuxtLink to="/" class="logo">
2222
<SiteLogo />
2323
</NuxtLink>
2424
</div>
2525

26-
<div class="col-4_md-5" data-push-left="off-2_md-1">
26+
<div class="col-4_md-5_sm-hidden" data-push-left="off-2_md-1">
2727
<Navbar :links="navigation" class="desktop" />
2828
</div>
2929

30-
<div class="col-3_md-4">
31-
30+
<div class="col-3_md-4_sm-5_mi-6" data-push-left="off-0_sm-3_mi-0">
3231
<div class="nav-ctas">
32+
33+
<div class="nav-toggle-wrapper before">
34+
<ZeroButton
35+
tag="button"
36+
@click="toggleNav">
37+
<div :class="['hamburger', { open: navigationOpen }]">
38+
<div class="bottom">
39+
</div>
40+
</div>
41+
</ZeroButton>
42+
</div>
43+
3344
<ButtonCta
3445
v-for="cta in ctas"
3546
:key="cta.component || cta.text"
@@ -45,19 +56,19 @@
4556
{{ cta.text }}
4657
</span>
4758
</ButtonCta>
48-
</div>
4959

50-
<div class="nav-toggle-wrapper">
51-
<ZeroButton
52-
tag="button"
53-
@click="toggleNav">
54-
<div :class="['hamburger', { open: navigationOpen }]">
55-
<div class="bottom">
60+
<div class="nav-toggle-wrapper after">
61+
<ZeroButton
62+
tag="button"
63+
@click="toggleNav">
64+
<div :class="['hamburger', { open: navigationOpen }]">
65+
<div class="bottom">
66+
</div>
5667
</div>
57-
</div>
58-
</ZeroButton>
59-
</div>
68+
</ZeroButton>
69+
</div>
6070

71+
</div>
6172
</div>
6273

6374
</div>
@@ -128,10 +139,15 @@ const getCtaComponent = (icon) => {
128139
align-items: center;
129140
// height: $siteHeaderHeight;
130141
padding: 2rem 0;
142+
@include mini {
143+
padding: 1.25rem 0;
144+
}
131145
&.nav-panel-open {
146+
position: fixed;
147+
width: 100%;
132148
z-index: 1000;
133-
.main-content {
134-
position: fixed;
149+
.main-content,
150+
.mobile-background-panel {
135151
z-index: 1001;
136152
}
137153
.nav-toggle-wrapper {
@@ -177,8 +193,10 @@ const getCtaComponent = (icon) => {
177193
transition: 250ms ease;
178194
}
179195
@include mini {
180-
width: toRem(75);
181-
height: toRem(75);
196+
max-width: toRem(205);
197+
}
198+
@include tiny {
199+
max-width: toRem(150);
182200
}
183201
}
184202
}
@@ -209,6 +227,7 @@ const getCtaComponent = (icon) => {
209227
}
210228
211229
.nav-ctas {
230+
position: relative;
212231
display: flex;
213232
justify-content: space-between;
214233
height: 100%;
@@ -227,6 +246,14 @@ const getCtaComponent = (icon) => {
227246
@include small {
228247
transform: unset;
229248
}
249+
@include mini {
250+
:deep(.theme__primary) {
251+
display: none;
252+
}
253+
:deep(.button) {
254+
margin-left: 0.5rem;
255+
}
256+
}
230257
}
231258
232259
.desktop,
@@ -237,15 +264,31 @@ const getCtaComponent = (icon) => {
237264
.icon {
238265
width: toRem(20);
239266
height: toRem(20);
267+
@include mini {
268+
width: toRem(14);
269+
height: toRem(14);
270+
}
240271
}
241272
242273
// /////////////////////////////////////////////////////////////////// Hamburger
243274
.nav-toggle-wrapper {
244275
display: none;
245276
position: relative;
246-
justify-content: flex-end;
247277
@include small {
248-
display: flex;
278+
&.before {
279+
display: flex;
280+
justify-content: flex-end;
281+
}
282+
}
283+
@include mini {
284+
margin-left: toRem(10);
285+
&.before {
286+
display: none;
287+
}
288+
&.after {
289+
display: flex;
290+
justify-content: flex-end;
291+
}
249292
}
250293
:deep(.button) {
251294
padding: toRem(5);
@@ -254,51 +297,59 @@ const getCtaComponent = (icon) => {
254297
255298
.hamburger {
256299
position: relative;
257-
width: toRem(26);
258-
height: toRem(18);
300+
width: toRem(22);
301+
height: toRem(12);
259302
&:before,
260303
&:after,
261304
.bottom {
262305
position: absolute;
263306
width: 100%;
264307
left: 0;
265308
transition: 250ms ease;
309+
border-top-right-radius: toRem(1.5);
310+
border-bottom-right-radius: toRem(1.5);
311+
border-top-left-radius: toRem(0);
312+
border-bottom-left-radius: toRem(0);
266313
}
267314
&:before,
268315
&:after {
269316
content: '';
270-
border-bottom: solid toRem(2) $alto;
271317
}
272318
&:before {
273319
top: 0;
320+
width: toRem(16.5);
321+
left: toRem(5.5);
322+
border-bottom: solid toRem(3) $sageGreen;
274323
}
275324
&:after {
276325
top: 50%;
326+
border-bottom: solid toRem(3) rgba($sageGreen, 0.5);
277327
}
278328
.bottom {
279329
top: 100%;
280-
border-bottom: solid toRem(5) $alto;
330+
border-bottom: solid toRem(3) rgba($sageGreen, 0.5);
281331
}
282332
&.open {
333+
&:before,
334+
&:after,
335+
.bottom {
336+
border-top-left-radius: toRem(1.5);
337+
border-bottom-left-radius: toRem(1.5);
338+
}
283339
&:before {
284340
width: toRem(20);
285-
border-bottom: solid toRem(2) $alto;
286-
transform: translate(2px, 4.5px) rotate(45deg);
287-
@include mini {
288-
transform: translate(2px, 4px) rotate(45deg);
289-
}
341+
border-bottom: solid toRem(3) $sageGreen;
342+
transform: translate(-4px, 4.5px) rotate(45deg);
290343
}
291344
&:after {
292345
width: toRem(20);
293-
border-bottom: solid toRem(2) $alto;
294-
transform: translate(2px, -4.5px) rotate(-45deg);
295-
@include mini {
296-
transform: translate(2px, -4px) rotate(-45deg);
297-
}
346+
border-bottom: solid toRem(3) $sageGreen;
347+
transform: translate(1px, -1.5px) rotate(-45deg)
298348
}
299349
.bottom {
300350
width: 0;
301-
border-bottom: solid toRem(5) $alto;
351+
border-bottom: solid toRem(3) $sageGreen;
352+
transform: translateX(11px);
302353
}
303354
}
304355
}
@@ -318,14 +369,15 @@ const getCtaComponent = (icon) => {
318369
width: 100vw;
319370
height: 100vh;
320371
background-color: $codGray;
321-
transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease;
372+
transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease, z-index 250ms ease;
322373
visibility: hidden;
323374
transform: scale(1.1);
324375
opacity: 0;
325376
&.open {
326377
opacity: 1;
327378
visibility: visible;
328379
transform: scale(1);
380+
z-index: 1000;
329381
}
330382
// :deep(.navigation) {
331383
// .nav-item {

0 commit comments

Comments
 (0)