From 98b03d1264a2a0a47f83c014f086569a2ff14090 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sondre=20Gr=C3=B8n=C3=A5s?= <44143748+sondregronas@users.noreply.github.com> Date: Tue, 24 Sep 2024 10:57:06 +0200 Subject: [PATCH 1/6] chore: merge resources/fonts with static/font resolves #43 --- piggy/{resources => static}/fonts/Lato-Bold.ttf | Bin piggy/{resources => static}/fonts/Lato-Light.ttf | Bin piggy/{resources => static}/fonts/Lato-Regular.ttf | Bin piggy/thumbnails.py | 2 +- 4 files changed, 1 insertion(+), 1 deletion(-) rename piggy/{resources => static}/fonts/Lato-Bold.ttf (100%) rename piggy/{resources => static}/fonts/Lato-Light.ttf (100%) rename piggy/{resources => static}/fonts/Lato-Regular.ttf (100%) diff --git a/piggy/resources/fonts/Lato-Bold.ttf b/piggy/static/fonts/Lato-Bold.ttf similarity index 100% rename from piggy/resources/fonts/Lato-Bold.ttf rename to piggy/static/fonts/Lato-Bold.ttf diff --git a/piggy/resources/fonts/Lato-Light.ttf b/piggy/static/fonts/Lato-Light.ttf similarity index 100% rename from piggy/resources/fonts/Lato-Light.ttf rename to piggy/static/fonts/Lato-Light.ttf diff --git a/piggy/resources/fonts/Lato-Regular.ttf b/piggy/static/fonts/Lato-Regular.ttf similarity index 100% rename from piggy/resources/fonts/Lato-Regular.ttf rename to piggy/static/fonts/Lato-Regular.ttf diff --git a/piggy/thumbnails.py b/piggy/thumbnails.py index 4bf4a2a..fca4357 100644 --- a/piggy/thumbnails.py +++ b/piggy/thumbnails.py @@ -31,7 +31,7 @@ def create_thumbnail( size = None # Get the font path relative to this file - font_path = Path(__file__).parent / "resources/fonts/Lato-Bold.ttf" + font_path = Path(__file__).parent / "static/fonts/Lato-Bold.ttf" font = PIL.ImageFont.truetype(font_path.as_posix(), font_size) recursions = 0 while ( From e17ae3985b1ac95f673e336571ccf96f060498d7 Mon Sep 17 00:00:00 2001 From: svHvidsten Date: Tue, 24 Sep 2024 14:09:40 +0200 Subject: [PATCH 2/6] work in progress front-end for assignment pages, needs A LOT of work --- piggy/static/css/styles.css | 31 +++++++- piggy/static/css/themes/high-contrast.css | 5 ++ piggy/templates/assignments/5-assignment.html | 72 +++++-------------- 3 files changed, 50 insertions(+), 58 deletions(-) diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css index dbf261b..0b498fe 100644 --- a/piggy/static/css/styles.css +++ b/piggy/static/css/styles.css @@ -1,11 +1,18 @@ :root { - font-size: 15px; + --piggy-font-size: var(15px); + --piggy-text-hyperlink: #FF5733; + + font-size: var(--piggy-font-size); font-family: "Quicksand", sans-serif; font-optical-sizing: auto; font-style: normal; } +/************************\ +|* FONT IMPORTS *| +\************************/ + /* Regular */ @font-face { font-family: 'OpenDyslexic'; @@ -60,7 +67,7 @@ font-style: normal; } -[data-font-theme="dyslexia"] * { +[data-font-theme="dyslexia"] *:not(code *, code) { font-family: "Lexia", "Comic Sans MS", sans-serif; letter-spacing: 0.5px; } @@ -69,6 +76,14 @@ letter-spacing: 0px; } +/*****************************\ +|* ELEMENT OVERRIDES *| +\*****************************/ + +h1, h2, h3, h4, h5, h6 { + color: var(--piggy-text-main) !important; +} + .transition { transition: 0.4s ease; } @@ -77,6 +92,7 @@ background-color: var(--piggy-main); color: var(--piggy-text-main); text-shadow: var(--piggy-shadow-text) 3px 3px 5px; + font-size: var(--piggy-font-size); } .card-container { @@ -257,15 +273,18 @@ .piggy-breadcrumb { color: var(--piggy-text-breadcrumb); + font-size: var(--piggy-font-size); } .piggy-breadcrumb:hover { color: var(--piggy-text-breadcrumb-hover); transition: color 0.2s ease; + font-size: var(--piggy-font-size); } .piggy-breadcrumb-no-hover { color: var(--piggy-text-breadcrumb); + font-size: var(--piggy-font-size); } /* Settings Button */ @@ -357,4 +376,12 @@ /* Show Tooltip on Hover */ .theme-option:hover .theme-tooltiptext { visibility: visible; +} + +/****************************\ +|* MARKDOWN STYLING *| +\****************************/ + +.md-container a { + color: var(--piggy-text-hyperlink) !important; } \ No newline at end of file diff --git a/piggy/static/css/themes/high-contrast.css b/piggy/static/css/themes/high-contrast.css index 926fed2..3eb8400 100644 --- a/piggy/static/css/themes/high-contrast.css +++ b/piggy/static/css/themes/high-contrast.css @@ -117,4 +117,9 @@ description: High contrast theme for maximum visibility. background-color: transparent !important; border-color: white !important; border-width: 3px; +} + +[data-theme="high-contrast"] .md-container details { + border-radius: 0; + border-width: 3px; } \ No newline at end of file diff --git a/piggy/templates/assignments/5-assignment.html b/piggy/templates/assignments/5-assignment.html index e03e938..5fdc629 100644 --- a/piggy/templates/assignments/5-assignment.html +++ b/piggy/templates/assignments/5-assignment.html @@ -1,17 +1,15 @@ - - {% include "partials/common_head.html" %} +{% extends "layout.html" %} +{% block head %} + {{ super() }} {{ content.head | safe }} - - - -
-

{{ content.heading }}

- {% if content.meta.difficulty %} - {% if content.meta.difficulty > 50 %} - Difficulty: UMULIG!!! - {% else %} -

Difficulty: {{ '⭐' * content.meta.difficulty }}

