inital template

app.py

@@ -15,7 +15,7 @@ class WikiApp(Flask):
                 
         # Define routes
         # self.route('/', methods=['GET'])(self.homepage)
-        self.route('/', methods=['GET'])(self.homepage_new)
+        self.route('/', methods=['GET'])(self.home)
         self.route('/data', methods=['GET'])(self.data_int)
         self.route('/newsletter/<string:title>', methods=['GET'])(self.generate_newsletter)
         self.route('/publications', methods=['GET'])(self.fetch_publications)
@@ -24,6 +24,21 @@ class WikiApp(Flask):
         self.route('/favicon.ico')(self.favicon)
         self.route('/archive/<string:collection>', methods=['GET'])(self.get_collection)
         
+    # Return Homepage
+    def home(self):    
+        pages = ['Homepage']
+        homepage_content = ''
+        for page in pages:
+            # Make a request to MediaWiki API to get content of a specific page
+            response = requests.get(self.MEDIAWIKI_BASE_URL + self.BASE_API, params={'action': 'parse', 'page': page, 'format': 'json'})
+            data = response.json()
+            # Extract page title and content
+            page_content = data['parse']['text']['*']
+            page_content = self.fix_html(page_content)
+            homepage_content += page_content
+        
+        return render_template('index.html', title=pages[0], cont=homepage_content)
+       
     def data_int(self):
         return render_template('data.html')
          
@@ -299,7 +314,8 @@ class WikiApp(Flask):
         page_title = data['parse']['title']
         page_content = data['parse']['text']['*']
         page_content = self.fix_html(page_content)
-        return render_template('article.html', nav_elements=self.get_nav_menu(), title=page_title, content=page_content)
+        return render_template('index.html', title=page_title, cont=page_content)
+        
     
     def fetch_page(self, title):
         # Make a request to MediaWiki API to get content of a specific page
@@ -372,15 +388,18 @@ class WikiApp(Flask):
             file_link.unwrap()
             
         soup = self.remove_thumbnail_img(soup)
-        # Locate the table and the comment
+        
+        # Locate the table and store it in an object
         table = soup.find('table')
+        
         # Remove inline styles by deleting the 'style' attribute
         if table and 'style' in table.attrs:
             del table['style']
         
-        # Add the class 'table-cont' to the table
+        # Add the class 'table-cont' to the table (if not already removed)
         if table:
             table['class'] = table.get('class', []) + ['table-cont']
+            
         comments = soup.find_all(string=lambda text: isinstance(text, Comment))
         comment = comments[-1] if comments else None
         
@@ -388,6 +407,14 @@ class WikiApp(Flask):
         if comment and table is not None:
             comment.insert_before(table.extract())
             
+        table_html = str(table) if table else None  # Store the table HTML
+        
+        # Remove the table from the main HTML
+        if table:
+            table.decompose()
+
+
+        # Return the modified HTML
         return soup.prettify()
     
     def remove_thumbnail_img(self, soup):

static/assets/styles.css

