diff --git a/assets/main.scss b/assets/main.scss index c283eb8..f8886a2 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -36,6 +36,19 @@ body { .menu { @apply col-span-8 flex justify-between; + + a { + @apply underline decoration-0 underline-offset-4 decoration-dotted hover:decoration-transparent transition-all; + } + + a[href^=http] { + @apply relative no-underline; + + &:after { + content: '↷'; + @apply ml-2; + } + } } a[href^="#"] { @@ -74,11 +87,21 @@ a[href^="#"] { @apply py-10; &_imgbg { - @apply py-0 bg-no-repeat bg-cover bg-bottom h-[50vh]; + @apply py-0 bg-no-repeat bg-cover bg-bottom h-[50vh] min-h-[600px]; } &_calc { @apply py-0; + + &-canvas { + @apply relative h-[50vh] min-h-[600px]; + } + } + + &_content { + >.container { + @apply items-start; + } } &-content { @@ -90,7 +113,7 @@ a[href^="#"] { } &-title { - @apply col-span-full text-6xl font-black font-h1 leading-[0.85] tracking-tight mb-[3.15rem] + @apply col-span-full text-4xl xl:text-6xl font-black font-h1 leading-[0.85] tracking-tight mb-[3.15rem] } &-image { @@ -115,12 +138,30 @@ a[href^="#"] { } .modal { - @apply bg-white p-10 border rounded shadow prose ; + @apply relative bg-white p-5 lg:p-10 border rounded shadow prose; &-backdrop { @apply fixed top-0 left-0 right-0 bottom-0 bg-white bg-opacity-70 flex items-center justify-center z-30; } + &-close { + @apply absolute right-4 top-4 text-4xl opacity-50; + } + + &-status { + @apply text-center; + &-icon { + @apply text-8xl; + } + &-text { + @apply text-3xl; + } + } + + h2 { + @apply px-4; + } + form { @apply flex flex-col gap-4 items-center; } @@ -139,7 +180,7 @@ textarea { } button { - @apply rounded bg-primary hover:bg-primary-300 transition-colors p-4 inline-block text-2xl font-bold cursor-pointer disabled:opacity-50 disabled:hover:bg-primary leading-4; + @apply rounded bg-primary hover:bg-primary-300 transition-colors p-4 inline-block text-2xl font-bold cursor-pointer disabled:opacity-50 disabled:hover:bg-primary leading-5 lg:leading-4; &.neutral, &[type="reset"] { @@ -209,8 +250,10 @@ button { .canvas-icons { @apply absolute text-3xl top-0 left-0 flex flex-col; + a { @apply cursor-pointer; + &.disabled { @apply cursor-not-allowed opacity-50 pointer-events-none; } diff --git a/components/calcModels.vue b/components/calcModels.vue index 70bba7c..7e5d45a 100644 --- a/components/calcModels.vue +++ b/components/calcModels.vue @@ -46,34 +46,6 @@ const loadAll = async () => { pointLight.value.position.x = pointLight.value.position.x * k pointLight.value.position.y = pointLight.value.position.y * k pointLight.value.position.z = pointLight.value.position.z * k - - const pbrTexture = await useTexture({ - map: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png', - displacementMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Displacement.png', - // roughnessMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png', - normalMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalDX.png', - aoMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_AmbientOcclusion.png', - }) - const repeat = 10 - for (const key in pbrTexture) { - if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) { - const key_p = key as keyof typeof pbrTexture - const element = pbrTexture[key_p] - if (element && element.wrapS) { - element.wrapS = RepeatWrapping - element.wrapT = RepeatWrapping - element.repeat.x = repeat - element.repeat.y = repeat - element.flipY = false - } - } - } - groundMaterial.value = Object.assign(groundMaterial.value, { - map: pbrTexture.map, - displacementMap: pbrTexture.displacementMap, - normalMap: pbrTexture.normalMap, - aoMap: pbrTexture.aoMap, - }) } const camera = ref("camera") @@ -89,7 +61,7 @@ watch([section_count, extra_section], () => { })