Navbar on side on desktop

diff --git a/src/littlesongplace/static/nav.js b/src/littlesongplace/static/nav.js
index 8a03c74271a085ee85833043091ce6734f5bd337..932430cc34b3c1011f3f4dc5dd9f17d9af60e4e7 100644 (file)
--- a/src/littlesongplace/static/nav.js
+++ b/src/littlesongplace/static/nav.js
@@ -144,7 +144,7 @@ function updatePageState(data) {
     // Update main body content
     var newMainDiv = data.getElementById("main");
     var oldMainDiv = document.getElementById("main");
-    document.body.replaceChild(newMainDiv, oldMainDiv);
+    oldMainDiv.parentElement.replaceChild(newMainDiv, oldMainDiv);
 
     // Update flashed messages
     var newFlashes = data.getElementById("flashes-container");

diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css
index 2133bd3ea1f7878b37e5d60dde657bcee53c01c4..c8316d2d07ec92defa9e358fd74928e0d90cfb60 100644 (file)
--- a/src/littlesongplace/static/styles.css
+++ b/src/littlesongplace/static/styles.css
@@ -42,7 +42,7 @@ body {
     color: var(--black);
     font-family: "Unageo", sans-serif;
     border-color: var(--purple);
-    max-width: 700px;
+    max-width: 900px;
     margin: auto;
 }
 
@@ -125,18 +125,52 @@ select {
     padding: 8px;
 }
 
+.mt0 { margin-top: 0px; }
+
 div.main {
     max-width: 700px;
     margin: auto;
     padding: 10px;
 }
 
-div.page-header {
-    box-shadow: 5px 5px 0px 0px var(--black);
-    border: 1px solid var(--black);
-    border-radius: var(--radius);
-    margin: 10px;
-    padding: 5px;
+.layout-flex {
+    display: flex;
+    flex-direction: row;
+}
+
+.layout-side {
+    width: 20%;
+    flex-shrink: 0;
+    flex-grow: 0;
+}
+
+.layout-main {
+    flex-grow: 1;
+}
+
+@media screen and (max-width: 900px) {
+    .layout-flex {
+        flex-direction: column;
+        align-items: center;
+    }
+    .layout-main { width: 100%; }
+    .layout-side { width: auto; }
+}
+
+.site-title {
+    text-align: center;
+    font-size: 3em;
+    font-family: "Mat Saleh", sans-serif;
+    font-weight: bold;
+    color: var(--purple);
+    margin: 20px;
+    text-shadow: 2px 2px 0px var(--black);
+}
+
+@media screen and (max-width: 480px) {
+    .site-title {
+        font-size: 2em;
+    }
 }
 
 .flashes {
@@ -237,14 +271,35 @@ input[type=range]::-moz-range-thumb {
 }
 
 /* Navbar */
-div.navbar {
+.navbar {
+    position: sticky;
+    top: 10px;
+
     display: flex;
     flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
     gap: 10px;
-    padding-bottom: 10px;
+
+    overflow: hidden;
+
+    box-shadow: 2px 2px 0px 0px var(--black);
+    border: 1px solid var(--black);
+    border-radius: var(--radius);
+    margin: 10px;
+    padding: 10px;
+    /* padding-bottom: 10px; */
+}
+
+@media screen and (max-width: 900px) {
+    .navbar {
+        position: static;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        max-width: 700px;
+    }
 }
 
 #activity-indicator {

diff --git a/src/littlesongplace/templates/base.html b/src/littlesongplace/templates/base.html
index b415b9e85df2c9a5e4a4091de07afaf78d4b895e..a51a19cf21cc533e386e96d89b234d87e113b3a7 100644 (file)
--- a/src/littlesongplace/templates/base.html
+++ b/src/littlesongplace/templates/base.html
@@ -20,48 +20,53 @@
         <!-- Embedded image data -->
         {{ gif_data|safe }}
 
-        <div class="page-header">
-            <div style="text-align: center;">
-                <!--<img class="title-image littlesongplace02">-->
-                <h1>little song place</h1>
-            </div>
+        <div class="site-title">little song place</div>
+
+        <div class="layout-flex">
+
             <!-- Navbar -->
-            <div class="navbar">
-                <a href="/">Home</a>
-                <a href="/jams/1">Jam</a>
-                <a href="/about">About</a>
-                <a href="/site-news">News</a>
-                <a href="/songs">Random</a>
+            <div class="layout-side">
+                <div class="navbar">
+                    <a href="/">Home</a>
+                    <a href="/jams/1">Jam</a>
+                    <a href="/about">About</a>
+                    <a href="/site-news">News</a>
+                    <a href="/songs">Random</a>
+                </div>
 
-                <a href="/users/{{ session["username"] }}" class="nav-logged-in" id="my-profile" hidden>My Profile</a>
-                <a href="/activity" class="nav-logged-in" hidden><span id="activity-indicator" hidden></span>Activity</a>
-                <a href="/logout" class="nav-logged-in" hidden>Sign Out</a>
+                <div class="navbar">
+                    <a href="/users/{{ session["username"] }}" class="nav-logged-in" id="my-profile" hidden>My Profile</a>
+                    <a href="/activity" class="nav-logged-in" hidden><span id="activity-indicator" hidden></span>Activity</a>
+                    <a href="/logout" class="nav-logged-in" hidden>Sign Out</a>
 
-                <a href="/signup" class="nav-logged-out">Create Account</a>
-                <a href="/login" class="nav-logged-out">Sign In</a>
+                    <a href="/signup" class="nav-logged-out">Create Account</a>
+                    <a href="/login" class="nav-logged-out">Sign In</a>
 
-                <span class="nav-logged-in" id="logged-in-status" hidden></span>
+                    <span class="nav-logged-in" id="logged-in-status" hidden></span>
+                </div>
             </div>
-        </div>
 
-        <!-- Flashed Status Messages -->
-        <div id="flashes-container">
-            {% with messages = get_flashed_messages(with_categories=True) -%}
-            {% if messages  -%}
-            <div class="flashes">
-                <ul>
-                    {% for category, message in messages %}
-                    <li class="flash-msg {{ category }}">{{ message }}</li>
-                    {% endfor %}
-                </ul>
+            <div class="layout-main">
+                <!-- Flashed Status Messages -->
+                <div id="flashes-container">
+                    {% with messages = get_flashed_messages(with_categories=True) -%}
+                    {% if messages  -%}
+                    <div class="flashes">
+                        <ul>
+                            {% for category, message in messages %}
+                            <li class="flash-msg {{ category }}">{{ message }}</li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    {%- endif %}
+                    {%- endwith %}
+                </div>
+
+                <!-- Page-Specific Content -->
+                <div class="main" id="main" data-bgcolor="{{ bgcolor }}" data-fgcolor="{{ fgcolor }}" data-accolor="{{ accolor }}" data-username="{{ session['username'] }}">{% block body %}{% endblock %}</div>
             </div>
-            {%- endif %}
-            {%- endwith %}
         </div>
 
-        <!-- Page-Specific Content -->
-        <div class="main" id="main" data-bgcolor="{{ bgcolor }}" data-fgcolor="{{ fgcolor }}" data-accolor="{{ accolor }}" data-username="{{ session['username'] }}">{% block body %}{% endblock %}</div>
-
         <!-- Padding to prevent player from obscuring content -->
         <div id="scroll-padding"></div>
 

diff --git a/src/littlesongplace/templates/index.html b/src/littlesongplace/templates/index.html
index d627aa818b4a0a53bb95004628c1c478d3af28b6..587ff5ddc31790e74bec81aefafe2a0bfe8c6a95 100644 (file)
--- a/src/littlesongplace/templates/index.html
+++ b/src/littlesongplace/templates/index.html
@@ -4,7 +4,7 @@
 
 {% block body %}
 
-<h2>hello!</h2>
+<h2 class="mt0">hello!</h2>
 <div style="display: flex; flex-direction: row; justify-content: center; gap: 10px; align-items: center;">
 <div>🎶</div>
 <div style="text-align: center;">Welcome to littlesong.place.<br/>Make music, and share it with friends!</div>