@@ -1,671 +1,145 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+html {
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
-
-/* styles.css */
-body {
-    font-family: "Source Sans 3", sans-serif;
-	background-color: white;
-	color: black;
-	margin: auto;
-	padding: 0px;
-	font-family: "Space Mono", monospace;
-	overflow: hidden;
-	height: 100vh;
-}
-
-.table-cont {
-	overflow-wrap: anywhere;
-}
-
-.main-cont {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	height: 100%;
-}
-
-.header-title {
-	font-size: 40px;
-	display: flex;
-	background-color: white;
-	width: fit-content;
-	height: 100px;
-	padding-left: 40px;
-	padding-right: 40px;
-	align-items: center;
-}
-
-.header-logo {
-	height: 100px;
-	max-width: 500px;
-	padding-left: 40px;
-	padding-right: 40px;
-	align-self: center;
-}
-
-.header-logo img{
     height: 100%;
     width: 100%;
 }
 
-.header-title a {
+/* Reset some default styles */
-	text-decoration: none;
+body, h1, h2, h3, p, ul, li, a {
-	color: black;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-.header-summary {
+/* General body styling */
-	font-size: 15px;
+body {
-	font-style: italic;
+    font-family: "Inter", serif;
-	padding-left: 20px;
+    font-optical-sizing: auto;
+    font-style: normal;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f9f9f9;
+    padding: 0px;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
 }
 
-.nav-cont {
+#main-container {
-	display: flex;
+    height: 100%;
-	flex-direction: row;
     width: 100%;
-	height: 100px;
-	gap: 0px;
-	/* margin-bottom: 10px; */
-	/* position: fixed; */
-	z-index: 100;
-}
-
-.nav-element-cont {
     display: flex;
     flex-direction: row;
-	gap: 20px;
-	text-transform: lowercase;
-	font-size: 25px;
-	width: 100%;
-	background-color: black;
-	height: 100px;
-	padding-left: 20px;
-	align-items: center;
 }
 
-.nav-element-cont a{
+/* index */
-	text-decoration: none;
+#index-container {
-	color: white;
-}
-
-.nav-element {
     display: flex;
-	flex-direction: row;
+    flex: 0 0 35%;
-	gap: 20px;
+    flex-direction: column;
-}
-
-.line {
-	background-color: black;
-	width: 100%;
-	height: 1px;
-	padding: 0;
-	margin: 0;
-	margin-bottom: 20px;
-}
-
-.spinning-star {
-            transform-origin: center; /* Set the transform origin to the center */
-            animation: spin 5s linear infinite; /* Apply the spin animation */
-			color: red;
-}
-
-.content {
     width: 100%;
-	display: flex;
+    padding-top: 20px;
-	height: calc(100% - 100px);
+    padding-bottom: 20px;
-	/* position: fixed; */
+    gap: 40px;
-}
+    overflow-y: scroll;
-
-.content-cont {
-	overflow: scroll;
     overflow-x: hidden;
-	height: calc(100vh - 100px);
-	margin-left: 40px;
-	width: 100%;
-	/* margin-top: 100px; */
-	/* margin-top: 100px; */
-	/* margin-bottom: 100px; */
-	/* margin-right: 40px; */
-}
-
-.article-cont {
-	width: 60%;
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-	margin-bottom: 20px;
-}
-
-.article-cont big{
-	font-family: 'Space Mono', monospace;
-}
-
-.article-cont p {
-	font-family: "Source Sans 3", sans-serif;
-	font-size: 20px;
-	line-height: 30px;
-	margin-top: 0;
-}
-
-.content-cont h1{
-	font-size: 60px;
-	text-decoration: underline;
-	margin-bottom: 5px;
-}
-
-.content-cont h2{
-	font-size: 30px;
-	text-decoration: none;
-}
-
-.content-cont h3{
-	font-size: 25px;
-	text-decoration: none	;
-}
-
-.content-cont h4{
-	font-size: 20px;
-	
-}
-
-/* .content-cont p {
-	font-size: 17.5px;
-	line-height: 30px;
-} */
-
-.content-cont .article-cont a {
-	color: red;
-	text-decoration: none;
-	font-family: 'Space Mono', monospace;
-	font-size: 17.5px;
 }
 
-.content-cont .opp-cont p a {
+#index-container::-webkit-scrollbar {
-	color: red;
+    display: none;
-	text-decoration: none;
-}
-
-.content-cont .event-cont p a {
-	color: red;
-	text-decoration: none;
-}
-
-.content-cont ul {
-	font-size: 20px;
-	border-style: none;
-}
-
-.content-cont li a{
-	border-style: none;
-	line-height: 40px;
-}
-
-.content-cont img{
-	height: 100%;
-	width: auto;
-	max-width: 900px;
-	border: black;
-    border-style: dashed;
-	transition: transform 0.3s ease-in-out;
 }
 
-.content-cont img:hover {
+#index-header {
-	animation: rotate 1s steps(2) forwards infinite;
+    text-align: center;
+    vertical-align: middle;
+    padding-left: 60px;
+    padding-right: 60px;
 }
 
-
+#index-content {
-/* .content-cont::-webkit-scrollbar {
+    padding-left: 60px;
-	display: none;
+    padding-right: 60px;
-} */
-
-.content-header {
-	/* padding-top: 160px; */
 }
 
-.section-cont {
+#index-links {
-	width: 100vw;
+    padding-left: 60px;
-	height: calc(100vh - 100px);
+    padding-right: 60px;
-	display: flex;
-	flex-direction: row;
-	justify-content: space-around;
 }
 
-.collection-cont {
+#index-link-list {
-	width: 100% ;
-	height: 100vh;
     display: flex;
     flex-direction: row;
-	justify-content: space-evenly;
-	align-content: baseline;
     flex-wrap: wrap;
-	gap:60px;
+    gap: 20px;
-}
-
-.collection-title {
-	border: 2px;
-	border-radius: 20px;
-	border-style: solid;
-	border-color: black;
-	padding: 10px;
 }
 
-.collection-element {
+#content-container {
     display: flex;
     flex-direction: column;
-	align-items: center;
+    flex-grow: 1;
-	row-gap: 20px;
-}
-
-.collection-header{
-	font-size: 20px;
-	margin-top: 40px;
-}
-
-.content-cont .collection-cont a {
-	text-decoration: underline;
-    color: black;
-}
-
-.collection-cont .section-img{
     width: 100%;
-	padding-left: 0px;
+    padding: 40px;
-	margin-bottom: 0px;
+    padding-top: 20px;
+    gap: 40px;
+    overflow-y: scroll;
+    overflow-x: hidden;
 }
 
-.collection-cont .section-img img{
+#content-title {
-	width: 100%;
+    text-decoration: underline;
-    height: auto;
-    max-width: 200px;
-    object-fit: contain;
-    border-radius: 0px;
-    border: black;
-    border-style: dashed;
-    transition: transform 0.3s ease-in-out;
 }
 
-
+#content-body {
-.section {
-	width: calc(100% / 3); /* Each div takes up one-third of the container */
     display: flex;
     flex-direction: column;
-	gap: 10px;
+    gap: 20px;
-	height: 100%;
-	z-index: 50;
-	overflow: scroll;
-	-ms-overflow-style: none;  /* IE and Edge */
-  	scrollbar-width: none;  /* Firefox */
 }
 
 
-.section-group {
+#line-divider {
-	
+    width: 2px; /* Thickness of the divider */
+    background-color: black; /* Color of the line */
 }
 
-.section-object {
+/*
-	display: flex;
+    classes
-	flex-direction: column;
+*/
-	gap: 10px;
-}
 
-.section-element {
+.title {
+    font-size: 60px;
+    font-weight: bold;
     text-transform: uppercase;
-	font-size: 20px;
-	
 }
 
-.section-element a {
+p {
-	text-decoration: underline;
+    font-size: 20px;
-	color: red;
+    font-weight: normal;
-}
-
-.section-img img{
-	width: 100%;
-	height: 400px;
-	object-fit: cover;
-	border-radius: 0px;
-    border: black;
-    border-style: dashed;
-	transition: transform 0.3s ease-in-out;
-}
-
-.section-img:hover img {
-    animation: rotate 1s steps(2) forwards infinite;
-  }
-
-.section-img {
-	width: 75%;
-	padding-left: 0px;
-	padding-top: 10px;
-}
-
-.section-date {
-	padding-left: 0px;
-}
-
-.section-title {
-	display: flex;
-	margin-bottom: 40px;
-	padding-top: 80px;
-	align-items: center;
-}
-
-.section-header{
-	text-decoration: none;
-}
-
-.footer {
-	position: absolute;
-	right: 0px;
-	display: none;
-	top: 25px;
-	z-index: 500;
-}
-
-.foot {
-	height: 200px;
-	width: auto;
-}
-
-/* Newsletter Styling*/
-.event-cont {
-	width: 60%;
-	font-size: 17.5px;
-}
-
-.event {
-	margin-bottom: 10px;
-	display: block;
-}
-
-.opp {
-	margin-bottom: 10px;
-	display: block;
-}
-
-.list-events {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-}
-
-.list-opp {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-}
-
-.opp-cont{
-	width: 60%;
-	font-size: 17.5px;
-	margin-bottom: 25px;
-}
-
-.opp a {
-	color: black;
-	text-decoration: none;
-}
-
-.opp-link {
-	color: red;
-	text-decoration: none;
 }
 
-.event a {
+.button-link {
+    display: inline-block;
+    padding: 15px 30px;
+    background-color: #D9D9D9; /* Green background */
     color: black;
     text-decoration: none;
-}
+    border-radius: 30px;
-
-.event-link {
-	color: red;
-	text-decoration: none;
-}
-
-.event-text {
-	font-family: "Source Sans 3", sans-serif;
     font-size: 20px;
-	line-height: 30px;
+    font-weight: normal;
+    text-align: center;
+    text-transform: lowercase;
 }
 
-.opp-text {
+.disable-scrollbar{
-	font-family: "Source Sans 3", sans-serif;
+    -ms-overflow-style: none;  /* IE and Edge */
-	font-size: 20px;
+    scrollbar-width: none;  /* Firefox */
-	line-height: 30px;
 }
 
-.pub-section {
+.astr-line {
-	display: flex;
+    text-align: center;
-	gap: 20px;
+    font-size: 48px;
-	flex-direction: column;
-	width: 60%;
 }
 
-.pub-section-cont {
+.mw-parser-output {
     display: flex;
     flex-direction: column;
-	padding: 40px;
-	padding-top: 0px;
     gap: 20px;
-	overflow-y: scroll;
-	width: 100%;
-}
-
-.pub-section-cont p{
-	font-family: "Source Sans 3", sans-serif;
-    font-size: 20px;
-    line-height: 30px;
-    margin-top: 0;
-}
-
-.pub-section-cont h1 {
-	font-size: 60px;
-    text-decoration: underline;
-    margin-bottom: 5px;
-}
-
-#subscribe-button {
-	position: absolute;
-	bottom: 50px;
-	right:50px;
-	font-size: 40px;
-	text-transform: uppercase;
-	border: 1px solid red;
-	padding: 20px;
-	border-radius: 30px;
-	cursor: pointer;
-	background-color: black;
-	color: white;
-}
-
-.link-blank {
-	text-decoration: none;
-	color: black;
-}
-/* hr {
-	border: 0;
-	border-top: thin solid #243588;
-  	clear:both;
-  	display:block;
-  	width: 100%;               
-  	background-color:#000000;
-  	height: 1px;
-} */
-
-
-
-
-
-
-/* Keyframes for the spin animation */
-@keyframes spin {
-	0% { transform: rotate(0deg); } /* Initial rotation */
-	100% { transform: rotate(360deg); } /* Final rotation */
-}
-
-@keyframes rotate {
-    0% {
-      transform: rotate(0deg) scaleX(100%);
-    }
-    25% {
-      transform: rotate(2deg) scaleX(95%);
-    }
-	50% {
-		transform: rotate(0deg) scaleX(100%);
-	}
-	75% {
-		transform: rotate(-2deg) scaleX(95%);
-	}
-    100% {
-       transform: rotate(0deg) scaleX(100%);
-    }
-  }
-
-  /* Mobile */
-  @media screen and (max-width: 1024px){
-	.section-img img{
-		height: 200px;
-	}
-
-	.pub-section-cont {
-		padding: 0;
-		padding-right: 10px;
-		padding-bottom: 20px;
-		margin-left: 20px;
-	}
-
-	.pub-section-cont p {
-		font-size: 15px;
-	}
-
-	.pub-section-cont h1 {
-		font-size: 40px;
-	}
-
-	.pub-section {
-		width: 100%;
-	}
-
-	.content-cont .article-cont a {
-		font-size: 14px;
-	}
-
-	#subscribe-button {
-		font-size: 20px;
-		bottom: 10px;
-		right: 10px;
-		padding: 10px;
-		background-color: black;
-		color: white;
-	}
-
-    .nav-cont {
-		flex-direction: column;
-	}
-
-	.nav-element-cont {
-		overflow-x: scroll;
-		overflow-y: hidden;
-		width: auto;
-        padding-left: 20px;
-	}
-
-	.nav-element-cont::-webkit-scrollbar {
-		display: none;
-		
-	}
-
-	.header-title {
-		width: 100%;
-		justify-content: center;
-		padding-left: 0;
-		padding-right: 0;
-	}
-
-	.section-cont {
-		flex-direction: column;
-		height: auto;
-	}
-
-	.section {
-		width: 100%;
-		overflow-x: scroll;
-		/* height: calc(50vh - 50px); */
-	}
-
-	.section-title {
-		padding-top: 40px;
-	}
-
-	.section-group {
-		padding-bottom: 0px;
-		display: flex;
-		flex-direction: row;
-	}
-
-	.section-object {
-		padding-bottom: 0px;
-	}
-
-	.article-cont {
-		width: 100%;
-	}
-
-	.content-cont {
-		padding-right: 40px;
-	}
-
-	.event-cont {
-		width: 100%;
-		font-size: 15px;
-	}
-
-	.opp-cont {
-		width: 100%;
-		font-size: 15px;
-	}
-
-	.content-cont img {
-		height: auto;
-		width: 95%;
-	}
-
-	.content-cont h1 {
-		font-size: 40px;
-	}
-
-	.content-cont h2 {
-		font-size: 20px;
-	}
-
-	.article-cont p {
-		font-size: 15px;
-	}
-
-	.main-cont {
-		height: 100vh;
-	}
-
-	.content {
-		height: 100vh;
-    	overflow-y: scroll;
-		overflow-x: hidden;
-	}
-
-	.content-cont h4 {
-		font-size: 17.5px;
-	}
-
-	.opp-text {
-		font-size: 15px;
-	}
-
-	.header-logo {
-		display: flex;
-	}
-
-	@media screen and (max-width: 640px){
-		.content-cont {
-			padding-right: 10px;
-			margin-left: 20px;
-		}
-	}
 }

templates/_base.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}CONCEPT NULL{% endblock %}</title>
+    <link rel="stylesheet" href="/static/assets/styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
+</head>
+<body>
+    {% block content %}
+    {% endblock %}
+</body>
+</html>

templates/article.html

@@ -1,11 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Ø | {{ title }}{% endblock %}
-{% block content %}
-<div class='content-cont'>
-	<h1 class='content-header'>{{ title }}</h1>
-    <div class='article-cont'>
-    	{{ content | safe }}
-	</div>
-</div>
-
-{% endblock %}

templates/base.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% block title %}{% endblock %}</title>
-	<link rel="stylesheet" href="{{ url_for('static', filename='assets/styles.css') }}">
-	<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='assets/images/favicon.png') }}">
-<body>
-	<div class='main-cont'>
-		<div class='nav-cont'>
-			<div class='header-logo'>
-				<a href="/"><img src ="{{ url_for('static', filename='assets/images/cn-logo.svg') }}" alt="ConceptNULL"/></a>
-			</div>
-			<div class='nav-element-cont'>
-				{% for key, element in nav_elements.items() %}
-				<div class='nav-element'><a href="{{ url_for('page_content', title=element.title) }}">
-					{% if element.title == 'Concept Null' %}
-						About
-					{% else %}
-						{{ element.title }}
-					{% endif %}
-				</a><div class='spinning-star'>	&#10022;</div></div>
-				{% endfor %}
-			</div>
-			
-		</div>
-		<div class="content">
-		{% block content %}
-		{% endblock %}
-		</div>
-	</div>
-	<a class="link-blank" href="https://conceptnull.substack.com/subscribe" target="_blank"><span id="subscribe-button">Subscribe</span></a>
-</body>
-
-</html>

templates/cn-home.html

@@ -1,10 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Ø | CONCEPTNULL {% endblock %}
-{% block content %}
-<div class='content-cont'>
-	<br></br>	
-    <div class='article-cont'>
-    	{{ content | safe }}
-	</div>
-</div>
-{% endblock %}

templates/collection.html

@@ -1,21 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Ø | {{ title }}{% endblock %}
-{% block content %}
-<div class='content-cont'>
-	<div class='collection-header'>{{ '(' + title + ')'}}</div>
-	<div class='collection-cont'>
-    {% for key, values in collection.items() %}
-		
-		<div class='collection-element'>
-			<a href={{ '/' + key }}><div class='collection-title'> {{ key }} </div></a>
-			<div class='collection-date'> {{ values.date }} </div>
-			<a href={{ '/' + key }}><div class='section-img'><img src={{ values.source}}></div></a>
-		</div>
-		
-	{% endfor %}
-	
-	</div>
-	<div class='foot'></div>
-</div>
-
-{% endblock %}

templates/data.html

@@ -1,90 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-    <title>Ø | D.A.T.A Interview</title>
-
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='assets/css/data-styles.css') }}">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
-    <script src="{{ url_for('static', filename='assets/data/libraries/p5.sound.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='assets/data/libraries/quicksettings.js') }}"></script>
-    <script src="{{ url_for('static', filename='assets/data/libraries/p5.gui.js') }}"></script>
-    <script src="{{ url_for('static', filename='assets/data/libraries/p5.patgrad.js') }}"></script>
-	<script src="{{ url_for('static', filename='assets/js/gradient.js') }}"></script>
-	<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='assets/images/favicon.png') }}">
-  </head>
-
-  <body onload="showAboutOnPageLoad()">
-    <div class="divider">
-      <div id="sketch" class="sketch"></div>
-	  <div id="text-view-button">
-		<div id="tv-button">
-			<img src = "{{ url_for('static', filename='assets/data/assets/okay.svg') }}" alt="text-view"/>
-		</div>
-	  </div>
-      <div class="break"></div>
-      <div class="text" id="text-view">
-        <div class="text-group">
-          <div class="text-header">
-			<div class="tool1">
-				<div class="t1-box">
-					<div class="t1-1" id="arrow-p">➜</div>
-					<div class="t1-1" id="percent">60%</div>
-				</div>
-			</div>
-            <div class="title">
-			  <p class="title2">THE BIG</p>
-              <p class="title2">D.A.T.A</p>
-			  <p class="title1" id="switch-to-network">INTERVIEW</p>
-            </div>
-			<div class="tool2">
-				<div class="t2-box">
-					<div class="t2-1" id="about-interview">💁</div>
-					<div class="t2-1" id="data-link"><a href="https://www.data.ie/datasite/" target="_blank">🔗</a></div>
-				</div>
-			</div>
-          </div>
-          <div id="text-body">
-            
-          </div>
-          
-        </div>
-        <div class="text-footer">
-        </div>
-		<div class="network-button" id="network-button">
-			<img src = "{{ url_for('static', filename='assets/data/assets/okay.svg') }}" alt="text-view"/>
-		</div>
-		<div class="mobile-about-button" id="mobile-about-button">
-			<img id="mobile-btn" src = "{{ url_for('static', filename='assets/data/assets/info.svg') }}" alt="text-view"/>
-		</div>
-		<div class="mobile-percent">
-			<div class="t1-am" id="percent-mobile"></div>
-		</div>
-		<div class="mobile-arrow">
-			<div class="t1-am" id="arrow-mobile">➜</div>
-		</div>
-        
-      </div>
-	  <div class="about-pop-up" id="about-section">
-		<div class="about-header">
-			About
-		</div>
-		<div class="about-body">
-			<p>At the start of the summer, we had the pleasure of chatting with Paul, Tom and Aisling who are current facilitators of the Dublin Art & Technology Association. D.A.T.A has created a platform for artists, makers and thinkers to share knowledge about digital cultures and practices in Ireland since its genesis in 2002.</p>
-			<p>In our conversation, we had the opportunity to touch on topics such as D.A.T.A's identity, how it has evolved over the years, and a deeper look into their approach behind the process of curating & organising events.</p>
-			<p>We hope you enjoy the deeply insightful conversation with D.A.T.A, while having some fun navigating its latent space!</p>
-			<p class="tech-about">The website has been designed to visualise the interview in a linear and non-linear format. The interview was processed through a machine/natural language processing algorithm, which ranked each segment of text against various topics that surfaced during the interview.</p>
-			<p class="tech-about">As a result, the algorithm created a high-dimensional version of the interview, which is commonly referred to as the latent space. Once created, the machine's multidimensional understanding of the text was flattened using a t-SNE algorithm, producing the 2D mapping of the interview.</p>
-		</div>
-		<div class="about-footer">
-		</div>
-	  </div>
-    </div>
-	
-    <script src="{{ url_for('static', filename='assets/js/sketch.js') }}"></script>
-	
-    
-  </body>
-</html>

