mobile-update

app.py

@@ -14,19 +14,52 @@ class WikiApp(Flask):
         super().__init__(*args, **kwargs)
                 
         # Define routes
-        # self.route('/', methods=['GET'])(self.homepage)
+        self.route('/', methods=['GET'])(self.home)
-        self.route('/', methods=['GET'])(self.homepage_new)
+        self.route('/activities', methods=['GET'])(self.activities)
         self.route('/data', methods=['GET'])(self.data_int)
+        self.route('/generate-nl', methods=['GET'])(self.create_nl)
         self.route('/newsletter/<string:title>', methods=['GET'])(self.generate_newsletter)
-        self.route('/publications', methods=['GET'])(self.fetch_publications)
-        self.route('/meetups', methods=['GET'])(self.fetch_meetups)
         self.route('/<string:title>', methods=['GET'])(self.page_content)
         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, table = self.fix_html(page_content)
+            homepage_content += page_content
+        return render_template('index.html', cont=homepage_content, table=table)
+    
+    def activities(self):
+        # fetch publications as test
+        activity_list = self.get_activities()
+        return render_template('activities.html', title="Activities", activities=activity_list)
+    
+    def get_activities(self):
+        concepts = ['Activities']
+        publication_page_list = self.fetch_all_activies(concepts)
+        updated_cat_list = self.fetch_pages_cat(publication_page_list)
+        activities = updated_cat_list.get('Activities', [])
+        srted_activities = dict(sorted(activities.items(), key=lambda item: datetime.strptime(item[1]['date'], "%d.%m.%Y" ), reverse=True) )
+        # projects = updated_cat_list.get('Projects', [])
+        # sorted_prj = dict(sorted(projects.items(), key=lambda item: datetime.strptime(item[1]['date'], "%d.%m.%Y" ), reverse=True) )
+        # newsletters = updated_cat_list.get('Newsletters', [])
+        # sorted_nl = dict(sorted(newsletters.items(), key=lambda item: datetime.strptime(item[1]['date'], "%d.%m.%Y" ), reverse=True) )
+        return srted_activities
        
     def data_int(self):
         return render_template('data.html')
     
+    def create_nl(self):
+        # Function for generating a newsletter
+        pass
+         
     def generate_newsletter(self, title):
         content, title, date = self.fetch_page(title)
         given_date = datetime.strptime(date, "%Y-%m-%d")
@@ -34,7 +67,16 @@ class WikiApp(Flask):
         new_date_events = given_date + relativedelta(weeks=4)
         opportunites_dict = self.fetch_opportunities(given_date.date(), new_date_opp.date())
         events_dict = self.fetch_events(given_date.date(), new_date_events.date())
-        return render_template('newsletter.html', nav_elements=self.get_nav_menu(), content=content, title=title, events=events_dict, opportunities=opportunites_dict)
+        
+        spotlight = False
+        # Loop through the events and check the spotlight attribute
+        for category, events in events_dict.items():
+            for event in events:
+                if event['spotlight']:
+                    spotlight = True
+                    break
+        
+        return render_template('newsletter.html', nav_elements=self.get_nav_menu(), cont=content, title=title, events=events_dict, opportunities=opportunites_dict, spotlight=spotlight)
 
     def fetch_opportunities(self, pub_date, future_date):
         all_opportunities = self.fetch_all_opportunities(pub_date, future_date)
@@ -260,6 +302,24 @@ class WikiApp(Flask):
                             
         return category_page_list
     
+    def fetch_all_activies(self, categories):
+        category_page_list = {} 
+        for category in categories:
+            response = requests.get(self.MEDIAWIKI_BASE_URL + self.BASE_API, params={'action': 'ask', 'query': '[[Concept:'+category+']]|?Activities:Date|?Activities:Draft', 'format': 'json', 'formatversion': '2'})
+            data = response.json()
+            page_title_timestamps = {}
+            for page_title, page_data in data['query']['results'].items():
+                if 'printouts' in page_data and 'Activities:Date' in page_data['printouts']:
+                    raw_timestamp = page_data['printouts']['Activities:Date'][0]['raw']
+                    raw_timestamp = raw_timestamp[2:]
+                    lol = datetime.strptime(raw_timestamp, "%Y/%m/%d")
+                    formatted_date = lol.strftime("%d.%m.%Y")
+                    if(page_data['printouts']['Activities:Draft'][0] == 'f'):
+                        page_title_timestamps[page_title] = {'date': formatted_date, 'draft': page_data['printouts']['Activities:Draft'][0]}
+                    
+            category_page_list[category] = page_title_timestamps
+        return category_page_list
+      
     def fetch_all_pages(self, categories):
         category_page_list = {} 
         for category in categories:
