updated responsive height layout

updated responsive width layout
make buttons responsive
2025-11-28 12:28:07 -06:00 · 2025-11-28 12:23:32 -06:00 · 2025-11-28 12:09:58 -06:00 · 2025-11-27 20:00:33 -06:00 · 2025-11-27 19:39:07 -06:00 · 2025-11-27 19:37:03 -06:00
11 changed files with 116 additions and 83 deletions
--- a/index.html
+++ b/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>penguin.ikea.fishing</title>
+    <title>Club Penguin by Zomo</title>
  </head>
  <body>
    <div id="root"></div>
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/newclient.png
+++ b/public/newclient.png
--- a/public/oldclient-wave.svg
+++ b/public/oldclient-wave.svg
--- a/src/Background.tsx
+++ b/src/Background.tsx
@@ -14,7 +14,7 @@ function Background() {
            <Shader>
                <Swirl
                    colorA="#00529b"
-                    colorB="#087dca"
+                    colorB="#0996ec"
                    speed={0.4}
                    detail={3.6}
                    blend={50}
@@ -40,7 +40,7 @@ function Background() {
                    intensity={5}
                    swirl={0.56}
                    decay={0.3}
-                    radius={2}
+                    radius={1}
                    edges="stretch"
                    maskType="alpha"
                    transform={{
--- a/src/ButtonNew.tsx
+++ b/src/ButtonNew.tsx
@@ -1,10 +1,15 @@
 import './buttonNew.scss'
+import newclientImage from '/newclient.png'

 function ButtonNew() {
    return (
        <div className="client newclient">
-            <div className="content"></div>
-            <div className="new-button">Start</div>
+            <img className="image" src={newclientImage} />
+            <div className="content">
+                <div>Join with the</div>
+                <div>New Client</div>
+            </div>
+            <div className="button">Start</div>
        </div>
    )
 }
--- a/src/ButtonOld.tsx
+++ b/src/ButtonOld.tsx
@@ -1,16 +1,16 @@
 import './buttonOld.scss'
-import oldclientWave from '/oldclient-wave.svg'
+import oldclientImg from '/oldclient.svg'

 function ButtonOld() {
    return (
        <div className="client oldclient">
            <div className="oldclient-inner">
+                <img className="image" src={oldclientImg} />
                <div className="content">
-                    <img src={oldclientWave} />
                    <div>JOIN WITH THE</div>
                    <div>OLD CLIENT</div>
                </div>
-                <div className="old-button">START</div>
+                <div className="button">START</div>
            </div>
        </div>
    )
--- a/src/Buttons.tsx
+++ b/src/Buttons.tsx
@@ -5,12 +5,10 @@ import './buttons.scss'
 function Buttons() {
    return (
        <div className="buttons">
-            {/* <a href="https://old.penguin.ikea.fishing/"> */}
-            <a href="#">
+            <a href="https://old.penguin.ikea.fishing/">
                <ButtonOld />
            </a>
-            {/* <a href="https://new.penguin.ikea.fishing/#/login"> */}
-            <a href="#">
+            <a href="https://new.penguin.ikea.fishing/#/login">
                <ButtonNew />
            </a>
        </div>
--- a/src/buttonNew.scss
+++ b/src/buttonNew.scss
@@ -7,43 +7,46 @@
    background: rgba(9, 150, 236, 1);
    border-radius: 5px;

+    color: white;
+    font-family: 'ProximaNova Bold', Helvetica, Arial, sans-serif;
+    text-decoration: none;
+    font-size: 24px;
+    text-align: center;
+    
    display: flex;
    align-items: center;
    flex-direction: column;

-    .content {
-        flex-grow: 1;
+    .image {
+        margin-top: 30px;
    }
-}

-.new-button {
-    display: inline-block;
-    user-select: none;
+    .button {
+        display: inline-block;
+        user-select: none;

-    color: white;
-    font-family: 'ProximaNova Bold', Helvetica, Arial, sans-serif;
-    text-decoration: none;
-    font-size: 18px;
-    text-align: center;
+        font-size: 18px;

-    width: 226px;
-    height: 58px;
-    line-height: 58px;
-    box-sizing: border-box;
-    margin: 20px;
+        width: 226px;
+        height: 58px;
+        line-height: 58px;
+        box-sizing: border-box;
+        margin: 20px;
+        margin-bottom: 60px;

-    border-radius: 8px;
+        border-radius: 8px;

-    background: #22a4f3;
-    background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%);
+        background: #22a4f3;
+        background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%);

-    box-shadow:
-        0 3px 0 0 rgba(0, 82, 175, 0.4),
-        inset 0 2px 0 0 rgba(255, 255, 255, 0.4);
+        box-shadow:
+            0 3px 0 0 rgba(0, 82, 175, 0.4),
+            inset 0 2px 0 0 rgba(255, 255, 255, 0.4);

-    border: 1px solid #003f72;
+        border: 1px solid #003f72;
+    }

-    &:hover {
+    &:hover .button {
        background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%);
    }
 }
--- a/src/buttonOld.scss
+++ b/src/buttonOld.scss
@@ -14,13 +14,10 @@
    font-style: italic;
    text-align: center;

-
    background: linear-gradient(0deg, #016ec1 0%, #0280cd 100%);

    padding: 5px;

-    box-shadow: rgba(67, 67, 67, 0.8) 0 0 5px;
-
    .oldclient-inner {
        border-radius: 25px; // border-radius - border - padding

@@ -38,54 +35,41 @@
        display: flex;
        align-items: center;
        flex-direction: column;
-
-        .content {
-            flex-grow: 1;
-
-            text-align: center;
-            padding: 20px;
-
-            img {
-                width: 100%;
-                height: 70%;
-                margin-bottom: 30px;
-            }
-        }
    }
-}

-.old-button {
-    display: inline-block;
-    user-select: none;
+    .button {
+        display: inline-block;
+        user-select: none;

-    font-size: 40px;
-    -webkit-text-stroke: 6px black;
-    paint-order: stroke fill;
+        font-size: 40px;
+        -webkit-text-stroke: 6px black;
+        paint-order: stroke fill;

-    width: 250px;
-    height: 100px;
-    line-height: 100px;
-    box-sizing: border-box;
-    margin: 20px;
+        width: 250px;
+        height: 100px;
+        line-height: 100px;
+        box-sizing: border-box;
+        margin: 20px;

-    border-radius: 22px / 28px;
+        border-radius: 22px / 28px;

-    background: #0396e5;
-    background: linear-gradient(
-        0deg,
-        rgb(3, 150, 229) 0%,
-        rgb(1, 100, 199) 25%,
-        rgb(0, 83, 175) 50%,
-        rgb(77, 176, 243) 100%
-    );
+        background: #0396e5;
+        background: linear-gradient(
+            0deg,
+            rgb(3, 150, 229) 0%,
+            rgb(1, 100, 199) 25%,
+            rgb(0, 83, 175) 50%,
+            rgb(77, 176, 243) 100%
+        );

-    box-shadow:
-        #00ccff 3px 1px 0px -1px inset,
-        #003366 0px 2px 0px 4px,
-        #00ccff 2.5px 6px 0px 4px,
-        #00529b -1px -2.5px 0px 5.5px;
+        box-shadow:
+            #00ccff 3px 1px 0px -1px inset,
+            #003366 0px 2px 0px 4px,
+            #00ccff 2.5px 6px 0px 4px,
+            #00529b -1px -2.5px 0px 5.5px;
+    }

-    &:hover {
+    &:hover .button {
        background: #0054b0;
        background: linear-gradient(
            0deg,
--- a/src/buttons.scss
+++ b/src/buttons.scss
@@ -4,20 +4,64 @@
    left: 0;
    width: 100%;
    height: 100%;
+    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
+    gap: 50px;

    .client {
        width: 500px;
        height: 800px;
        box-sizing: border-box;

-        margin-left: 50px;
+        box-shadow: rgba(67, 67, 67, 0.8) 0 0 5px;

-        &:nth-child(0) {
-            margin-left: 0px;
+        .image {
+            height: 450px;
+            margin-bottom: 30px;
+        }
+
+        .content {
+            flex-grow: 1;
+
+            text-align: center;
        }
    }
 }
+
+// desktop/tablet less tall
+@media (max-height: 830px) and (min-width: 901px) {
+    .buttons .client {
+        height: 600px;
+
+        .image {
+            height: 300px;
+        }
+    }
+}
+
+// desktop/tablet less wide
+@media (max-width: 1200px) and (min-width: 901px) {
+    .buttons .client {
+        width: 400px;
+    }
+}
+
+// mobile
+@media (max-width: 900px) {
+    .buttons {
+        flex-direction: column;
+        justify-content: flex-start;
+        overflow-y: scroll;
+        padding: 20px 0;
+    }
+}
+
+// mobile less wide
+@media (max-width: 550px) {
+    .buttons .client {
+        width: 400px;
+    }
+}
Author	SHA1	Message	Date
zomo	1e5b609f2c	updated responsive height layout	2025-11-28 12:28:07 -06:00
zomo	238bbcde40	updated responsive width layout	2025-11-28 12:23:32 -06:00
Bergbok	ddf2c7c342	make buttons responsive	2025-11-28 12:09:58 -06:00
zomo	0102d076e8	changed newclient style	2025-11-27 20:00:33 -06:00
zomo	83a90b8f02	tweaked background	2025-11-27 19:39:07 -06:00
zomo	a1bc6c6ff8	added final button links	2025-11-27 19:37:03 -06:00
zomo	2fd5126ae7	added favicon and updated title	2025-11-27 19:36:23 -06:00
zomo	9b631b594b	updated image style	2025-11-27 19:30:49 -06:00
zomo	e858b04fff	changed hover trigger	2025-11-27 19:29:21 -06:00
zomo	984c099dc6	rearranged css	2025-11-27 19:26:23 -06:00
zomo	a0b2f09c77	updated newclient button	2025-11-27 19:24:59 -06:00