templates/home.html

@@ -1,37 +0,0 @@
-{% extends "base.html" %}
-{% block title %} Ø | Home{% endblock %}
-{% block content %}
-<div class='section-cont'>
-	<div class='section'>
-		<a class='section-header' href='/archive/articles'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 25px; font-style: italic; object-fit: contain; font-family: monospace; color: white; text-shadow: white 0px 5px 5px; text-decoration: none; width: 100%;">articles&nbsp;<img src="https://i-love-everything.com/buttons/img/7.gif" style="max-height: 32px;"></div></div></a>
-		<div class='section-group'>
-		{% for key, values in articles.items() %}
-			<div class='section-element'><a href="{{ url_for('page_content', title=values.title) }}">↘ {{ values.title}}</a></div>
-			<div class='section-date'>🙿 {{ values.date }}</div>
-			<div class='section-img'><a href="{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source }}"></a></div>
-		{% endfor %}
-		</div>
-	</div>
-	<div class='section'>
-		<a class='section-header' href='/archive/newsletters'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 2.2px; font-size: 25px; font-style: oblique; object-fit: contain; font-family: monospace;  color: white; text-shadow: red 0px 2px 5px; width: 100%;">newsletters<br><img src="https://i-love-everything.com/buttons/img/34.gif" style="max-height: 32px;"></div></div></a>
-		<div class='section-group'>
-			{% for key, values in newsletters.items() %}
-				<div class='section-element'><a href="{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
-				<div class='section-date'>🙿 {{ values.date }}</div>
-				<div class='section-img'><a href="{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source}}"></a></div>
-			{% endfor %}
-			</div>
-	</div>
-	<div class='section'>
-		<a class='section-header' href='/archive/projects'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 25px; font-style: normal; object-fit: contain; font-family: monospace; color: white; border: 0px solid white; width: 100%;">projects<img src="https://i-love-everything.com/buttons/img/26.gif" style="max-height: 32px;"></div></div></a>
-		<div class='section-group'>
-			{% for key, values in projects.items() %}
-				<div class='section-element'><a href="{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
-				<div class='section-date'>🙿 {{ values.date }}</div>
-				<div class='section-img'><a href="{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source }}"></a></div>
-			{% endfor %}
-			</div>
-	</div>
-</div>
-
-{% endblock %}

