Merge pull request #11 from Brown-University-Library/demo_static

adds and uses static css file.
Brown-University-Library · Nov 24, 2024 · ca78823 · ca78823
2 parents 326178f + 1b67da6
commit ca78823
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,6 @@ Notes about the quick-start instructions...
 - The instructions below assume:
     - a unix-like environment (ie Mac, Linux, or Windows Subsystem for Linux (WSL)). 
     - you've installed `uv` ([link][uv_link])
-        - _For now, here's a link to an [older version][old] of the repo that uses `pip`-based setup instructions. When improvements are made to this repo, this link will be removed._
 
 - The instructions below reference `x_project_stuff`, `x_project`, and `x_app`. In all cases replace with the name of your project, like: `isbn_api_project_stuff`, `isbn_api_project`, and `isbn_api_app`.
 

diff --git a/config/dotenv_example_file.txt b/config/dotenv_example_file.txt
@@ -33,7 +33,7 @@ DATABASES_JSON='
     '
 
 STATIC_URL="/static/"
-STATIC_ROOT="/static/"
+STATIC_ROOT="/path/to/some/apache-served/html/dir/"  # used by collectstatic; not used by runserver.
 
 SERVER_EMAIL="[email protected]"
 EMAIL_HOST="localhost"

diff --git a/config/settings.py b/config/settings.py
@@ -14,8 +14,8 @@
 import logging
 import os
 import pathlib
-from dotenv import load_dotenv, find_dotenv
 
+from dotenv import find_dotenv, load_dotenv
 
 ## load envars ------------------------------------------------------
 dotenv_path = pathlib.Path(__file__).resolve().parent.parent.parent / '.env'
@@ -58,6 +58,7 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'foo_app',
 ]
 
 MIDDLEWARE = [
@@ -165,9 +166,7 @@
             'include_html': True,
         },
         'logfile': {
-            'level': os.environ.get(
-                'LOG_LEVEL', 'INFO'
-            ),  # add LOG_LEVEL=DEBUG to the .env file to see debug messages
+            'level': os.environ.get('LOG_LEVEL', 'INFO'),  # add LOG_LEVEL=DEBUG to the .env file to see debug messages
             'class': 'logging.FileHandler',  # note: configure server to use system's log-rotate to avoid permissions issues
             'filename': os.environ['LOG_PATH'],
             'formatter': 'standard',

diff --git a/foo_app/foo_app_templates/info.html b/foo_app/foo_app_templates/info.html
@@ -1,10 +1,16 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Information Page - {{ message }}</title>
+    <title>Information Page</title>
     <meta name="description" content="Detailed information about {{ topic }}.">
+    <!-- call styles.css via django `static` template-tag -->
+    <link rel="stylesheet" href="{% static 'foo_app/css/styles.css' %}">
+    <!-- CSS _could_ be inserted directly like this, but the above approach is more common -->
+    <!-- 
     <style>
         body {
             font-family: 'Trebuchet MS', sans-serif;
@@ -28,7 +34,8 @@
             margin-top: 2rem;
             font-style: italic;
         }
-    </style>
+    </style> 
+    -->
 </head>
 <body>
     <main class="container">

diff --git a/foo_app/static/foo_app/css/styles.css b/foo_app/static/foo_app/css/styles.css
@@ -0,0 +1,22 @@
+body {
+    font-family: 'Trebuchet MS', sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    height: 100vh;
+    font-size: 1rem;
+}
+.container {
+    background-color: #fff;
+    padding: 1.25rem; /* Equivalent to 20px if base font-size is 16px */
+    border-radius: 0.5rem;
+    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
+    width: 80%;
+    max-width: 37.5rem;
+    margin: calc(100vh / 4) auto 0 auto;
+}
+.parenthetical {
+    font-size: 0.75rem;
+    color: #666;
+    margin-top: 2rem;
+    font-style: italic;
+}