Continuum/continuum-3d-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Compare commits

base: Continuum/continuum-3d-site:171a6d3be8edeb8e08814a1866259e716a8b8fb6
Branches Tags
Continuum/continuum-3d-site:main
Continuum/continuum-3d-site:deploy
..
compare: Continuum/continuum-3d-site:main
Branches Tags
Continuum/continuum-3d-site:main
Continuum/continuum-3d-site:deploy
2 Commits
171a6d3be8 .. main
Author SHA1 Message Date
octoturge 7bfa6ccec0 Redesign the mobile layout
build / build (push) Successful in 20s
Details 
- Bigger hero with the staggered second line from the design, filling the
  first screen (capped at 620px)
- Consistent section spacing and more readable About/Products text
- Contact form in a card with 48px, 16px-text fields (no iOS zoom on
  focus), a shorter message box and a full-width send button
- Header pinned to the top with a blurred backdrop; larger nav tap targets
- Desktop layout (>= 960px) unchanged
 2026-10-29 14:49:22 +00:00
octoturge 0382c0ad94 Show background decoration at every width 
The gradients, sphere, glows, wave artwork and G-code were hidden below
the 1024px breakpoint, so narrow or zoomed browser windows got a plain
black page. Add stacked-layout variants of the decoration and lower the
full-design breakpoint to 960px.
 2026-10-29 14:47:22 +00:00
