Layout mostly done?

This commit is contained in:
Michał Gdula 2022-12-28 18:45:26 +00:00
parent 3bc730970d
commit c1559307b6
16 changed files with 228 additions and 131 deletions

View file

@ -1,6 +1,6 @@
{% extends 'layout.html' %}
{% block content %}
<div class="title">
<div class="error">
<h1>{{error}}</h1>
<p style="text-align: center;">{{msg}}</p>
</div>

View file

@ -1,4 +1,6 @@
{% extends 'layout.html' %}
{% block content %}
<img src="{{ url_for('static', filename='images/funny.jpg') }}" alt="Funny" id="funny">
<div class="content content-img">
<img src="{{ url_for('static', filename='images/funny.jpg') }}" alt="Funny" id="funny">
</div>
{% endblock %}

View file

@ -1,35 +1,33 @@
{% extends 'layout.html' %}
{% block content %}
<div class="content" id="about">
<h2>Special Thanks</h2>
<p>Jeetix: Helping me with learning how to make websites!</p>
<p>Carty: Teaching me how to run servers and the networking!</p>
<p>mrHDash: For the Ref Sheet and most other art on the page!</p>
<p>Zadok: Silly taidum art seen below!</p>
<p>Shep: For the free YHC!</p>
<div class="content content-header">
<p>{{title}}</p>
</div>
<div class="content" id="contact">
<h2>Stalk me</h2>
<button class="btn">
<div class="content content-list" id="contact">
<button class="btn btn-blue">
Twitter
<i class="ph-twitter-logo"></i>
</button>
<button class="btn">
<button class="btn btn-purple">
Mastodon
<i class="ph-linux-logo"></i>
</button>
<button class="btn">
<button class="btn btn-blue">
Telegram
<i class="ph-telegram-logo"></i>
</button>
<button class="btn">
<button class="btn btn-yellow">
Github
<i class="ph-github-logo"></i>
</button>
<button class="btn">
<button class="btn btn-red">
Discord
<i class="ph-discord-logo"></i>
</button>
</div>
<div class="content content-img" id="contact">
<img src="{{ url_for('static', filename='images/sneak.png') }}" alt="Fluffy the maned wolf art, line art by Shep, colouring by meeee" style="max-width: 500px;">
</div>
{% endblock %}

View file

@ -24,12 +24,12 @@
Home
<i class="ph-arrow-right"></i>
</a>
<a href="/#contact" class="aside-item">
Social Media
<i class="ph-arrow-right"></i>
<a href="/thankies" class="aside-item">
Thankies
<i class="ph-heart"></i>
</a>
<a href="/#about" class="aside-item">
About
<a href="/funny" class="aside-item">
lol
<i class="ph-arrow-right"></i>
</a>
@ -43,17 +43,6 @@
Server Status
<i class="ph-cpu"></i>
</a>
<a href="/" class="aside-item">
Gwa Gwa
<i class="ph-package"></i>
</a>
<hr>
<a href="/funny" class="aside-item">
lol
<i class="ph-arrow-right"></i>
</a>
</div>
</div>
@ -67,19 +56,8 @@
<script>
let btnColours = [ 'red', 'yellow', 'green', 'blue', 'purple']
let btnElements = document.querySelectorAll('.btn');
let asideElements = document.querySelectorAll('.aside-item');
for (let i = 0; i < btnElements.length; i++) {
btnElements[i].addEventListener("mouseover", function() {
let randomColour = Math.floor(Math.random() * btnColours.length);
this.style.color = `var(--${btnColours[randomColour]})`;
});
btnElements[i].addEventListener("mouseout", function() {
this.style.color = '';
});
}
for (let i = 0; i < asideElements.length; i++) {
asideElements[i].addEventListener("mouseover", function() {
let randomColour = Math.floor(Math.random() * btnColours.length);

15
templates/thankies.html Normal file
View file

@ -0,0 +1,15 @@
{% extends 'layout.html' %}
{% block content %}
<div class="content content-default" id="about">
<h2>Special thanks to these wonderful cretura</h2>
<p>Jeetix: Helping me with learning how to make websites!</p>
<p>Carty: Teaching me how to run servers and the networking!</p>
<p>mrHDash: For the Ref Sheet and most other art on the page!</p>
<p>Zadok: Silly taidum art!</p>
<p>Shep: For the free YHC!</p>
</div>
<div class="content content-img">
<img src="{{url_for('static', filename='images/ny.png')}}" style="max-width: 800px;">
</div>
{% endblock %}