templates/index.html

@@ -0,0 +1,40 @@
+{% extends "_base.html" %}
+
+{% block title %}CONCEPT NULL{% endblock %}
+
+{% block content %}
+<div id="main-container">
+    <div id="index-container" class="disable-scrollbar">
+        <div id="index-header" class="title">
+            <div>CONCEPT NULL</div>
+            <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
+        </div>
+        <div id="index-content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat dignissim justo, posuere imperdiet justo condimentum at. Sed eget odio vitae velit efficitur facilisis lacinia eget libero. Donec ex magna, laoreet id hendrerit at, varius et sem. Phasellus tempor ante in felis vehicula, vitae rhoncus tellus posuere. Ut nec sodales urna. Sed molestie lectus vel dolor maximus, sed cursus urna mattis. Cras eu mauris sit amet mauris lacinia accumsan vitae eu arcu. Duis quis mollis mauris. Maecenas condimentum ac tortor vel sodales. Fusce eget erat ut odio interdum porta. Donec placerat nisl id dui dapibus, finibus volutpat massa placerat. Donec commodo pellentesque ipsum eget ullamcorper. Praesent fermentum sit amet turpis sit amet sagittis. Aliquam tempus, sapien eget tincidunt luctus, urna felis molestie dolor, ac blandit arcu erat vitae eros. Morbi a lacus laoreet, varius eros ut, rutrum nibh.</p>
+        </div>
+        <div id="index-links">
+            <div id="index-link-list">
+                <div><a href="#" class="button-link">e-mail &#8595;</a></div>
+                <div><a href="#" class="button-link">activities &#8595;</a></div>
+                <div><a href="#" class="button-link">newsletter &#8595;</a></div>
+            </div>
+        </div>
+    </div>
+
+    <div id="line-divider"></div>
+
+    <div id="content-container" class="disable-scrollbar">
+        <div id="content-title" class="title">{{ title | safe }}</div>
+        <div id="content-body">
+            {{ cont | safe }}
+        </div>
+        <div class="title astr-line">&#x2732; &#x2732; &#x2732;</div>
+        <div id="content-metadata">
+            <div id="wiki-box">
+
+            </div>
+        </div>
+        
+    </div>
+</div>
+{% endblock %}

