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

updated css

main
Cailean Finn 9 months ago
parent
86bacaa822
commit
6fb7533cbf
8 changed files with 170 additions and 138 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      app.py
  2. 120
      static/assets/styles.css
  3. 8
      templates/article.html
  4. 44
      templates/base.html
  5. 9
      templates/dev_base.html
  6. 36
      templates/home.html
  7. 62
      templates/homepage.html
  8. 14
      templates/page_content.html

15
app.py
View File

@ -68,12 +68,11 @@ class WikiApp(Flask):
category_page_list = self.fetch_all_pages(categories) category_page_list = self.fetch_all_pages(categories)
updated_cat_list = self.fetch_pages_cat(category_page_list) updated_cat_list = self.fetch_pages_cat(category_page_list)
articles = updated_cat_list.get('Articles', []) articles = updated_cat_list.get('Articles', [])
print(articles)
projects = updated_cat_list.get('Projects', []) projects = updated_cat_list.get('Projects', [])
newsletters = updated_cat_list.get('Newsletters', []) 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): def page_content(self, title):
# Make a request to MediaWiki API to get content of a specific page # 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_title = data['parse']['title']
page_content = data['parse']['text']['*'] page_content = data['parse']['text']['*']
page_content = self.fix_html(page_content) 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): def fix_html(self, page_content):
soup = BeautifulSoup(page_content, 'html.parser') soup = BeautifulSoup(page_content, 'html.parser')

120
static/assets/styles.css
View File

@ -6,8 +6,9 @@ body {
background-color: black; background-color: black;
color: white; color: white;
margin: auto; margin: auto;
padding: 20px; padding: 0px;
font-family: "Space Mono", monospace; font-family: "Space Mono", monospace;
overflow: hidden;
} }
.main-cont { .main-cont {
@ -19,20 +20,35 @@ body {
.header-title { .header-title {
font-size: 40px; 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 { .header-summary {
font-size: 15px; font-size: 15px;
font-style: italic; font-style: italic;
padding-left: 20px;
} }
.nav-cont { .nav-cont {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
width: 100%; width: 100%;
height: 120px; height: 100px;
gap: 5px; gap: 0px;
margin-bottom: 10px; margin-bottom: 10px;
position: fixed;
z-index: 100;
} }
.nav-element-cont { .nav-element-cont {
@ -40,12 +56,16 @@ body {
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
text-transform: lowercase; text-transform: lowercase;
font-size: 20px; font-size: 25px;
width: 100%;
background-color: white;
padding:20px;
align-items: center;
} }
.nav-element-cont a{ .nav-element-cont a{
text-decoration: none; text-decoration: none;
color: white; color: black;
} }
.nav-element { .nav-element {
@ -60,22 +80,26 @@ body {
height: 1px; height: 1px;
padding: 0; padding: 0;
margin: 0; margin: 0;
margin-bottom: 20px;
} }
.spinning-star { .spinning-star {
transform-origin: center; /* Set the transform origin to the center */ transform-origin: center; /* Set the transform origin to the center */
animation: spin 5s linear infinite; /* Apply the spin animation */ animation: spin 5s linear infinite; /* Apply the spin animation */
color: red;
}
.content {
margin-left: 20px;
margin-right: 20px;
} }
.section-cont { .section-cont {
width: 100% ; width: 100% ;
height: 75vh; height: 100vh;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; 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 { .section {
@ -84,58 +108,92 @@ body {
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
height: 100%; 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 { .section-group {
overflow: scroll;
overflow-x: hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
padding-bottom: 200px;
align-items: center;
} }
.section-element { .section-element {
text-transform: uppercase; text-transform: uppercase;
font-size: 20px; font-size: 20px;
padding-left: 20px;
} }
.section-element a { .section-element a {
text-decoration: none; text-decoration: underline;
color: white; color: white;
} }
.section-img img{ .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 { .section-img {
width: 50%; width: 75%;
height: auto;
padding-left: 20px; padding-left: 20px;
margin-bottom: 20px; margin-bottom: 80px;
padding-top: 10px;
} }
.section-date { .section-date {
padding-left: 20px; 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 for the spin animation */
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } /* Initial rotation */ 0% { transform: rotate(0deg); } /* Initial rotation */
100% { transform: rotate(360deg); } /* Final 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);
}
}

8
templates/article.html
View File

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

44
templates/base.html
View File

@ -1,22 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <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> <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 %}
{% endfor %} </div>
{% endif %}
</li> </div>
{% endfor %} <div class="content">
</ul> {% 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> </body>
</html> </html>

9
templates/dev_base.html
View File

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

36
templates/home.html
View File

@ -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 %}

62
templates/homepage.html
View File

@ -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>

14
templates/page_content.html
View File

@ -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>
Write Preview
Loading…
Cancel
Save