Maingat Yoga är en yogastudio i Västervik som erbjuder ett brett utbud av yogaformer – från yinyoga och vinyasa till soundhealing och yoga för stela män. Studion drivs av ett team lärare med Kerstin i spetsen, och bygger på en filosofi om att alla kroppar är olika och att yogan ska möta varje utövare där den befinner sig.
Studion hade behov av en webbplats som kommunicerar lugn, närvaro och professionalitet – en digital förlängning av upplevelsen i studion. Uppdraget var att bygga ett komplett WordPress-tema från grunden med eget schema, klasshantering, eventkalender och lärarporträtt, utan att förlita sig på sidbyggare eller färdiga teman.
Visuell identitet och formspråk
Designen utgår från en avskalad, redaktionell estetik med strikta formregler: inga gradienter, inga synliga borders (alla visuella linjer skapas med pseudo-element och bakgrundsfärg), och en konsekvent färgpalett definierad som CSS custom properties. Paletten bygger på en varm cremebakgrund (#FDFDF0) mot en djup skogsgrön textfärg (#2B3420), med en citronsgrön accentfärg (#B4DC7F) för CTA-element och interaktiva ytor.
Typografin bär det visuella uttrycket. Salty Ages, ett organiskt serif-typsnitt, används för rubriker och ger en varm, handgjord känsla som anknyter till yogans jordnärhet. New Black Typeface används som brödtextssnitt och bidrar med en modern, editorial tyngd. Typskalan är elvastegs och bygger genomgående på CSS clamp() för flytande responsivitet – rubrikerna skalas från 3.6rem på mobil till 10rem på desktop utan breakpoint-hopp.
Interaktivitet och rörelse
Rörelsen på sajten är medvetet långsam och avmätt – ett designval som speglar yogans tempo. Herosektionen animeras in med en fördröjd reveal på 2400 millisekunder, där headline, brödtext, platsmarkering och bokningsknapp glider in sekventiellt med stegvis ökande fördröjning. Övriga sektioner använder en IntersectionObserver-baserad scroll-reveal med fem nivåers stagger-fördröjning, driven av CSS-transitions och klassen .is-revealed.
Herons yttre padding animeras dynamiskt vid scroll – en linjär interpolation från 40px ned till 8px – beräknad via requestAnimationFrame för mjuk prestanda. Klasslistan på startsidan presenteras som ett accordion byggt på native HTML5 <details>-element, med en CSS Grid-teknik (grid-template-rows: 0fr → 1fr) för mjuk öppning och JavaScript-interceptad stängning som animerar tillbaka innan elementet kollapsas.
Navigeringen är en icke-konventionell kortbaserad meny: en fast 60px-bar som expanderar till tre färgkodade kort (mörk, citrongrön, skogsgrön) med GSAP-driven höjdanimation. På mobil mäts höjden dynamiskt med scrollHeight för att hantera variabelt innehåll. All rörelse respekterar prefers-reduced-motion.
Innehållshantering och custom post types
Temat registrerar sju custom post types, var och en med egna metaboxar och admin-kolumner: yogaformer (med dag, tid, lärare, bokningslänk), event (med datumväljare, plats, boknings-URL), lärare (med specialisering och porträttbild), recensioner (med betyg och yogaform), priser, startsideklasser (separat från yogaformer, enbart för startsidans accordion) samt schemapass.
Schemat hanteras via en egen admin-sida med fullständigt CRUD-gränssnitt – grupperat per veckodag med tabeller för tid, klass, lärare och sorteringsordning. Allt sparas i ett enda formulär, vilket gör det snabbt och överskådligt att uppdatera veckoschemat utan att navigera mellan flera poster.
Alla CPT-drivna sektioner har inbyggda fallback-data som renderas om inga poster finns publicerade, vilket säkerställer att sajten ser komplett ut redan vid installation.
Mobilanpassning
Den responsiva implementeringen hanterar tre breakpoints med genomgripande layoutförändringar. Herons text repositioneras från höger överkant till vänsterankrad vid botten, med en fast bredd (min(34ch, 74%)) som förhindrar att texten omflödas vid scroll. Bokningsknappen hanterar Safaris bottenliggande sökfält via env(safe-area-inset-bottom).
Mobilmenyn kollapsar kortgridet till en enda kolumn och mäter höjden dynamiskt. En kompakt ”BOKA”-knapp visas bredvid Instagram-länken i headern på mobil, medan den fulla texten ”Boka en klass” döljs. Klasslistans accordion förenklas till en enkolumnslayout utan nivåindikator, och schemat flödar om till full bredd.
Footern följer en colophon-stil snarare än en traditionell sitemap – ordmärke, gatuadress, telefon och e-post i en trekolumnsgrid som kollapsar till en kolumn på mobil.
Teknisk grund
Temat är byggt utan sidbyggare eller jQuery. JavaScript-lagret består av vanilla JS med IntersectionObserver och requestAnimationFrame för scroll-effekter, samt GSAP enbart för navigationens höjdanimation. Alla scripts laddas med defer-strategi. Typsnitt använder font-display: swap. Semantisk HTML5 med skip-to-content-länk, ARIA-labels och tangentbordsnavigering säkerställer tillgänglighet.
Resultat
Projektet resulterade i en webbplats som andas samma lugn och omsorg som studion själv. Designen är strikt men varm, rörelsen är medveten och avmätt, och innehållshanteringen ger studion full kontroll över schema, klasser, event och lärarpresentationer direkt i WordPress – utan att behöva redigera kod.