cailean
/
beta-2024
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

huge update

graphics
cailean 5 months ago
parent
9b39cee704
commit
9b9d4ec4ac
5 changed files with 122 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 140
      public/css/styles.css
  2. 2
      templates/_nav.html
  3. 50
      templates/article.html
  4. 6
      templates/list.html
  5. 1
      templates/locations.html

140
public/css/styles.css
View File

@ -23,6 +23,11 @@ body {
background-repeat: repeat-x; background-repeat: repeat-x;
} }
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
p { p {
margin: 0; margin: 0;
} }
@ -39,7 +44,7 @@ hr {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
border-top: medium solid #0075FF; border-top: thin solid #0075FF;
} }
#main-wrapper { #main-wrapper {
@ -56,13 +61,14 @@ hr {
justify-content: space-between; justify-content: space-between;
padding-left: 50px; padding-left: 50px;
padding-right: 50px; padding-right: 50px;
padding-top: 40px; padding-top: 25px;
padding-bottom: 40px; padding-bottom: 25px;
} }
.nav-element { .nav-element {
font-size: 40px; font-size: 30px;
font-family: 'Syne Mono', monospace; font-family: 'Inter', sans-serif;
font-weight: 300;
color: #0075FF; color: #0075FF;
} }
@ -72,7 +78,7 @@ hr {
} }
#main-container { #main-container {
padding-top: 50px; padding-top: 25px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 50px; gap: 50px;
@ -86,7 +92,7 @@ hr {
#index-container { #index-container {
display: flex; display: flex;
padding-top: 50px; padding-top: 0px;
flex-direction: row; flex-direction: row;
gap: 50px; gap: 50px;
padding-bottom: 50px; padding-bottom: 50px;
@ -101,12 +107,16 @@ hr {
flex-basis: 55%; flex-basis: 55%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 50px; gap: 25px;
padding-top: 25px;
} }
#index-info p{ #index-info p{
font-size: 20px; font-size: 18px;
line-height: 40px; line-height: 30px;
text-align: justify;
text-indent: 2rem;
} }
#container-index { #container-index {
@ -134,7 +144,7 @@ hr {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 25px; gap: 25px;
font-size: 30px; font-size: 20px;
color:#ffffff; color:#ffffff;
font-weight: 400; font-weight: 400;
} }
@ -212,8 +222,8 @@ hr {
.list { .list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 600px; width: 400px;
height: 500px; height: 300px;
gap:10px; gap:10px;
} }
@ -250,14 +260,14 @@ hr {
} }
.list-title { .list-title {
font-size: 30px; font-size: 20px;
color: #0075FF; color: #0075FF;
font-weight: 600; font-weight: 500;
font-family: 'Syne Mono', monospace; font-family: 'Inter', sans-serif
} }
.list-details { .list-details {
font-size: 20px; font-size: 15px;
color: black; color: black;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -265,12 +275,12 @@ hr {
row-gap: 5px; row-gap: 5px;
column-gap: 20px; column-gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
font-family: 'Syne Mono', monospace; font-family: 'Inter', sans-serif;
} }
.list-artists { .list-artists {
font-size: 20px; font-size: 15px;
font-family: 'Syne Mono', monospace; font-family: 'Inter', sans-serif;
color: black; color: black;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -283,11 +293,11 @@ hr {
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
padding-left: 50px; padding-left: 50px;
font-size: 30px; font-size: 20px;
gap: 20px; gap: 20px;
height: 100px; height: fit-content;
color: #0075FF; color: #0075FF;
align-items: center; align-items: start;
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
} }
@ -304,18 +314,30 @@ hr {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap:10px; gap:10px;
font-family: 'Syne Mono', monospace; font-family: 'Inter', sans-serif;
} }
.page-info-title { .page-info-title {
font-size: 30px; font-size: 20px;
font-weight: 500; font-weight: 400;
}
#article-stats {
display: flex;
flex-direction: row;
gap: 10px 15px;
flex-wrap: wrap;
} }
.page-info-entry { .page-info-entry {
color: black; color: black;
font-size: 30px; font-size: 20px;
font-weight: 300;
}
#article-sep {
color: #0075FF;
} }
#article-container { #article-container {
@ -342,12 +364,12 @@ hr {
flex: 4; flex: 4;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 40px; gap: 20px;
font-size: 26px; font-size: 20px;
line-height: 40px; line-height: 25px;
width: 100%; width: 100%;
padding-left: 50px; padding-left: 50px;
padding-top: 50px; padding-top: 25px;
overflow-y: scroll; overflow-y: scroll;
} }
@ -356,26 +378,32 @@ hr {
} }
#article-information { #article-information {
font-size: 20px; font-size: 18px;
text-align: justify;
text-indent: 2rem;
} }
#article-title { #article-title {
font-size: 40px; font-size: 25px;
font-family: 'Syne Mono', monospace; font-family: 'Inter', sans-serif;
color: #0075FF; color: #0075FF;
text-transform: uppercase;
} }
#article-book { #article-book {
font-size: 30px; font-size: 25px;
font-family: 'Syne Mono', monospace; padding-top: 20px;
font-family: 'Inter', sans-serif;
color: #0075FF; color: #0075FF;
margin-bottom: 25px; margin-bottom: 50px;
width: fit-content; width: fit-content;
text-transform: uppercase;
} }
#article-artists { #article-artists {
font-family: 'Syne Mono', monospace; font-family: 'Inter', sans-serif;
color: #0075FF; color: #0075FF;
text-transform: uppercase;
} }
#container-article { #container-article {
@ -404,12 +432,13 @@ hr {
flex-shrink: 0; /* Do not shrink below the flex-basis */ flex-shrink: 0; /* Do not shrink below the flex-basis */
background-color: white; background-color: white;
flex-direction: column; flex-direction: column;
padding-top: 50px; padding-top: 25px;
gap: 50px; gap: 25px;
} }
#location-button-list { #location-button-list {
padding-left: 50px; padding-left: 50px;
padding-right: 50px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -450,7 +479,7 @@ hr {
.location-button { .location-button {
font-size: 30px; font-size: 20px;
border: 1px solid; border: 1px solid;
border-radius: 30px; border-radius: 30px;
padding: 10px; padding: 10px;
@ -463,7 +492,12 @@ hr {
} }
#location-text { #location-text {
font-size: 30px; font-size: 20px;
padding: 10px;
}
#location-sep {
font-size: 20px;
padding: 10px; padding: 10px;
} }
@ -546,11 +580,16 @@ animation: 2s fadeInUp;
/* Mobile breakpoint (less than 768px) */ /* Mobile breakpoint (less than 768px) */
@media (max-width: 768px) { @media (max-width: 768px) {
#article-sep {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#main-container-locations { #main-container-locations {
flex-direction: column; flex-direction: column;
height: auto; height: auto;
flex: 1; flex: 1;
overflow-y: scroll;
} }
#location-list { #location-list {
@ -560,7 +599,7 @@ animation: 2s fadeInUp;
flex-shrink: 0; flex-shrink: 0;
overflow-y: scroll; overflow-y: scroll;
flex-basis: 60%; flex-basis: 60%;
justify-content: space-around; justify-content: space-evenly;
} }
#location-images { #location-images {
@ -589,6 +628,7 @@ animation: 2s fadeInUp;
#location-button-list { #location-button-list {
padding-left: 0px; padding-left: 0px;
padding-right: 0px;
gap: 5px 5px; gap: 5px 5px;
justify-content: center; justify-content: center;
} }
@ -597,6 +637,8 @@ animation: 2s fadeInUp;
order: 2; order: 2;
flex-basis: 0%; flex-basis: 0%;
flex-direction: column-reverse; flex-direction: column-reverse;
padding-top: 0px;
} }
#container-index { #container-index {
@ -605,8 +647,8 @@ animation: 2s fadeInUp;
} }
#index-info p{ #index-info p{
font-size: 18px; font-size: 16px;
line-height: 40px; line-height: 25px;
text-align: justify; text-align: justify;
} }
@ -615,7 +657,7 @@ animation: 2s fadeInUp;
padding-left: 25px; padding-left: 25px;
padding-right: 25px; padding-right: 25px;
padding-top: 0px; padding-top: 0px;
gap:20px; gap: 0px;
} }
#nav-bar { #nav-bar {
@ -656,7 +698,7 @@ animation: 2s fadeInUp;
} }
#hyperlink-container { #hyperlink-container {
font-size: 24px; font-size: 20px;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
padding-left: 0px; padding-left: 0px;
@ -729,7 +771,7 @@ animation: 2s fadeInUp;
} }
#article-book { #article-book {
font-size: 25px; font-size: 20px;
} }
#page-header { #page-header {

