Skip to content

Commit 3fbcae8

Browse files
orvnorvn
authored
Merge pull request #56 from data-preservation-programs/feat-image-optimization
feat: image optimization updates
2 parents d0e385a + d313834 commit 3fbcae8

7 files changed

+74
-72
lines changed

‎components/site-footer.vue

+19-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<footer id="site-footer" :class="{ 'no-background-image': pageSignup }">
2+
<footer id="site-footer" :class="{ 'no-background-image': noBackgroundImage }">
33

44
<div class="content">
55
<div class="grid-bottom-noBottom-noGutter">
@@ -52,10 +52,18 @@
5252
<script setup>
5353
// ======================================================================== Data
5454
const generalStore = useGeneralStore()
55-
const route = useRoute()
55+
56+
// ======================================================================= Props
57+
const props = defineProps({
58+
noBackgroundImage: {
59+
type: Boolean,
60+
required: false,
61+
default: false
62+
}
63+
})
5664
5765
// ==================================================================== Computed
58-
const pageSignup = computed(() => { return route.name === 'signup' })
66+
const noBackgroundImage = computed(() => { return props.noBackgroundImage })
5967
6068
const authors = computed(() => {
6169
return generalStore.siteContent.general?.footer.authors
@@ -99,23 +107,17 @@ const scrollToTop = async () => {
99107
content: '';
100108
position: absolute;
101109
top: 0;
102-
left: calc(50% - $halfGridWidth - 3rem);
103-
width: calc(100% + 10rem);
110+
left: 0;
111+
width: 100%;
104112
height: 100%;
105-
background-size: 1439px 1200px;
106-
background-position: 315px -29px;
113+
background-position: right bottom;
107114
background-repeat: no-repeat;
108-
background-image: url('/images/ring-of-cross-sections-on-angle.jpg');
109-
@include gridMaxMQ {
110-
height: calc(100% + 3rem);
111-
width: 100%;
112-
top: -3rem;
113-
left: calc(100% - 52rem);
114-
background-position: center -106px;
115+
background-image: url('/images/ring-of-cross-sections-on-angle-footer.png');
116+
@include mini {
117+
background-position: 4rem -5.5rem;
115118
}
116-
@include small {
117-
left: 0;
118-
width: 100%;
119+
@include tiny {
120+
background-position: 4rem -3.5rem;
119121
}
120122
}
121123
}

‎layouts/warped-torus-background.vue

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="layout warped-torus-background" tabindex="-1">
3+
4+
<SiteHeader />
5+
6+
<slot />
7+
8+
<SiteFooter :no-background-image="true" />
9+
10+
</div>
11+
</template>
12+
13+
<style lang="scss" scoped>
14+
// ///////////////////////////////////////////////////////////////////// General
15+
.layout {
16+
display: flex;
17+
flex-direction: column;
18+
&:before {
19+
content: '';
20+
position: absolute;
21+
display: block;
22+
z-index: -1;
23+
overflow: visible;
24+
top: 0;
25+
left: 0;
26+
height: 100%;
27+
width: 100%;
28+
background-image: url('/images/warped-torus-made-of-segments.jpg');
29+
background-size: auto vw(1800px);
30+
background-origin: border-box;
31+
background-position: center 75%;
32+
background-repeat: no-repeat;
33+
@include medium {
34+
background-position: center 45%;
35+
}
36+
@include small {
37+
background-position: center 30%;
38+
}
39+
@include mini {
40+
background-size: auto vw(1100px, 640px);
41+
background-position: center bottom 18rem;
42+
}
43+
@include tiny {
44+
background-size: auto vw(1200px, 415px);
45+
background-position: center top -30%;
46+
}
47+
}
48+
}
49+
</style>

‎pages/index.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ onMounted(() => {
224224
width: calc(100% + 270px);
225225
height: 130rem;
226226
transform: translateX(-270px);
227-
background-image: url('/images/warped-torus-made-of-segments.png');
227+
background-image: url('/images/warped-torus-made-of-segments.jpg');
228228
background-size: 2000px;
229229
background-position: center top;
230230
background-repeat: no-repeat;
@@ -363,7 +363,7 @@ onMounted(() => {
363363
z-index: -1;
364364
width: calc(100% + toRem(50));
365365
height: toRem(1480);
366-
background-image: url('/images/warped-torus-made-of-segments.png');
366+
background-image: url('/images/warped-torus-made-of-segments.jpg');
367367
background-size: 1520px;
368368
background-position: center top;
369369
background-repeat: no-repeat;
@@ -415,7 +415,7 @@ onMounted(() => {
415415
left: calc(50% - $halfGridWidth - 3rem);
416416
z-index: -1;
417417
width: toRem(1400);
418-
height: calc(toRem(866) + toRem(68) + toRem(234)); // section height + top displacement + footer height
418+
height: calc(toRem(866) + toRem(68) + toRem(234) - 1rem); // section height + top displacement + footer height - 1rem
419419
background-image: url('/images/ring-of-cross-sections-from-above.jpg');
420420
background-size: 1300px;
421421
background-position: center top;

‎pages/signup.vue

+3-52
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@
2525
</template>
2626

2727
<script setup>
28-
28+
definePageMeta({
29+
layout: 'warped-torus-background'
30+
})
2931
// ======================================================================== Data
3032
const generalStore = useGeneralStore()
3133
const { $GetSeo, $CompileSeo } = useNuxtApp()
@@ -59,66 +61,15 @@ const content = computed(() => {
5961
position: relative;
6062
margin-top: 4.875rem;
6163
}
62-
&:before {
63-
content: '';
64-
position: absolute;
65-
display: block;
66-
z-index: -1;
67-
overflow: visible;
68-
top: 0;
69-
left: -8vw;
70-
width: 120vw;
71-
height: calc(100% + toRem(234) + toRem(100));
72-
background-image: url('/images/warped-torus-made-of-segments.png');
73-
background-size: toRem(2040);
74-
background-origin: border-box;
75-
background-position: center 64%;
76-
background-repeat: no-repeat;
77-
@include gridMaxMQ {
78-
height: calc(100% + toRem(355));
79-
}
80-
81-
@include medium {
82-
height: calc(100% + toRem(425));
83-
}
84-
@include customMaxMQ(toRem(983)) {
85-
background-position: center bottom;
86-
87-
}
88-
@include small {
89-
height: calc(100% + toRem(234));
90-
}
91-
@include tiny {
92-
background-size: 820px;
93-
height: calc(100% + toRem(234));
94-
top: unset;
95-
bottom: -15%;
96-
}
97-
}
9864
}
9965
10066
.back-home-button {
10167
padding-right: 0;
10268
padding-left: 1.5625rem;
10369
margin-bottom: toRem(17);
104-
// :deep(.button-content) {
105-
// display: flex;
106-
// align-items: center;
107-
// .arrow {
108-
// position: absolute;
109-
// right: unset;
110-
// left: toRem(-18);
111-
// transform: scaleX(-1);
112-
// }
113-
// }
11470
&:hover,
11571
&:focus-visible {
11672
padding-right: 0;
117-
// :deep(.button-content) {
118-
// .arrow {
119-
// left: toRem(-26);
120-
// }
121-
// }
12273
}
12374
}
12475

‎public/images/ring-of-cross-sections-on-angle-footer.png

11.4 KB
Loading

‎public/images/warped-torus-made-of-segments.jpg

83.2 KB
Loading

‎public/images/warped-torus-made-of-segments.png

-401 KB
Binary file not shown.

0 commit comments

Comments
 (0)