Adjust the styling and layout across various resolutions using media

queries.
Screenly · Aug 2, 2023 · f5ccfba · f5ccfba
1 parent bb61d04
commit f5ccfba
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 20 deletions.
diff --git a/edge-apps/rss-reader/index.html b/edge-apps/rss-reader/index.html
@@ -10,24 +10,36 @@
   </head>
   <body>
     <template id="feed-template">
-      <div class="feed-container col-sm-12 col-lg-12 col-xl-4 px-xl-3">
-        <h2 class="feed-title mt-4 fw-bolder"></h2>
+      <div class="feed-container">
+        <h2 class="feed-title fw-bolder"></h2>
         <p class="feed-date mb-0"></p>
-        <div class="feed-description xtext-white mt-3">
+        <div class="feed-description mt-3">
           <p></p>
         </div>
       </div>
     </template>
 
-    <div id="feeds-container" class="container d-flex flex-column justify-content-center h-100">
+    <div class="d-flex flex-column h-100">
       <header>
         <div class="header container">
-          <img class="logo" src="static/images/playground-logo.svg" alt="Screenly logo">
-          <h1 id="rss-title" class="fw-bolder">RSS Feed</h1>
+          <img
+            class="logo"
+            src="static/images/playground-logo.svg"
+            alt="Screenly logo"
+          >
+          <h1 id="rss-title" class="app-name fw-bolder">RSS Feed</h1>
         </div>
       </header>
 
-      <div class="row mt-4"></div>
+      <main class="container content">
+        <div id="feeds-container" class="container d-flex flex-column h-100">
+          <div id="grid" class="mt-4"></div>
+        </div>
+      </main>
+
+      <footer class="container">
+        <p>&copy; 2013-2022 Screenly, Inc.</p>
+      </footer>
     </div>
 
     <script src="screenly.js?version=1"></script>

diff --git a/edge-apps/rss-reader/static/js/main.js b/edge-apps/rss-reader/static/js/main.js
@@ -85,7 +85,7 @@ class RssCache {
 const initApp = () => {
   const feedsContainer = document
     .querySelector('#feeds-container')
-    .querySelector('.row')
+    .querySelector('#grid')
   const { rss_url, rss_title, limit } = screenly.settings
   const parser = new RSSParser()
 

diff --git a/edge-apps/rss-reader/static/styles/main.css b/edge-apps/rss-reader/static/styles/main.css
@@ -14,12 +14,24 @@ a {
 }
 
 header {
-  border-bottom: 5px solid #FFFFFF;
+  border-bottom: 0.25rem solid #FFFFFF;
   flex: 0 1 auto;
-  padding: 1rem;
+  padding: 1.5rem;
 }
 
-@media (min-width: 800px) {
+footer {
+  border-top: 0;
+}
+
+#feeds-container > #grid {
+  display: grid;
+  column-gap: 1rem;
+  row-gap: 1rem;
+}
+
+@media (min-width: 800px)
+  and (orientation: landscape)
+{
   h1 {
     font-size: 2rem;
   }
@@ -33,49 +45,74 @@ header {
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1280px)
+  and (orientation: landscape)
+{
   h1 {
     font-size: 2.5rem;
   }
 
   h2 {
-    font-size: 2rem;
+    font-size: 1.6rem;
   }
 
   p {
-    font-size: 1.10rem;
+    font-size: 1rem;
+  }
+
+  #feeds-container > #grid {
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
-@media (min-width: 1920px) {
+@media (min-width: 1920px)
+  and (orientation: landscape)
+{
   h1 {
     font-size: 3rem;
   }
 
   h2 {
-    font-size: 2.5rem;
+    font-size: 2.25rem;
   }
 
   p {
     font-size: 1.25rem;
   }
+
+  #feeds-container > #grid {
+    column-gap: 1.75rem;
+  }
 }
 
-@media (min-width: 3840px) {
+@media (min-width: 3840px)
+  and (orientation: landscape)
+{
   h1 {
-    font-size: 4rem;
+    font-size: 4.25rem;
   }
 
   h2 {
-    font-size: 3.5rem;
+    font-size: 3.75rem;
   }
 
   p {
     font-size: 2rem;
   }
+
+  header {
+    border-bottom: 0.5rem solid #FFFFFF;
+  }
+
+  #feeds-container > #grid {
+    column-gap: 3rem;
+    row-gap: 2rem;
+  }
 }
 
-@media (min-width: 4096px) {
+@media (min-width: 4096px)
+  and (orientation: landscape)
+{
   h1 {
     font-size: 4.5rem;
   }
@@ -87,4 +124,77 @@ header {
   p {
     font-size: 2.25rem;
   }
+
+  #feeds-container > #grid {
+    column-gap: 3.25rem;
+    row-gap: 1.5rem;
+  }
+}
+
+@media screen and (min-width: 720px)
+  and (orientation: portrait)
+{
+  h1 {
+    font-size: 2.5rem;
+  }
+
+  h2 {
+    font-size: 2rem;
+  }
+
+  p {
+    font-size: 1.10rem;
+  }
+
+  .container {
+    min-width: 700px;
+  }
+}
+
+@media screen and (min-width: 1080px)
+  and (orientation: portrait)
+{
+  h1 {
+    font-size: 3rem;
+  }
+
+  h2 {
+    font-size: 2.5rem;
+  }
+
+  p {
+    font-size: 1.25rem;
+  }
+
+  .container {
+    max-width: 900px;
+  }
+
+  #feeds-container > #grid {
+    row-gap: 3rem;
+  }
+}
+
+@media screen and (min-width: 2160px)
+  and (orientation: portrait)
+{
+  h1 {
+    font-size: 5rem;
+  }
+
+  h2 {
+    font-size: 4.5rem;
+  }
+
+  p {
+    font-size: 3rem;
+  }
+
+  .container {
+    max-width: 1700px;
+  }
+
+  .content {
+    margin: 14rem auto 14rem;
+  }
 }