Fix responsiveness, movies

addyosmani · Dec 19, 2023 · 37cb3b8 · 37cb3b8
1 parent 5ede2d4
commit 37cb3b8
Showing 1 changed file with 39 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -159,27 +159,9 @@
             margin-top: 0
         }
 
-        @media (max-width: 900px) {
-            .grid-container {
-                grid-template-columns: 1fr;
-                grid-template-rows: auto auto;
-            }
 
-            .black-column {
-                height: auto;
-            }
 
-            .content-black {
-                width: auto;
-                padding-left: 20px;
-                padding-right: 20px;
-            }
 
-            .white-column {
-                padding-top: 0;
-                overflow-y: initial;
-            }
-        }
 
         .jsdp-section-header-title span {
             background: linear-gradient(180deg, #fff 22.5%, rgba(255, 255, 255, .7) 100%);
@@ -225,12 +207,11 @@
         }
 
         .info-box {
-            display: block;
+            display: none;
             width: 80%;
             height: 400px;
             background-color: #0a0118;
             border-radius: 16px;
-            display: flex;
             flex-direction: column;
             border: 1px solid #5B5668;
             flex-grow: 1;
@@ -329,6 +310,37 @@
             margin-left: 5px;
             /* Add spacing between the icon and the link text */
         }
+
+
+        @media (max-width: 900px) {
+            .grid-container {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+            }
+
+            .black-column {
+                height: auto;
+            }
+
+            .content-black {
+                width: auto;
+                padding-left: 20px;
+                padding-right: 20px;
+            }
+
+            .white-column {
+                padding-top: 0;
+                overflow-y: initial;
+            }
+
+        }
+
+        @media (min-width: 1100px) {
+            .info-box {
+                display: flex;
+            }
+        }
+
     </style>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -874,25 +886,24 @@ <h2>Chapter 13: Next.js Rendering Patterns</h2>
                 <h2>Community implementations</h2>
                 <section>
                     <ul>
+                        <li><a href="https://github.com/1Marc/modern-todomvc-vanillajs">Modern vanilla TodoMVC</a></li>
+
+                        <li><a href="https://movies-flax-sigma.vercel.app/">Movies: React Server Components + Next.js
+                                App Router</a> (<a class="github"
+                                href="https://github.com/oktay/movies">source</a>)</li>
+
                         <li><a href="https://next-rsc-hn.vercel.app/">Hacker News: React Server Components + Next.js App
                             Router</a> (<a class="github" href="https://github.com/vercel/next-react-server-components">source</a>)</li>
-
-                        <li><a href="https://next-movie.transitivebullsh.it/">Movies: React Server Components + Next.js
-                                App Router</a> (<a class="github"
-                                href="https://github.com/transitive-bullshit/next-movie">source</a>)</li>
 
                         <li><a href="https://demo.vercel.store/">Commerce: React Server Components + Next.js
                             App Router</a> (<a class="github" href="https://github.com/vercel/commerce">source</a>)</li>
 
-
-
                         <li><a href="https://abproject-sclone.vercel.app/">AirBnB: React Server Components + Next.js App
                                 Router</a> (<a class="github"
                                 href="https://github.com/SashenJayathilaka/Airbnb-Build">source</a>)</li>
 
                         <li><a href="https://vercel.com/templates/next.js/app-directory">Next.js App Directory</a></li>
-
-                        <li><a href="https://github.com/1Marc/modern-todomvc-vanillajs">Modern vanilla TodoMVC</a></li>
+
                     </ul>
                 </section>