@@ -296,10 +356,17 @@ class WikiApp(Flask):
         data = response.json()
         
         # Extract page title and content
+        try:
             page_title = data['parse']['title']
             page_content = data['parse']['text']['*']
-        page_content = self.fix_html(page_content)
+            page_content, table = self.fix_html(page_content)
-        return render_template('article.html', nav_elements=self.get_nav_menu(), title=page_title, content=page_content)
+        except:
+            page_title = 'Page not found'
+            page_content = 'The page you are looking for does not exist.'
+            table = None
+        
+        return render_template('index.html', title=page_title, cont=page_content, table=table)
+        
     
     def fetch_page(self, title):
         # Make a request to MediaWiki API to get content of a specific page
@@ -308,14 +375,15 @@ class WikiApp(Flask):
         # Extract page title and content
         page_title = data['parse']['title']
         page_content = data['parse']['text']['*']
-        page_content = self.fix_html(page_content)
+        page_content, table = self.fix_html(page_content)
         page_date = re.search(r'\d{4}-\d{2}-\d{2}', data['parse']['text']['*'])
         
         if(page_date):
             date = page_date.group(0)
-            return page_content, page_title, date
         else:
-            return page_content, page_title
+            date = None
+            
+        return page_content, page_title, date
     
     def get_nav_menu(self):
         response = requests.get(self.MEDIAWIKI_BASE_URL + self.BASE_API, params={'action': 'ask', 'query': '[[Concept:MainNavigation]]', 'format': 'json', 'formatversion': '2'})
@@ -348,7 +416,7 @@ class WikiApp(Flask):
         for link in links:
             # Add _blank to href
             link['target'] = '_blank'
-            link.string = link.string.strip() + " ↗"
+            link.string = link.string.strip()
             
         # Find all a tags with href containing 'index.php'
         links = soup.find_all('a', href=lambda href: href and 'index.php' in href)
@@ -372,15 +440,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,7 +459,32 @@ class WikiApp(Flask):
         if comment and table is not None:
             comment.insert_before(table.extract())
             
-        return soup.prettify()
+        table_html = str(table) if table else None  # Store the table HTML
+        
+        has_content = False
+        # Check if the table has meaningful rows
+        if table:
+            rows = table.find_all('tr')
+            has_content = False  # Assume no meaningful content
+
+            for row in rows:
+                cells = row.find_all(['td', 'th'])
+                # Check if any cell has non-empty text
+                if any(cell.get_text(strip=True) for cell in cells):
+                    has_content = True
+                    break
+                
+        if has_content is False:
+            table_html = None
+            
+        
+        # Remove the table from the main HTML
+        if table:
+            table.decompose()
+
+
+        # Return the modified HTML
+        return soup.prettify(), table_html
     
     def remove_thumbnail_img(self, soup):
         thumbnail = soup.find_all(attrs={"typeof": "mw:File/Thumb"})

static/assets/js/toggle.js

@@ -0,0 +1,10 @@
+// script.js
+document.addEventListener("DOMContentLoaded", () => {
+    const menuToggle = document.querySelector("#menu-btn");
+    const hiddenMenu = document.querySelector("#nav-menu");
+  
+    menuToggle.addEventListener("click", () => {
+      hiddenMenu.classList.toggle("show");
+    });
+  });
+  

static/assets/styles.css

@@ -1,671 +1,483 @@
-@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%;
+    width: 100%;
 }
 
