updated css

app.py

@@ -68,12 +68,11 @@ class WikiApp(Flask):
         category_page_list = self.fetch_all_pages(categories)
         updated_cat_list = self.fetch_pages_cat(category_page_list)
         articles = updated_cat_list.get('Articles', [])
-        print(articles)
         projects = updated_cat_list.get('Projects', [])
         newsletters = updated_cat_list.get('Newsletters', [])
-        nav_elements = updated_cat_list.get('MainNavigation', [])
+        nav_elements = self.get_nav_menu()
         
-        return render_template('homepage.html', articles=articles, projects=projects, newsletters=newsletters, nav_elements=nav_elements)
+        return render_template('home.html', articles=articles, projects=projects, newsletters=newsletters, nav_elements=nav_elements)
     
     def page_content(self, title):
         # Make a request to MediaWiki API to get content of a specific page
@@ -83,7 +82,15 @@ class WikiApp(Flask):
         page_title = data['parse']['title']
         page_content = data['parse']['text']['*']
         page_content = self.fix_html(page_content)
-        return render_template('page_content.html', title=page_title, content=page_content)
+        return render_template('article.html', nav_elements=self.get_nav_menu(), title=page_title, content=page_content)
+    
+    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'})
+        data = response.json()
+        main_navigation_elements = {}
+        for page_title, page_data in data['query']['results'].items():
+            main_navigation_elements[page_title] = {'title':page_data.get('fulltext', '')}
+        return main_navigation_elements
     
     def fix_html(self, page_content):
         soup = BeautifulSoup(page_content, 'html.parser')

static/assets/styles.css

