Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: image optimization updates #56

Merged
merged 3 commits into from
Oct 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 19 additions & 17 deletions components/site-footer.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<footer id="site-footer" :class="{ 'no-background-image': pageSignup }">
<footer id="site-footer" :class="{ 'no-background-image': noBackgroundImage }">

<div class="content">
<div class="grid-bottom-noBottom-noGutter">
Expand Down Expand Up @@ -52,10 +52,18 @@
<script setup>
// ======================================================================== Data
const generalStore = useGeneralStore()
const route = useRoute()

// ======================================================================= Props
const props = defineProps({
noBackgroundImage: {
type: Boolean,
required: false,
default: false
}
})

// ==================================================================== Computed
const pageSignup = computed(() => { return route.name === 'signup' })
const noBackgroundImage = computed(() => { return props.noBackgroundImage })

const authors = computed(() => {
return generalStore.siteContent.general?.footer.authors
Expand Down Expand Up @@ -99,23 +107,17 @@ const scrollToTop = async () => {
content: '';
position: absolute;
top: 0;
left: calc(50% - $halfGridWidth - 3rem);
width: calc(100% + 10rem);
left: 0;
width: 100%;
height: 100%;
background-size: 1439px 1200px;
background-position: 315px -29px;
background-position: right bottom;
background-repeat: no-repeat;
background-image: url('/images/ring-of-cross-sections-on-angle.jpg');
@include gridMaxMQ {
height: calc(100% + 3rem);
width: 100%;
top: -3rem;
left: calc(100% - 52rem);
background-position: center -106px;
background-image: url('/images/ring-of-cross-sections-on-angle-footer.png');
@include mini {
background-position: 4rem -5.5rem;
}
@include small {
left: 0;
width: 100%;
@include tiny {
background-position: 4rem -3.5rem;
}
}
}
Expand Down
49 changes: 49 additions & 0 deletions layouts/warped-torus-background.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<template>
<div class="layout warped-torus-background" tabindex="-1">

<SiteHeader />

<slot />

<SiteFooter :no-background-image="true" />

</div>
</template>

<style lang="scss" scoped>
// ///////////////////////////////////////////////////////////////////// General
.layout {
display: flex;
flex-direction: column;
&:before {
content: '';
position: absolute;
display: block;
z-index: -1;
overflow: visible;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url('/images/warped-torus-made-of-segments.jpg');
background-size: auto vw(1800px);
background-origin: border-box;
background-position: center 75%;
background-repeat: no-repeat;
@include medium {
background-position: center 45%;
}
@include small {
background-position: center 30%;
}
@include mini {
background-size: auto vw(1100px, 640px);
background-position: center bottom 18rem;
}
@include tiny {
background-size: auto vw(1200px, 415px);
background-position: center top -30%;
}
}
}
</style>
6 changes: 3 additions & 3 deletions pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ onMounted(() => {
width: calc(100% + 270px);
height: 130rem;
transform: translateX(-270px);
background-image: url('/images/warped-torus-made-of-segments.png');
background-image: url('/images/warped-torus-made-of-segments.jpg');
background-size: 2000px;
background-position: center top;
background-repeat: no-repeat;
Expand Down Expand Up @@ -363,7 +363,7 @@ onMounted(() => {
z-index: -1;
width: calc(100% + toRem(50));
height: toRem(1480);
background-image: url('/images/warped-torus-made-of-segments.png');
background-image: url('/images/warped-torus-made-of-segments.jpg');
background-size: 1520px;
background-position: center top;
background-repeat: no-repeat;
Expand Down Expand Up @@ -415,7 +415,7 @@ onMounted(() => {
left: calc(50% - $halfGridWidth - 3rem);
z-index: -1;
width: toRem(1400);
height: calc(toRem(866) + toRem(68) + toRem(234)); // section height + top displacement + footer height
height: calc(toRem(866) + toRem(68) + toRem(234) - 1rem); // section height + top displacement + footer height - 1rem
background-image: url('/images/ring-of-cross-sections-from-above.jpg');
background-size: 1300px;
background-position: center top;
Expand Down
55 changes: 3 additions & 52 deletions pages/signup.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@
</template>

<script setup>

definePageMeta({
layout: 'warped-torus-background'
})
// ======================================================================== Data
const generalStore = useGeneralStore()
const { $GetSeo, $CompileSeo } = useNuxtApp()
Expand Down Expand Up @@ -59,66 +61,15 @@ const content = computed(() => {
position: relative;
margin-top: 4.875rem;
}
&:before {
content: '';
position: absolute;
display: block;
z-index: -1;
overflow: visible;
top: 0;
left: -8vw;
width: 120vw;
height: calc(100% + toRem(234) + toRem(100));
background-image: url('/images/warped-torus-made-of-segments.png');
background-size: toRem(2040);
background-origin: border-box;
background-position: center 64%;
background-repeat: no-repeat;
@include gridMaxMQ {
height: calc(100% + toRem(355));
}

@include medium {
height: calc(100% + toRem(425));
}
@include customMaxMQ(toRem(983)) {
background-position: center bottom;

}
@include small {
height: calc(100% + toRem(234));
}
@include tiny {
background-size: 820px;
height: calc(100% + toRem(234));
top: unset;
bottom: -15%;
}
}
}

.back-home-button {
padding-right: 0;
padding-left: 1.5625rem;
margin-bottom: toRem(17);
// :deep(.button-content) {
// display: flex;
// align-items: center;
// .arrow {
// position: absolute;
// right: unset;
// left: toRem(-18);
// transform: scaleX(-1);
// }
// }
&:hover,
&:focus-visible {
padding-right: 0;
// :deep(.button-content) {
// .arrow {
// left: toRem(-26);
// }
// }
}
}

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/warped-torus-made-of-segments.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/images/warped-torus-made-of-segments.png
Binary file not shown.