wip: remove bootstrap part 1

5 files changed, 266 insertions, 499 deletions

diff --git a/alphabetlearning/static/css/custom.css b/alphabetlearning/static/css/custom.css
index 802b9b5..4256eea 100644
--- a/alphabetlearning/static/css/custom.css
+++ b/alphabetlearning/static/css/custom.css
@@ -1,181 +1,3 @@
-@charset "UTF-8";
-:root,
-[data-bs-theme=light] {
-  --bs-blue: #0d6efd;
-  --bs-indigo: #6610f2;
-  --bs-purple: #6f42c1;
-  --bs-pink: #d63384;
-  --bs-red: #dc3545;
-  --bs-orange: #fd7e14;
-  --bs-yellow: #ffc107;
-  --bs-green: #198754;
-  --bs-teal: #20c997;
-  --bs-cyan: #0dcaf0;
-  --bs-black: #000;
-  --bs-white: #fff;
-  --bs-gray: #6c757d;
-  --bs-gray-dark: #343a40;
-  --bs-gray-100: #f8f9fa;
-  --bs-gray-200: #e9ecef;
-  --bs-gray-300: #dee2e6;
-  --bs-gray-400: #ced4da;
-  --bs-gray-500: #adb5bd;
-  --bs-gray-600: #6c757d;
-  --bs-gray-700: #495057;
-  --bs-gray-800: #343a40;
-  --bs-gray-900: #212529;
-  --bs-primary: #0d6efd;
-  --bs-secondary: #6c757d;
-  --bs-success: #198754;
-  --bs-info: #0dcaf0;
-  --bs-warning: #ffc107;
-  --bs-danger: #dc3545;
-  --bs-light: #f8f9fa;
-  --bs-dark: #212529;
-  --bs-primary-rgb: 13, 110, 253;
-  --bs-secondary-rgb: 108, 117, 125;
-  --bs-success-rgb: 25, 135, 84;
-  --bs-info-rgb: 13, 202, 240;
-  --bs-warning-rgb: 255, 193, 7;
-  --bs-danger-rgb: 220, 53, 69;
-  --bs-light-rgb: 248, 249, 250;
-  --bs-dark-rgb: 33, 37, 41;
-  --bs-primary-text-emphasis: #052c65;
-  --bs-secondary-text-emphasis: #2b2f32;
-  --bs-success-text-emphasis: #0a3622;
-  --bs-info-text-emphasis: #055160;
-  --bs-warning-text-emphasis: #664d03;
-  --bs-danger-text-emphasis: #58151c;
-  --bs-light-text-emphasis: #495057;
-  --bs-dark-text-emphasis: #495057;
-  --bs-primary-bg-subtle: #cfe2ff;
-  --bs-secondary-bg-subtle: #e2e3e5;
-  --bs-success-bg-subtle: #d1e7dd;
-  --bs-info-bg-subtle: #cff4fc;
-  --bs-warning-bg-subtle: #fff3cd;
-  --bs-danger-bg-subtle: #f8d7da;
-  --bs-light-bg-subtle: #fcfcfd;
-  --bs-dark-bg-subtle: #ced4da;
-  --bs-primary-border-subtle: #9ec5fe;
-  --bs-secondary-border-subtle: #c4c8cb;
-  --bs-success-border-subtle: #a3cfbb;
-  --bs-info-border-subtle: #9eeaf9;
-  --bs-warning-border-subtle: #ffe69c;
-  --bs-danger-border-subtle: #f1aeb5;
-  --bs-light-border-subtle: #e9ecef;
-  --bs-dark-border-subtle: #adb5bd;
-  --bs-white-rgb: 255, 255, 255;
-  --bs-black-rgb: 0, 0, 0;
-  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-  --bs-body-font-family: var(--bs-font-sans-serif);
-  --bs-body-font-size: 1rem;
-  --bs-body-font-weight: 400;
-  --bs-body-line-height: 1.5;
-  --bs-body-color: #212529;
-  --bs-body-color-rgb: 33, 37, 41;
-  --bs-body-bg: #fff;
-  --bs-body-bg-rgb: 255, 255, 255;
-  --bs-emphasis-color: #000;
-  --bs-emphasis-color-rgb: 0, 0, 0;
-  --bs-secondary-color: rgba(33, 37, 41, 0.75);
-  --bs-secondary-color-rgb: 33, 37, 41;
-  --bs-secondary-bg: #e9ecef;
-  --bs-secondary-bg-rgb: 233, 236, 239;
-  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
-  --bs-tertiary-color-rgb: 33, 37, 41;
-  --bs-tertiary-bg: #f8f9fa;
-  --bs-tertiary-bg-rgb: 248, 249, 250;
-  --bs-heading-color: inherit;
-  --bs-link-color: #0d6efd;
-  --bs-link-color-rgb: 13, 110, 253;
-  --bs-link-decoration: underline;
-  --bs-link-hover-color: #0a58ca;
-  --bs-link-hover-color-rgb: 10, 88, 202;
-  --bs-code-color: #d63384;
-  --bs-highlight-color: #212529;
-  --bs-highlight-bg: #fff3cd;
-  --bs-border-width: 1px;
-  --bs-border-style: solid;
-  --bs-border-color: #dee2e6;
-  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
-  --bs-border-radius: 0.375rem;
-  --bs-border-radius-sm: 0.25rem;
-  --bs-border-radius-lg: 0.5rem;
-  --bs-border-radius-xl: 1rem;
-  --bs-border-radius-xxl: 2rem;
-  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
-  --bs-border-radius-pill: 50rem;
-  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
-  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-  --bs-focus-ring-width: 0.25rem;
-  --bs-focus-ring-opacity: 0.25;
-  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
-  --bs-form-valid-color: #198754;
-  --bs-form-valid-border-color: #198754;
-  --bs-form-invalid-color: #dc3545;
-  --bs-form-invalid-border-color: #dc3545;
-}
-
-[data-bs-theme=dark] {
-  color-scheme: dark;
-  --bs-body-color: #dee2e6;
-  --bs-body-color-rgb: 222, 226, 230;
-  --bs-body-bg: #212529;
-  --bs-body-bg-rgb: 33, 37, 41;
-  --bs-emphasis-color: #fff;
-  --bs-emphasis-color-rgb: 255, 255, 255;
-  --bs-secondary-color: rgba(222, 226, 230, 0.75);
-  --bs-secondary-color-rgb: 222, 226, 230;
-  --bs-secondary-bg: #343a40;
-  --bs-secondary-bg-rgb: 52, 58, 64;
-  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
-  --bs-tertiary-color-rgb: 222, 226, 230;
-  --bs-tertiary-bg: #2b3035;
-  --bs-tertiary-bg-rgb: 43, 48, 53;
-  --bs-primary-text-emphasis: #6ea8fe;
-  --bs-secondary-text-emphasis: #a7acb1;
-  --bs-success-text-emphasis: #75b798;
-  --bs-info-text-emphasis: #6edff6;
-  --bs-warning-text-emphasis: #ffda6a;
-  --bs-danger-text-emphasis: #ea868f;
-  --bs-light-text-emphasis: #f8f9fa;
-  --bs-dark-text-emphasis: #dee2e6;
-  --bs-primary-bg-subtle: #031633;
-  --bs-secondary-bg-subtle: #161719;
-  --bs-success-bg-subtle: #051b11;
-  --bs-info-bg-subtle: #032830;
-  --bs-warning-bg-subtle: #332701;
-  --bs-danger-bg-subtle: #2c0b0e;
-  --bs-light-bg-subtle: #343a40;
-  --bs-dark-bg-subtle: #1a1d20;
-  --bs-primary-border-subtle: #084298;
-  --bs-secondary-border-subtle: #41464b;
-  --bs-success-border-subtle: #0f5132;
-  --bs-info-border-subtle: #087990;
-  --bs-warning-border-subtle: #997404;
-  --bs-danger-border-subtle: #842029;
-  --bs-light-border-subtle: #495057;
-  --bs-dark-border-subtle: #343a40;
-  --bs-heading-color: inherit;
-  --bs-link-color: #6ea8fe;
-  --bs-link-hover-color: #8bb9fe;
-  --bs-link-color-rgb: 110, 168, 254;
-  --bs-link-hover-color-rgb: 139, 185, 254;
-  --bs-code-color: #e685b5;
-  --bs-highlight-color: #dee2e6;
-  --bs-highlight-bg: #664d03;
-  --bs-border-color: #495057;
-  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
-  --bs-form-valid-color: #75b798;
-  --bs-form-valid-border-color: #75b798;
-  --bs-form-invalid-color: #ea868f;
-  --bs-form-invalid-border-color: #ea868f;
-}
-
 *,
 *::before,
 *::after {
diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index 45cc949..b782ae2 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -1,21 +1,59 @@
-/* These styles are generated from project.scss. */
 
-.alert-debug {
-  color: black;
-  background-color: white;
-  border-color: #d6e9c6;
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-size: 18px;
+    font-family: "Ubuntu Mono", monospace;
 }
 
-* {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  /*margin: 0;*/
-  /*padding: 0;*/
+html, body {
+    height: 100%;
+}
+
+header, nav, main, footer {
+    padding: 2px calc((100% - 800px) / 2) 0;
+}
+
+main {
+    margin-top: 54px;
+    margin-bottom: 54px;
+    min-height: calc(100vh - 345px);
+    overflow: auto;
+}
+
+body {
+    line-height: 1.5;
+    background-color: #F1F3F6;
+    color: #34495E;
+    overflow-y: scroll;
+}
+
+h1 a {
+    font-size: 36px;
+    font-weight: bold;
+    background-image: url("/static/img/logo.png");
+    background-repeat: no-repeat;
+    background-position: 0px 0px;
+    height: 36px;
+    padding-left: 50px;
+    position: relative;
 }
 
-.alert-error {
-  color: #b94a48;
-  background-color: #f2dede;
-  border-color: #eed3d7;
+h1 a:hover {
+    text-decoration: none;
+    color: #34495E;
+}
+
+h2 {
+    font-size: 22px;
+    margin-bottom: 36px;
+    position: relative;
+    top: -9px;
+}
+
+a {
+    color: blue;
 }
 
 @font-face {
@@ -28,19 +66,6 @@
   src: url(../fonts/Lato-Italic.ttf);
 }
 
-/*@font-face {*/
-/*  font-family: 'Franklin';*/
-/*  src: url(../fonts/LibreFranklin-VariableFont_wght.ttf);*/
-/*}*/
-
-/*@font-face {*/
-/*  font-family: 'Franklin-Italic';*/
-/*  src: url(../fonts/LibreFranklin-Italic.ttf);*/
-/*}*/
-
-/*body {*/
-/*  background-color: #eee;*/
-/*}*/
 
 /* Change the colour of the box shadow */
 .my-card-shadow-sm {
@@ -51,38 +76,6 @@
   box-shadow: 7px 7px 7px rgba(100, 100, 100, 0.5);
 }
 
-h1 {
-    /*color: #657c76;*/
-    font-size: 2.0rem;
-    font-weight: bold;
-}
-
-a {
-  font-size: inherit;
-  color: #394f49;
-  font-weight: bold;
-  text-decoration: none;
-}
-
-header {
-  margin-top: 30px;
-}
-
 .card-title a {
     font-size: 1.2rem;
 }
-
-/*h2 {*/
-/*  color: #4e8273;*/
-/*  !* color: white; *!*/
-/*  font-size: 1.8rem;*/
-/*  padding-bottom: 10px;*/
-/*  margin-right: 20px;*/
-/*  margin-top: 20px;*/
-/*  border-radius: 3px 3px 0 0;*/
-/*  padding-left: 2px;*/
-/*  background-size: 100% 50px;*/
-/*  background-repeat: no-repeat;*/
-/*  border-bottom: 10px solid #E4E5E7;*/
-/*  overflow: auto;*/
-/*}*/
diff --git a/alphabetlearning/templates/base.html b/alphabetlearning/templates/base.html
index 8bc9416..4b21f74 100644
--- a/alphabetlearning/templates/base.html
+++ b/alphabetlearning/templates/base.html
@@ -3,229 +3,181 @@
 <!DOCTYPE html>
 {% get_current_language as LANGUAGE_CODE %}
 <html lang="{{ LANGUAGE_CODE }}">
-<head>
-    <meta charset="utf-8"/>
-    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
-    <title>
-        {% block title %}
-        Alphabet Learning
-        {% endblock title %}
-    </title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <meta name="description" content="Joanna Lemon Resources"/>
-    <meta name="author" content="Matthew Lemon"/>
-    <link rel="icon" href="{% static 'images/favicons/al.png' %}"/>
-    {% block extra_css %}
-    {% endblock extra_css %}
-    {% block css %}
-        <!--Latest compiled and minified Bootstrap CSS -->
-        {#      <link rel="stylesheet"#}
-        {#            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"#}
-        {#            integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA=="#}
-        {#            crossorigin="anonymous"#}
-        {#            referrerpolicy="no-referrer" />#}
-        <!-- Your stuff: Third-party CSS libraries go here -->
-        <!-- This file stores project-specific CSS -->
-        <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}"/>
-        <link rel="stylesheet" href="{% static 'css/custom.css' %}"/>
+    <head>
+        <meta charset="utf-8"/>
+        <meta http-equiv="x-ua-compatible" content="ie=edge"/>
+        <title>
+            {% block title %}
+            Alphabet Learning
+            {% endblock title %}
+        </title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <meta name="description" content="Joanna Lemon Resources"/>
+        <meta name="author" content="Matthew Lemon"/>
+        <link rel="icon" href="{% static 'images/favicons/al.png' %}"/>
+        {% block extra_css %}
+        {% endblock extra_css %}
+        {% block css %}
         <link rel="stylesheet" href="{% static 'css/project.css' %}"/>
-        <link rel="stylesheet" href="{% static 'css/features.css' %}">
-        {#      <link rel="stylesheet" href="{% static "css/wrapper.css" %}" type="text/css" media="screen" charset="utf-8" />#}
-    {% endblock css %}
-    <!-- Le javascript
-  ================================================== -->
-    {# Placed at the top of the document so pages load faster with defer #}
-    {% block javascript %}
-        <!-- Bootstrap JS -->
-        {#      <script defer#}
-        {#              src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"#}
-        {#              integrity="sha512-1/RvZTcCDEUjY/CypiMz+iqqtaoQfAITmNSJY17Myp4Ms5mdxPS5UV7iOfdZoxcGhzFbOm6sntTKJppjvuhg4g=="#}
-        {#              crossorigin="anonymous"#}
-        {#              referrerpolicy="no-referrer"></script>#}
-        <!-- Your stuff: Third-party javascript libraries go here -->
-        <!-- place project specific Javascript in this file -->
+        {% endblock css %}
+        {% block javascript %}
         <script defer src="{% static 'js/project.js' %}"></script>
-        <script src="{% static "bootstrap/js/bootstrap.js" %}"></script>
         <script src="{% static "js/htmx.min.js" %}"></script>
         <script src="https://js.stripe.com/v3/"></script>
-    {% endblock javascript %}
-</head>
-<body>
+        {% endblock javascript %}
+    </head>
+    <body>
 
 
-<header>
-    <nav class="navbar navbar-expand-lg navbar-light bg-white">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="{% url "home" %}">
-                <img src="{% static "images/AL_long_logo_black_grey.png" %}" width=300px alt="Alphabet Learning Logo">
-            </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-
-
-            <div class="collapse navbar-collapse" id="navbarNav">
-
-                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item">
-                        <!-- <div class="d-flex align-items-end mx-1 p-1 px-3 text-white rounded rounded-sm bg-primary"> -->
-                        <!--     <div> -->
-                        <!--     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2" width="32" height="32"> -->
-                        <!--         <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" /> -->
-                        <!--     </svg> -->
-                        <!--     </div> -->
-                        <!--     <div class="fw-bold"> -->
-                        <!--         Cart -->
-                        <!--     </div> -->
-                        <!-- </div> -->
-                    </li>
-                    <li class="nav-item">
-                        {% if request.user.is_authenticated %}
-                        <a class="nav-link text-gray fw-bold" href="{% url "users:detail" request.user.id %}">{{ request.user }}</a>
-                        {% else %}
-                        <a class="nav-link text-dark fw-bold" href="{% url "account_login" %}">Log in</a>
-                        {% endif %}
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link text-dark fw-bold" href="{% url "resources:resource_list" %}">Resources</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link text-dark fw-bold"
-                           href="https://www.tes.com/teaching-resources/shop/joannalemon"
-                           target="_blank">TES Shop</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link text-dark fw-bold" href="https://joannalemon.etsy.com/"
-                                                              target="_blank">Etsy</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link text-dark fw-bold" href="https://blog.joannalemon.com"
-                                                              target="_blank">Blog</a>
-                    </li>
-                    <li>
-                        {% if request.user.is_authenticated %}
-                        <a class="nav-link text-gray fw-bold" href="{% url "account_logout" %}">Log out</a>
-                        {% endif %}
-                    </li>
-                    <li class="nav-item">
-
-                        {% if request.user.shoppingcart %}
-
-                        <!- TODO - fix this, the logic should be different button if no cart ->
-                        <! this is a problem because it seems you can have an empty cart ->
-                        <div class="mx-2 gray-icon">
-                            <a href="{% url "payments:cart_detail" %}" class="full-basket-button">
-                                <span class="fw-bold px-1">
-                                    Items in cart (
-                                    {{ request.user.shoppingcart.items.count }}
-                                    )
-                                </span>
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
-                                      <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
-                                </svg>
-                            </a>
-                        </div>
-
-                        {% else %}
+        <header>
+            <nav>
+                <a href="{% url "home" %}">
+                    <img src="{% static "images/AL_long_logo_black_grey.png" %}" width=300px alt="Alphabet Learning Logo">
+                </a>
+                <div>
+                    <ul>
+                        <li>
+                            {% if request.user.is_authenticated %}
+                            <a href="{% url "users:detail" request.user.id %}">{{ request.user }}</a>
+                            {% else %}
+                            <a href="{% url "account_login" %}">Log in</a>
+                            {% endif %}
+                        </li>
 
-                        <div class="mx-2 gray-icon">
-                            <button class="empty-basket-button" disabled><span class="fw-bold px-1">Empty Basket</span>	
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag-x" viewBox="0 0 16 16">
-                                    <path fill-rule="evenodd" d="M6.146 8.146a.5.5 0 0 1 .708 0L8 9.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 10l1.147 1.146a.5.5 0 0 1-.708.708L8 10.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 10 6.146 8.854a.5.5 0 0 1 0-.708"/>
-                                    <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
-                                </svg>
-                            </button>
-                        </div>
-                        {% endif %}
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-    <div class="border-bottom border-dark border-1"></div>
-</header>
-<main>
-    {% block body %}
-    {% if messages %}
-    {% for message in messages %}
-    <div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}">
-        {{ message }}
-        <button type="button"
-                class="btn-close"
-                data-bs-dismiss="alert"
-                aria-label="Close"></button>
-    </div>
-    {% endfor %}
-    {% endif %}
-    {% block main %}
-    <div class="container">
-        {% block content %}
-        {% endblock content %}
-        <footer class="pt-4 my-md-5 pt-md-5 border-top">
-            <div class="row">
-                <div class="col-12 col-md">
-                    <img class="mb-2" src="#" alt="" width="24" height="19">
-                    <small class="d-block mb-3 text-muted">&copy; 2024</small>
-                </div>
-                <div class="col-6 col-md">
-                    <h5>Features</h5>
-                    <ul class="list-unstyled text-small">
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a>
+                        <li>
+                            <a href="{% url "resources:resource_list" %}">Resources</a>
                         </li>
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random
-                                feature</a></li>
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team
-                                feature</a></li>
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for
-                                developers</a></li>
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a>
+                        <li>
+                            <a href="https://www.tes.com/teaching-resources/shop/joannalemon"
+                               target="_blank">TES Shop</a>
                         </li>
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a>
+                        <li>
+                            <a href="https://joannalemon.etsy.com/" target="_blank">Etsy</a>
                         </li>
-                    </ul>
-                </div>
-                <div class="col-6 col-md">
-                    <h5>Pages on this site</h5>
-                    <ul class="list-unstyled text-small">
-                        <li class="mb-1"><a class="link-secondary text-decoration-none"
-                                            href="{% url "resources:resource_list" %}">Resources</a></li>
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource
-                                name</a></li>
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another
-                                resource</a></li>
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final
-                                resource</a></li>
-                    </ul>
-                </div>
-                <div class="col-6 col-md">
-                    <h5>About</h5>
-                    <ul class="list-unstyled text-small">
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li>
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a>
+                        <li>
+                            <a href="https://blog.joannalemon.com" target="_blank">Blog</a>
                         </li>
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a>
+                        <li>
+                            {% if request.user.is_authenticated %}
+                            <a href="{% url "account_logout" %}">Log out</a>
+                            {% endif %}
+                        </li>
+                        <li>
+
+                            {% if request.user.shoppingcart %}
+
+                            <!- TODO - fix this, the logic should be different button if no cart ->
+                            <! this is a problem because it seems you can have an empty cart ->
+                            <div>
+                                <a href="{% url "payments:cart_detail" %}" class="full-basket-button">
+                                    <span>
+                                        Items in cart (
+                                        {{ request.user.shoppingcart.items.count }}
+                                        )
+                                    </span>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag" viewBox="0 0 16 16">
+                                        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
+                                    </svg>
+                                </a>
+                            </div>
+
+                            {% else %}
+
+                            <div>
+                                <button disabled><span class="fw-bold px-1">Empty Basket</span>	
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bag-x" viewBox="0 0 16 16">
+                                        <path fill-rule="evenodd" d="M6.146 8.146a.5.5 0 0 1 .708 0L8 9.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 10l1.147 1.146a.5.5 0 0 1-.708.708L8 10.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 10 6.146 8.854a.5.5 0 0 1 0-.708"/>
+                                        <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>
+                                    </svg>
+                                </button>
+                            </div>
+                            {% endif %}
                         </li>
-                        <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
                     </ul>
                 </div>
+            </nav>
+            <div></div>
+        </header>
+        <main>
+            {% block body %}
+            {% if messages %}
+            {% for message in messages %}
+            <div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}">
+                {{ message }}
+                <button type="button"
+                        class="btn-close"
+                        data-bs-dismiss="alert"
+                        aria-label="Close"></button>
             </div>
-        </footer>
+            {% endfor %}
+            {% endif %}
+            {% block main %}
+            <div class="main">
+                {% block content %}
+                {% endblock content %}
+                <footer>
+                    <div>
+                        <div>
+                            <img src="#" alt="" width="24" height="19">
+                            <small>&copy; 2024</small>
+                        </div>
+                        <div>
+                            <h5>Features</h5>
+                            <ul>
+                                <li><a class="link-secondary text-decoration-none" href="#">Cool stuff</a>
+                                </li>
+                                <li><a class="link-secondary text-decoration-none" href="#">Random
+                                        feature</a></li>
+                                <li><a class="link-secondary text-decoration-none" href="#">Team
+                                        feature</a></li>
+                                <li><a class="link-secondary text-decoration-none" href="#">Stuff for
+                                        developers</a></li>
+                                <li><a class="link-secondary text-decoration-none" href="#">Another one</a>
+                                </li>
+                                <li><a class="link-secondary text-decoration-none" href="#">Last time</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h5>Pages on this site</h5>
+                            <ul>
+                                <li><a class="link-secondary text-decoration-none"
+                                       href="{% url "resources:resource_list" %}">Resources</a></li>
+                                <li><a class="link-secondary text-decoration-none" href="#">Resource
+                                        name</a></li>
+                                <li><a class="link-secondary text-decoration-none" href="#">Another
+                                        resource</a></li>
+                                <li><a class="link-secondary text-decoration-none" href="#">Final
+                                        resource</a></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h5>About</h5>
+                            <ul>
+                                <li><a class="link-secondary text-decoration-none" href="#">Team</a></li>
+                                <li><a class="link-secondary text-decoration-none" href="#">Locations</a>
+                                </li>
+                                <li><a class="link-secondary text-decoration-none" href="#">Privacy</a>
+                                </li>
+                                <li><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </footer>
 
-    </div>
-    {% endblock main %}
-    {% endblock body %}
-</main>
-<!-- /container -->
-{% block modal %}
-{% endblock modal %}
-{% block inline_javascript %}
-{% comment %}
-Script tags with only code, no src (defer by default). To run
-with a "defer" so that you run inline code:
-<script>
-    #
+            </div>
+            {% endblock main %}
+            {% endblock body %}
+        </main>
+        <!-- /container -->
+        {% block modal %}
+        {% endblock modal %}
+        {% block inline_javascript %}
+        {% comment %}
+        Script tags with only code, no src (defer by default). To run
+        with a "defer" so that you run inline code:
+        <script>
+            #
           } {
             # window.addEventListener('DOMContentLoaded', () => {
               #
@@ -236,8 +188,8 @@ with a "defer" so that you run inline code:
             });
             #
           }
-</script>
-{% endcomment %}
-{% endblock inline_javascript %}
-</body>
+        </script>
+        {% endcomment %}
+        {% endblock inline_javascript %}
+    </body>
 </html>
diff --git a/alphabetlearning/templates/resources/resource_detail.html b/alphabetlearning/templates/resources/resource_detail.html
index 334f4ed..5012c5b 100644
--- a/alphabetlearning/templates/resources/resource_detail.html
+++ b/alphabetlearning/templates/resources/resource_detail.html
@@ -4,21 +4,21 @@
 
 {% block content %}
 
-<div class="row my-4">
-    <div class="col-md-7">
+<div>
+    <div>
         {% for tn_url, tn_filename in resource.thumbnails %}
         <div>
-            <img class="img-fluid rounded mx-1" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
+            <img src="{{ tn_url }}" alt="{{ tn_filename }}"/>
         </div>
         {% endfor %}
     </div> 
-    <div class="col-md-5">
-        <div class="row">
-            <div class="col">
-                <p class="my-1 fw-bold fs-3">{{ resource.name }}</p>
+    <div>
+        <div>
+            <div>
+                <p>{{ resource.name }}</p>
             </div> 
         </div>
-        <div class="d-flex justify-content-between align-items-center">
+        <div>
             <div>
                 <p class="boo-magenta my-1 fw-semibold fs-5">{{ resource.main_resource_category }}</p>
             </div> 
@@ -27,36 +27,36 @@
             </div>
         </div>
 
-        <div class="col">
+        <div>
             {% if resource.pdf_filenames|length > 1 %} 
-                <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF files.</p>
+                <p>Contains {{ resource.pdf_filenames|length }} PDF files.</p>
             {% else %}
-                <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF file.</p>
+                <p>Contains {{ resource.pdf_filenames|length }} PDF file.</p>
             {% endif %}
         </div>
-        <div class="col">
-            <p class="fs-3 fw-semibold">£{{ resource.price|floatformat:2 }} (or 1 credit)</p>
+        <div>
+            <p>£{{ resource.price|floatformat:2 }} (or 1 credit)</p>
         </div>
 
         <hr>
 
-        <div class="row">
-            <div class="col">
-                <p class="my-1 fw-semibold fs-5">Product summary</p>
+        <div>
+            <div>
+                <p>Product summary</p>
                 <p>{{resource.card_description}}</p>
             </div> 
         </div>
-        <div class="row align-items-end">
-            <div class="my-4 d-flex">
+        <div>
+            <div>
                 {% if resource.in_cart %}
                     <form action="{% url 'payments:add_to_basket' resource.id  %}" method="get" accept-charset="utf-8">
-                        <button class="btn btn-primary" disabled>
+                        <button>
                             In basket
                         </button>
                     </form>
                 {% else %}
                     <form action="{% url 'payments:add_to_basket' resource.id  %}" method="get" accept-charset="utf-8">
-                        <button class="btn btn-primary">
+                        <button>
                             Add to basket
                         </button>
                     </form>
@@ -69,7 +69,7 @@
 
 <!-- Here be the carousel stuff -->
 <!-- except we are doing away with the carousel in this design -->
-<div class="d-flex justify-content-start">
+<div class="flex justify-content-start">
     {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
     {% for snapshot_url in snapshot_urls %}
     <div>
@@ -80,8 +80,8 @@
 </div>
 
 <!-- detailed description row -->
-<div class="row py-4">
-    <div class="col-12">
+<div>
+    <div>
         <h4>Product detail</h4>
         {{ resource.description | markdown | safe }}
     </div>
diff --git a/alphabetlearning/templates/resources/resource_list.html b/alphabetlearning/templates/resources/resource_list.html
index fdd0394..9ea9177 100644
--- a/alphabetlearning/templates/resources/resource_list.html
+++ b/alphabetlearning/templates/resources/resource_list.html
@@ -6,24 +6,24 @@
 {% endblock title %}
 {% block content %}
 
-    <div class="row my-4">
+    <div>
         {% include "resources/admin_bar.html" %}
     </div>
 
     {# featured resources #}
     {% if featured_resources %}
-        <div class="row my-4 text-center">
-            <h5 class="display-6">Featured resources</h5>
+        <div>
+            <h1>Featured resources</h1>
         </div>
 
-        <div class="row">
+        <div>
         {% for featured_resource in featured_resources %}
             {% if featured_resources|length == 1 %}
-                <div class="col-lg-12 col-md-12 col-sm-12 mb-4 resource-card">
+                <div>
             {% elif featured_resources|length == 2 %}
-                <div class="col-lg-6 col-md-6 col-sm-12 mb-4 resource-card">
+                <div>
             {% elif featured_resources|length == 3 %}
-                <div class="col-lg-4 col-md-6 col-sm-12 mb-4 resource-card">
+                <div>
             {% endif %}
         {% include "resources/resource_card_featured.html" with resource=featured_resource %}
         </div>
@@ -34,19 +34,19 @@
     {% endif %}
 
     {# standard resources #}
-    <div class="row my-4 text-center">
-        <div class="col">
-            <h5 class="display-6 text-display-secondary">Standard resources</h5>
+    <div>
+        <div>
+            <h1>Standard resources</h1>
         </div>
     </div>
 
     <!-- Tabbed navigation bar for filtering -->
-    <ul class="nav nav-tabs mb-4" id="resourceTabs" role="tablist">
-        <li class="nav-item">
-            <a class="nav-link {% if selected_category == 'all' %}active{% endif %}" href="?category=all">All</a>
+    <ul id="resourceTabs" role="tablist">
+        <li>
+            <a {% if selected_category == 'all' %}active{% endif %}" href="?category=all">All</a>
         </li>
         {% for category in categories %}
-            <li class="nav-item">
+            <li>
                 <a class="nav-link {% if selected_category == category.name %}active{% endif %}"
                    href="?category={{ category.name }}">{{ category.name|title }}</a>
             </li>
@@ -54,9 +54,9 @@
     </ul>
 
 
-    <div class="row">
+    <div>
         {% for resource in page_obj.object_list %}
-            <div class="col-md-6 mb-4" data-type="{{ resource.main_resource_category_name }}">
+            <div data-type="{{ resource.main_resource_category_name }}">
                 {% include "resources/resource_card_standard.html" with resource=resource %}
             </div>
         {% endfor %}
@@ -64,41 +64,41 @@
 
     {# Pagination #}
     {% if page_obj.has_other_pages %}
-        <div class="row my-4">
-            <div class="col">
+        <div>
+            <div>
                 <nav aria-label="Page navigation">
-                    <ul class="pagination justify-content-center">
+                    <ul>
                         {% if page_obj.has_previous %}
-                            <li class="page-item">
-                                <a class="page-link" href="?page=
+                            <li>
+                                <a href="?page=
                                         {{ page_obj.previous_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Previous</a>
                             </li>
                         {% else %}
-                            <li class="page-item disabled">
-                                <span class="page-link">Previous</span>
+                            <li>
+                                <span>Previous</span>
                             </li>
                         {% endif %}
 
                         {% for page_num in page_obj.paginator.page_range %}
                             {% if page_obj.number == page_num %}
-                                <li class="page-item active">
+                                <li>
                                     <span class="page-link">{{ page_num }}</span>
                                 </li>
                             {% else %}
-                                <li class="page-item">
-                                    <a class="page-link" href="?page=
+                                <li>
+                                    <a href="?page=
                                             {{ page_num }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">{{ page_num }}</a>
                                 </li>
                             {% endif %}
                         {% endfor %}
 
                         {% if page_obj.has_next %}
-                            <li class="page-item">
-                                <a class="page-link" href="?page=
+                            <li>
+                                <a href="?page=
                                         {{ page_obj.next_page_number }}{% if selected_category != 'all' %}&category={{ selected_category }}{% endif %}">Next</a>
                             </li>
                         {% else %}
-                            <li class="page-item disabled">
+                            <li>
                                 <span class="page-link">Next</span>
                             </li>
                         {% endif %}