Skip to content

Commit e6fc935

Browse files
svvimmingsvvimming
committedSep 6, 2023
feat: subfooter section
·
v1.9.0v1.0.0
1 parent 8fea555 commit e6fc935

8 files changed

+302
-12
lines changed
 

‎components/blocks/block-builder.vue

+3
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ import ImageBlock from '@/components/blocks/image-block'
6969
import MarkdownBlock from '@/components/blocks/markdown-block'
7070
import CodeBlock from '@/components/blocks/code-block'
7171
import CardListBlock from '@/components/blocks/card-list-block'
72+
import SubfooterCard from '@/components/subfooter-card'
7273
// import BlockBuilder from '@/components/blocks/block-builder'
7374
7475
export default {
@@ -79,6 +80,7 @@ export default {
7980
ImageBlock,
8081
CodeBlock,
8182
CardListBlock,
83+
SubfooterCard,
8284
// BlockBuilder,
8385
MarkdownBlock
8486
},
@@ -115,6 +117,7 @@ export default {
115117
case 'image_block' : name = 'ImageBlock'; break
116118
case 'markdown_block': name = 'MarkdownBlock'; break
117119
case 'card_list_block': name = 'CardListBlock'; break
120+
case 'subfooter_card': name = 'SubfooterCard'; break
118121
case 'custom' : name = block.component; break
119122
}
120123
return name

‎components/site-footer.vue

+13
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,19 @@ const legal = computed(() => {
8080
justify-content: center;
8181
align-items: center;
8282
padding: toRem(34) 0;
83+
height: toRem(234);
84+
&:before {
85+
content: '';
86+
position: absolute;
87+
top: 0;
88+
left: 0;
89+
width: 100%;
90+
height: 100%;
91+
background-size: 1439px 1200px;
92+
background-position: -400% 4%;
93+
background-repeat: no-repeat;
94+
background-image: url('/images/ring-of-cross-sections-on-angle.png');
95+
}
8396
}
8497
8598
.site-footer-logo {

‎components/subfooter-card.vue

+209
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<template>
2+
<div
3+
:class="['subfooter-card', { fullwidth }]"
4+
:style="cardStyles">
5+
6+
<div class="card-content">
7+
<div class="grid-noGutter-noBottom-middle">
8+
9+
<div
10+
:class="fullwidth ? 'col-6' : 'col-12'"
11+
:data-push-left="fullwidth ? 'off-1' : 'off-0'">
12+
<div class="before">
13+
14+
<div class="feature">
15+
<img v-if="image" :src="image" class="image" />
16+
<pre v-if="code">
17+
<code v-html="code"></code>
18+
</pre>
19+
</div>
20+
21+
<div
22+
v-if="title"
23+
class="title"
24+
v-html="title">
25+
</div>
26+
27+
<div
28+
v-if="fullwidth"
29+
class="subheading"
30+
v-html="subheading">
31+
</div>
32+
33+
<div v-if="!fullwidth && cta" class="cta">
34+
<ButtonCta
35+
:to="cta.to"
36+
:tag="cta.tag"
37+
theme="secondary">
38+
{{ cta.text }}
39+
</ButtonCta>
40+
</div>
41+
42+
</div>
43+
</div>
44+
45+
<div v-if="fullwidth" class="col-5">
46+
<div class="after">
47+
48+
<div class="description">
49+
{{ description }}
50+
</div>
51+
52+
<div v-if="fullwidth && cta" class="cta">
53+
<ButtonCta
54+
:to="cta.to"
55+
:tag="cta.tag"
56+
theme="secondary">
57+
{{ cta.text }}
58+
</ButtonCta>
59+
</div>
60+
61+
</div>
62+
</div>
63+
64+
</div>
65+
</div>
66+
67+
</div>
68+
</template>
69+
70+
<script setup>
71+
// ======================================================================= Props
72+
const props = defineProps({
73+
block: {
74+
type: Object,
75+
required: true,
76+
default: () => ({})
77+
}
78+
})
79+
80+
// ==================================================================== Computed
81+
const fullwidth = computed(() => {
82+
return props.block.fullwidth
83+
})
84+
85+
const cta = computed(() => {
86+
return props.block.cta
87+
})
88+
89+
const image = computed(() => {
90+
return props.block.image
91+
})
92+
93+
const title = computed(() => {
94+
return props.block.title
95+
})
96+
97+
const subheading = computed(() => {
98+
return props.block.subheading
99+
})
100+
101+
const description = computed(() => {
102+
return props.block.description
103+
})
104+
105+
const code = computed(() => {
106+
return props.block.code
107+
})
108+
109+
const cardStyles = computed(() => {
110+
if (props.block.borderGradientAngle) {
111+
return { '--border-gradient-angle': props.block.borderGradientAngle }
112+
}
113+
return null
114+
})
115+
116+
</script>
117+
118+
<style lang="scss" scoped>
119+
// ///////////////////////////////////////////////////////////////////// General
120+
.subfooter-card {
121+
--border-gradient-angle: 0deg;
122+
@include cardPanel(var(--border-gradient-angle));
123+
padding: toRem(41) toRem(31);
124+
height: 100%;
125+
[class~="grid"], [class*="grid-"], [class*="grid_"] {
126+
width: 100% !important;
127+
}
128+
}
129+
130+
.card-content {
131+
position: relative;
132+
z-index: 2;
133+
}
134+
135+
.feature {
136+
margin-bottom: toRem(37);
137+
.image {
138+
margin-top: 0.5rem;
139+
padding: 0 0.5rem;
140+
width: 100%;
141+
}
142+
pre {
143+
padding: 0 toRem(25);
144+
background-color: $codeBlack;
145+
border-radius: toRem(5);
146+
margin: 0;
147+
}
148+
code {
149+
display: block;
150+
font-size: toRem(18);
151+
line-height: leading(27, 18);
152+
letter-spacing: 0.01em;
153+
color: $sageGreen;
154+
:deep(span) {
155+
&.blue {
156+
color: #5D9AD1;
157+
}
158+
}
159+
:deep(span) {
160+
&.purple {
161+
color: $eastSide;
162+
}
163+
}
164+
}
165+
}
166+
167+
.title {
168+
@include h1;
169+
@include gradientText;
170+
margin-bottom: toRem(14);
171+
}
172+
173+
.subheading,
174+
.description {
175+
font-size: toRem(18);
176+
line-height: leading(24, 18);
177+
font-weight: 500;
178+
letter-spacing: 0.01em;
179+
}
180+
181+
.subfooter-card.fullwidth {
182+
.before {
183+
position: relative;
184+
margin-left: -2rem;
185+
}
186+
.after {
187+
padding: 0 toRem(40);
188+
}
189+
.feature {
190+
display: none;
191+
}
192+
.title {
193+
font-size: toRem(80);
194+
line-height: leading(110, 80);
195+
white-space: nowrap;
196+
margin-bottom: toRem(10);
197+
:deep(img) {
198+
display: inline;
199+
max-width: toRem(214);
200+
margin-right: toRem(42);
201+
transform: translateY(0.75rem);
202+
}
203+
}
204+
.description {
205+
line-height: leading(27, 18);
206+
margin-bottom: toRem(30);
207+
}
208+
}
209+
</style>

‎content/core/index.json

+46-1
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,52 @@
330330
}
331331
},
332332
{
333-
"id": "section-subfooter"
333+
"id": "section-subfooter",
334+
"grid": ["equalHeight"],
335+
"col_1": {
336+
"type": "subfooter_card",
337+
"cols": {
338+
"num": "col-6"
339+
},
340+
"borderGradientAngle": "135deg",
341+
"code": "singularity run content-provider<br><span class='blue'>wget</span> <span class='purple'>127.0.0.1:8088/piece/bagaxxxx</span>",
342+
"title": "Documentation",
343+
"cta": {
344+
"tag": "a",
345+
"to": "https://example.com",
346+
"text": "Read the Documentation"
347+
}
348+
},
349+
"col_2": {
350+
"type": "subfooter_card",
351+
"cols": {
352+
"num": "col-6"
353+
},
354+
"borderGradientAngle": "225deg",
355+
"image": "/images/topography-graphic.svg",
356+
"title": "Dashboard",
357+
"cta": {
358+
"tag": "a",
359+
"to": "https://singularity-metrics-dashboard.vercel.app/",
360+
"text": "View the dashboard"
361+
}
362+
},
363+
"col_3": {
364+
"type": "subfooter_card",
365+
"cols": {
366+
"num": "col-12"
367+
},
368+
"fullwidth": true,
369+
"borderGradientAngle": "45deg",
370+
"title": "<img src='/images/topography-graphic-with-border.svg' />Keep up<br>with Singularity",
371+
"subheading": "Your feedback can shape our next big release.<br>Join us on <a href='https://github.com/data-preservation-programs/singularity' target='_blank'>Github</a> and <a href='https://filecoinproject.slack.com/archives/C05JABREATH' target='_blank'>Slack</a>",
372+
"description": "Sign up to keep up. We're passionate about keeping you in the loop with our latest features and updates, but we're even more committed to respecting your inbox.",
373+
"cta": {
374+
"tag": "a",
375+
"to": "https://example.com",
376+
"text": "Keep Up"
377+
}
378+
}
334379
}
335380
]
336381
}

‎pages/index.vue

+18
Original file line numberDiff line numberDiff line change
@@ -127,4 +127,22 @@ const sections = computed(() => {
127127
}
128128
}
129129
}
130+
131+
:deep(#section-subfooter) {
132+
position: relative;
133+
padding-bottom: toRem(52);
134+
&:before {
135+
content: '';
136+
position: absolute;
137+
top: toRem(-68);
138+
left: 0;
139+
width: 100%;
140+
height: calc(100% + toRem(68) + toRem(234));
141+
background-image: url('/images/ring-of-cross-sections-from-above.png');
142+
background-size: 1300px;
143+
background-position: center top;
144+
background-repeat: no-repeat;
145+
transform: translateX(calc(-50% - 3rem));
146+
}
147+
}
130148
</style>

‎public/images/topography-graphic-with-border.svg

+1-1
Loading

‎public/images/topography-graphic.svg

+12
Loading

‎public/images/topology-graphic.svg

-10
This file was deleted.

0 commit comments

Comments
 (0)
Please sign in to comment.