update responsive sizing on all pages

rocpoc · Aug 7, 2024 · a31aca6 · a31aca6
1 parent 57530ff
commit a31aca6
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 51 deletions.
diff --git a/src/components/Discography.tsx b/src/components/Discography.tsx
@@ -1,6 +1,16 @@
 import MusicElement from "./MusicElement";
 
 const releases = [
+  {
+    title: "Wyllie - Nine to Five",
+    src: "https://bandcamp.com/EmbeddedPlayer/album=930418096/size=large/bgcol=333333/linkcol=0f91ff/minimal=true/transparent=true",
+    link: "https://perfectdark909.bandcamp.com/album/nine-to-five",
+  },
+  {
+    title: "Apellum - Scenes of Water",
+    src: "https://bandcamp.com/EmbeddedPlayer/album=4217683846/size=large/bgcol=333333/linkcol=0f91ff/minimal=true/transparent=true/",
+    link: "https://perfectdark909.bandcamp.com/album/scenes-of-water",
+  },
   {
     title: "Brick x Provider x Fauna - Can't Explain",
     src: "https://bandcamp.com/EmbeddedPlayer/track=498838305/size=large/bgcol=333333/linkcol=0f91ff/minimal=true/transparent=true/",

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
@@ -7,14 +7,14 @@ export const About: React.FC<{}> = () => {
   return (
     <Container showToolbar={true}>
       <div className="flex flex-col justify-center max-w-2xl m-auto">
-        {/* <div className="text-4xl font-bold">ABOUT US</div> */}
-        <div className="px-11 grow flex justify-center gap-1">
-          <span className="text-base sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl 2xl:text-6xl font-bold can-hover:hover:text-emerald-300">
+        <div className="flex flex-col justify-center max-w-2xl m-auto px-3">
+          <span className="text-3xl xxs:text-3xl xs:text-3xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-5xl 2xl:text-6xl font-bold can-hover:hover:text-emerald-300">
             ABOUT
           </span>
         </div>
         {/* <div className="text-xl p-8"> */}
-        <div className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl p-8">
+        <div className="text-xl xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl p-8">
+          {/* <div className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl p-8"> */}
           Perfect Dark is a California based record label known for throwing
           high energy underground parties and releasing a variety of electronic
           music. Not bound by genre but unified by feeling.
@@ -27,7 +27,7 @@ export const About: React.FC<{}> = () => {
           earth, and music with soul.
         </div>
         <div className="px-11 grow flex justify-center">
-          <span className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl ">
+          <span className="text-sm xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl">
             You can check out our artists{" "}
             <a
               href="/artists"
@@ -37,7 +37,7 @@ export const About: React.FC<{}> = () => {
             </a>
           </span>
         </div>
-        <div className="flex justify-center py-4 inset-x-0 bottom-4 max-w-lg m-auto">
+        {/* <div className="flex justify-center py-4 inset-x-0 bottom-4 max-w-lg m-auto">
           <div>
             <img
               src={pd_heart_logo}
@@ -65,7 +65,7 @@ export const About: React.FC<{}> = () => {
               height="50"
             />
           </div>
-        </div>
+        </div> */}
       </div>
     </Container>
   );

diff --git a/src/pages/Artists.tsx b/src/pages/Artists.tsx
@@ -1,5 +1,8 @@
 import { Container } from "../components/Container";
 import { Link } from "react-router-dom";
+import pd_90_logo from "../img/PD - 90_s type-01.png";
+import pd_spiral_logo from "../img/PD - Spiral-01.png";
+import pd_heart_logo from "../img/PD_Special Heart-01.png";
 
 export const Artists: React.FC<{}> = () => {
   const artistList = [
@@ -15,24 +18,52 @@ export const Artists: React.FC<{}> = () => {
 
   return (
     <Container showToolbar={true}>
-      <div className="flex flex-col justify-center max-w-2xl m-auto pt-8">
-        <div className="px-11 grow flex justify-center gap-2">
-          <span className="text-base sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl 2xl:text-6xl font-bold can-hover:hover:text-emerald-300">
-            ARTIST ROSTER
-          </span>
-        </div>
+      <div className="flex flex-col justify-center max-w-2xl m-auto px-3">
+        <span className="text-3xl xxs:text-3xl xs:text-3xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-5xl 2xl:text-6xl font-bold can-hover:hover:text-emerald-300">
+          ARTISTS
+        </span>
         <br></br>
         {artistList.map((artist) => (
           <div className="px-11 grow flex justify-center gap-2" key={artist.id}>
             <Link
               to={`/artists/${artist.id}`}
-              className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl font-bold can-hover:hover:text-emerald-300"
+              className="py-2 text-2xl xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl font-semibold can-hover:hover:text-emerald-300"
             >
               {artist.name}
             </Link>
           </div>
         ))}
       </div>
+      <div className="flex justify-center py-4 inset-x- bottom-4 max-w-lg m-auto">
+        <br></br>
+        <div>
+          <img
+            src={pd_heart_logo}
+            alt="Logo"
+            className="max-w-lg m-auto"
+            width="50"
+            height="50"
+          />
+        </div>
+        <div>
+          <img
+            src={pd_90_logo}
+            alt="Logo"
+            className="max-w-lg m-auto"
+            width="50"
+            height="50 "
+          />
+        </div>
+        <div>
+          <img
+            src={pd_spiral_logo}
+            alt="Logo"
+            className="max-w-lg m-auto"
+            width="50"
+            height="50 "
+          />
+        </div>
+      </div>
     </Container>
   );
 };
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
@@ -7,33 +7,32 @@ export const Contact: React.FC<{}> = () => {
   return (
     <Container showToolbar={true}>
       <div className="flex flex-col justify-center max-w-2xl m-auto">
-        <div className="px-11 grow flex justify-center gap-1">
-          <span className="text-base sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl 2xl:text-6xl font-bold can-hover:hover:text-emerald-300">
+        <div className="flex flex-col justify-center max-w-2xl m-auto px-3">
+          <span className="text-3xl xxs:text-3xl xs:text-3xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-5xl 2xl:text-6xl font-bold can-hover:hover:text-emerald-300">
             CONTACT
           </span>
         </div>
-        <br></br>
         {/* <div className="text-2xl font-bold px-8 "> */}
-        <div className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl p-8">
+        <div className="text-xl xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl p-4">
           For booking inquries and demo submissions, please email us at:{" "}
           <br></br>
           <br></br>
           <a
-            className="font-bold italic bg-white text-black can-hover:hover:bg-emerald-300 active:bg-emerald-300 text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl p-2"
+            className="font-bold italic bg-white text-black can-hover:hover:bg-emerald-300 active:bg-emerald-300 text-lg xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl p-2"
             href="mailto:[email protected]"
           >
             {" "}
             [email protected]
           </a>
-          <div className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl p-8">
+          <div className="text-xl xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl p-8">
             Please leave your name, contact info, and a brief description of
             your request. <br></br>
             <br></br> Thank you!
             <br></br>
           </div>
         </div>
       </div>
-      <div className="flex justify-center py-4 inset-x- bottom-4 max-w-lg m-auto">
+      {/* <div className="flex justify-center py-4 inset-x- bottom-4 max-w-lg m-auto">
         <div>
           <img
             src={pd_heart_logo}
@@ -61,7 +60,7 @@ export const Contact: React.FC<{}> = () => {
             height="50 "
           />
         </div>
-      </div>
+      </div> */}
     </Container>
   );
 };
diff --git a/src/pages/Environment.tsx b/src/pages/Environment.tsx
@@ -9,12 +9,12 @@ export const Environment: React.FC<{}> = () => {
   return (
     <Container showToolbar={true}>
       <div className="flex flex-col justify-center max-w-2xl m-auto">
-        <div className="px-11 grow flex justify-center gap-1">
-          <span className="text-base sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl 2xl:text-6xl font-bold can-hover:hover:text-emerald-300">
+        <div className="flex flex-col justify-center max-w-2xl m-auto px-3">
+          <span className="text-3xl xxs:text-3xl xs:text-3xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-5xl 2xl:text-6xl font-bold can-hover:hover:text-emerald-300">
             EARTH
           </span>
         </div>
-        <div className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl 2xl:text-3xl p-8">
+        <div className="text-xl xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl p-8">
           {/* Section for Tracks for Trees */}
           <div>
             <p>
@@ -63,11 +63,6 @@ export const Environment: React.FC<{}> = () => {
               development into the Sierra Nevadas foothills.
             </p>
             <br></br>
-            <p>
-              Join us on February 10, 2024 at Duffy’s in downtown Chico to help
-              raise money for Stop Valley’s Edge.
-            </p>
-            <br></br>
             <img
               src={earth_first}
               alt="Earth First Event"

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -15,23 +15,23 @@ export const Home: React.FC<{}> = () => {
   return (
     <Container showToolbar={true}>
       <div className="flex flex-col justify-center max-w-2xl m-auto px-3">
-        <div className="text-2xl sm:text-4xl md:text-6xl lg:text-6xl xl:text-6xl 2xl:text-6xl font-bold">
+        <span className="text-3xl xxs:text-3xl xs:text-3xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-5xl 2xl:text-6xl font-bold can-hover:hover:text-emerald-300">
           LATEST
-        </div>
+        </span>
         <br />
-        <div className="text-lg xs:text-xl sm:text-2xl md:text-3xl lg:text-3xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
+        <div className="text-2xl xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
           <a href="https://ra.co/events/1947517" target="_blank">
-            Perfect Dark: LA
+            Perfect Dark: LA (Tickets)
           </a>
         </div>
         <br></br>
-        <div className="text-lg xs:text-xl sm:text-2xl md:text-3xl lg:text-3xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
+        <div className="text-2xl xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
           <a href="https://fanlink.tv/pd040" target="_blank">
             Wyllie - Nine to Five
           </a>
         </div>
         <br />
-        <div className="text-lg xs:text-xl sm:text-2xl md:text-3xl lg:text-3xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
+        <div className="text-2xl xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
           <a
             href="https://www.youtube.com/watch?v=qGJZOUwg2RA&list=PLzlkeOj6IYhAh-ExgPFdh-mmnMq4EULSr"
             target="_blank"
@@ -41,21 +41,20 @@ export const Home: React.FC<{}> = () => {
         </div>
 
         <br />
-        <div className="text-lg xs:text-xl sm:text-2xl md:text-3xl lg:text-3xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
+        <div className="text-2xl xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
           <a href="https://fanlink.tv/pd039" target="_blank">
             Apellum - Scenes of Water
           </a>
         </div>
-        <br />
-        <div className="text-lg xs:text-xl sm:text-2xl md:text-3xl lg:text-3xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
+        {/* <br /> */}
+        {/* <div className="text-lg xs:text-xl sm:text-2xl md:text-3xl lg:text-3xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
           <a
             href="https://soundcloud.com/perfectdark909/sets/perfect-dark-live-at-club-eternal-051124"
             target="_blank"
           >
-            PD @ Club Eternal (Mixes)
+            Club Eternal (Mixes)
           </a>
-        </div>
-
+        </div> */}
         {/* <br />
         <div className="text-lg xs:text-xl sm:text-2xl md:text-3xl lg:text-3xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
           <a href="https://ra.co/events/1927056" target="_blank">
@@ -64,15 +63,15 @@ export const Home: React.FC<{}> = () => {
         </div>
         <br /> */}
         <br />
-        <div className="text-lg xs:text-xl sm:text-2xl md:text-3xl lg:text-3xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
+        <div className="text-2xl xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
           <a
             href="https://open.spotify.com/playlist/4qiTCCPzzGZfU2r4CvqHDi?si=24d808e9e59441d0"
             target="_blank"
           >
             Perfect Dark Originals (Spotify)
           </a>
         </div>
-        <br />
+        {/* <br />
         <div className="text-lg xs:text-xl sm:text-2xl md:text-3xl lg:text-3xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
           <a href="https://fanlink.tv/pd038" target="_blank">
             Brick x Provider x Fauna - Can't Explain
@@ -83,10 +82,10 @@ export const Home: React.FC<{}> = () => {
           <a href="https://tr.ee/JUCy7vUK1h" target="_blank">
             Provider - Uncanny Valley EP
           </a>
-        </div>
-        <br />
-        <br />
-        <div className="text-2xl sm:text-4xl md:text-6xl lg:text-6xl xl:text-6xl 2xl:text-6xl font-bold">
+        </div> */}
+        {/* <br /> */}
+        {/* <br /> */}
+        {/* <div className="text-2xl sm:text-4xl md:text-6xl lg:text-6xl xl:text-6xl 2xl:text-6xl font-bold">
           PITCH+
         </div>
         <br />
@@ -103,11 +102,11 @@ export const Home: React.FC<{}> = () => {
           <a href="https://www.youtube.com/watch?v=BaZ7X8BFYyY" target="_blank">
             Episode 2: CRTR | Pitch+
           </a>
-        </div>
+        </div> */}
         <br />
       </div>
       <br />
-      <div className="text-2xl sm:text-4xl md:text-4xl lg:text-4xl xl:text-4xl 2xl:text-4xl font-bold text">
+      <div className="text-2xl xxs:text-xl xs:text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-4xl 2xl:text-4xl font-bold can-hover:hover:text-emerald-300">
         <a
           className="font-bold italic bg-white text-black can-hover:hover:bg-emerald-300 active:bg-emerald-300"
           href="http://eepurl.com/iNSzKo"

diff --git a/src/pages/Music.tsx b/src/pages/Music.tsx
@@ -6,7 +6,7 @@ export const Music: React.FC<{}> = () => {
   return (
     <Container showToolbar={true}>
       <div className="px-11 grow flex justify-center gap-1">
-        <span className="text-4xl font-bold can-hover:hover:bg-violet-600">
+        <span className="text-3xl font-bold can-hover:hover:text-emerald-300">
           MUSIC
         </span>
       </div>