@@ -6,8 +6,9 @@ body {
 	background-color: black;
 	color: white;
 	margin: auto;
-	padding: 20px;
+	padding: 0px;
 	font-family: "Space Mono", monospace;
+	overflow: hidden;
 }
 
 .main-cont {
@@ -19,20 +20,35 @@ body {
 
 .header-title {
 	font-size: 40px;
+	display: flex;
+	background-color: black;
+	width: fit-content;
+	padding: 10px;
+	padding-left: 20px;
+	padding-right: 20px;
+	align-items: center;
+}
+
+.header-title a {
+	text-decoration: none;
+	color: white;
 }
 
 .header-summary {
 	font-size: 15px;
 	font-style: italic;
+	padding-left: 20px;
 }
 
 .nav-cont {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	width: 100%;
-	height: 120px;
+	height: 100px;
-	gap: 5px;
+	gap: 0px;
 	margin-bottom: 10px;
+	position: fixed;
+	z-index: 100;
 }
 
 .nav-element-cont {
@@ -40,12 +56,16 @@ body {
 	flex-direction: row;
 	gap: 10px;
 	text-transform: lowercase;
-	font-size: 20px;
+	font-size: 25px;
+	width: 100%;
+	background-color: white;
+	padding:20px;
+	align-items: center;
 }
 
 .nav-element-cont a{
 	text-decoration: none;
-	color: white;
+	color: black;
 }
 
 .nav-element {
@@ -60,22 +80,26 @@ body {
 	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 {
+	margin-left: 20px;
+	margin-right: 20px;
 }
 
 .section-cont {
 	width: 100% ;
-	height: 75vh;
+	height: 100vh;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	margin-top: 10px;
-	background-color: rgb(54, 54, 255); /* Background color for demonstration */
-	border-radius: 30% 70% 70% 30% / 46% 30% 70% 54% ;
 }
 
 .section {
@@ -84,58 +108,92 @@ body {
 	flex-direction: column;
 	gap: 10px;
 	height: 100%;
-	margin-left: 60px;
+	z-index: 50;
-	overflow: hidden;
+	overflow: scroll;
+	-ms-overflow-style: none;  /* IE and Edge */
+  	scrollbar-width: none;  /* Firefox */
 }
 
-.section::-webkit-scrollbar {
-	display: none;
-  }
-
-.section-group::-webkit-scrollbar {
-	display: none;
-}
 
 .section-group {
-	overflow: scroll;
-	overflow-x: hidden;
-	-ms-overflow-style: none;  /* IE and Edge */
-  	scrollbar-width: none;  /* Firefox */
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
+	padding-bottom: 200px;
+	align-items: center;
 }
 
 .section-element {
 	text-transform: uppercase;
 	font-size: 20px;
-	padding-left: 20px;
+	
 }
 
 .section-element a {
-	text-decoration: none;
+	text-decoration: underline;
 	color: white;
 }
 
 .section-img img{
-	max-width: 100%;
+	width: 100%;
-	border-radius: 10px;
+	height: 200px;
+	object-fit: cover;
+	border-radius: 0px;
+    border: white;
+    border-style: dashed;
+	transition: transform 0.3s ease-in-out;
 }
 
+.section-img:hover img {
+    animation: rotate 1s steps(2) forwards infinite;
+  }
+
 .section-img {
-	width: 50%;
+	width: 75%;
-	height: auto;
 	padding-left: 20px;
-	margin-bottom: 20px;
+	margin-bottom: 80px;
+	padding-top: 10px;
 }
 
 .section-date {
 	padding-left: 20px;
 }
 
+.section-title {
+	display: flex;
+	margin-bottom: 40px;
+	padding-top: 160px;
+	align-items: center;
+}
+
+.footer {
+	position: absolute;
+	right: 0px;
+	top: 25px;
+	z-index: 500;
+}
+
 
 /* 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);
+    }
+    25% {
+      transform: rotate(2deg);
+    }
+	50% {
+		transform: rotate(0deg);
+	}
+	75% {
+		transform: rotate(-2deg);
+	}
+    100% {
+      transform: rotate(0deg);
+    }
+  }

templates/article.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+{% block title %}Ø | {{ title }}{% endblock %}
+{% block content %}
+<h1>{{ title }}</h1>
+    <div>
+        {{ content | safe }}
+    </div>
+{% endblock %}

templates/base.html

@@ -1,22 +1,30 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>My Wiki</title>
+    <meta charset="UTF-8">
-</head>
+    <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') }}">
 <body>
-    <h1>Welcome to My Wiki</h1>
+	<div class='main-cont'>
-    <ul>
+		<div class='nav-cont'>
-        {% for page_title, page_info in pages.items() %}
+			<div class='header-title'>
-            <li>
+				<a href="/">CØNCEPTNULL</a>
-                <h2>{{ page_title }}</h2>
+			</div>
-                <div>{{ page_info.content|safe }}</div>
+			<div class='nav-element-cont'>
-                {% if page_info.images %}
+				{% for key, element in nav_elements.items() %}
-                        {% for image_url in page_info.images %}
+				<div class='nav-element'><a href="{{ url_for('page_content', title=element.title) }}">{{ element.title }}</a><div class='spinning-star'>🞱</div></div>
-                            <li><img src="{{ image_url }}" alt="Image"></li>
 				{% endfor %}
-                {% endif %}
+			</div>
-            </li>
+			
-        {% endfor %}
+		</div>
-    </ul>
+		<div class="content">
+		{% block content %}
+		{% endblock %}
+		</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>

templates/dev_base.html

@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>My Wiki</title>
-</head>
-<body>
-    <h1>Welcome to My Wiki</h1>
-</body>
-</html>

templates/home.html

@@ -0,0 +1,36 @@
+{% extends "base.html" %}
+{% block title %} Ø | Home{% endblock %}
+{% block content %}
+<div class='section-cont'>
+	<div class='section'>
+		<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>
+		<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'>
+		<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>
+		<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'>
+		<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>
+		<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/homepage.html

@@ -1,62 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>concept null</title>
-	<link rel="stylesheet" href="{{ url_for('static', filename='assets/styles.css') }}">
-</head>
-<body>
-	<div class='main-cont'>
-		<div class='nav-cont'>
-			<div class='header-title'>
-				CONCEPTNULL
-			</div>
-			<div class='header-summary'>
-				summary about us
-			</div>
-			<div class='nav-element-cont'>
-				{% for nav_element in nav_elements %}
-				<div class='nav-element'><a href="{{ url_for('page_content', title=nav_elements[nav_element]['title']) }}">{{ nav_elements[nav_element]['title'] }}</a><div class='spinning-star'>🞱</div></div>
-				{% endfor %}
-			</div>
-		</div>
-		<span class='line'></span>
-		
-		<div class='section-cont'>
-			<div class='section'>
-				<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: 20px; font-style: italic; object-fit: contain; font-family: monospace; color: white; text-shadow: white 0px 5px 5px; text-decoration: none;">articles&nbsp;<img src="https://i-love-everything.com/buttons/img/7.gif" style="max-height: 32px;"></div></div>
-				<div class='section-group'>
-				{% for article in articles %}
-					<div class='section-element'><a href="{{ url_for('page_content', title=articles[article]['title']) }}">↘ {{ articles[article]['title'] }}</a></div>
-					<div class='section-date'>🙿 {{ articles[article]['date'] }}</div>
-					<div class='section-img'><a href="{{ url_for('page_content', title=articles[article]['title']) }}"><img src="{{ articles[article]['source'] }}"></a></div>
-				{% endfor %}
-				</div>
-			</div>
-			<div class='section'>
-				<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: 20px; font-style: oblique; object-fit: contain; font-family: monospace;  color: white; text-shadow: red 0px 2px 5px;">newsletters<br><img src="https://i-love-everything.com/buttons/img/34.gif" style="max-height: 32px;"></div></div>
-				<div class='section-group'>
-					{% for newsletter in newsletters %}
-						<div class='section-element'><a href="{{ url_for('page_content', title=newsletters[newsletter]['title']) }}">↘ {{ newsletters[newsletter]['title'] }}</a></div>
-						<div class='section-date'>🙿 {{ newsletters[newsletter]['date'] }}</div>
-						<div class='section-img'><a href="{{ url_for('page_content', title=newsletters[newsletter]['title']) }}"><img src="{{ newsletters[newsletter]['source'] }}"></a></div>
-					{% endfor %}
-					</div>
-			</div>
-			<div class='section'>
-				<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: 20px; font-style: normal; object-fit: contain; font-family: monospace; color: white; border: 1px solid white;">projects<img src="https://i-love-everything.com/buttons/img/26.gif" style="max-height: 32px;"></div></div>
-				<div class='section-group'>
-					{% for project in projects %}
-						<div class='section-element'><a href="{{ url_for('page_content', title=projects[project]['title']) }}">↘ {{ projects[project]['title'] }}</a></div>
-						<div class='section-date'>🙿 {{ projects[project]['date'] }}</div>
-						<div class='section-img'><a href="{{ url_for('page_content', title=projects[project]['title']) }}"><img src="{{ projects[project]['source'] }}"></a></div>
-					{% endfor %}
-					</div>
-			</div>
-		</div>
-
-		<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(0, 0, 0); color: rgb(255, 255, 255); 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>
-	</div>
-</body>
-</html>

templates/page_content.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ title }}</title>
-</head>
-<body>
-    <h1>{{ title }}</h1>
-    <div>
-        {{ content | safe }}
-    </div>
-</body>
-</html>