From 1a34a9f78641d868f7445c3f4cabbef7c563b78c Mon Sep 17 00:00:00 2001 From: Matthew Lemon Date: Mon, 21 Oct 2024 17:28:41 +0100 Subject: wip: remove bootstrap part 1 --- alphabetlearning/static/css/custom.css | 178 ---------- alphabetlearning/static/css/project.css | 109 +++--- alphabetlearning/templates/base.html | 374 +++++++++------------ .../templates/resources/resource_detail.html | 46 +-- .../templates/resources/resource_list.html | 58 ++-- 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 @@ {% get_current_language as LANGUAGE_CODE %} - - - - - {% block title %} - Alphabet Learning - {% endblock title %} - - - - - - {% block extra_css %} - {% endblock extra_css %} - {% block css %} - - {# #} - - - - + + + + + {% block title %} + Alphabet Learning + {% endblock title %} + + + + + + {% block extra_css %} + {% endblock extra_css %} + {% block css %} - - {# #} - {% endblock css %} - - {# Placed at the top of the document so pages load faster with defer #} - {% block javascript %} - - {# #} - - + {% endblock css %} + {% block javascript %} - - {% endblock javascript %} - - + {% endblock javascript %} + + -
- -
-
-
- {% block body %} - {% if messages %} - {% for message in messages %} -
- {{ message }} - -
- {% endfor %} - {% endif %} - {% block main %} -
- {% block content %} - {% endblock content %} - + {% endfor %} + {% endif %} + {% block main %} +
+ {% block content %} + {% endblock content %} + -
- {% endblock main %} - {% endblock body %} -
- -{% 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: - -{% endcomment %} -{% endblock inline_javascript %} - + + {% endcomment %} + {% endblock inline_javascript %} + 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 %} -
-
+
+
{% for tn_url, tn_filename in resource.thumbnails %}
- {{ tn_filename }} + {{ tn_filename }}
{% endfor %}
-
-
-
-

{{ resource.name }}

+
+
+
+

{{ resource.name }}

-
+

{{ resource.main_resource_category }}

@@ -27,36 +27,36 @@
-
+
{% if resource.pdf_filenames|length > 1 %} -

Contains {{ resource.pdf_filenames|length }} PDF files.

+

Contains {{ resource.pdf_filenames|length }} PDF files.

{% else %} -

Contains {{ resource.pdf_filenames|length }} PDF file.

+

Contains {{ resource.pdf_filenames|length }} PDF file.

{% endif %}
-
-

£{{ resource.price|floatformat:2 }} (or 1 credit)

+
+

£{{ resource.price|floatformat:2 }} (or 1 credit)

-
-
-

Product summary

+
+
+

Product summary

{{resource.card_description}}

-
-
+
+
{% if resource.in_cart %}
-
{% else %}
-
@@ -69,7 +69,7 @@ -
+
{% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %} {% for snapshot_url in snapshot_urls %}
@@ -80,8 +80,8 @@
-
-
+
+

Product detail

{{ resource.description | markdown | safe }}
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 %} -
+
{% include "resources/admin_bar.html" %}
{# featured resources #} {% if featured_resources %} -
-
Featured resources
+
+

Featured resources

-
+
{% for featured_resource in featured_resources %} {% if featured_resources|length == 1 %} -
+
{% elif featured_resources|length == 2 %} -
+
{% elif featured_resources|length == 3 %} -
+
{% endif %} {% include "resources/resource_card_featured.html" with resource=featured_resource %}
@@ -34,19 +34,19 @@ {% endif %} {# standard resources #} -
-
-
Standard resources
+
+
+

Standard resources

-