2 changed files with 43 additions and 21 deletions
Expand all files Collapse all files
src/_includes/home.pug
+42 -21
View File
@@ -5,11 +5,18 @@
mixin gcode(style, color, align)
pre(aria-hidden="true" class="hidden lg:block absolute w-[214px] m-0 font-poppins text-[14px] leading-[1.2] whitespace-pre select-none pointer-events-none " + (align === "right" ? "text-right" : "text-left") style=style + ";color:" + color)= gcode
//- Mobile-only (stacked layout) variants. Position comes from Tailwind classes.
mixin gcodeM(cls, color, align)
pre(aria-hidden="true" class="pointer-events-none absolute m-0 w-[214px] select-none whitespace-pre font-poppins text-[14px] leading-[1.2] lg:hidden " + (align === "right" ? "text-right " : "text-left ") + cls style="color:" + color)= gcode
mixin glowM(cls, w, h, rot)
div(aria-hidden="true" class="pointer-events-none absolute rounded-full blur-[50px] lg:hidden " + cls style=`width:${w}px;height:${h}px;transform:rotate(${rot}deg);background:linear-gradient(148.5deg,#5272d3 0%,#15164e 42%,#15164e 96%)`)
//- Decorative blurred glow ellipse.
mixin glow(left, top, w, h, rot)
div(aria-hidden="true" class="hidden lg:block absolute rounded-full pointer-events-none blur-[60px]" style=`left:${left}px;top:${top}px;width:${w}px;height:${h}px;transform:rotate(${rot}deg);background:linear-gradient(148.5deg,#5272d3 0%,#15164e 42%,#15164e 96%)`)
header(class="relative z-20 h-[68px] border-b border-accent")
header(class="sticky top-0 z-20 h-[68px] border-b border-accent bg-black/80 backdrop-blur-md lg:relative lg:bg-transparent lg:backdrop-blur-none")
div(class="mx-auto flex h-full max-w-[962px] items-center justify-between pl-4 pr-4 lg:pl-[49px] lg:pr-[60px]")
a(href="#top" class="flex items-center gap-[18px]")
span(class="relative block h-[60px] w-[57px] shrink-0")
@@ -17,9 +24,9 @@ header(class="relative z-20 h-[68px] border-b border-accent")
span(class="hidden font-chillax text-[24px] sm:inline font-bold capitalize leading-[42px] tracking-[4px] text-white") Continuum
nav(aria-label="Main")
ul(class="m-0 flex list-none gap-4 p-0 text-[14px] leading-[1.2] lg:gap-[50px] lg:text-[16px]")
li: a(href="#about" class="text-accent hover:text-white")= t.nav_about
li: a(href="#products" class="text-accent hover:text-white")= t.nav_products
li: a(href="#contact" class="text-accent hover:text-white")= t.nav_contact
li: a(href="#about" class="block py-3 text-accent hover:text-white")= t.nav_about
li: a(href="#products" class="block py-3 text-accent hover:text-white")= t.nav_products
li: a(href="#contact" class="block py-3 text-accent hover:text-white")= t.nav_contact
main(id="top" class="relative overflow-x-clip font-poppins")
div(class="relative mx-auto max-w-[962px]")
@@ -27,54 +34,68 @@ main(id="top" class="relative overflow-x-clip font-poppins")
div(aria-hidden="true" class="absolute bottom-0 left-4 top-0 z-10 w-px bg-accent lg:left-[41px]")
//- Hero
section(class="relative px-10 py-24 lg:h-[552px] lg:p-0")
section(class="relative flex min-h-[min(calc(100svh-68px),620px)] flex-col justify-center px-8 py-20 lg:block lg:h-[552px] lg:min-h-0 lg:p-0")
+gcode("right:19px;top:37px", "rgb(116 139 215 / 0.3)", "right")
h1(class="m-0 font-roboto-flex text-[22px] font-normal leading-[56px] tracking-[0.2em] sm:text-[28px] sm:leading-[72px] sm:tracking-[0.22em] text-white lg:absolute lg:left-[162px] lg:top-[186px] lg:text-[36px] lg:tracking-[8px]")
div(aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden lg:hidden")
+gcodeM("right-[-90px] top-4", "rgb(116 139 215 / 0.3)", "right")
h1(class="relative z-10 m-0 font-roboto-flex text-[clamp(1.25rem,6.4vw,1.875rem)] font-normal leading-[1.7] tracking-[0.18em] text-white lg:absolute lg:left-[162px] lg:top-[186px] lg:text-[36px] lg:leading-[72px] lg:tracking-[8px]")
span(class="block lg:w-[475px] lg:text-center")= t.hero_line_1
span(class="block lg:ml-[166px] lg:mt-[-3px] lg:w-[475px] lg:text-center")= t.hero_line_2
span(class="ml-6 block sm:ml-12 lg:ml-[166px] lg:mt-[-3px] lg:w-[475px] lg:text-center")= t.hero_line_2
//- About
section(id="about" class="relative px-10 py-16 lg:h-[390px] lg:p-0")
section(id="about" class="relative px-8 py-20 lg:h-[390px] lg:p-0")
+gcode("left:62px;top:-62px", "rgb(82 114 211 / 0.4)", "left")
div(aria-hidden="true" class="absolute hidden rounded-full lg:block" style="left:117px;top:21px;width:318px;height:318px;background:linear-gradient(150deg,#000 0%,#15164e 42%,#000 100%)")
div(aria-hidden="true" class="absolute left-[-70px] top-8 h-[220px] w-[220px] rounded-full lg:hidden" style="background:linear-gradient(150deg,#000 0%,#15164e 42%,#000 100%)")
+glowM("right-[-150px] top-6", 286, 101, 301)
+glow(780, 111, 286, 101, 301)
+glow(852, 269, 230, 107, 40)
+glowM("bottom-0 left-[-150px]", 286, 101, 350)
+glow(-112, 315, 286, 101, 350)
div(class="relative z-10 lg:absolute lg:left-[464px] lg:top-[100px] lg:w-[387px]")
h2(class="m-0 text-[18px] font-normal leading-[1.2] text-[#c0ceff]")= t.about_title
p(class="m-0 mt-10 text-[16px] leading-[1.2] text-[#abbfff] lg:mt-[45px]")= t.about_text
h2(class="m-0 text-[20px] font-normal leading-[1.2] text-[#c0ceff] lg:text-[18px]")= t.about_title
p(class="m-0 mt-5 max-w-[34rem] text-[16px] leading-[1.6] text-[#abbfff] lg:mt-[45px] lg:leading-[1.2]")= t.about_text
//- Products
section(id="products" class="relative px-10 py-16 text-center lg:h-[577px] lg:p-0")
section(id="products" class="relative px-8 py-24 text-center lg:h-[577px] lg:p-0")
div(aria-hidden="true" class="absolute hidden lg:block pointer-events-none blur-[70px]" style="left:-83px;top:2px;width:1069px;height:138px;transform:rotate(3deg);background:linear-gradient(180deg,#7186c6 0%,#15164e 28%,#15164e 46%,#000 100%)")
div(aria-hidden="true" class="pointer-events-none absolute inset-x-[-40px] top-0 h-[100px] blur-[50px] lg:hidden" style="background:linear-gradient(180deg,#7186c6 0%,#15164e 28%,#15164e 46%,#000 100%)")
div(aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden lg:hidden")
img(src="/assets/img/wave.svg" alt="" aria-hidden="true" class="absolute max-w-none" style="right:-360px;top:-10px;width:760px")
+gcodeM("bottom-[-250px] left-[-110px]", "rgb(116 139 215 / 0.3)", "left")
+glowM("right-[-130px] top-28", 286, 101, 350)
+glow(595, 49, 286, 101, 350)
img(src="/assets/img/wave.svg" alt="" aria-hidden="true" class="pointer-events-none absolute hidden max-w-none lg:block" style="left:166px;top:-156px;width:1034px;height:775px")
+gcode("left:62px;top:283px", "rgb(116 139 215 / 0.3)", "left")
div(class="relative z-10 lg:absolute lg:inset-x-0 lg:top-[150px]")
h2(class="m-0 text-[18px] font-normal leading-[1.2] text-white")= t.products_title
p(class="m-0 mt-16 text-[16px] leading-[1.2] text-white lg:mt-[116px]")= t.products_line_1
p(class="m-0 mt-6 text-[16px] leading-[1.2] text-white lg:mt-[40px]")= t.products_line_2
h2(class="m-0 text-[20px] font-normal leading-[1.2] text-white lg:text-[18px]")= t.products_title
p(class="m-0 mt-12 text-[18px] leading-[1.4] text-white lg:mt-[116px] lg:text-[16px] lg:leading-[1.2]")= t.products_line_1
p(class="m-0 mt-3 text-[16px] leading-[1.2] text-[#abbfff] lg:mt-[40px] lg:text-white")= t.products_line_2
//- Contact
section(id="contact" class="relative px-10 py-16 lg:h-[429px] lg:p-0")
section(id="contact" class="relative px-5 py-20 lg:h-[429px] lg:p-0")
div(aria-hidden="true" class="absolute inset-0 lg:hidden" style="background:linear-gradient(90deg,rgb(82 114 211 / 0.3) 0%,rgb(82 114 211 / 0) 100%)")
+glowM("bottom-[-30px] left-[-150px]", 286, 101, 58)
div(aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden lg:hidden")
+gcodeM("bottom-[-300px] right-[-100px]", "rgb(116 139 215 / 0.3)", "right")
div(aria-hidden="true" class="absolute inset-0 hidden overflow-hidden lg:block")
div(class="absolute" style="left:38px;top:0;width:1088px;height:429px;background:linear-gradient(90deg,rgb(82 114 211 / 0.3) 0%,rgb(82 114 211 / 0) 100%)")
+glow(-39, 248, 286, 101, 58)
+glow(68, 259, 286, 101, 58)
+gcode("right:19px;top:207px", "rgb(116 139 215 / 0.3)", "right")
form(id="contact-form" class="relative z-10 flex flex-col gap-6 lg:static lg:block" action="mailto:" + site.contactEmail method="post" enctype="text/plain" data-to=site.contactEmail data-subject=t.form_subject)
form(id="contact-form" class="relative z-10 flex flex-col gap-4 rounded-[20px] border border-accent/40 bg-black/50 p-5 backdrop-blur-sm lg:static lg:block lg:rounded-none lg:border-0 lg:bg-transparent lg:p-0 lg:backdrop-blur-none" action="mailto:" + site.contactEmail method="post" enctype="text/plain" data-to=site.contactEmail data-subject=t.form_subject)
label(class="order-4 block lg:absolute lg:left-[94px] lg:top-[58px] lg:w-[412px]")
span(class="sr-only")= t.form_message
textarea(name="message" required placeholder=t.form_message class="block h-[306px] w-full resize-none rounded-[13px] border-2 border-accent bg-transparent p-4 text-[16px] text-white placeholder:text-accent focus:outline-none focus:ring-2 focus:ring-accent")
textarea(name="message" required placeholder=t.form_message class="block h-[160px] w-full resize-none rounded-[13px] border-2 border-accent bg-transparent p-4 text-[16px] lg:h-[306px] text-white placeholder:text-accent focus:outline-none focus:ring-2 focus:ring-accent")
div(class="contents lg:block lg:static")
h2(class="order-1 m-0 text-[18px] font-normal leading-[1.2] text-white lg:absolute lg:left-[594px] lg:top-[93px]")= t.contact_title
h2(class="order-1 m-0 mb-1 text-[20px] font-normal leading-[1.2] text-white lg:absolute lg:left-[594px] lg:top-[93px] lg:mb-0 lg:text-[18px]")= t.contact_title
label(class="order-2 block lg:absolute lg:left-[593px] lg:top-[176px] lg:w-[214px]")
span(class="sr-only")= t.form_name
input(type="text" name="name" required autocomplete="name" placeholder=t.form_name class="block h-[29px] w-full rounded-[13px] border-2 border-accent bg-transparent px-3 text-[14px] text-white placeholder:text-accent focus:outline-none focus:ring-2 focus:ring-accent")
input(type="text" name="name" required autocomplete="name" placeholder=t.form_name class="block h-12 w-full rounded-[13px] border-2 border-accent bg-transparent px-4 text-[16px] text-white lg:h-[29px] lg:px-3 lg:text-[14px] placeholder:text-accent focus:outline-none focus:ring-2 focus:ring-accent")
label(class="order-3 block lg:absolute lg:left-[594px] lg:top-[229px] lg:w-[214px]")
span(class="sr-only")= t.form_email
input(type="email" name="email" required autocomplete="email" placeholder=t.form_email class="block h-[29px] w-full rounded-[13px] border-2 border-accent bg-transparent px-3 text-[14px] text-white placeholder:text-accent focus:outline-none focus:ring-2 focus:ring-accent")
button(type="submit" class="order-5 h-[30px] w-[100px] rounded-[13px] border-2 border-accent bg-transparent text-[14px] text-white hover:bg-accent focus:outline-none focus:ring-2 focus:ring-accent lg:absolute lg:left-[594px] lg:top-[276px]")= t.form_send
input(type="email" name="email" required autocomplete="email" placeholder=t.form_email class="block h-12 w-full rounded-[13px] border-2 border-accent bg-transparent px-4 text-[16px] text-white lg:h-[29px] lg:px-3 lg:text-[14px] placeholder:text-accent focus:outline-none focus:ring-2 focus:ring-accent")
button(type="submit" class="order-5 mt-1 h-12 w-full rounded-[13px] border-2 border-accent bg-accent/20 text-[16px] text-white hover:bg-accent active:bg-accent lg:mt-0 lg:h-[30px] lg:w-[100px] lg:bg-transparent lg:text-[14px] focus:outline-none focus:ring-2 focus:ring-accent lg:absolute lg:left-[594px] lg:top-[276px]")= t.form_send
//- Footer
footer(class="relative z-10 flex h-[139px] flex-col items-center justify-center gap-3 text-xs text-gray-500")
tailwind.config.js
+1
View File
@@ -2,6 +2,7 @@ module.exports = {
content: ["./src/**/*.pug"],
theme: {
extend: {
screens: { lg: "960px" },
colors: {
accent: "#5272d3",
deep: "#15164e",