Make site more mobile friendly

3 files changed, 16 insertions, 6 deletions

diff --git a/static/style/index.css b/static/style/index.css
index bee815d..ada19e9 100644
--- a/static/style/index.css
+++ b/static/style/index.css
@@ -95,7 +95,6 @@ section {
         flex-shrink: 0;
         flex-basis: 8em;
         padding: 1em;
-        height: 15em;
         text-align: left;
         text-decoration: none;
         background-color: var(--light-color);
@@ -138,5 +137,9 @@ section {
     section {
         flex-direction: column;
         flex-wrap: inherit;
+
+        >div {
+            flex-basis: auto;
+        }
     }
 }
\ No newline at end of file
diff --git a/static/style/style.css b/static/style/style.css
index 46b1379..3e7e850 100644
--- a/static/style/style.css
+++ b/static/style/style.css
@@ -126,4 +126,11 @@ main.centered {
         padding: 0.25em;
         list-style: none;
     }
+}
+
+@media (max-width: 750px) {
+    main.centered {
+        width: auto;
+        padding: 1em;
+    }
 }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 2618a68..8126ae1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -39,11 +39,6 @@
 </main>
 <section>
     <div>
-        <h2><a href="/absidy">Spotlight</a></h2>
-        <img src="/static/img/photography.webp" alt="Absidy Center Photography Showcase">
-        <a href="/absidy">For more photography and art, click here.</a>
-    </div>
-    <div>
         <h2><a href="/news">News</a></h2>
         <h3>{{ news.title }}</h3>
         <small>Published {{ news.date }}</small>
@@ -55,5 +50,10 @@
         No events are planned.<br>
         Check back later!
     </div>
+    <div>
+        <h2><a href="/absidy">Spotlight</a></h2>
+        <img src="/static/img/photography.webp" alt="Absidy Center Photography Showcase">
+        <a href="/absidy">For more photography and art, click here.</a>
+    </div>
 </section>
 {% endblock %}
\ No newline at end of file