Product Features
Log in

Project 4: Movie Watchlist: Putting the page layout together (+28, -0)

Start End

main.css (+21, -0)

From: curriculum/section14/lectures/04_putting_page_layout_together/start/movie_library/static/css/main.css

To: curriculum/section14/lectures/04_putting_page_layout_together/end/movie_library/static/css/main.css 

            
            index 4f3974b..04548ab 100644
--- a/curriculum/section14/lectures/04_putting_page_layout_together/start/movie_library/static/css/main.css
+++ b/curriculum/section14/lectures/04_putting_page_layout_together/end/movie_library/static/css/main.css
@@ -46,6 +46,11 @@ html {
 }
 
 body {
+  /* Setting display flex, and a column flex direcion means we can force the footer
+       to the bottom of the page, by allowing the main element to grow to fill the window */
+  display: flex;
+  flex-direction: column;
+
   /* Sets the shared font characteristics, so that that they can be inherited globally */
   font-family: "Public Sans", sans-serif;
   color: var(--text-dark);
@@ -140,6 +145,22 @@ body {
   height: 1em;
 }
 
+/* Setting flex-grow makes the main content grow as much as possible to fill the body.
+    This pushes the footer to the bottom of the page, where the page would otherwise
+    be smaller than the viewport height. */
+.main {
+  flex-grow: 1;
+  padding: 3rem 1.5rem 2rem 1.5rem;
+}
+
+/* The following media query increase the distance of the main content from the header
+   as the window size increases. */
+@media screen and (min-width: 30em) {
+  .main {
+    padding-top: 5rem;
+  }
+}
+
 .footer {
   padding: 1rem 0;
   color: var(--text-muted);

layout.html (+7, -0)

From: curriculum/section14/lectures/04_putting_page_layout_together/start/movie_library/templates/layout.html

To: curriculum/section14/lectures/04_putting_page_layout_together/end/movie_library/templates/layout.html 

            
            index 123eaa2..7fbdd18 100644
--- a/curriculum/section14/lectures/04_putting_page_layout_together/start/movie_library/templates/layout.html
+++ b/curriculum/section14/lectures/04_putting_page_layout_together/end/movie_library/templates/layout.html
@@ -1,3 +1,6 @@
+{% from "macros/nav.html" import header %}
+{% from "macros/footer.html" import footer %}
+
 <!DOCTYPE html>
 <html lang="en">
     <head>
@@ -13,8 +16,12 @@
     </head>
     
     <body>
+        {{ header(session.get("email"), session.get("theme")) }}
+
         <main class="main">
             {% block main_content %} {% endblock %}
         </main>
+        
+        {{ footer() }}
     </body>
 </html>