2
templates/_nav.html
View File

@ -1,5 +1,5 @@
<div id="nav-bar"> <div id="nav-bar">
<a href="/"><div class="nav-element">BETA FESTIVAL (2024)</div></a> <a href="/"><div class="nav-element">BETA FESTIVAL (2024)</div></a>
<div class="nav-element nav-element-align">NOV 1 - 3 | DUBLIN</div> <div class="nav-element nav-element-align">NOV 1 - 17 | DUBLIN</div>
</div> </div>
<hr> <hr>

50
templates/article.html
View File

@ -11,6 +11,31 @@
<div id="article-text"> <div id="article-text">
<div id="article-title">{{ article.title }}</div> <div id="article-title">{{ article.title }}</div>
<div id="article-artists">{{ article.artists | join(', ') }}</div> <div id="article-artists">{{ article.artists | join(', ') }}</div>
<div id="article-stats">
{% for article in content %}
{% if article.dates %}
<div class="page-info-cont">
<div class="page-info-title">Date(s):</div>
<div class="page-info-entry">{{ article.dates | join(', ') }}</div>
</div>
{% endif %}
{% if article.times%}
<div class="page-info-cont">
<div class="page-info-title">Time(s):</div>
<div class="page-info-entry">{{ article.times | join(', ') }}</div>
</div>
{% endif %}
<div class="page-info-cont">
<div class="page-info-title">Location(s):</div>
<div class="page-info-entry">{{ article.location[0] }}</div>
</div>
<script>
// Define a JavaScript variable using a Jinja variable
const imageUrl = "{{ article.image }}";
</script>
{% endfor %}
</div>
<span id="article-sep">˗ˏˋ ★ ˎˊ˗</span>
<div id="article-information">{{ article.information }}</div> <div id="article-information">{{ article.information }}</div>
{% if article.bookUrl %} {% if article.bookUrl %}
<a href="{{ article.bookUrl }}" target="_blank"><div id="article-book">↳ Book</div></a> <a href="{{ article.bookUrl }}" target="_blank"><div id="article-book">↳ Book</div></a>
@ -22,31 +47,6 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<hr>
<div id="page-header">
{% for article in content %}
{% if article.dates %}
<div class="page-info-cont">
<div class="page-info-title">/ Date:</div>
<div class="page-info-entry">{{ article.dates | join(', ') }}</div>
</div>
{% endif %}
{% if article.times%}
<div class="page-info-cont">
<div class="page-info-title">/ Time:</div>
<div class="page-info-entry">{{ article.times | join(', ') }}</div>
</div>
{% endif %}
<div class="page-info-cont">
<div class="page-info-title">/ Location:</div>
<div class="page-info-entry">{{ article.location[0] }}</div>
</div>
<script>
// Define a JavaScript variable using a Jinja variable
const imageUrl = "{{ article.image }}";
</script>
{% endfor %}
</div>
</div> </div>
<script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script>