templates/meetups.html

@@ -1,14 +0,0 @@
-{% extends "base.html" %}
-{% block title %} Ø | Meetups {% endblock %}
-{% block content %}
-
-<div class='content-cont'>
-	<h1 class='content-header'>Meetups</h1>
-    <div class='article-cont'>
-    	{{ content | safe }}
-	</div>
-	<div class='foot'></div>
-</div>
-
-
-{% endblock %}

templates/newsletter.html

@@ -1,87 +0,0 @@
-{% extends "base.html" %}
-{% block title %}Ø | {{ title }}{% endblock %}
-{% block content %}
-<div class='content-cont'>
-	<h1 class='content-header'>{{ title }}</h1>
-    <div class='article-cont'>
-    	{{ content | safe }}
-	</div>
-	<p>&#8203;</p>
-	<div class='event-cont'>
-		{% for key, value in events.items() %}
-			<hr>
-			<h2 class='event-heading'>🔦 Spotlight</h2>
-			<hr>
-			<div class='list-events'>
-			{% for data in value %}
-				{% if data.spotlight %}
-				<div class='event'>
-					<a class='link' href='/{{ data.pagetitle }}' target="_blank"><h4 class='event-name'><b>{{ data.name }}</b></h4></a>
-					<p class='event-org'><b>Organiser/s: </b>{{ data.org }}</p>
-					<p class='event-location'><b>Location: </b>{{ data.location }}</p>
-					<p class='event-deadline'><b>Date: </b>{{ data.deadline }} &#8594; {{ data.endDate}}</p>
-					<p class='event-text'>{{ data.text }}</p>
-					<a href={{ data.source }} target='_blank'><p class='event-link'><b>Link ↗</b></p></a>
-				</div>
-				<p>&#8203;</p>
-				{% endif %}
-			{% endfor %}
-			</div>
-		{% endfor %}
-
-		{% for key, value in events.items() %}
-			<hr>
-			<h2 class='event-heading'>🎪 Events</h2>
-			<hr>
-			<div class='list-events'>
-			{% for data in value %}
-				{% if not data.spotlight %}
-					<div class='event'>
-						<a class='link' href='/{{ data.pagetitle }}' target="_blank"><h4 class='event-name'><b>{{ data.name }}</b></h4></a>
-						<p class='event-org'><b>Organiser/s: </b>{{ data.org }}</p>
-						<p class='event-location'><b>Location: </b>{{ data.location }}</p>
-						<p class='event-deadline'><b>Date: </b>{{ data.deadline }} &#8594; {{ data.endDate}}</p>
-						<p class='event-text'>{{ data.text }}</p>
-						<a href={{ data.source }} target='_blank'><p class='event-link'><b>Link ↗</b></p></a>
-					</div>
-					<p>&#8203;</p>
-				{%endif%}
-			{% endfor %}
-			</div>
-		{% endfor %}
-	</div>
-
-	<div class='opp-cont'>
-		{% for key, value in opportunities.items() %}
-			<hr>
-			<h2 class='opp-type-heading'>{{ key }}</h2>
-			<hr>
-			<div class='list-opp'>
-			{% for data in value %}
-			<div class='opp'>
-				<a class='link' href='/{{ data.pagetitle }}' target="_blank"><h4 class='opp-name'><b>{{ data.name }}</b></h4></a>
-				<p class='opp-deadline'><b>Deadline:</b> {{ data.deadline }}</p>
-				<p class='opp-location'><i>{{ data.location }}</i></p>
-				<p class='opp-text'>{{ data.text }}</p>
-				<a href={{ data.source }} target='_blank'><p class='opp-link'><b>Link ↗</b></p></a>
-				<p>&#8203;</p>
-			</div>
-			
-			{% endfor %}
-			</div>
-		{% endfor %}
-	<hr>
-	</div>
-
-	<div class='article-cont'>
-		<p>That’s it for now! The newsletter gets sent out 1st and 15th of every month and we post open calls and events as they come in on our <a href='https://www.instagram.com/conceptnull/' target='_blank'>Instagram</a> so be sure to follow us there.</p>
-
-		<p>Again, thank you for all of your support as we continue to grow our project with the help of a great community and, as we always say, we would love to hear your thoughts, projects, events or other open opportunities so drop us an email.</p>
-			
-		<p>Chat soon, <a href='https://conceptnull.org/' target='_blank'>Concept NULL</a></p>
-			
-		<p>[[email protected]]</p>
-	</div>
-</div>
-
-{% endblock %}

