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

created templates

graphics
Cailean Finn 6 months ago
parent
e71073d709
commit
96d354190f
7 changed files with 92 additions and 43 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. 14
      app.py
  2. 32
      public/css/styles.css
  3. 8
      public/js/skybox.js
  4. 5
      templates/_nav.html
  5. 23
      templates/base.html
  6. 39
      templates/index.html
  7. 14
      templates/list.html

14
app.py
View File

@ -16,7 +16,19 @@ client = contentful.Client(SPACE_ID, ACCESS_TOKEN)
@app.route('/') @app.route('/')
def index(): def index():
return render_template('index.html') return render_template('index.html', title='Homepage')
@app.route('/events')
def events():
return render_template('list.html', title='Events')
@app.route('/exhibitions')
def exhibitions():
return render_template('list.html', title='Exhibitions')
@app.route('/conferences')
def conference():
return render_template('list.html', title='Conferences')
def get_all_content(type): def get_all_content(type):
content_list = [] content_list = []

32
public/css/styles.css
View File

@ -11,6 +11,7 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden;
} }
#scroll { #scroll {
@ -41,12 +42,14 @@ hr {
width: 100%; width: 100%;
height: 2px; height: 2px;
z-index: -1000; z-index: -1000;
margin: 0;
} }
#main-wrapper { #main-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; height: 100vh;
overflow-y: hidden;
} }
#nav-bar { #nav-bar {
@ -66,13 +69,15 @@ hr {
} }
#main-container { #main-container {
margin-top: 25px; padding-top: 25px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 50px; gap: 50px;
margin-bottom: 50px; padding-bottom: 50px;
margin-left: 50px; padding-left: 50px;
margin-right: 50px; padding-right: 50px;
overflow-y: scroll;
box-sizing: border-box; /* Include padding in the height calculation */
} }
#main-text { #main-text {
@ -96,11 +101,11 @@ hr {
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
width: fit-content; width: fit-content;
/* background-color: #0075FF; */ background-color: #0075FF;
background-image: url('/public/images/dither-txt.png'); /* background-image: url('/public/images/dither-txt.png'); */
background-size: cover; /* or contain, depending on your preference */ background-size: cover; /* or contain, depending on your preference */
background-position: center; /* background-position: center; */
background-repeat: no-repeat; background-repeat:repeat;
border-radius: 30px; border-radius: 30px;
padding: 10px; padding: 10px;
padding-left: 25px; padding-left: 25px;
@ -159,6 +164,7 @@ hr {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
gap: 5px; gap: 5px;
height: 75px;
} }
.nav-element { .nav-element {
@ -166,9 +172,9 @@ hr {
} }
#main-container { #main-container {
flex-direction: column-reverse; /* flex-direction: column-reverse; */
margin-left: 10px; padding-left: 10px;
margin-right: 10px; padding-right: 10px;
} }
#main-text { #main-text {
font-size: 18px; font-size: 18px;
@ -179,6 +185,7 @@ hr {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
mix-blend-mode:multiply; mix-blend-mode:multiply;
order: 2;
} }
@ -188,6 +195,7 @@ hr {
width: 100%; width: 100%;
padding-left: 0px; padding-left: 0px;
align-items: normal; align-items: normal;
order: 1;
} }
.hyperlink { .hyperlink {

8
public/js/skybox.js
View File

@ -1,16 +1,22 @@
const box = document.getElementById('scroll') const box = document.getElementById('scroll')
let x, y // const hyperlinks = document.getElementsByClassName('hyperlink')
let x, y, z
function init(){ function init(){
x = 0 x = 0
y = 0 y = 0
z = 0
AnimateSkybox() AnimateSkybox()
} }
function AnimateSkybox(){ function AnimateSkybox(){
x += 0.2 x += 0.2
y = window.innerHeight / 2.2 y = window.innerHeight / 2.2
z += 0.2
box.style.backgroundPosition = x + "px " + y + "px" box.style.backgroundPosition = x + "px " + y + "px"
// for (let i = 0; i < hyperlinks.length; i++) {
// hyperlinks[i].style.backgroundPosition = x / 4 + "px " + z + "px";
// }
requestAnimationFrame(AnimateSkybox) requestAnimationFrame(AnimateSkybox)
} }

5
templates/_nav.html
View File

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

23
templates/base.html
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beta Festival 2024 | {% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three/src/": "https://cdn.jsdelivr.net/npm/[email protected]/src/",
"three/examples/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/"
}
}
</script>
</head>
<body id="scroll">
{% block content %}
{% endblock %}
</body>
</html>

39
templates/index.html
View File

@ -1,28 +1,10 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="en">
<head> {% block title %}{{ title }}{% endblock %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> {% block content %}
<title>Beta Festival 2024</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three/src/": "https://cdn.jsdelivr.net/npm/[email protected]/src/",
"three/examples/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/"
}
}
</script>
</head>
<body id="scroll">
<div id="main-wrapper"> <div id="main-wrapper">
<div id="nav-bar"> {% include '_nav.html' %}
<a href="/"><div class="nav-element">BETA FESTIVAL (2024)</div></a>
<div class="nav-element">NOV 1 - 2 | DUBLIN</div>
</div>
<hr>
<div id="main-container"> <div id="main-container">
<div id="main-text"> <div id="main-text">
<p> <p>
@ -30,15 +12,15 @@
</p> </p>
</div> </div>
<div id="hyperlink-container"> <div id="hyperlink-container">
<a href="/"><div class="hyperlink"> <a href="/exhibitions"><div class="hyperlink">
<div>↗</div> <div>↗</div>
<div>Exhibitions</div> <div>Exhibitions</div>
</div></a> </div></a>
<a href="/"><div class="hyperlink"> <a href="/events"><div class="hyperlink">
<div>↗</div> <div>↗</div>
<div>Events</div> <div>Events</div>
</div></a> </div></a>
<a href="/"><div class="hyperlink"> <a href="/conferences"><div class="hyperlink">
<div>↗</div> <div>↗</div>
<div>Conferences</div> <div>Conferences</div>
</div></a> </div></a>
@ -48,5 +30,4 @@
<div id="container"></div> <div id="container"></div>
<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
<script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script> <script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script>
</body> {% endblock content %}
</html>

14
templates/list.html
View File

@ -0,0 +1,14 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div id="main-wrapper">
{% include '_nav.html' %}
<div id="main-container">
</div>
</div>
<div id="container"></div>
<script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script>
{% endblock content %}
Write Preview
Loading…
Cancel
Save