From 9b9d4ec4acb8f7bb0724252aeb8fa004c7231921 Mon Sep 17 00:00:00 2001 From: cailean Date: Tue, 6 Aug 2024 11:54:00 +0100 Subject: [PATCH] huge update --- public/css/styles.css | 140 +++++++++++++++++++++++++-------------- templates/_nav.html | 4 +- templates/article.html | 50 +++++++------- templates/list.html | 6 +- templates/locations.html | 1 + 5 files changed, 122 insertions(+), 79 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index 58ed579..01548fd 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -23,6 +23,11 @@ body { background-repeat: repeat-x; } +::-webkit-scrollbar { + width: 0px; + background: transparent; /* make scrollbar transparent */ +} + p { margin: 0; } @@ -39,7 +44,7 @@ hr { margin: 0; padding: 0; border: 0; - border-top: medium solid #0075FF; + border-top: thin solid #0075FF; } #main-wrapper { @@ -56,13 +61,14 @@ hr { justify-content: space-between; padding-left: 50px; padding-right: 50px; - padding-top: 40px; - padding-bottom: 40px; + padding-top: 25px; + padding-bottom: 25px; } .nav-element { - font-size: 40px; - font-family: 'Syne Mono', monospace; + font-size: 30px; + font-family: 'Inter', sans-serif; + font-weight: 300; color: #0075FF; } @@ -72,7 +78,7 @@ hr { } #main-container { - padding-top: 50px; + padding-top: 25px; display: flex; flex-direction: column; gap: 50px; @@ -86,7 +92,7 @@ hr { #index-container { display: flex; - padding-top: 50px; + padding-top: 0px; flex-direction: row; gap: 50px; padding-bottom: 50px; @@ -101,12 +107,16 @@ hr { flex-basis: 55%; display: flex; flex-direction: column; - gap: 50px; + gap: 25px; + padding-top: 25px; + } #index-info p{ - font-size: 20px; - line-height: 40px; + font-size: 18px; + line-height: 30px; + text-align: justify; + text-indent: 2rem; } #container-index { @@ -134,7 +144,7 @@ hr { display: flex; flex-direction: row; gap: 25px; - font-size: 30px; + font-size: 20px; color:#ffffff; font-weight: 400; } @@ -212,8 +222,8 @@ hr { .list { display: flex; flex-direction: column; - width: 600px; - height: 500px; + width: 400px; + height: 300px; gap:10px; } @@ -250,14 +260,14 @@ hr { } .list-title { - font-size: 30px; + font-size: 20px; color: #0075FF; - font-weight: 600; - font-family: 'Syne Mono', monospace; + font-weight: 500; + font-family: 'Inter', sans-serif } .list-details { - font-size: 20px; + font-size: 15px; color: black; display: flex; flex-direction: row; @@ -265,12 +275,12 @@ hr { row-gap: 5px; column-gap: 20px; flex-wrap: wrap; - font-family: 'Syne Mono', monospace; + font-family: 'Inter', sans-serif; } .list-artists { - font-size: 20px; - font-family: 'Syne Mono', monospace; + font-size: 15px; + font-family: 'Inter', sans-serif; color: black; display: flex; flex-wrap: wrap; @@ -283,11 +293,11 @@ hr { padding-top: 20px; padding-bottom: 20px; padding-left: 50px; - font-size: 30px; + font-size: 20px; gap: 20px; - height: 100px; + height: fit-content; color: #0075FF; - align-items: center; + align-items: start; overflow-x: scroll; overflow-y: hidden; } @@ -304,18 +314,30 @@ hr { display: flex; flex-direction: row; gap:10px; - font-family: 'Syne Mono', monospace; + font-family: 'Inter', sans-serif; } .page-info-title { - font-size: 30px; - font-weight: 500; + font-size: 20px; + font-weight: 400; +} + +#article-stats { + display: flex; + flex-direction: row; + gap: 10px 15px; + flex-wrap: wrap; } .page-info-entry { color: black; - font-size: 30px; + font-size: 20px; + font-weight: 300; +} + +#article-sep { + color: #0075FF; } #article-container { @@ -342,12 +364,12 @@ hr { flex: 4; display: flex; flex-direction: column; - gap: 40px; - font-size: 26px; - line-height: 40px; + gap: 20px; + font-size: 20px; + line-height: 25px; width: 100%; padding-left: 50px; - padding-top: 50px; + padding-top: 25px; overflow-y: scroll; } @@ -356,26 +378,32 @@ hr { } #article-information { - font-size: 20px; + font-size: 18px; + text-align: justify; + text-indent: 2rem; } #article-title { - font-size: 40px; - font-family: 'Syne Mono', monospace; + font-size: 25px; + font-family: 'Inter', sans-serif; color: #0075FF; + text-transform: uppercase; } #article-book { - font-size: 30px; - font-family: 'Syne Mono', monospace; + font-size: 25px; + padding-top: 20px; + font-family: 'Inter', sans-serif; color: #0075FF; - margin-bottom: 25px; + margin-bottom: 50px; width: fit-content; + text-transform: uppercase; } #article-artists { - font-family: 'Syne Mono', monospace; + font-family: 'Inter', sans-serif; color: #0075FF; + text-transform: uppercase; } #container-article { @@ -404,12 +432,13 @@ hr { flex-shrink: 0; /* Do not shrink below the flex-basis */ background-color: white; flex-direction: column; - padding-top: 50px; - gap: 50px; + padding-top: 25px; + gap: 25px; } #location-button-list { padding-left: 50px; + padding-right: 50px; display: flex; flex-direction: row; flex-wrap: wrap; @@ -450,7 +479,7 @@ hr { .location-button { - font-size: 30px; + font-size: 20px; border: 1px solid; border-radius: 30px; padding: 10px; @@ -463,7 +492,12 @@ hr { } #location-text { - font-size: 30px; + font-size: 20px; + padding: 10px; +} + +#location-sep { + font-size: 20px; padding: 10px; } @@ -546,11 +580,16 @@ animation: 2s fadeInUp; /* Mobile breakpoint (less than 768px) */ @media (max-width: 768px) { + #article-sep { + text-align: center; + padding-top: 10px; + padding-bottom: 10px; + } + #main-container-locations { flex-direction: column; height: auto; flex: 1; - overflow-y: scroll; } #location-list { @@ -560,7 +599,7 @@ animation: 2s fadeInUp; flex-shrink: 0; overflow-y: scroll; flex-basis: 60%; - justify-content: space-around; + justify-content: space-evenly; } #location-images { @@ -589,6 +628,7 @@ animation: 2s fadeInUp; #location-button-list { padding-left: 0px; + padding-right: 0px; gap: 5px 5px; justify-content: center; } @@ -597,6 +637,8 @@ animation: 2s fadeInUp; order: 2; flex-basis: 0%; flex-direction: column-reverse; + padding-top: 0px; + } #container-index { @@ -605,8 +647,8 @@ animation: 2s fadeInUp; } #index-info p{ - font-size: 18px; - line-height: 40px; + font-size: 16px; + line-height: 25px; text-align: justify; } @@ -615,7 +657,7 @@ animation: 2s fadeInUp; padding-left: 25px; padding-right: 25px; padding-top: 0px; - gap:20px; + gap: 0px; } #nav-bar { @@ -656,7 +698,7 @@ animation: 2s fadeInUp; } #hyperlink-container { - font-size: 24px; + font-size: 20px; flex-direction: column; width: 100%; padding-left: 0px; @@ -729,7 +771,7 @@ animation: 2s fadeInUp; } #article-book { - font-size: 25px; + font-size: 20px; } #page-header { diff --git a/templates/_nav.html b/templates/_nav.html index df795ef..d842683 100644 --- a/templates/_nav.html +++ b/templates/_nav.html @@ -1,5 +1,5 @@ -
\ No newline at end of file +
diff --git a/templates/article.html b/templates/article.html index 188df19..a49fc13 100644 --- a/templates/article.html +++ b/templates/article.html @@ -11,6 +11,31 @@
{{ article.title }}
{{ article.artists | join(', ') }}
+
+ {% for article in content %} + {% if article.dates %} +
+
Date(s):
+
{{ article.dates | join(', ') }}
+
+ {% endif %} + {% if article.times%} +
+
Time(s):
+
{{ article.times | join(', ') }}
+
+ {% endif %} +
+
Location(s):
+
{{ article.location[0] }}
+
+ + {% endfor %} +
+ ˗ˏˋ ★ ˎˊ˗
{{ article.information }}
{% if article.bookUrl %}
↳ Book
 @@ -22,31 +47,6 @@
{% endfor %} -
-
- {% for article in content %} - {% if article.dates %} -
-
/ Date:
-
{{ article.dates | join(', ') }}
-
- {% endif %} - {% if article.times%} -
-
/ Time:
-
{{ article.times | join(', ') }}
-
- {% endif %} -
-
/ Location:
-
{{ article.location[0] }}
-
- - {% endfor %} -
diff --git a/templates/list.html b/templates/list.html index 112c26c..149eaa7 100644 --- a/templates/list.html +++ b/templates/list.html @@ -17,12 +17,12 @@
- {{ event.title }} + {{ event.title }}
-
☉ {{ event.title }}
+
{{ event.title }}
-

[{{ event.artists | join(', ') }}]

+

{{ event.artists | join(', ') }}

{% if event.dates %} diff --git a/templates/locations.html b/templates/locations.html index 5afcc1b..a88dc9b 100644 --- a/templates/locations.html +++ b/templates/locations.html @@ -17,6 +17,7 @@
Pallas Projects
+ ˗ˏˋ ★ ˎˊ˗
10-13 Thomas Street