Bug fix for the overflow problem on screens with viewport width of 36…

…0px and below (#28) * fixed overflow problem in the hero section and changed main display into flex * removed markdoc dep * some minor reverts * adding .idea folder to gitignore * removing the .idea folder * removing the package-lock.json file * reformating code using prettier
Heroic-Games-Launcher · Oct 16, 2024 · 38256ef · 38256ef
1 parent 224c992
commit 38256ef
Show file tree

Hide file tree

Showing 17 changed files with 3,471 additions and 1,146 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# .idea
+.idea
diff --git a/README.md b/README.md
@@ -8,9 +8,9 @@ Setting up a development environment:
 2. Clone the repo and enter the cloned folder, for example with the following commands:
 
 ```bash
-git clone https://github.com/Heroic-Games-Launcher/heroic-website.git 
+git clone https://github.com/Heroic-Games-Launcher/heroic-website.git
 cd heroic-website
-   ```
+```
 
 To run the development server:
 

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -20,7 +20,7 @@ export default function Navbar() {
             <span className="contrast link">
               <img
                 src={logo}
-                title='Heroic Games Launcher'
+                title="Heroic Games Launcher"
                 alt="Heroic Games Launcher"
                 height="32px"
                 width="32px"

diff --git a/firebase.json b/firebase.json
@@ -1,11 +1,7 @@
 {
   "hosting": {
     "public": "out",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [
       {
         "source": "**",

diff --git a/next.config.js b/next.config.js
@@ -1,15 +1,20 @@
 /** @type {import('next').NextConfig} */
-const withPlugins = require('next-compose-plugins');
-const optimizedImages = require('next-optimized-images');
+const withPlugins = require('next-compose-plugins')
+const optimizedImages = require('next-optimized-images')
 
 module.exports = withPlugins([
-  [optimizedImages, {
-    optipng: {
-      optimizationLevel: 3,
-    },
-  }], {
+  [
+    optimizedImages,
+    {
+      optipng: {
+        optimizationLevel: 3
+      }
+    }
+  ],
+  {
     reactStrictMode: true,
     images: {
       disableStaticImages: true
+    }
   }
-  }])
+])
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -2,12 +2,12 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html lang='en'>
+    <Html lang="en">
       <Head />
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   )
-}
+}
diff --git a/pages/api/github.ts b/pages/api/github.ts
@@ -43,7 +43,7 @@ export const getLatestReleases = async (): Promise<ReleaseUrls> => {
       (rel) => rel.prerelease === true
     )[0]
 
-      console.log({ assetsStable, assetsBeta, tagStable, tagBeta })
+    console.log({ assetsStable, assetsBeta, tagStable, tagBeta })
 
     const appImageStable =
       assetsStable.filter((a) => a.name.endsWith('.AppImage'))[0]
@@ -70,7 +70,7 @@ export const getLatestReleases = async (): Promise<ReleaseUrls> => {
 
     const isSameMajor = tagStable >= tagBeta.split('-')[0]
 
-/*     if (!isSameMajor) {
+    /*     if (!isSameMajor) {
       appImageBeta = assetsBeta.filter((a) => a.name.endsWith('.AppImage'))[0]
         .browser_download_url
       windowsSetupBeta = assetsBeta.filter((a) => a.name.includes('Setup'))[0]

diff --git a/pages/cla.tsx b/pages/cla.tsx
diff --git a/pages/donate.tsx b/pages/donate.tsx
@@ -51,7 +51,8 @@ const Donate: NextPage = () => {
               <h4>GOG.com</h4>
               <small>One-time</small>
               <p>
-                Use our link when making purchases on GOG and support the project. Cool right?
+                Use our link when making purchases on GOG and support the
+                project. Cool right?
               </p>
               <footer>
                 <a href="https://af.gog.com?as=1838482841">

diff --git a/pages/downloads.tsx b/pages/downloads.tsx
@@ -154,7 +154,7 @@ const Downloads: NextPage = () => {
                   )}
                 </footer>
               </article>
-{/*               {releases.WindowsArm && (
+              {/*               {releases.WindowsArm && (
                 <article className={styles.downloadBoxes}>
                   <h4>Windows ARM64</h4>
                   <p>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -59,9 +59,10 @@ const Home: NextPage = () => {
             }}
           >
             Heroic is a Free and Open Source <strong>Epic</strong>,{' '}
-            <strong>GOG</strong> and <strong>Amazon Prime Games</strong> launcher for <strong>Linux</strong>,{' '}
-            <strong>Windows</strong> and <strong>macOS</strong>. Also available
-            on the <strong>SteamDeck</strong>!
+            <strong>GOG</strong> and <strong>Amazon Prime Games</strong>{' '}
+            launcher for <strong>Linux</strong>, <strong>Windows</strong> and{' '}
+            <strong>macOS</strong>. Also available on the{' '}
+            <strong>SteamDeck</strong>!
             <p className={styles.buttonContainer}>
               <Link href="/downloads" passHref>
                 <span role="button" className="secondary">
@@ -78,15 +79,15 @@ const Home: NextPage = () => {
           <img
             src={img1}
             alt="Heroic Games Launcher preview"
-            title='Heroic Games Launcher preview'
+            title="Heroic Games Launcher preview"
             className="heroicPreview"
           />
         </div>
       </motion.header>
-
       <h1
         style={{
-          textAlign: 'center'
+          textAlign: 'center',
+          paddingInline: '25px'
         }}
       >
         MAIN FEATURES AND MORE INFO
@@ -107,7 +108,7 @@ const Home: NextPage = () => {
                 <img
                   src={img2}
                   alt="Game Page"
-                  title='Game Page'
+                  title="Game Page"
                   aria-label="Game Page"
                   loading="lazy"
                 />
@@ -139,7 +140,7 @@ const Home: NextPage = () => {
                 <img
                   src={img3}
                   alt="Platform Selection"
-                  title='Platform Selection'
+                  title="Platform Selection"
                   aria-label="Platform Selection"
                   loading="lazy"
                 />
@@ -172,7 +173,7 @@ const Home: NextPage = () => {
               <a href={img4}>
                 <img
                   alt="Epic Store inside Heroic"
-                  title='Epic Store inside Heroic'
+                  title="Epic Store inside Heroic"
                   aria-label="Epic Store inside Heroic"
                   src={img4}
                   loading="lazy"
@@ -182,8 +183,9 @@ const Home: NextPage = () => {
             <div className="description">
               <h2>Access to the Stores</h2>
               <p>
-                Go to the Epic, Amazon Prime or GOG store without even leaving Heroic. Get
-                free games or buy new ones directly from Heroic's interface!
+                Go to the Epic, Amazon Prime or GOG store without even leaving
+                Heroic. Get free games or buy new ones directly from Heroic's
+                interface!
               </p>
             </div>
           </div>
@@ -204,7 +206,7 @@ const Home: NextPage = () => {
               <a href={img8}>
                 <img
                   alt="Context Menu"
-                  title='Context Menu'
+                  title="Context Menu"
                   aria-label="Context Menu"
                   src={img8}
                   loading="lazy"
@@ -236,7 +238,7 @@ const Home: NextPage = () => {
               <a href={gif}>
                 <img
                   alt="Themes"
-                  title='Themes'
+                  title="Themes"
                   aria-label="Themes"
                   src={gif}
                   loading="lazy"
@@ -300,7 +302,7 @@ const Home: NextPage = () => {
               <a href={img6}>
                 <img
                   alt="Wine Settings"
-                  title='Wine Settings'
+                  title="Wine Settings"
                   aria-label="Wine Settings"
                   src={img6}
                   loading="lazy"
@@ -335,7 +337,7 @@ const Home: NextPage = () => {
               <a href={img7}>
                 <img
                   alt="Heroic is supported in several languages"
-                  title='Heroic is supported in several languages'
+                  title="Heroic is supported in several languages"
                   aria-label="Heroic is supported in several languages"
                   src={img7}
                   loading="lazy"

diff --git a/styles/globals.css b/styles/globals.css
@@ -1,7 +1,7 @@
-@import url("pico.min.css");
-@import url("heroic.css");
-@import url("media.css");
-@import url("colors.css");
+@import url('pico.min.css');
+@import url('heroic.css');
+@import url('media.css');
+@import url('colors.css');
 
 html,
 body {
@@ -10,6 +10,13 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
+/*added flex style to main*/
+main {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  align-items: center;
+}
 
 a {
   color: inherit;

diff --git a/styles/heroic.css b/styles/heroic.css
@@ -127,8 +127,6 @@ footer {
     width: 212px;
   }
 
-
-
   .heroicPreview {
     width: 1130px;
   }
@@ -162,15 +160,17 @@ a {
   color: #0d101c;
 }
 
+/*changed the width 100% instead of a hardcoded value*/
 @media screen and (max-width: 414px) {
   .feature {
-    width: 374px;
+    width: 100%;
+
     margin-bottom: 42px;
   }
 
   .heroicPreview,
   .feature img {
-    width: 374px;
+    width: 100%;
   }
 }
 

diff --git a/styles/media.css b/styles/media.css
@@ -1,47 +1,48 @@
 @media (min-width: 576px) {
-
-    body>footer,
-    body>header,
-    body>main,
-    section {
-        --block-spacing-vertical: calc(var(--spacing) * 1.2);
-    }
+  body > footer,
+  body > header,
+  body > main,
+  section {
+    --block-spacing-vertical: calc(var(--spacing) * 1.2);
+  }
 }
 
 @media (min-width: 768px) {
-
-    body>footer,
-    body>header,
-    body>main,
-    section {
-        --block-spacing-vertical: calc(var(--spacing) * 1);
-    }
+  body > footer,
+  body > header,
+  body > main,
+  section {
+    --block-spacing-vertical: calc(var(--spacing) * 1);
+  }
 }
 
 @media (min-width: 992px) {
-
-    body>footer,
-    body>header,
-    body>main,
-    section {
-        --block-spacing-vertical: calc(var(--spacing) * 2);
-    }
+  body > footer,
+  body > header,
+  body > main,
+  section {
+    --block-spacing-vertical: calc(var(--spacing) * 2);
+  }
 }
 
-
 @media (max-width: 990px) {
-
-    nav.container-fluid {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
+  nav.container-fluid {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  nav.container-fluid div {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+}
 
-    nav.container-fluid div {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column-reverse;
-        align-items: center;
-    }
-
-}
+/*added a breakpoint for the navbar*/
+@media (max-width: 360px) {
+  nav.container-fluid div a {
+    font-size: 0.84rem;
+  }
+}
diff --git a/styles/pico.min.css b/styles/pico.min.css
diff --git a/styles/styles.css b/styles/styles.css
@@ -1,4 +1,4 @@
-@import url("pico.min.css");
-@import url("heroic.css");
-@import url("media.css");
-@import url("colors.css");
+@import url('pico.min.css');
+@import url('heroic.css');
+@import url('media.css');
+@import url('colors.css');