fix: blob link for stavanger

varianter · Oct 4, 2024 · 764a0f3 · 764a0f3
1 parent 1338562
commit 764a0f3
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 33 deletions.
diff --git a/src/components/blob-link/blob-link.module.css b/src/components/blob-link/blob-link.module.css
@@ -5,32 +5,35 @@
   text-decoration: none;
   position: relative;
   transition: opacity 200ms ease-out;
+  grid-template-rows: 1fr;
 }
+.blobContainer,
+.linkContent {
+  grid-area: 1 / 1;
+}
+
+.linkContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 .blobLink span {
   display: block;
   font-size: 1.3rem;
   line-height: 1.5rem;
-  padding: 2rem;
+  padding: 0 2rem;
   color: var(--color-secondary1__tint1--text);
   text-align: center;
 }
 .blobLink:hover {
   opacity: 0.8;
 }
 
-.blobLink * {
-  grid-column: 1/2;
-  grid-row: 1/2;
-}
-
-.blobLink svg {
-  max-width: 100%;
-}
 .blobLinkArrow {
-  position: absolute;
-  top: 60%;
-  left: 30%;
-  width: 40%;
+  display: block;
+  max-width: 50%;
 }
 
 @media (max-width: 600px) {

diff --git a/src/components/blob-link/index.tsx b/src/components/blob-link/index.tsx
@@ -24,14 +24,16 @@ export default function BlobLink({
 }: BlobLinkProps) {
   return (
     <Link href={href} className={and(style.blobLink, className)}>
-      <div>
+      <div className={style.blobContainer}>
         <BaseBlob
           width={size}
           height={size}
           randomness={2}
           extraPoints={6}
           color={background}
-          />
+        />
+      </div>
+      <div className={style.linkContent}>
         <span>{text}</span>
         <Arrow className={style.blobLinkArrow} />
       </div>

diff --git a/src/stavanger/index.tsx b/src/stavanger/index.tsx
@@ -81,9 +81,9 @@ const Stavanger: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
             </header>
 
             <p className="lead">
-              I løpet av høsten og vinteren skal vi etablere oss i vakre Stavanger.  
-              Da trenger vi folk, dyktige folk, mye folk! Vil du være med å forme et
-              annerledes konsulentselskap?
+              I løpet av høsten og vinteren skal vi etablere oss i vakre
+              Stavanger. Da trenger vi folk, dyktige folk, mye folk! Vil du være
+              med å forme et annerledes konsulentselskap?
             </p>
             <p>
               Les mer om oss og våre verdier i{' '}
@@ -107,19 +107,20 @@ const Stavanger: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
             <h3 className="fancy">Så, hvorfor Stavanger?</h3>
 
             <p className={and('lead', style.map__text__lead)}>
-              Den korte oppsummeringen er; Stavanger har et spesielt viktig marked i landet og
-              mange spennedne kunder. I tillegg spennende fagmiljøer og studiesteder, og ikke minst
-              spennende folk.
+              Den korte oppsummeringen er; Stavanger har et spesielt viktig
+              marked i landet og mange spennedne kunder. I tillegg spennende
+              fagmiljøer og studiesteder, og ikke minst spennende folk.
             </p>
 
             <p className={style.map__text__first}>
               Den litt lengre forklaringen er at siden Variant ble startet i
               2018 har vi hatt stor vekst. Variant-konseptet har blitt veldig
               godt mottatt og vi får også tilbakemeldinger på at vi har
               inspirert andre. Vi ønsker derfor å spre verdiene og tankesettene
-              våre videre. Bærekraft har vært viktig for oss siden -, for alltid egentlig. 
-              Vi mener at i akkurat i Stavanger kan kanskje i større grad enn noe annet sted faktisk 
-              jobbe med bærekraftsutfordinger som faktisk betyr noe. 
+              våre videre. Bærekraft har vært viktig for oss siden -, for alltid
+              egentlig. Vi mener at i akkurat i Stavanger kan kanskje i større
+              grad enn noe annet sted faktisk jobbe med bærekraftsutfordinger
+              som faktisk betyr noe.
             </p>
 
             <img
@@ -129,9 +130,10 @@ const Stavanger: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
             />
 
             <p className={style.map__text__second}>
-              Vi lærte mye fra oppstarten i Oslo og Bergen  som vi ønsker å ta med oss
-              sør-vestover. Jo flere selskaper vi har, jo flere stemmer får vi inn på vårt bord. Dette skaper bedre 
-              perpektiver og bedre beslutninger. Stavanger vil gi oss enda en stemme og nye
+              Vi lærte mye fra oppstarten i Oslo og Bergen som vi ønsker å ta
+              med oss sør-vestover. Jo flere selskaper vi har, jo flere stemmer
+              får vi inn på vårt bord. Dette skaper bedre perpektiver og bedre
+              beslutninger. Stavanger vil gi oss enda en stemme og nye
               perspektiver inn i det som begynner å bli et stort
               Variant-fellesskap.
             </p>
@@ -146,17 +148,15 @@ const Stavanger: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
               </a>
               .
             </p>
-          </div>
 
-          <BlobLink
+            <BlobLink
               text="Les om våre vyer for Stavanger"
               href="stavanger/vyer"
               size={220}
               className={style.timelineButton}
             />
+          </div>
 
-
-
           {listings.length > 0 && (
             <div className={style.content}>
               <h3 className="fancy">Høres det interessant ut?</h3>

diff --git a/src/stavanger/stavanger.module.css b/src/stavanger/stavanger.module.css
@@ -30,8 +30,7 @@
 }
 
 .timelineButton {
-  float: right;
-  margin-top: 7rem;
+  margin-top: 5rem;
 }
 .timelineButton span {
   max-width: 220px;