-.header-title {
+/* Reset some default styles */
-	font-size: 40px;
+body, h1, h2, h3, p, ul, li, a {
-	display: flex;
+    margin: 0;
-	background-color: white;
+    padding: 0;
-	width: fit-content;
+    box-sizing: border-box;
-	height: 100px;
-	padding-left: 40px;
-	padding-right: 40px;
-	align-items: center;
 }
 
-.header-logo {
+/* General body styling */
-	height: 100px;
+body {
-	max-width: 500px;
+    font-family: "Inter", serif;
-	padding-left: 40px;
+    font-optical-sizing: auto;
-	padding-right: 40px;
+    font-style: normal;
-	align-self: center;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f9f9f9;
+    padding: 0px;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
 }
 
-.header-logo img{
+* {
-	height: 100%;
+    margin:0;
-	width: 100%;
+    padding:0;
+    border:0;
+    font-family: "Inter", serif;
+    -webkit-text-size-adjust:none;
 }
 
-.header-title a {
+a {
     text-decoration: none;
     color:black;
 }
 
-.header-summary {
+#main-container {
-	font-size: 15px;
+    height: 100%;
-	font-style: italic;
+    width: 100%;
-	padding-left: 20px;
-}
-
-.nav-cont {
     display: flex;
     flex-direction: row;
-	width: 100%;
-	height: 100px;
-	gap: 0px;
-	/* margin-bottom: 10px; */
-	/* position: fixed; */
-	z-index: 100;
 }
 
-.nav-element-cont {
+/* index */
+#index-container {
     display: flex;
-	flex-direction: row;
+    flex: 0 0 35%;
-	gap: 20px;
+    flex-direction: column;
-	text-transform: lowercase;
-	font-size: 25px;
     width: 100%;
-	background-color: black;
+    padding-top: 20px;
-	height: 100px;
+    padding-bottom: 20px;
-	padding-left: 20px;
+    gap: 40px;
+    overflow-y: scroll;
+    overflow-x: hidden;
     align-items: center;   
 }
 
-.nav-element-cont a{
+#index-container::-webkit-scrollbar {
-	text-decoration: none;
+    display: none;
-	color: white;
 }
 
-.nav-element {
+#index-header {
+    padding-left: 60px;
+    padding-right: 60px;
     display: flex;
-	flex-direction: row;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
     gap: 20px;
 }
 
-.line {
+#index-content {
-	background-color: black;
+    padding-left: 60px;
-	width: 100%;
+    padding-right: 60px;
-	height: 1px;
+    text-align: justify;
-	padding: 0;
-	margin: 0;
-	margin-bottom: 20px;
 }
 
-.spinning-star {
+#index-links {
-            transform-origin: center; /* Set the transform origin to the center */
+    padding-left: 60px;
-            animation: spin 5s linear infinite; /* Apply the spin animation */
+    padding-right: 60px;
-			color: red;
 }
 
-.content {
+#index-link-list {
-	width: 100%;
     display: flex;
-	height: calc(100% - 100px);
+    flex-direction: row;
-	/* position: fixed; */
+    flex-wrap: wrap;
-}
+    gap: 20px;
-
+    justify-content: space-between;
-.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 {
+#content-container {
-	width: 60%;
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
+    width: 100%;
+    padding: 40px;
+    padding-top: 20px;
     gap: 20px;
-	margin-bottom: 20px;
+    overflow-y: scroll;
-}
+    overflow-x: hidden;
-
-.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{
+#content-container a{
-	font-size: 60px;
     text-decoration: underline;
-	margin-bottom: 5px;
+    color:blue;
-}
-
-.content-cont h2{
-	font-size: 30px;
-	text-decoration: none;
 }
 
-.content-cont h3{
+#content-title {
-	font-size: 25px;
+    text-decoration: underline;
-	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 {
+#content-body {
-	color: red;
+    display: flex;
-	text-decoration: none;
+    flex-direction: column;
+    gap: 20px;
+    text-align: justify;
 }
 
-.content-cont .event-cont p a {
+#content-body img{
-	color: red;
+    width: 60%;
-	text-decoration: none;
+    height: auto;
+    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+    filter: grayscale(100%) contrast(1.75);
 } 
 
-.content-cont ul {
+#wiki-box {
-	font-size: 20px;
+    border-style: dashed;
-	border-style: none;
 }
 
-.content-cont li a{
-	border-style: none;
-	line-height: 40px;
-}
 
-.content-cont img{
+#line-divider {
-	height: 100%;
+    width: 2px; /* Thickness of the divider */
-	width: auto;
+    background-color: black; /* Color of the line */
-	max-width: 900px;
-	border: black;
-    border-style: dashed;
-	transition: transform 0.3s ease-in-out;
 }
 
-.content-cont img:hover {
+#activity-list {
-	animation: rotate 1s steps(2) forwards infinite;
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
 }
 
-
+/* ascii menu for mobile */
-/* .content-cont::-webkit-scrollbar {
+#ascii-menu {
     display: none;
-} */
-
-.content-header {
-	/* padding-top: 160px; */
 }
 
-.section-cont {
+/*
-	width: 100vw;
+    table
-	height: calc(100vh - 100px);
+*/
-	display: flex;
-	flex-direction: row;
-	justify-content: space-around;
-}
 
-.collection-cont {
+table {
-	width: 100% ;
+    display: table;
-	height: 100vh;
+    border-collapse: separate;
-	display: flex;
+    box-sizing: border-box;
-	flex-direction: row;
+    text-indent: initial;
-	justify-content: space-evenly;
+    unicode-bidi: isolate;
-	align-content: baseline;
+    border-spacing: 20px;
-	flex-wrap: wrap;
+    border-color: gray;
-	gap:60px;
+    border-radius: 30px;
+    font-size: 20px;
+    text-align: left;
 }
 
-.collection-title {
+th {
-	border: 2px;
+    text-transform: uppercase;
-	border-radius: 20px;
-	border-style: solid;
-	border-color: black;
-	padding: 10px;
 }
 
-.collection-element {
+/*
-	display: flex;
+    classes
-	flex-direction: column;
+*/
-	align-items: center;
+
-	row-gap: 20px;
+.title {
+    font-size: 60px;
+    font-weight: bold;
+    text-transform: uppercase;
 }
 
-.collection-header{
+p {
     font-size: 20px;
-	margin-top: 40px;
+    font-weight: normal;
 }
 
-.content-cont .collection-cont a {
+.button-link {
-	text-decoration: underline;
+    display: inline-block;
+    padding: 15px 30px;
+    background-color: #D9D9D9; /* Green background */
     color: black;
+    text-decoration: none;
+    border-radius: 30px;
+    font-size: 20px;
+    font-weight: normal;
+    text-align: center;
+    text-transform: lowercase;
 }
 
-.collection-cont .section-img{
+.disable-scrollbar{
-	width: 100%;
+    -ms-overflow-style: none;  /* IE and Edge */
-	padding-left: 0px;
+    scrollbar-width: none;  /* Firefox */
-	margin-bottom: 0px;
 }
 
-.collection-cont .section-img img{
+.astr-line {
-	width: 100%;
+    text-align: center;
-    height: auto;
+    font-size: 48px;
-    max-width: 200px;
-    object-fit: contain;
-    border-radius: 0px;
-    border: black;
-    border-style: dashed;
-    transition: transform 0.3s ease-in-out;
 }
 
-
+.mw-parser-output {
-.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 */
 }
 
-
+.ascii {
-.section-group {
+    font-family: 'Courier New', Courier, monospace;
-	
+    white-space: pre;
+    width: fit-content;
+    font-size: 12px;
+    font-weight: bold;
 }
 
-.section-object {
+.activity {
+    color: black;
     display: flex;
     flex-direction: column;
-	gap: 10px;
+    gap:20px;
-}
-
-.section-element {
-	text-transform: uppercase;
-	font-size: 20px;
-	
 }
 
-.section-element a {
+.activity-title {
     text-decoration: underline;
-	color: red;
+    font-weight: bold;
 }
 
-.section-img img{
+.activity-image {
     width: 100%;
     height: 400px;
-	object-fit: cover;
+    overflow: hidden;
-	border-radius: 0px;
+    position: relative;
-    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*/
+#content-body .activity-image img {
-.event-cont {
     width: 60%;
-	font-size: 17.5px;
+    height: 100%;
-}
+    object-fit: cover;
-
+    object-position: center;
-.event {
-	margin-bottom: 10px;
-	display: block;
 }
 
-.opp {
+.opportunity-text-padding {
-	margin-bottom: 10px;
+    padding-top: 20px;
-	display: block;
+    padding-bottom: 20px;
 }
 
-.list-events {
+#nav-menu {
+    width: 90%;
     display: flex;
     flex-direction: column;
     gap:10px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.5s ease-in-out;
 }
 
-.list-opp {
+/* Add a class to show the menu */
+#nav-menu.show {
     display: flex;
-	flex-direction: column;
+    max-height: 400px;
-	gap: 10px;
 }
 
-.opp-cont{
+#nav-menu .button-link {
-	width: 60%;
+    width: 100%;
-	font-size: 17.5px;
-	margin-bottom: 25px;
 }
 
-.opp a {
+/* headers */
+h4 {
+    font-size: 24px;
+    margin: 0;
     color: black;
-	text-decoration: none;
-}
-
-.opp-link {
-	color: red;
-	text-decoration: none;
 }
 
-.event a {
+h3 {
+    font-size: 26px;
+    margin: 0;
     color: black;
-	text-decoration: none;
 }
 
-.event-link {
+h2 {
-	color: red;
+    font-size: 28px;
-	text-decoration: none;
+    margin: 0;
-}
+    color: black;
-
-.event-text {
-	font-family: "Source Sans 3", sans-serif;
-	font-size: 20px;
-	line-height: 30px;
 }
 
-.opp-text {
+h1 {
-	font-family: "Source Sans 3", sans-serif;
+    font-size: 30px;
-	font-size: 20px;
+    margin: 0;
-	line-height: 30px;
+    color: black;
 }
 
-.pub-section {
+hr {
-	display: flex;
+    border-top: 1px solid black; 
-	gap: 20px;
-	flex-direction: column;
-	width: 60%;
 }
 
-.pub-section-cont {
+.list-container-mobile {
-	display: flex;
-	flex-direction: column;
-	padding: 40px;
-	padding-top: 0px;
-	gap: 20px;
-	overflow-y: scroll;
     width: 100%;
 }
 
-.pub-section-cont p{
+/* breakpoints */
-	font-family: "Source Sans 3", sans-serif;
-    font-size: 20px;
-    line-height: 30px;
-    margin-top: 0;
-}
 
-.pub-section-cont h1 {
+@media only screen and (max-width: 1440px) {
-	font-size: 60px;
+    .ascii {
-    text-decoration: underline;
+        font-size: 9px;
-    margin-bottom: 5px;
     }
 
-#subscribe-button {
+    #content-body img{
-	position: absolute;
+        width: 80%;
-	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 {
+    #content-body .activity-image img {
-	text-decoration: none;
+        width: 80%;
-	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 {
+/* Extra large devices (large laptops and desktops, 1200px and up) */
-    0% {
+@media only screen and (max-width: 1200px) {
-      transform: rotate(0deg) scaleX(100%);
+    .ascii {
-    }
+        font-size: 7px;
-    25% {
-      transform: rotate(2deg) scaleX(95%);
     }
-	50% {
-		transform: rotate(0deg) scaleX(100%);
 }
-	75% {
+
-		transform: rotate(-2deg) scaleX(95%);
+/* Tablets, iPads (portrait phones, less than 1024px) */
+@media only screen and (max-width: 1024px) {
+    .ascii {
+        font-size: 6px;
     }
-    100% {
+
-       transform: rotate(0deg) scaleX(100%);
+    .astr-line {
+        font-size: 36px;
     }
+
+    #index-content {
+        padding-left: 25px;
+        padding-right: 25px;
     }
 
-  /* Mobile */
+    #index-links {
-  @media screen and (max-width: 1024px){
+        padding-left: 25px;
-	.section-img img{
+        padding-right: 25px;
-		height: 200px;
     }
 
-	.pub-section-cont {
+    #index-link-list {
-		padding: 0;
+        justify-content: center;
-		padding-right: 10px;
-		padding-bottom: 20px;
-		margin-left: 20px;
     }
 
-	.pub-section-cont p {
+    .list-container {
-		font-size: 15px;
+        width: 100%;
     }
 
-	.pub-section-cont h1 {
+    .button-link {
-		font-size: 40px;
+        width: -webkit-fill-available;
     }
 
-	.pub-section {
+    p {
-		width: 100%;
+        font-size: 18px;
     }
 
-	.content-cont .article-cont a {
+    .title {
-		font-size: 14px;
+        font-size: 50px;
     }
 
-	#subscribe-button {
+    h1 {
-		font-size: 20px;
+        font-size: 28px;
-		bottom: 10px;
-		right: 10px;
-		padding: 10px;
-		background-color: black;
-		color: white;
     }
 
-    .nav-cont {
-		flex-direction: column;
 }
 
-	.nav-element-cont {
+/* Mobile devices (portrait phones, less than 768px) */
-		overflow-x: scroll;
+@media only screen and (max-width: 768px) {
-		overflow-y: hidden;
+    .ascii {
-		width: auto;
+        font-size: 7px;
-        padding-left: 20px;
     }
 
-	.nav-element-cont::-webkit-scrollbar {
+    .astr-line {
         display: none;
+    }
 
+    .astr-line-menu {
+        font-size: 18px;
+        text-align: center;
+        vertical-align: middle; 
+        line-height: 45px;
     }
 
-	.header-title {
+    #ascii-menu {
+        display: flex;
+        flex-direction: row;
         width: 100%;
-		justify-content: center;
+        justify-content: space-around;
-		padding-left: 0;
-		padding-right: 0;
     }
 
-	.section-cont {
+    #main-container {
         flex-direction: column;
-		height: auto;
     }
 
-	.section {
+    #index-header {
-		width: 100%;
+        flex-direction: row;
-		overflow-x: scroll;
-		/* height: calc(50vh - 50px); */
     }
 
-	.section-title {
+    #line-divider {
-		padding-top: 40px;
+        display: none;
     }
 
-	.section-group {
+    #content-container {
-		padding-bottom: 0px;
+        width: auto;
-		display: flex;
+        padding: 20px;
-		flex-direction: row;
     }
 
-	.section-object {
+    #index-links {
-		padding-bottom: 0px;
+        display: none;
     }
 
-	.article-cont {
+    #index-content {
-		width: 100%;
+        display: none;
     }
 
-	.content-cont {
+    #index-container {
-		padding-right: 40px;
+        /* height: 200px; */
+        padding-bottom: 0px;
+        gap:20px;
+        flex: none;
     }
 
-	.event-cont {
+    #content-title {
-		width: 100%;
+        text-align: center;
-		font-size: 15px;
     }
 
-	.opp-cont {
+    p {
-		width: 100%;
+        font-size: 16px;
-		font-size: 15px;
     }
 
-	.content-cont img {
+    .title {
-		height: auto;
+        font-size: 36px;
-		width: 95%;
     }
 
-	.content-cont h1 {
+    .activity-title{
-		font-size: 40px;
+        text-align: left;
     }
 
-	.content-cont h2 {
+    .activity-image{
-		font-size: 20px;
+        height: 200px;
     }
 
-	.article-cont p {
+    .button-link {
-		font-size: 15px;
+        width: fit-content;
+        font-size: 18px;
+        padding: 10px 20px;
     }
 
-	.main-cont {
+    .list-container {
-		height: 100vh;
+        width: fit-content;
     }
 
-	.content {
+    #content-body .activity-image img {
-		height: 100vh;
+        width: 100%
-    	overflow-y: scroll;
-		overflow-x: hidden;
     }
 
-	.content-cont h4 {
+    #content-body img {
-		font-size: 17.5px;
+        width: 100%;
     }
-
-	.opp-text {
-		font-size: 15px;
 }
 
-	.header-logo {
+@media only screen and (max-width: 500px) {
-		display: flex;
+    .ascii {
+        font-size: 4px;
     }
 
-	@media screen and (max-width: 640px){
+    .astr-line-menu {
-		.content-cont {
+        font-size: 16px;
-			padding-right: 10px;
-			margin-left: 20px;
     }
+
+    .button-link {
+        font-size: 16px;
     }
 }

templates/_activities.html

@@ -0,0 +1,5 @@
+<div id="main-container">
+    {% include "_nav.html" %}
+    <div id="line-divider"></div>
+    {% include "_list.html" %}
+</div>

templates/_article.html

@@ -0,0 +1,14 @@
+<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="astr-line">&#x2732; &#x2732; &#x2732;</div>
+    <div id="content-metadata">
+        {%if table != None %}
+        <div id="wiki-box">
+            {{ table | safe }}
+        </div>
+        {%endif%}
+    </div>
+</div>

templates/_base.html

@@ -0,0 +1,16 @@
+<!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">
+    <link rel="icon" href="/static/assets/images/favicon.ico" type="image/x-icon">
+</head>
+<body>
+    {% block content %}
+    {% endblock %}
+</body>
+</html>

templates/_list.html

@@ -0,0 +1,25 @@
+<div id="content-container" class="disable-scrollbar">
+    <div id="content-title" class="title">{{ title | safe }}</div>
+    <p>Announcements, Events, and Other CONCEPT NULL related activities ╰(*°▽°*)╯</p>
+    <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
+    <div id="content-body">
+        <div id="activity-list">
+        {% for key, value in activities.items() %}
+            <a href="/{{key}}">
+                <div class="activity">
+                    <h1 class="activity-title"> {{ key }} ({{ value.date }})</h1>
+                    <div class="activity-image"><img src="{{ value.source }}"></div>
+                </div>
+            </a>
+        {% endfor %}
+        </div>
+    </div>
+    <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
+    <div id="content-metadata">
+        {%if table != None %}
+        <div id="wiki-box">
+            {{ table | safe }}
+        </div>
+        {%endif%}
+    </div>
+</div>

templates/_main.html

@@ -0,0 +1,5 @@
+<div id="main-container">
+{% include "_nav.html" %}
+<div id="line-divider"></div>
+{% include "_article.html" %}
+</div>

templates/_nav.html

@@ -0,0 +1,43 @@
+<div id="index-container" class="disable-scrollbar">
+    <a href="/"><div id="index-header">
+        <div class="ascii">  
+  .g8"""bgd   .g8""8q. `7MN.   `7MF' .g8"""bgd `7MM"""YMM  `7MM"""Mq. MMP""MM""YMM 
+.dP'     `M .dP'    `YM. MMN.    M .dP'     `M   MM    `7    MM   `MM.P'   MM   `7 
+dM'       ` dM'      `MM M YMb   M dM'       `   MM   d      MM   ,M9      MM      
+MM          MM        MM M  `MN. M MM            MMmmMM      MMmmdM9       MM      
+MM.         MM.      ,MP M   `MM.M MM.           MM   Y  ,   MM            MM      
+`Mb.     ,' `Mb.    ,dP' M     YMM `Mb.     ,'   MM     ,M   MM            MM      
+  `"bmmmd'    `"bmmd"' .JML.    YM   `"bmmmd'  .JMMmmmmMMM .JMML.        .JMML.  </div>       
+<div class="ascii">  
+`7MN.   `7MF'`7MMF'   `7MF'`7MMF'      `7MMF'      
+  MMN.    M    MM       M    MM          MM        
+  M YMb   M    MM       M    MM          MM        
+  M  `MN. M    MM       M    MM          MM        
+  M   `MM.M    MM       M    MM      ,   MM      , 
+  M     YMM    YM.     ,M    MM     ,M   MM     ,M 
+.JML.    YM     `bmmmmd"'  .JMMmmmmMMM .JMMmmmmMMM </div> 
+    </div></a>
+    <div id="ascii-menu">
+      <div class="astr-line-menu">&#x2732; &#x2732; &#x2732;</div>
+      <div class="list-container" id="menu-btn"><a class="button-link">MENU</a></div>
+      <div class="astr-line-menu">&#x2732; &#x2732; &#x2732;</div>
+    </div>
+    <div id="nav-menu">
+      <div class="list-container-mobile"><a href="/activities" class="button-link">activities &#8595;</a></div>
+      <div class="list-container-mobile"><a href="https://conceptnull.substack.com/subscribe" target="_blank" class="button-link">newsletter &#8595;</a></div>
+      <div class="list-container-mobile"><a href="https://www.instagram.com/conceptnull/" class="button-link">instagram &#8595;</a></div>
+    </div>
+    <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
+    <div id="index-content">
+        <p>A grassroot organisation of artists, creative technologist, designers, and educators focused on supporting a vibrant new media arts community in Ireland -- through our events, newsletter, and other activities.</p>         
+    </div>
+    <div id="index-links">
+        <div id="index-link-list">
+            <div class="list-container"><a href="/activities" class="button-link">activities &#8595;</a></div>
+            <div class="list-container"><a href="https://conceptnull.substack.com/subscribe" target="_blank" class="button-link">newsletter &#8595;</a></div>
+            <div class="list-container"><a href="#" class="button-link">instagram &#8595;</a></div>
+        </div>
+    </div>
+</div>
+
+<script src={{ url_for('static', filename='assets/js/toggle.js') }}></script>

templates/_newsletter.html

@@ -0,0 +1,99 @@
+<div id="content-container" class="disable-scrollbar">
+    <div id="content-title" class="title">{{ title | safe }}</div>
+    <div id="content-body">
+        {{ cont | safe }}
+
+        <div class='event-cont'>
+            {% if spotlight %}
+                {% for key, value in events.items() %}
+                    <hr>
+                    <h2 class="opportunity-text-padding">🔦 Spotlight</h2>
+                    <hr>
+                    <div>
+                    <p>&#8203;</p>
+                    {% for data in value %}
+                        {% if data.spotlight %}
+                        <div>
+                            <a href='/{{ data.pagetitle }}' target="_blank"><h4><b>{{ data.name }}</b></h4></a>
+                            <p><b>Organiser/s: </b>{{ data.org }}</p>
+                            <p><b>Location: </b>{{ data.location }}</p>
+                            <p><b>Date: </b>{{ data.deadline }} &#8594; {{ data.endDate}}</p>
+                            <p class="opportunity-text-padding">{{ data.text }}</p>
+                            <a href={{ data.source }} target='_blank'><p><b>Source ↗</b></p></a>
+                        </div>
+                        <p>&#8203;</p>
+                        {% endif %}
+                    {% endfor %}
+                    </div>
+                {% endfor %}
+            {% endif %}
+    
+            {% for key, value in events.items() %}
+                <hr>
+                <h2 class="opportunity-text-padding">🎪 Events</h2>
+                <hr>
+                <div>
+                <p>&#8203;</p>
+                {% for data in value %}
+                    {% if not data.spotlight %}
+                        <div>
+                            <a href='/{{ data.pagetitle }}' target="_blank"><h4><b>{{ data.name }}</b></h4></a>
+                            <p><b>Organiser/s: </b>{{ data.org }}</p>
+                            <p><b>Location: </b>{{ data.location }}</p>
+                            <p><b>Date: </b>{{ data.deadline }} &#8594; {{ data.endDate}}</p>
+                            <p class="opportunity-text-padding">{{ data.text }}</p>
+                            <a href={{ data.source }} target='_blank'><p><b>Source ↗</b></p></a>
+                        </div>
+                        <p>&#8203;</p>
+                    {%endif%}
+                {% endfor %}
+                </div>
+            {% endfor %}
+        </div>
+    
+        <div>
+            {% for key, value in opportunities.items() %}
+                <hr>
+                <h2 class="opportunity-text-padding">{{ key }}</h2>
+                <hr>
+                <div>
+                <p>&#8203;</p>
+                {% for data in value %}
+                <div class='opp'>
+                    <a href='/{{ data.pagetitle }}' target="_blank"><h4><b>{{ data.name }}</b></h4></a>
+                    <p><b>Deadline:</b> {{ data.deadline }}</p>
+                    <p><b>Organiser/s: </b>{{ data.org }}</p>
+                    <p><b>Location: </b>{{ data.location }}</p>
+                    <p class="opportunity-text-padding">{{ data.text }}</p>
+                    <a href={{ data.source }} target='_blank'><p><b>Source ↗</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>&#8203;</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>&#8203;</p>
+            <p>Chat soon, <a href='https://conceptnull.org/' target='_blank'>Concept NULL</a></p>      
+            <p>&#8203;</p>
+            <p>[[email protected]]</p>
+        </div>
+
+    </div>
+
+    <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
+    
+    <div id="content-metadata">
+        {%if table != None %}
+        <div id="wiki-box">
+            {{ table | safe }}
+        </div>
+        {%endif%}
+    </div>
+</div>

templates/activities.html

@@ -0,0 +1,9 @@
+{% extends "_base.html" %}
+
+{% block title %}CONCEPT NULL{% endblock %}
+
+{% block content %}
+
+{% include "_activities.html" %}
+
+{% endblock %}

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

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Ø | D.A.T.A Interview</title>
+    <title>CONCEPT NULL</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>

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,9 @@
+{% extends "_base.html" %}
+
+{% block title %}CONCEPT NULL{% endblock %}
+
+{% block content %}
+
+{% include "_main.html" %}
+
+{% 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 +1,13 @@
-{% extends "base.html" %}
+{% 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'>
+{% block title %}CONCEPT NULL{% endblock %}
-		{% 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'>
+{% block content %}
-		<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 id="main-container">
-	</div>
+    {% include "_nav.html" %}
+    <div id="line-divider"></div>
+    {% include "_newsletter.html" %}
 </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>