templates/publications-old.html

@@ -1,31 +0,0 @@
-{% extends "base.html" %}
-{% block title %} Ø | Publications{% endblock %}
-{% block content %}
-<div class='section-cont'>
-	<div class='section'>
-		<a class='section-header' href='/archive/newsletters'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 2.2px; font-size: 25px; font-style: normal; object-fit: contain; font-family: monospace;  color: black; width: 100%;">NEWSLETTERS<br><!--<img src="https://i-love-everything.com/buttons/img/34.gif" style="max-height: 32px;">--></div></div></a>
-		<div class='section-group'>
-			{% for key, values in newsletters.items() %}
-				<div class='section-object'>
-					<div class='section-element'><a href="/newsletter{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
-					<div class='section-date'>{{ values.date }}</div>
-					<div class='section-img'><a href="/newsletter{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source}}"></a></div>
-				</div>
-			{% endfor %}
-			</div>
-	</div>
-	<div class='section'>
-		<a class='section-header' href='/archive/projects'><div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 25px; font-style: normal; object-fit: contain; font-family: monospace; color: black; border: 0px solid black; width: 100%;">PROJECTS<!--<img src="https://i-love-everything.com/buttons/img/26.gif" style="max-height: 32px;">--></div></div></a>
-		<div class='section-group'>
-			{% for key, values in projects.items() %}
-			<div class='section-object'>
-				<div class='section-element'><a href="{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
-				<div class='section-date'>{{ values.date }}</div>
-				<div class='section-img'><a href="{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source }}"></a></div>
-			</div>
-			{% endfor %}
-			</div>
-	</div>
-</div>
-
-{% endblock %}