6
templates/list.html
View File

@ -17,12 +17,12 @@
<a href='/{{ title.lower() }}/{{ event.title }}'> <a href='/{{ title.lower() }}/{{ event.title }}'>
<div class="list"> <div class="list">
<div class="list-image"> <div class="list-image">
<img src="{{ event.image }}" alt="{{ event.title }}"> <img src="{{ event.image }}" alt="{{ event.title }}" loading="lazy">
<div class="list-image-overlay"></div> <div class="list-image-overlay"></div>
</div> </div>
<div class="list-title">☉ {{ event.title }}</div> <div class="list-title">{{ event.title }}</div>
<div class="list-artists"> <div class="list-artists">
<p>[{{ event.artists | join(', ') }}]</p> <p>{{ event.artists | join(', ') }}</p>
</div> </div>
<div class="list-details"> <div class="list-details">
{% if event.dates %} {% if event.dates %}

1
templates/locations.html
View File

@ -17,6 +17,7 @@
<div class="location-button" data-location="pallas-projects">Pallas Projects</div> <div class="location-button" data-location="pallas-projects">Pallas Projects</div>
</div> </div>
<div id="location-information"> <div id="location-information">
<span id="location-sep">˗ˏˋ ★ ˎˊ˗</span>
<div id="location-text"> <div id="location-text">
10-13 Thomas Street 10-13 Thomas Street
</div> </div>

Write Preview
Loading…
Cancel
Save