- {% endif %} - {% endif %} - - {# Breadcrumbs #} - {# TODO: Requires custom styling to not interfere with tailwind(?) #} - {# {% include "partials/parts/breadcrumbs.html" %} #} - {# Level select #} -
- Level select: - {% for link, assignment in meta.get(AssignmentTemplate.LEVELS_DATA.name).data.items() %} - {% if assignment.level | int == level | int %} - {{ assignment.level }} - {% else %} - {{ assignment.level }} - {% endif %} - {% endfor %} -
- -
- {# Language select #} -
Current language: {{ current_language }}
- {% for lang, val in supported_languages.items() %} - {{ val.name }} - {% endfor %} -
+ .md-content { + font-size: 1rem !important; + } + +{% endblock %} - Home -
-
{{ content.body | safe }}
+{% block header %} +

{{ content.heading }}

+{% endblock %} - {% if debug %} - {% include "partials/devtools/_devtools.html" %} - {% endif %} - +{% block base %} + {{ content.body | safe }} +{% endblock %} \ No newline at end of file From 4cf90584c02be737c4d8ad6cfadb6c0535b26a29 Mon Sep 17 00:00:00 2001 From: svHvidsten Date: Fri, 27 Sep 2024 15:17:04 +0200 Subject: [PATCH 3/6] WIP for Assignment-page front-end --- piggy/static/css/styles.css | 68 +++++- piggy/static/css/themes/classic.css | 2 +- piggy/static/css/themes/dark.css | 3 + piggy/static/css/themes/high-contrast.css | 230 +++++++++++++++++- piggy/static/css/themes/light.css | 44 +++- piggy/static/css/themes/piggy-dark.css | 4 +- piggy/static/css/themes/piggy.css | 43 +++- piggy/static/css/themes/synthwave.css | 4 +- piggy/templates/assignments/5-assignment.html | 47 ---- 9 files changed, 386 insertions(+), 59 deletions(-) diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css index 0b498fe..dcd23da 100644 --- a/piggy/static/css/styles.css +++ b/piggy/static/css/styles.css @@ -1,6 +1,5 @@ :root { --piggy-font-size: var(15px); - --piggy-text-hyperlink: #FF5733; font-size: var(--piggy-font-size); @@ -69,7 +68,7 @@ [data-font-theme="dyslexia"] *:not(code *, code) { font-family: "Lexia", "Comic Sans MS", sans-serif; - letter-spacing: 0.5px; + letter-spacing: 0px; } [data-font-theme="default"] * { @@ -384,4 +383,69 @@ h1, h2, h3, h4, h5, h6 { .md-container a { color: var(--piggy-text-hyperlink) !important; +} + +.md-container a:hover { + color: var(--piggy-text-hyperlink-hover) !important; + text-decoration: underline; + transition: 0.2s; +} + +.assignment-heading { + margin-top: 1em; + text-align: center; +} + +.admonition p:nth-child(2), +details p:nth-child(2) { + margin-top: 0.6rem; +} + +.admonition p:nth-child(2), +details p:nth-child(2) { + margin-bottom: 0.6rem; +} + +.md-container blockquote, +.md-container dl, +.md-container dd, +.md-container h1, +.md-container h2, +.md-container h3, +.md-container h4, +.md-container h5, +.md-container h6, +.md-container hr, +.md-container figure, +.md-container p, +.md-container pre { + /* Set to standard value */ + margin: initial; + padding: initial; +} + +.md-content h3 { + margin: 1.6em 0 -0.5em; + margin-block-end: initial; +} + +.md-content p { + font-size: 1rem !important; + margin-bottom: 0.75rem; + margin-top: 0.25rem; +} + +.md-content ul { + font-size: 1rem !important; +} + +.md-content code, +.md-content summary, +.md-content table { + font-size: 0.8rem !important; + line-height: 1rem; +} + +.md-content code { + border-radius: 5px !important; } \ No newline at end of file diff --git a/piggy/static/css/themes/classic.css b/piggy/static/css/themes/classic.css index 4ad93dc..2ffa77c 100644 --- a/piggy/static/css/themes/classic.css +++ b/piggy/static/css/themes/classic.css @@ -53,7 +53,7 @@ description: The classic look of piggy! --piggy-menu: var(--piggy-light); --piggy-menu-text: var(--piggy-dark); - transition: 1s ease; + --piggy-text-hyperlink: #316997; } [data-theme="classic"] .level-count-container { diff --git a/piggy/static/css/themes/dark.css b/piggy/static/css/themes/dark.css index 3c4831d..37bd8e4 100644 --- a/piggy/static/css/themes/dark.css +++ b/piggy/static/css/themes/dark.css @@ -56,4 +56,7 @@ description: The default dark theme. --piggy-menu: var(--piggy-dark); --piggy-menu-text: var(--piggy-light); + + --piggy-text-hyperlink: #407eb1; + --piggy-text-hyperlink-hover: #407eb1; } \ No newline at end of file diff --git a/piggy/static/css/themes/high-contrast.css b/piggy/static/css/themes/high-contrast.css index 3eb8400..25210a8 100644 --- a/piggy/static/css/themes/high-contrast.css +++ b/piggy/static/css/themes/high-contrast.css @@ -9,7 +9,7 @@ description: High contrast theme for maximum visibility. --piggy-dark: #ffffff; /* White text for maximum contrast */ --piggy-text-main: var(--piggy-light); /* White text for readability */ - --piggy-shadow-text: rgba(255, 255, 255, 0.1); /* Soft white shadow for text */ + --piggy-shadow-text: rgba(255, 255, 255, 0.0); /* No text shadow */ /* High-contrast card colors with colorful borders */ --piggy-card-start: #111; /* Dark gray card background for subtle contrast */ @@ -46,6 +46,9 @@ description: High contrast theme for maximum visibility. --piggy-text-title: var(--piggy-light); /* White text for titles */ --piggy-text-breadcrumb: var(--piggy-light); /* White text for breadcrumbs */ --piggy-text-breadcrumb-hover: #ffff00; /* Yellow hover for breadcrumb links */ + + --piggy-text-hyperlink: #00ffff; + --piggy-text-hyperlink-hover: #99ffff; } [data-theme="high-contrast" ] .card-container { @@ -119,7 +122,224 @@ description: High contrast theme for maximum visibility. border-width: 3px; } -[data-theme="high-contrast"] .md-container details { - border-radius: 0; - border-width: 3px; -} \ No newline at end of file +/******************************\ +|* MARKDOWN OVERRIDES *| +\******************************/ +[data-theme="high-contrast"] .md-content .admonition-title { + font-size: 0.8rem !important; +} + +[data-theme="high-contrast"] .md-content code:not(.md-code__content) { + background-color: black; + color: white; + border: 1px solid white; +} + +[data-theme="high-contrast"] .md-content table { + border: 2px solid white !important; +} + +[data-theme="high-contrast"] .md-content th { + background-color: black; +} + +[data-theme="high-contrast"] .md-content tr:nth-child(odd) td { + background-color: #0d0d0d; +} + +[data-theme="high-contrast"] .md-content tr:nth-child(even) td { + background-color: black; +} + +[data-theme="high-contrast"] .md-content details, +[data-theme="high-contrast"] .md-content .tip, +[data-theme="high-contrast"] .md-content .admonition { + background-color: black; + color: white; +} + +[data-theme="high-contrast"] .md-content .md-code__content { + border: 2px solid white; + border-radius: 0px !important; + background-color: black; + filter: contrast(2.0); +} + +/************************\ +|* DETAIL BOXES *| +\************************/ + +/* NOTE, ABSTRACT, INFO, TIP - [CYAN] */ +[data-theme="high-contrast"] .md-content :is(details, .admonition) +{ + border: 3px solid !important; + border-radius: 0px; +} + +[data-theme="high-contrast"] .md-content :is(.note, .abstract, .info, .tip) +{ + border-color: #00ffff !important; +} + +[data-theme="high-contrast"] .md-content :is(.note, .abstract, .info, .tip) summary +{ + background-color: #00ffff20 !important; +} + +[data-theme="high-contrast"] .md-content :is(.note, .abstract, .info, .tip) summary::after +{ + color: #00ffff !important; +} + +[data-theme="high-contrast"] .md-content :is(.note, .abstract, .info, .tip) :is(summary, .admonition-title)::before +{ + filter: + brightness(0) + saturate(100%) + invert(94%) + sepia(77%) + saturate(7497%) + hue-rotate(102deg) + brightness(109%) + contrast(101%); +} + +/* SUCCESS, QUESTION [GREEN] */ +[data-theme="high-contrast"] .md-content :is(.success, .question) +{ + border-color: #00ff00 !important; +} + +[data-theme="high-contrast"] .md-content :is(.success, .question) summary +{ + background-color: #00ff0020 !important; +} + +[data-theme="high-contrast"] .md-content :is(.success, .question) summary::after +{ + color: #00ff00 !important; +} + +[data-theme="high-contrast"] .md-content :is(.success, .question) :is(summary, .admonition-title)::before +{ + filter: + brightness(0) + saturate(100%) + invert(72%) + sepia(48%) + saturate(7500%) + hue-rotate(84deg) + brightness(127%) + contrast(115%); +} + +/* WARNING, FAILURE [ORANGE] */ +[data-theme="high-contrast"] .md-content :is(.warning, .failure) +{ + border-color: #ff5b00 !important; +} + +[data-theme="high-contrast"] .md-content :is(.warning, .failure) summary +{ + background-color: #ff5b0020 !important; +} + +[data-theme="high-contrast"] .md-content :is(.warning, .failure) summary::after +{ + color: #ff5b00 !important; +} + +[data-theme="high-contrast"] .md-content :is(.warning, .failure) :is(summary, .admonition-title)::before +{ + filter: + brightness(0) + saturate(100%) + invert(38%) + sepia(49%) + saturate(3030%) + hue-rotate(1deg) + brightness(103%) + contrast(106%); +} + +/* DANGER, BUG [RED] */ +/* WARNING, FAILURE [ORANGE] */ +[data-theme="high-contrast"] .md-content :is(.danger, .bug) +{ + border-color: #ff0000 !important; +} + +[data-theme="high-contrast"] .md-content :is(.danger, .bug) summary +{ + background-color: #ff000020 !important; +} + +[data-theme="high-contrast"] .md-content :is(.danger, .bug) summary::after +{ + color: #ff0000 !important; +} + +[data-theme="high-contrast"] .md-content :is(.danger, .bug) :is(summary, .admonition-title)::before +{ + filter: + brightness(0) + saturate(100%) + invert(16%) + sepia(90%) + saturate(6855%) + hue-rotate(6deg) + brightness(101%) + contrast(124%); +} + +/* EXAMPLE [MAGENTA] */ +[data-theme="high-contrast"] .md-content :is(.example) +{ + border-color: #ff00ff !important; +} + +[data-theme="high-contrast"] .md-content :is(.example) summary +{ + background-color: #ff00ff20 !important; +} + +[data-theme="high-contrast"] .md-content :is(.example) summary::after +{ + color: #ff00ff !important; +} + +[data-theme="high-contrast"] .md-content :is(.example) :is(summary, .admonition-title)::before +{ + filter: + brightness(0) + saturate(100%) + invert(17%) + sepia(75%) + saturate(5424%) + hue-rotate(294deg) + brightness(116%) + contrast(122%); +} + +/* QUOTE [WHITE] */ +[data-theme="high-contrast"] .md-content :is(.quote) +{ + border-color: #ffffff !important; +} + +[data-theme="high-contrast"] .md-content :is(.quote) summary +{ + background-color: #ffffff20 !important; +} + +[data-theme="high-contrast"] .md-content :is(.quote) summary::after +{ + color: #ffffff !important; +} + +[data-theme="high-contrast"] .md-content :is(.quote) :is(summary, .admonition-title)::before +{ + filter: + grayscale() + brightness(2); +} diff --git a/piggy/static/css/themes/light.css b/piggy/static/css/themes/light.css index 0c9bad0..634fb65 100644 --- a/piggy/static/css/themes/light.css +++ b/piggy/static/css/themes/light.css @@ -11,7 +11,7 @@ description: The default light theme. --piggy-dark: rgb(60, 60, 60); /* Darker text for better contrast */ --piggy-text-main: var(--piggy-dark); /* Darker text for readability */ - --piggy-shadow-text: rgba(0, 0, 0, 0.1); /* Slightly darker shadow for better separation */ + --piggy-shadow-text: rgba(0, 0, 0, 0.0); /* No text shadow */ --piggy-shadow-box: #00000011; --piggy-shadow-glow: rgba(0, 0, 0, 0.2); @@ -53,6 +53,9 @@ description: The default light theme. --piggy-menu: var(--piggy-light); --piggy-menu-text: var(--piggy-dark); + + --piggy-text-hyperlink: #316997; + --piggy-text-hyperlink-hover: #316997; } [data-theme="light"] .level-count-container { @@ -62,4 +65,43 @@ description: The default light theme. [data-theme="light"] .settings-option { color: var(--piggy-dark); +} + +/******************************\ +|* MARKDOWN OVERRIDES *| +\******************************/ +[data-theme="light"] .md-content .admonition-title { + font-size: 0.8rem !important; +} + +[data-theme="light"] .md-content code:not(.md-code__content) { + background-color: #c7c7c7; + color: #333; +} + +[data-theme="light"] .md-content .md-code__content { + filter: invert() hue-rotate(230deg) contrast(1.45); +} + +[data-theme="light"] .md-content table { + border: 1px solid #555 !important; +} + +[data-theme="light"] .md-content th { + background-color: #9fbfda; +} + +[data-theme="light"] .md-content tr:nth-child(odd) td { + background-color: #e9e9e9; +} + +[data-theme="light"] .md-content tr:nth-child(even) td { + background-color: #dadada; +} + +[data-theme="light"] .md-content details, +[data-theme="light"] .md-content .tip, +[data-theme="light"] .md-content .admonition { + background-color: #e0e0e0; + color: var(--piggy-dark); } \ No newline at end of file diff --git a/piggy/static/css/themes/piggy-dark.css b/piggy/static/css/themes/piggy-dark.css index 018b8b1..82cfabe 100644 --- a/piggy/static/css/themes/piggy-dark.css +++ b/piggy/static/css/themes/piggy-dark.css @@ -11,7 +11,7 @@ description: A dark pink theme. --piggy-dark: #f0e1e4; /* Light pink for text contrast */ --piggy-text-main: var(--piggy-dark); /* Light text for readability */ - --piggy-shadow-text: rgba(255, 255, 255, 0.1); /* Soft shadow for light text */ + --piggy-shadow-text: rgba(255, 255, 255, 0.025); /* Soft shadow for light text */ --piggy-shadow-box: #ffffff11; --piggy-shadow-glow: rgba(255, 255, 255, 0.2); @@ -53,6 +53,8 @@ description: A dark pink theme. --piggy-menu: var(--piggy-light); --piggy-menu-text: var(--piggy-dark); + + --piggy-text-hyperlink: #407eb1; } [data-theme="piggy-dark"] .level-count-container { diff --git a/piggy/static/css/themes/piggy.css b/piggy/static/css/themes/piggy.css index bcf0e36..0f11f76 100644 --- a/piggy/static/css/themes/piggy.css +++ b/piggy/static/css/themes/piggy.css @@ -10,7 +10,7 @@ description: Relaxing pastel pink theme. --piggy-dark: #4d4d4d; /* Dark gray for text contrast */ --piggy-text-main: var(--piggy-dark); /* Dark text for readability */ - --piggy-shadow-text: rgba(0, 0, 0, 0.1); /* Soft shadow for text */ + --piggy-shadow-text: rgba(0, 0, 0, 0.0); /* No text shadow */ --piggy-shadow-box: #00000011; --piggy-shadow-glow: rgba(0, 0, 0, 0.2); @@ -54,9 +54,50 @@ description: Relaxing pastel pink theme. --piggy-menu: rgb(255, 204, 213); --piggy-menu-text: var(--piggy-dark); + + --piggy-text-hyperlink: #316997; } [data-theme="piggy"] .level-count-container { color: var(--piggy-dark); background-color: var(--piggy-button); +} + +/******************************\ +|* MARKDOWN OVERRIDES *| +\******************************/ +[data-theme="piggy"] .md-content .admonition-title { + font-size: 0.8rem !important; +} + +[data-theme="piggy"] .md-content code:not(.md-code__content) { + background-color: #c7c7c7; + color: #333; +} + +[data-theme="piggy"] .md-content .md-code__content { + filter: invert() contrast(1.2) hue-rotate(275deg); +} + +[data-theme="piggy"] .md-content table { + border: 1px solid #555 !important; +} + +[data-theme="piggy"] .md-content th { + background-color: #ffafdb; +} + +[data-theme="piggy"] .md-content tr:nth-child(odd) td { + background-color: #ffddf0; +} + +[data-theme="piggy"] .md-content tr:nth-child(even) td { + background-color: #ffcce8; +} + +[data-theme="piggy"] .md-content details, +[data-theme="piggy"] .md-content .tip, +[data-theme="piggy"] .md-content .admonition { + background-color: #e0e0e0; + color: var(--piggy-dark); } \ No newline at end of file diff --git a/piggy/static/css/themes/synthwave.css b/piggy/static/css/themes/synthwave.css index 3017fb8..9abde4c 100644 --- a/piggy/static/css/themes/synthwave.css +++ b/piggy/static/css/themes/synthwave.css @@ -14,7 +14,7 @@ description: Fancy sunset, purple, neon, gradients! --piggy-text-light: #ff9b9b; /* Warm pink for accents */ --piggy-text-dark: #ffcb91; /* Sunset orange for text highlights */ - --piggy-shadow-text: #ff8c0080; /* Soft orange shadow */ + --piggy-shadow-text: #ff8c0030; /* Soft orange shadow */ --piggy-shadow-box: #ff004450; /* Pink shadow for box elements */ --piggy-shadow-glow: rgba(255, 140, 0, 0.4); /* Glowing orange sunset effect */ @@ -56,6 +56,8 @@ description: Fancy sunset, purple, neon, gradients! --piggy-menu: var(--piggy-dark); --piggy-menu-text: var(--piggy-light); + + --piggy-text-hyperlink: #b131b6; } [data-theme="synthwave"] .settings-option { diff --git a/piggy/templates/assignments/5-assignment.html b/piggy/templates/assignments/5-assignment.html index 5fdc629..ccbe97e 100644 --- a/piggy/templates/assignments/5-assignment.html +++ b/piggy/templates/assignments/5-assignment.html @@ -3,53 +3,6 @@ {% block head %} {{ super() }} {{ content.head | safe }} - {% endblock %} {% block header %} From a879fc720b6022b4d68a73754d326f92d9cfa957 Mon Sep 17 00:00:00 2001 From: svHvidsten Date: Mon, 30 Sep 2024 10:28:58 +0200 Subject: [PATCH 4/6] Front-end + themes for assignment page mostly done --- piggy/static/css/styles.css | 10 ++ piggy/static/css/themes/classic.css | 48 +++++++++- piggy/static/css/themes/dark.css | 112 ++++++++++++---------- piggy/static/css/themes/high-contrast.css | 4 +- piggy/static/css/themes/light.css | 7 +- piggy/static/css/themes/piggy-dark.css | 41 ++++++++ piggy/static/css/themes/piggy.css | 14 +-- piggy/static/css/themes/synthwave.css | 39 +++++++- 8 files changed, 211 insertions(+), 64 deletions(-) diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css index dcd23da..1daa8c4 100644 --- a/piggy/static/css/styles.css +++ b/piggy/static/css/styles.css @@ -446,6 +446,16 @@ details p:nth-child(2) { line-height: 1rem; } +.md-content details, +.md-content .tip, +.md-content .admonition { + border-radius: 5px !important; +} + +.md-content table { + border-radius: 5px !important; +} + .md-content code { border-radius: 5px !important; } \ No newline at end of file diff --git a/piggy/static/css/themes/classic.css b/piggy/static/css/themes/classic.css index 2ffa77c..d083df2 100644 --- a/piggy/static/css/themes/classic.css +++ b/piggy/static/css/themes/classic.css @@ -53,10 +53,56 @@ description: The classic look of piggy! --piggy-menu: var(--piggy-light); --piggy-menu-text: var(--piggy-dark); - --piggy-text-hyperlink: #316997; + --piggy-text-hyperlink: #458bc4; + --piggy-text-hyperlink-hover: rgb(62, 86, 107); + } [data-theme="classic"] .level-count-container { color: var(--piggy-dark); background-color: var(--piggy-main); +} + +/******************************\ +|* MARKDOWN OVERRIDES *| +\******************************/ +[data-theme="classic"] .md-content .admonition-title { + font-size: 0.8rem !important; +} + +[data-theme="classic"] .md-content code:not(.md-code__content) { + background-color: #d1d1d1; + color: var(--piggy-dark); +} + +[data-theme="classic"] .md-content table code:not(.md-code__content) { + background-color: #cf9eb1; +} + +[data-theme="classic"] .md-content .md-code__content { + filter: invert() contrast(1.25) hue-rotate(270deg); + border: 1px solid #676a74; +} + +[data-theme="classic"] .md-content table { + border: 1px solid #555 !important; +} + +[data-theme="classic"] .md-content th { + background-color: #e0b1c3; +} + +[data-theme="classic"] .md-content tr:nth-child(odd) td { + background-color: #f0d3dd; +} + +[data-theme="classic"] .md-content tr:nth-child(even) td { + background-color: #e9c3d1; +} + +[data-theme="classic"] .md-content details, +[data-theme="classic"] .md-content .tip, +[data-theme="classic"] .md-content .admonition { + background-color: #e0e0e0; + color: var(--piggy-dark); } \ No newline at end of file diff --git a/piggy/static/css/themes/dark.css b/piggy/static/css/themes/dark.css index 37bd8e4..ab1c2fa 100644 --- a/piggy/static/css/themes/dark.css +++ b/piggy/static/css/themes/dark.css @@ -5,58 +5,66 @@ description: The default dark theme. */ [data-theme="dark"] { - /* piggy colors */ - --piggy-main: rgb(34, 41, 47); /* A darker, more muted tone */ - --piggy-light: #f0f4f8; /* A soft off-white */ - --piggy-dark: rgb(51, 61, 71); /* Darker tone with reduced contrast */ - - --piggy-text-main: var(--piggy-light); - --piggy-text-light: var(--piggy-light); - --piggy-text-dark: var(--piggy-dark); - - --piggy-shadow-text: #00000029; /* Softer shadows */ - --piggy-shadow-box: #00000022; - --piggy-shadow-glow: rgba(255, 255, 255, 20%); - - /* piggy card colors */ - --piggy-card-start: rgba(130, 174, 197, 0.3); /* Soft gradient start */ - --piggy-card-end: rgba(48, 73, 90, 0.3); /* Softer end gradient */ - --piggy-card-border: var(--piggy-card-end); - --piggy-text-card: var(--piggy-text-light); - - --piggy-extra-card-start: rgba(27, 82, 153, 0.3); /* Gentle blues */ - --piggy-extra-card-end: rgba(159, 190, 223, 0.3); - --piggy-extra-card-border: var(--piggy-extra-card-start); - --piggy-text-extra-card: #ffffff; - - --piggy-resource-card-start: rgba(212, 195, 98, 0.3); /* Gentle blues */ - --piggy-resource-card-end: rgba(228, 213, 128, 0.3); - --piggy-resource-card-border: var(--piggy-resource-card-start); - --piggy-text-resource-card: #4f4f4f; /* A gentle gray for contrast */ - - --piggy-card-border-width: 1px; - - /* piggy elements */ - --piggy-navbar-start: rgb(51, 61, 71); /* Calmer, less harsh */ - --piggy-navbar-end: rgb(51, 61, 71); /* Muted blue-gray tones */ - --piggy-text-navbar: var(--piggy-light); + /* piggy colors */ + --piggy-main: rgb(34, 41, 47); /* A darker, more muted tone */ + --piggy-light: #f0f4f8; /* A soft off-white */ + --piggy-dark: rgb(51, 61, 71); /* Darker tone with reduced contrast */ + + --piggy-text-main: var(--piggy-light); + --piggy-text-light: var(--piggy-light); + --piggy-text-dark: var(--piggy-dark); - --piggy-button: #4a6783; /* Muted blue */ - --piggy-button-hover: #647a95; /* Slightly brighter hover */ - --piggy-text-button: #ffffff; + --piggy-shadow-text: #00000029; /* Softer shadows */ + --piggy-shadow-box: #00000022; + --piggy-shadow-glow: rgba(255, 255, 255, 20%); + + /* piggy card colors */ + --piggy-card-start: rgba(130, 174, 197, 0.3); /* Soft gradient start */ + --piggy-card-end: rgba(48, 73, 90, 0.3); /* Softer end gradient */ + --piggy-card-border: var(--piggy-card-end); + --piggy-text-card: var(--piggy-text-light); - --piggy-thumbnail-overlay: #00000077; /* Lighter overlay */ - --piggy-text-thumbnail: var(--piggy-light); + --piggy-extra-card-start: rgba(27, 82, 153, 0.3); /* Gentle blues */ + --piggy-extra-card-end: rgba(159, 190, 223, 0.3); + --piggy-extra-card-border: var(--piggy-extra-card-start); + --piggy-text-extra-card: #ffffff; - --piggy-text-tag: #ffffff; - --piggy-text-description: var(--piggy-light); - --piggy-text-title: var(--piggy-light); - --piggy-text-breadcrumb: var(--piggy-light); - --piggy-text-breadcrumb-hover: #a6aaad; - - --piggy-menu: var(--piggy-dark); - --piggy-menu-text: var(--piggy-light); - - --piggy-text-hyperlink: #407eb1; - --piggy-text-hyperlink-hover: #407eb1; - } \ No newline at end of file + --piggy-resource-card-start: rgba(212, 195, 98, 0.3); /* Gentle blues */ + --piggy-resource-card-end: rgba(228, 213, 128, 0.3); + --piggy-resource-card-border: var(--piggy-resource-card-start); + --piggy-text-resource-card: #4f4f4f; /* A gentle gray for contrast */ + + --piggy-card-border-width: 1px; + + /* piggy elements */ + --piggy-navbar-start: rgb(51, 61, 71); /* Calmer, less harsh */ + --piggy-navbar-end: rgb(51, 61, 71); /* Muted blue-gray tones */ + --piggy-text-navbar: var(--piggy-light); + + --piggy-button: #4a6783; /* Muted blue */ + --piggy-button-hover: #647a95; /* Slightly brighter hover */ + --piggy-text-button: #ffffff; + + --piggy-thumbnail-overlay: #00000077; /* Lighter overlay */ + --piggy-text-thumbnail: var(--piggy-light); + + --piggy-text-tag: #ffffff; + --piggy-text-description: var(--piggy-light); + --piggy-text-title: var(--piggy-light); + --piggy-text-breadcrumb: var(--piggy-light); + --piggy-text-breadcrumb-hover: #a6aaad; + + --piggy-menu: var(--piggy-dark); + --piggy-menu-text: var(--piggy-light); + + --piggy-text-hyperlink: #407eb1; + --piggy-text-hyperlink-hover: #407eb1; +} + +[data-theme="dark"] .md-content .md-code__content { + border: 1px solid #474a56; +} + +[data-theme="dark"] .md-content th { + background-color: #4a6783; +} \ No newline at end of file diff --git a/piggy/static/css/themes/high-contrast.css b/piggy/static/css/themes/high-contrast.css index 25210a8..e81aa79 100644 --- a/piggy/static/css/themes/high-contrast.css +++ b/piggy/static/css/themes/high-contrast.css @@ -133,6 +133,8 @@ description: High contrast theme for maximum visibility. background-color: black; color: white; border: 1px solid white; + border-radius: 4px !important; + padding: 1px 5px 1px 5px !important; } [data-theme="high-contrast"] .md-content table { @@ -173,7 +175,7 @@ description: High contrast theme for maximum visibility. [data-theme="high-contrast"] .md-content :is(details, .admonition) { border: 3px solid !important; - border-radius: 0px; + border-radius: 0px !important; } [data-theme="high-contrast"] .md-content :is(.note, .abstract, .info, .tip) diff --git a/piggy/static/css/themes/light.css b/piggy/static/css/themes/light.css index 634fb65..f3a9ab0 100644 --- a/piggy/static/css/themes/light.css +++ b/piggy/static/css/themes/light.css @@ -80,7 +80,8 @@ description: The default light theme. } [data-theme="light"] .md-content .md-code__content { - filter: invert() hue-rotate(230deg) contrast(1.45); + filter: invert() hue-rotate(210deg) contrast(1.45); + border: 1px solid #6d6f78; } [data-theme="light"] .md-content table { @@ -88,7 +89,7 @@ description: The default light theme. } [data-theme="light"] .md-content th { - background-color: #9fbfda; + background-color: #d0d4e8; } [data-theme="light"] .md-content tr:nth-child(odd) td { @@ -102,6 +103,6 @@ description: The default light theme. [data-theme="light"] .md-content details, [data-theme="light"] .md-content .tip, [data-theme="light"] .md-content .admonition { - background-color: #e0e0e0; + background-color: #f4f4f4; color: var(--piggy-dark); } \ No newline at end of file diff --git a/piggy/static/css/themes/piggy-dark.css b/piggy/static/css/themes/piggy-dark.css index 82cfabe..19c7528 100644 --- a/piggy/static/css/themes/piggy-dark.css +++ b/piggy/static/css/themes/piggy-dark.css @@ -55,9 +55,50 @@ description: A dark pink theme. --piggy-menu-text: var(--piggy-dark); --piggy-text-hyperlink: #407eb1; + --piggy-text-hyperlink-hover: #89b8df; } [data-theme="piggy-dark"] .level-count-container { color: var(--piggy-light); background-color: var(--piggy-dark); +} + +/******************************\ +|* MARKDOWN OVERRIDES *| +\******************************/ +[data-theme="piggy-dark"] .md-content .admonition-title { + font-size: 0.8rem !important; +} + +[data-theme="piggy-dark"] .md-content code:not(.md-code__content) { + background-color: #4e3a3e; + color: #dfbfc6; +} + +[data-theme="piggy-dark"] .md-content .md-code__content { + filter: hue-rotate(115deg); + border: 1px solid #676a74; +} + +[data-theme="piggy-dark"] .md-content table { + border: 1px solid #301c1f !important; +} + +[data-theme="piggy-dark"] .md-content th { + background-color: #75434d; +} + +[data-theme="piggy-dark"] .md-content tr:nth-child(odd) td { + background-color: #533037; +} + +[data-theme="piggy-dark"] .md-content tr:nth-child(even) td { + background-color: #42262a; +} + +[data-theme="piggy-dark"] .md-content details, +[data-theme="piggy-dark"] .md-content .tip, +[data-theme="piggy-dark"] .md-content .admonition { + background-color: #271a1d; + color: var(--piggy-dark); } \ No newline at end of file diff --git a/piggy/static/css/themes/piggy.css b/piggy/static/css/themes/piggy.css index 0f11f76..d08e673 100644 --- a/piggy/static/css/themes/piggy.css +++ b/piggy/static/css/themes/piggy.css @@ -55,7 +55,8 @@ description: Relaxing pastel pink theme. --piggy-menu: rgb(255, 204, 213); --piggy-menu-text: var(--piggy-dark); - --piggy-text-hyperlink: #316997; + --piggy-text-hyperlink: #539cd8; + --piggy-text-hyperlink-hover: #316997; } [data-theme="piggy"] .level-count-container { @@ -71,12 +72,13 @@ description: Relaxing pastel pink theme. } [data-theme="piggy"] .md-content code:not(.md-code__content) { - background-color: #c7c7c7; + background-color: #f3cad1; color: #333; } [data-theme="piggy"] .md-content .md-code__content { - filter: invert() contrast(1.2) hue-rotate(275deg); + filter: invert() contrast(1.35) hue-rotate(290deg); + border: 1px solid #676a74; } [data-theme="piggy"] .md-content table { @@ -84,15 +86,15 @@ description: Relaxing pastel pink theme. } [data-theme="piggy"] .md-content th { - background-color: #ffafdb; + background-color: #ffb5c3; } [data-theme="piggy"] .md-content tr:nth-child(odd) td { - background-color: #ffddf0; + background-color: rgb(255, 226, 231); } [data-theme="piggy"] .md-content tr:nth-child(even) td { - background-color: #ffcce8; + background-color: rgb(254, 210, 218); } [data-theme="piggy"] .md-content details, diff --git a/piggy/static/css/themes/synthwave.css b/piggy/static/css/themes/synthwave.css index 9abde4c..14bdb1f 100644 --- a/piggy/static/css/themes/synthwave.css +++ b/piggy/static/css/themes/synthwave.css @@ -57,7 +57,8 @@ description: Fancy sunset, purple, neon, gradients! --piggy-menu: var(--piggy-dark); --piggy-menu-text: var(--piggy-light); - --piggy-text-hyperlink: #b131b6; + --piggy-text-hyperlink: #3190b6; + --piggy-text-hyperlink-hover: #6ab2cf; } [data-theme="synthwave"] .settings-option { @@ -66,4 +67,40 @@ description: Fancy sunset, purple, neon, gradients! [data-theme="synthwave"] #settings-btn { color: var(--piggy-light); +} + +/******************************\ +|* MARKDOWN OVERRIDES *| +\******************************/ +[data-theme="synthwave"] .md-content .admonition-title { + font-size: 0.8rem !important; +} + +[data-theme="synthwave"] .md-content code:not(.md-code__content) { + background-color: #532821; + color: #f5d1c8; +} + +[data-theme="synthwave"] .md-content .md-code__content { + filter: hue-rotate(140deg) contrast(1.2); + border: 1px solid #676a74; +} + +[data-theme="synthwave"] .md-content th { + background-color: #832a1b; +} + +[data-theme="synthwave"] .md-content tr:nth-child(odd) td { + background-color: #49160c; +} + +[data-theme="synthwave"] .md-content tr:nth-child(even) td { + background-color: #5e2015; +} + +[data-theme="synthwave"] .md-content details, +[data-theme="synthwave"] .md-content .tip, +[data-theme="synthwave"] .md-content .admonition { + background-color: #271a1d; + color: var(--piggy-light); } \ No newline at end of file From 69fde2672ca0d9c04bdde38bb0d1c168a8cc8817 Mon Sep 17 00:00:00 2001 From: svHvidsten Date: Mon, 30 Sep 2024 14:57:47 +0200 Subject: [PATCH 5/6] Progress on adding level and language selectors to assignment front-end --- piggy/static/css/styles.css | 107 ++++++++++++++++-- piggy/static/css/themes/classic.css | 5 +- piggy/static/css/themes/dark.css | 9 ++ piggy/static/css/themes/high-contrast.css | 26 ++++- piggy/static/css/themes/light.css | 4 + piggy/static/css/themes/piggy-dark.css | 4 + piggy/static/css/themes/piggy.css | 4 + piggy/static/css/themes/synthwave.css | 4 + piggy/static/js/main.js | 1 - piggy/templates/assignments/5-assignment.html | 43 ++++++- piggy/templates/partials/parts/settings.html | 1 - .../partials/parts/settings/theme.html | 2 +- 12 files changed, 192 insertions(+), 18 deletions(-) diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css index 1daa8c4..19943a9 100644 --- a/piggy/static/css/styles.css +++ b/piggy/static/css/styles.css @@ -204,13 +204,13 @@ h1, h2, h3, h4, h5, h6 { } .piggy-button { - padding: 15px; + padding: 5px 15px 5px 15px; background-color: var(--piggy-button); color: var(--piggy-text-button); border-radius: 5px; } -.piggy-button:hover { +.piggy-button:not(.no-hover):hover { background-color: var(--piggy-button-hover); } @@ -266,6 +266,9 @@ h1, h2, h3, h4, h5, h6 { border-radius: 2rem; } +/***************************\ +|* NAVIGATION MENU *| +\***************************/ .piggy-navbar { background: linear-gradient(90deg, var(--piggy-navbar-start) 0%, var(--piggy-navbar-end) 100%); } @@ -286,7 +289,9 @@ h1, h2, h3, h4, h5, h6 { font-size: var(--piggy-font-size); } -/* Settings Button */ +/*************************\ +|* SETTINGS MENU *| +\*************************/ #settings-btn { background-color: var(--piggy-button); color: var(--piggy-text-button); @@ -372,14 +377,102 @@ h1, h2, h3, h4, h5, h6 { background-color: var(--piggy-button-hover); } +/************************\ +|* LEVEL SELECT *| +\************************/ +#level-container { + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(90deg, var(--piggy-navbar-start) 0%, var(--piggy-navbar-end) 100%); + padding: 10px; + gap: 15px; + border-top: 2px solid var(--piggy-card-start); +} + +/* Level Buttons */ +#level-container .level-button { + position: relative; + border-radius: 5px; + border: 1px solid var(--piggy-dark); +} + +/* Assignment Level Links and Spans */ +#level-container .assignment-level { + color: var(--piggy-text-navbar); + text-decoration: none; + padding: 5px 12px; + border-radius: 5px; + background-color: var(--piggy-button); + transition: background-color 0.3s; + font-weight: bold; + display: inline-block; +} + +/* Hover Effect for Links */ +#level-container .assignment-level:hover { + background-color: var(--piggy-button-hover); +} + +/* Current Level Styling */ +#level-container .active-level-button .assignment-level { + background-color: var(--piggy-button-active); + cursor: default; +} + +/* Tooltip Text */ +#level-container .nav-tooltip { + visibility: hidden; + width: max-content; + max-width: 200px; + background-color: var(--piggy-tooltip); + color: var(--piggy-tooltip-text); + text-align: center; + padding: 8px; + border-radius: 6px; + position: absolute; + z-index: 1; + bottom: -50px; + left: 50%; + transform: translateX(-50%); + opacity: 0; + transition: opacity 0.3s; + pointer-events: none; +} + +/* Tooltip Arrow */ +#level-container .nav-tooltip::after { + content: ''; + position: absolute; + top: -5px; + left: 50%; + transform: translateX(-50%); + border-width: 5px; + border-style: solid; + border-color: transparent transparent var(--piggy-tooltip) transparent; +} + /* Show Tooltip on Hover */ -.theme-option:hover .theme-tooltiptext { +#level-container .level-button:hover .nav-tooltip { visibility: visible; + opacity: 1; +} + +/* Responsive Adjustments */ +@media (max-width: 600px) { + #level-container { + flex-wrap: wrap; + gap: 10px; + } + + #level-container .nav-tooltip { + bottom: -60px; + } } -/****************************\ -|* MARKDOWN STYLING *| -\****************************/ +/******************************\ +|* MARKDOWN OVERRIDES *| +\******************************/ .md-container a { color: var(--piggy-text-hyperlink) !important; diff --git a/piggy/static/css/themes/classic.css b/piggy/static/css/themes/classic.css index d083df2..b5b098c 100644 --- a/piggy/static/css/themes/classic.css +++ b/piggy/static/css/themes/classic.css @@ -39,6 +39,7 @@ description: The classic look of piggy! --piggy-button: #c099a8; --piggy-button-hover: #ddb2c2; + --piggy-button-active: rgb(241, 127, 138); /* Slightly more colored active color */ --piggy-text-button: var(--piggy-dark); --piggy-thumbnail-overlay: rgba(255, 255, 255, 0.7); @@ -53,9 +54,11 @@ description: The classic look of piggy! --piggy-menu: var(--piggy-light); --piggy-menu-text: var(--piggy-dark); + --piggy-tooltip: #000000; + --piggy-tooltip-text: #ffffff; + --piggy-text-hyperlink: #458bc4; --piggy-text-hyperlink-hover: rgb(62, 86, 107); - } [data-theme="classic"] .level-count-container { diff --git a/piggy/static/css/themes/dark.css b/piggy/static/css/themes/dark.css index ab1c2fa..9a16051 100644 --- a/piggy/static/css/themes/dark.css +++ b/piggy/static/css/themes/dark.css @@ -43,6 +43,7 @@ description: The default dark theme. --piggy-button: #4a6783; /* Muted blue */ --piggy-button-hover: #647a95; /* Slightly brighter hover */ + --piggy-button-active: #2a5d9b; /* Slightly more colored active color */ --piggy-text-button: #ffffff; --piggy-thumbnail-overlay: #00000077; /* Lighter overlay */ @@ -57,6 +58,9 @@ description: The default dark theme. --piggy-menu: var(--piggy-dark); --piggy-menu-text: var(--piggy-light); + --piggy-tooltip: #000000; + --piggy-tooltip-text: #ffffff; + --piggy-text-hyperlink: #407eb1; --piggy-text-hyperlink-hover: #407eb1; } @@ -65,6 +69,11 @@ description: The default dark theme. border: 1px solid #474a56; } +[data-theme="dark"] .md-content code:not(.md-code__content) { + background-color: #3a3c42; + color: #dddddd; +} + [data-theme="dark"] .md-content th { background-color: #4a6783; } \ No newline at end of file diff --git a/piggy/static/css/themes/high-contrast.css b/piggy/static/css/themes/high-contrast.css index e81aa79..5362a88 100644 --- a/piggy/static/css/themes/high-contrast.css +++ b/piggy/static/css/themes/high-contrast.css @@ -36,6 +36,7 @@ description: High contrast theme for maximum visibility. --piggy-button: #000; /* Bright red-orange button */ --piggy-button-hover: #999; /* Brighter hover */ + --piggy-button-active: #00ffff80; /* Brighter hover */ --piggy-text-button: #fff; /* White text */ --piggy-thumbnail-overlay: rgba(0, 0, 0, 1); /* Light overlay */ @@ -49,14 +50,17 @@ description: High contrast theme for maximum visibility. --piggy-text-hyperlink: #00ffff; --piggy-text-hyperlink-hover: #99ffff; + + --piggy-tooltip: #000000; + --piggy-tooltip-text: #ffffff; } -[data-theme="high-contrast" ] .card-container { +[data-theme="high-contrast"] .card-container { border-radius: 0px; margin: 5px; } -[data-theme="high-contrast" ] .thumbnail-image { +[data-theme="high-contrast"] .thumbnail-image { border-radius: 0px; border-width: var(--piggy-card-border-width); border-color: #ff0000; @@ -64,7 +68,7 @@ description: High contrast theme for maximum visibility. padding: 5px; } -[data-theme="high-contrast" ] .thumbnail-text-overlay { +[data-theme="high-contrast"] .thumbnail-text-overlay { border-radius: 0px; border-width: var(--piggy-card-border-width); border-color: #00ff00; @@ -72,20 +76,29 @@ description: High contrast theme for maximum visibility. margin-top: 5px; } -[data-theme="high-contrast" ] .tag-box { +[data-theme="high-contrast"] .tag-box { border-radius: 0px; border-width: var(--piggy-card-border-width); margin-top: 5px; } -[data-theme="high-contrast" ] .piggy-navbar { +[data-theme="high-contrast"] .piggy-navbar, +[data-theme="high-contrast"] #level-container { border-bottom: var(--piggy-card-border-width) solid white; } -[data-theme="high-contrast" ] .piggy-button { +[data-theme="high-contrast"] .piggy-button, +[data-theme="high-contrast"] .assignment-level { border-width: var(--piggy-card-border-width); + border-radius: 0px !important; +} + +[data-theme="high-contrast"] .level-button { + border-radius: 0px !important; + border-width: 0px; } + [data-theme="high-contrast"] .level-count-container { border-radius: 0px; border-width: 4px; @@ -139,6 +152,7 @@ description: High contrast theme for maximum visibility. [data-theme="high-contrast"] .md-content table { border: 2px solid white !important; + border-radius: 0px !important; } [data-theme="high-contrast"] .md-content th { diff --git a/piggy/static/css/themes/light.css b/piggy/static/css/themes/light.css index f3a9ab0..5ed77b9 100644 --- a/piggy/static/css/themes/light.css +++ b/piggy/static/css/themes/light.css @@ -40,6 +40,7 @@ description: The default light theme. --piggy-button: #d0d4e8; /* Soft pastel blue button */ --piggy-button-hover: #b2b8d4; /* Slightly darker hover */ + --piggy-button-active: #96beee; /* Slightly more colored active color */ --piggy-text-button: #333333; --piggy-thumbnail-overlay: rgba(255, 255, 255, 0.7); /* Softer overlay */ @@ -54,6 +55,9 @@ description: The default light theme. --piggy-menu: var(--piggy-light); --piggy-menu-text: var(--piggy-dark); + --piggy-tooltip: #000000; + --piggy-tooltip-text: #ffffff; + --piggy-text-hyperlink: #316997; --piggy-text-hyperlink-hover: #316997; } diff --git a/piggy/static/css/themes/piggy-dark.css b/piggy/static/css/themes/piggy-dark.css index 19c7528..c430e1b 100644 --- a/piggy/static/css/themes/piggy-dark.css +++ b/piggy/static/css/themes/piggy-dark.css @@ -40,6 +40,7 @@ description: A dark pink theme. --piggy-button: #a06672; /* Dark pink button */ --piggy-button-hover: #c0858e; /* Lighter pink on hover */ + --piggy-button-active: #d37381; /* Slightly more colored active color */ --piggy-text-button: #ffffff; /* White button text */ --piggy-thumbnail-overlay: rgba(0, 0, 0, 0.5); /* Dark overlay */ @@ -54,6 +55,9 @@ description: A dark pink theme. --piggy-menu: var(--piggy-light); --piggy-menu-text: var(--piggy-dark); + --piggy-tooltip: #000000; + --piggy-tooltip-text: #ffffff; + --piggy-text-hyperlink: #407eb1; --piggy-text-hyperlink-hover: #89b8df; } diff --git a/piggy/static/css/themes/piggy.css b/piggy/static/css/themes/piggy.css index d08e673..f95eac5 100644 --- a/piggy/static/css/themes/piggy.css +++ b/piggy/static/css/themes/piggy.css @@ -39,6 +39,7 @@ description: Relaxing pastel pink theme. --piggy-button: #ff99ac; /* Pink button */ --piggy-button-hover: #ff7381; /* Darker pink on hover */ + --piggy-button-active: #f86f7d; /* Slightly more colored active color */ --piggy-text-button: #ffffff; /* White button text */ --piggy-thumbnail-overlay: rgba(255, 226, 232, 0.7); /* Light overlay */ @@ -55,6 +56,9 @@ description: Relaxing pastel pink theme. --piggy-menu: rgb(255, 204, 213); --piggy-menu-text: var(--piggy-dark); + --piggy-tooltip: #000000; + --piggy-tooltip-text: #ffffff; + --piggy-text-hyperlink: #539cd8; --piggy-text-hyperlink-hover: #316997; } diff --git a/piggy/static/css/themes/synthwave.css b/piggy/static/css/themes/synthwave.css index 14bdb1f..b547975 100644 --- a/piggy/static/css/themes/synthwave.css +++ b/piggy/static/css/themes/synthwave.css @@ -43,6 +43,7 @@ description: Fancy sunset, purple, neon, gradients! --piggy-button: #ff6347; /* Sunset red-orange */ --piggy-button-hover: #ff8364; /* Lighter orange for hover */ + --piggy-button-active: #d33417; /* Slightly more colored active color */ --piggy-text-button: #333; --piggy-thumbnail-overlay: #00000099; /* Dark overlay for vivid highlights */ @@ -57,6 +58,9 @@ description: Fancy sunset, purple, neon, gradients! --piggy-menu: var(--piggy-dark); --piggy-menu-text: var(--piggy-light); + --piggy-tooltip: #000000; + --piggy-tooltip-text: #ffffff; + --piggy-text-hyperlink: #3190b6; --piggy-text-hyperlink-hover: #6ab2cf; } diff --git a/piggy/static/js/main.js b/piggy/static/js/main.js index 0f5a82d..82879e5 100644 --- a/piggy/static/js/main.js +++ b/piggy/static/js/main.js @@ -41,7 +41,6 @@ function toggleDyslexia() { } pageTransition(); - } // Set the current theme on page load diff --git a/piggy/templates/assignments/5-assignment.html b/piggy/templates/assignments/5-assignment.html index ccbe97e..c56aab8 100644 --- a/piggy/templates/assignments/5-assignment.html +++ b/piggy/templates/assignments/5-assignment.html @@ -6,7 +6,48 @@ {% endblock %} {% block header %} -

{{ content.heading }}

+
+ {# + TODO: + - difficulty? nah + - Level Select + - Button menu? + - Tabs? + - Language Select + - Dropdown menu? -> probably + - Button menu? + #} + + +
+ +

{{ content.heading }}

{% endblock %} {% block base %} diff --git a/piggy/templates/partials/parts/settings.html b/piggy/templates/partials/parts/settings.html index 6b34477..f710c66 100644 --- a/piggy/templates/partials/parts/settings.html +++ b/piggy/templates/partials/parts/settings.html @@ -12,6 +12,5 @@

Other Options:

{% include 'partials/parts/settings/dyslexia.html' %} - diff --git a/piggy/templates/partials/parts/settings/theme.html b/piggy/templates/partials/parts/settings/theme.html index b957c66..5ed650a 100644 --- a/piggy/templates/partials/parts/settings/theme.html +++ b/piggy/templates/partials/parts/settings/theme.html @@ -2,7 +2,7 @@

Theme:

\ No newline at end of file From 5221269c1518a335d007b2e0a686d49941502e9d Mon Sep 17 00:00:00 2001 From: svHvidsten Date: Mon, 30 Sep 2024 20:50:04 +0200 Subject: [PATCH 6/6] Made proper front-end for main assignment page, resolves #40 --- piggy/static/css/styles.css | 139 ++++++++++++++++-- piggy/static/css/themes/high-contrast.css | 60 +++++++- piggy/static/js/main.js | 2 +- piggy/templates/assignments/5-assignment.html | 27 +++- piggy/templates/partials/parts/settings.html | 2 +- piggybank | 2 +- 6 files changed, 211 insertions(+), 21 deletions(-) diff --git a/piggy/static/css/styles.css b/piggy/static/css/styles.css index 19943a9..15e13e5 100644 --- a/piggy/static/css/styles.css +++ b/piggy/static/css/styles.css @@ -1,3 +1,14 @@ +/* + SOMEWHAT TEMP 30.09.2024 + + TODO: + - Fix spaghetti with classes. + - A lot of the buttons have their own styling instead of having the same class, + which there already is one: .piggy-button + - I am sure there are some redundant styling classes, but at this point, there + is so much spaghetti I can't even bother. +*/ + :root { --piggy-font-size: var(15px); @@ -380,14 +391,19 @@ h1, h2, h3, h4, h5, h6 { /************************\ |* LEVEL SELECT *| \************************/ -#level-container { +#meta-container { display: flex; - justify-content: center; align-items: center; background: linear-gradient(90deg, var(--piggy-navbar-start) 0%, var(--piggy-navbar-end) 100%); + border-top: 2px solid var(--piggy-card-start); +} + +#level-container { padding: 10px; gap: 15px; - border-top: 2px solid var(--piggy-card-start); + display: flex; + justify-content: center; + align-items: center; } /* Level Buttons */ @@ -428,11 +444,11 @@ h1, h2, h3, h4, h5, h6 { background-color: var(--piggy-tooltip); color: var(--piggy-tooltip-text); text-align: center; - padding: 8px; + padding: 5px 10px 5px 10px; border-radius: 6px; position: absolute; z-index: 1; - bottom: -50px; + bottom: -40px; left: 50%; transform: translateX(-50%); opacity: 0; @@ -444,10 +460,10 @@ h1, h2, h3, h4, h5, h6 { #level-container .nav-tooltip::after { content: ''; position: absolute; - top: -5px; + top: -12px; left: 50%; transform: translateX(-50%); - border-width: 5px; + border-width: 6px; border-style: solid; border-color: transparent transparent var(--piggy-tooltip) transparent; } @@ -470,6 +486,75 @@ h1, h2, h3, h4, h5, h6 { } } +/***************************\ +|* LANGUAGE BUTTON *| +\***************************/ +#language-container { + position: relative; + margin: 10px 25px 10px 10px; /* Optional margin */ + z-index: 1000; /* Ensure it stays above other content */ +} + +#language-container .dropbtn { + background-color: var(--piggy-button); + color: var(--piggy-text-navbar); + padding: 5px 12px; + border: none; + cursor: pointer; + transition: background-color 0.3s; + width: 100%; + border-radius: 5px; + border: 1px solid var(--piggy-dark); +} + +/* Hover Effect for Links */ +#language-container .dropbtn:hover { + background-color: var(--piggy-button-hover); +} + +#language-container .language-dropdown { + width: 100%; + display: none; + position: absolute; + background-color: var(--piggy-menu); + min-width: 160px; + box-shadow: 0px 8px 16px 0px var(--piggy-shadow-box); + border-radius: 5px; + top: 100%; /* Position the dropdown below the button */ + left: 0; + z-index: 1000; +} + +#language-container .language-dropdown a { + color: var(--piggy-menu-text); + padding: 8px 16px; + text-decoration: none; + border-radius: 0px; + display: block; + border-bottom: 1px solid var(--piggy-main); + cursor: pointer; +} + +#language-container .language-dropdown a:last-child { + border-bottom: none; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} + +#language-container .language-dropdown a:first-child { + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +#language-container .language-dropdown a:hover { + background-color: var(--piggy-button-hover); + color: var(--piggy-text-button); +} + +#language-container:hover .language-dropdown { + display: block; +} + /******************************\ |* MARKDOWN OVERRIDES *| \******************************/ @@ -517,9 +602,38 @@ details p:nth-child(2) { padding: initial; } +.md-content h1, +.md-content h2, +.md-content h3, +.md-content h4, +.md-content h5, +.md-content h6 { + font-weight: bold !important; + margin-top: 1.35rem !important; + margin-bottom: 0.25rem !important; +} + +.md-content h1 { + font-size: 2rem !important; +} + +.md-content h2 { + font-size: 1.5rem !important; +} .md-content h3 { - margin: 1.6em 0 -0.5em; - margin-block-end: initial; + font-size: 1.25rem !important; +} + +.md-content h4 { + font-size: 1.15rem !important; +} + +.md-content h5 { + font-size: 1.05rem !important; +} + +.md-content h6 { + font-size: 1.00rem !important; } .md-content p { @@ -551,4 +665,11 @@ details p:nth-child(2) { .md-content code { border-radius: 5px !important; + line-height: 1.1rem; +} + +.md-content summary { + padding-top: 0.6rem !important; + padding-bottom: 0.6rem !important; + font-size: 1rem !important; } \ No newline at end of file diff --git a/piggy/static/css/themes/high-contrast.css b/piggy/static/css/themes/high-contrast.css index 5362a88..4283037 100644 --- a/piggy/static/css/themes/high-contrast.css +++ b/piggy/static/css/themes/high-contrast.css @@ -82,23 +82,34 @@ description: High contrast theme for maximum visibility. margin-top: 5px; } -[data-theme="high-contrast"] .piggy-navbar, -[data-theme="high-contrast"] #level-container { +[data-theme="high-contrast"] .piggy-navbar { border-bottom: var(--piggy-card-border-width) solid white; } -[data-theme="high-contrast"] .piggy-button, -[data-theme="high-contrast"] .assignment-level { +[data-theme="high-contrast"] #meta-container { + border-bottom: var(--piggy-card-border-width) solid white; +} + +[data-theme="high-contrast"] .piggy-button { border-width: var(--piggy-card-border-width); border-radius: 0px !important; } +[data-theme="high-contrast"] .assignment-level { + border-width: 2px; + border-radius: 0px !important; +} + +[data-theme="high-contrast"] .dropbtn { + border-width: 3px !important; + border-radius: 0px !important; +} + [data-theme="high-contrast"] .level-button { border-radius: 0px !important; border-width: 0px; } - [data-theme="high-contrast"] .level-count-container { border-radius: 0px; border-width: 4px; @@ -135,6 +146,45 @@ description: High contrast theme for maximum visibility. border-width: 3px; } +/* Tooltip Text */ +[data-theme="high-contrast"] #level-container .nav-tooltip { + border-radius: 0px; + border-color: white; + border-width: 1px; +} + +/* Tooltip Text */ +[data-theme="high-contrast"] #level-container .nav-tooltip::after { + border-width: 0; +} + +[data-theme="high-contrast"] #language-container .dropbtn { + border-radius: 0px; + border-width: 1px; + background-color: black; +} + +[data-theme="high-contrast"] #language-container .language-dropdown { + border-radius: 0px; + border-width: 1px; + background-color: black; +} + +[data-theme="high-contrast"] #language-container .language-dropdown a { + border-bottom: 1px solid white; +} + +[data-theme="high-contrast"] #language-container .language-dropdown a:last-child { + border-bottom: none; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} + +[data-theme="high-contrast"] #language-container .language-dropdown a:first-child { + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} + /******************************\ |* MARKDOWN OVERRIDES *| \******************************/ diff --git a/piggy/static/js/main.js b/piggy/static/js/main.js index 82879e5..5f736d7 100644 --- a/piggy/static/js/main.js +++ b/piggy/static/js/main.js @@ -33,7 +33,7 @@ function toggleDyslexia() { if (fontTheme === "default") { document.documentElement.setAttribute('data-font-theme', 'dyslexia'); localStorage.setItem('data-font-theme', 'dyslexia'); // Save theme to localStorage - dyslexiaBtn.innerHTML = "Dyslexia Friendly Mode [✔]" + dyslexiaBtn.innerHTML = "Dyslexia Friendly Mode [✅]" } else { document.documentElement.setAttribute('data-font-theme', 'default'); localStorage.setItem('data-font-theme', 'default'); // Save theme to localStorage diff --git a/piggy/templates/assignments/5-assignment.html b/piggy/templates/assignments/5-assignment.html index c56aab8..00a1515 100644 --- a/piggy/templates/assignments/5-assignment.html +++ b/piggy/templates/assignments/5-assignment.html @@ -6,7 +6,7 @@ {% endblock %} {% block header %} -
+
{# TODO: - difficulty? nah @@ -17,6 +17,26 @@ - Dropdown menu? -> probably - Button menu? #} + +
+ +
+ {% for lang, val in supported_languages.items() %} + + {{ val.name }} + + {% endfor %} +
+
+
- -

{{ content.heading }}

{% endblock %} - + {% block base %} +

{{ content.heading }}

{{ content.body | safe }} {% endblock %} \ No newline at end of file diff --git a/piggy/templates/partials/parts/settings.html b/piggy/templates/partials/parts/settings.html index f710c66..4b2f336 100644 --- a/piggy/templates/partials/parts/settings.html +++ b/piggy/templates/partials/parts/settings.html @@ -1,5 +1,5 @@ diff --git a/piggybank b/piggybank index efad33c..2614f06 160000 --- a/piggybank +++ b/piggybank @@ -1 +1 @@ -Subproject commit efad33caf05953465928e1274134b0423ac4f4f5 +Subproject commit 2614f06e296b42bf002861ac36b8f25332f5cbe4