templates/publications.html

@@ -1,29 +0,0 @@
-{% extends "base.html" %}
-{% block title %} Ø | Publications{% endblock %}
-{% block content %}
-<div class='pub-section-cont'>
-	<div class='pub-section'>
-		<h1>Newsletter</h1>
-		<p>Currently, we run a bi-weekly newsletter that aims to highlight different types of events and opportunities centered around new media and digital culture in Ireland.</p>
-		<p>The newsletter is released on the <b>1st</b> and <b>15th</b> of every month through Substack - You can subcribe through Substack by clicking the **SUBSCRIBE** button, and receive it directly into your inbox~</p>
-		<p>If you wish to sumbit any opportunities, events, residences (...) that would be a good fit for the newsletter -- please feel free to reach out to us by emailing us at <i>[email protected]</i></p>
-		<p>***</p>
-		<p><i>The future plan we have for the platform is that users will have the ability to add their own entries into the upcoming newsletter through the Concept NULL wiki - acting as more of a decentralised noticeboard than just a newsletter. As for now, you can view our <a href="/newsletter{{ url_for('page_content', title=latest_title) }}">work-in-progress newsletter</a>, as we compile it for our Substack.</i></p>
-		<p>***</p>
-	</div>
-
-	<div class='pub-section'>
-		<h1>Projects</h1>
-		<div class='section-group'>
-			{% for key, values in projects.items() %}
-			<div class='section-object'>
-				<div class='section-element'><a href="{{ url_for('page_content', title=values.title) }}">↘ {{ values.title }}</a></div>
-				<div class='section-date'>{{ values.date }}</div>
-				<div class='section-img'><a href="{{ url_for('page_content', title=values.title) }}"><img src="{{ values.source }}"></a></div>
-			</div>
-			{% endfor %}
-		</div>
-	</div>
-</div>
-
-{% endblock %}

templates/test.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>test</title>
-	<link rel="stylesheet" href="{{ url_for('static', filename='assets/styles.css') }}">
-<body>
-	<div class='main-cont'>
-		<div class='nav-cont'>
-			<div class='header-title'>
-				<a href="/">CØNCEPTNULL</a>
-			</div>
-			<div class='nav-element-cont'>
-				<p>test</p>
-			</div>
-			
-		</div>
-		<div class="content">
-		</div>
-	</div>
-	<div class="footer">
-		<a href="https://wiki.conceptnull.org/" target="_blank"><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 12px; font-style: normal; object-fit: contain; background: rgb(255, 255, 255); color: rgb(0, 0, 0); text-shadow: rgb(8, 0, 255) 0px 3px 3px; flex-wrap: wrap;"><span style="display:flex;">hypertext connection<img src="https://i-love-everything.com/buttons/img/67.gif" style="max-height: 32px;"></span><span style="width:100%;text-shadow:0 0 5px #fff">𓆝 𓆟 𓆞 𓆝</span></div></a>
-	</div> 
-</body>
-</html>