Refactored templates, explained everything
This commit is contained in:
MatthiasSaihttam
parent
c26c312dc0
commit
e661b29b52
|
|
@ -1,8 +1,3 @@
|
|||
.main-content {
|
||||
padding: 20px 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#password {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,12 +44,12 @@ body {
|
|||
}
|
||||
|
||||
.main-wrap {
|
||||
max-width: 1000px;
|
||||
max-width: 900px;
|
||||
margin: 20px 30px;
|
||||
}
|
||||
|
||||
.thought {
|
||||
margin: 20px 30px;
|
||||
line-height: 1.5em;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.thought.highlighted .main, .thought.highlighted .extended-text {
|
||||
|
|
@ -93,6 +93,7 @@ textarea, input[type="text"], input[type="password"] {
|
|||
|
||||
.text {
|
||||
max-width: 100%;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.main-text, .main-text p:last-child {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,124 @@
|
|||
{% extends "whispermaphone/page.html" %}
|
||||
|
||||
{% block title %}About{% endblock %}
|
||||
|
||||
{% block navigation %}
|
||||
<a href="/" class="text" style="border: none">Thoughts</a>
|
||||
<span class="text">About</span>{% if authenticated %}
|
||||
<a href="/post" class="text" style="border: none">Post</a>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block main%}
|
||||
<h2>Welcome!</h2>
|
||||
|
||||
<p class="text">
|
||||
I'm probably Matthias. No promises though.
|
||||
These are my thoughts. Pure, mostly unfiltered, thoughts.
|
||||
I do filter anything intrusive thoughts that would be offensive or NSFW.
|
||||
Generally, with the exception of censored profanity and complex ideas, this site should be safe for your child to read.
|
||||
Or at least as safe as it is for you to read.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is a micro-blog, a little like Twitter, a little like <a href="https://micro.blog">Micro.blog</a>,
|
||||
a little better than either, at least in my opinion. This website is my own creation. It follows my own rules.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is a breeding ground for ideas. I do guarantee that all of the thoughts here are genuine—that is,
|
||||
I actually had them.
|
||||
However, I make no guarantees regarding their quality.
|
||||
Many of the thoughts here were had, posted, and then immediately discarded as clearly worthless.
|
||||
This is not disclaimed, I trust that you too can discern which of these thoughts are core values of my life
|
||||
and which are the merest passing fancy.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is a website.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is a blog. In much the sense that <a href="https://tumblr.com">Tumblr</a> is a blogging platform,
|
||||
so too is this website.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is WhisperMaPhone. It's a tool I created to share my thoughts. It is currently closed source,
|
||||
as it is still in active development. However, if you're interested in setting up a page similar to this,
|
||||
let me know.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is the void. There's no way for you to contact me on here.
|
||||
There are no guarantees when you're shouting into the void. But the void doesn't normally shout back.
|
||||
No one ever said the void wasn't listening. You're listening. This is my void.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is a surrender and a revel. This is an experiment.
|
||||
This is a rejection of social media and an embrace of it.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is a circus inside a clown factory. This is a bomb.
|
||||
</p>
|
||||
|
||||
<em>
|
||||
All thoughts are provided with a timestamp in the timezone of the poster, to ensure proper contextualization.
|
||||
Contextualization is of utmost importance.
|
||||
</em>
|
||||
|
||||
<p class="text" style="padding-left: 700px">
|
||||
This is different. This is the same.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
I'm Matthias. (most of the time)
|
||||
</p>
|
||||
|
||||
<em class="text">
|
||||
All thoughts are provided completely free of context. To ensure proper understanding, please do attempt to
|
||||
provide yourself context.
|
||||
</em>
|
||||
|
||||
<p class="text">
|
||||
This is a story about a boy.<br>
|
||||
People don't like things that are different.<br>
|
||||
The world is confusing.<br>
|
||||
People are afraid of everything.<br>
|
||||
Imperfection murders me every day.<br>
|
||||
<p>
|
||||
|
||||
<p class="text">
|
||||
This is an explanation. This page answers any questions you may have about this website.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
Welcome to my website! This is a micro-blogging platform for me to share my thoughts.
|
||||
This website breaks normal blogging and micro-blogging paradigms. I have 140 character limit on the first line,
|
||||
for real quick thoughts, and then a Show More button, and then unlimited characters in a second field.
|
||||
I'll sometimes use hundreds of characters, writing mini-essays on topics that catch my interest.
|
||||
This would be very impractical to do on Twitter. Although this websites solves another gripe with Twitter,
|
||||
the concept of "liking" Tweets. I don't ask for your feedback here. This frees me to post what I'm inspired to,
|
||||
and allows you to experience what I post without worrying about if you should "like" it.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is how I learned to stop worrying. This is a flea in which our two bloods mingled be.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is the end and a new beginning. I've stopped using Discord, Twitter, Instagram, and other social media
|
||||
since creating this website.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is art. This is poetry.
|
||||
</p>
|
||||
|
||||
<p class="text">
|
||||
This is the end. Good night.
|
||||
</p>
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -1,34 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Thoughts</title>
|
||||
{% extends "whispermaphone/page.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% load static %}
|
||||
<link href="{% static 'main/main.css' %}" rel="stylesheet">
|
||||
{% block title %}Thoughts{% endblock %}
|
||||
|
||||
<link rel="icon" sizes="192x192" href="{% static 'images/favicon-192x192.png'%}">
|
||||
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png'%}"/>
|
||||
{% block head %}
|
||||
<link rel="alternate" href="/feed" type="application/rss+xml" title="RSS">
|
||||
{% endblock %}
|
||||
|
||||
<link rel="alternate" href="/feed" type="application/rss+xml" title="RSS">
|
||||
|
||||
<style>
|
||||
/*Semantic styles load as part of the page*/
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>
|
||||
<span class="text">Thoughts</span>{% if authenticated %}
|
||||
<a href="/post" class="text" style="border: none">Post</a>
|
||||
{% endif %}</h1>
|
||||
</header>
|
||||
|
||||
<section class="main-wrap">
|
||||
{% block main %}
|
||||
{% load tz %}
|
||||
|
||||
{% for thought in thoughts %}
|
||||
|
|
@ -50,13 +29,9 @@
|
|||
<hr>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
||||
</section>
|
||||
|
||||
<!-- <footer>Copyright Matthias @2020{% if authenticated %}-->
|
||||
<!-- <a href="/post" style="color: var(--text-color); margin-left: 100px; text-decoration: none">POST</a>-->
|
||||
<!-- {% endif %}</footer>-->
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
const els = document.querySelectorAll(".thought");
|
||||
|
||||
|
|
@ -130,5 +105,4 @@
|
|||
mainText.innerHTML = md.render(mainText.textContent);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Login</title>
|
||||
{% extends "whispermaphone/page.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% load static %}
|
||||
<link href="{% static 'main/login.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'main/main.css' %}" rel="stylesheet">
|
||||
{% block title %}Post{% endblock %}
|
||||
|
||||
<link rel="icon" sizes="192x192" href="{% static 'images/favicon-192x192.png'%}">
|
||||
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png'%}"/>
|
||||
</head>
|
||||
<body>
|
||||
<section class="main-content">
|
||||
{% block head %}
|
||||
<link href="{% static 'main/login.css' %}" rel="stylesheet">
|
||||
{% endblock %}
|
||||
|
||||
{% block navigation %}
|
||||
<a href="/" class="text" style="border: none">Thoughts</a>
|
||||
<span class="text">Login</span>
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<span class="text">
|
||||
Please enter the password to access this page.
|
||||
</span>
|
||||
|
|
@ -22,14 +21,13 @@
|
|||
<input type="password" id="password">
|
||||
<input type="submit" value="Login">
|
||||
</form>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
document.getElementById("password-form").addEventListener("submit", evt => {
|
||||
document.cookie = `password=${document.getElementById("password").value}; max-age=15768000; samesite=strict`;
|
||||
window.location.reload();
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
|
||||
{% load static %}
|
||||
<link href="{% static 'main/main.css' %}" rel="stylesheet">
|
||||
{% block head %}{% endblock %}
|
||||
|
||||
<link rel="icon" sizes="192x192" href="{% static 'images/favicon-192x192.png'%}">
|
||||
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png'%}"/>
|
||||
|
||||
<style>
|
||||
/*Semantic styles load as part of the page*/
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>
|
||||
{% block navigation %}
|
||||
<span class="text">Thoughts</span>{% if authenticated %}
|
||||
<a href="/post" class="text" style="border: none">Post</a>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<section class="main-wrap">
|
||||
{% block main %}
|
||||
{% endblock %}
|
||||
</section>
|
||||
|
||||
{% block scripts %}
|
||||
{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,27 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Post</title>
|
||||
{% extends "whispermaphone/page.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% load static %}
|
||||
<link href="{% static 'main/post.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'main/main.css' %}" rel="stylesheet">
|
||||
{% block title %}Post{% endblock %}
|
||||
|
||||
<link rel="icon" sizes="192x192" href="{% static 'images/favicon-192x192.png'%}">
|
||||
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png'%}"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>
|
||||
<a href="/" class="text" style="border: none">Thoughts</a>
|
||||
<span class="text">Post</span>
|
||||
</h1>
|
||||
</header>
|
||||
{% block head %}
|
||||
<link href="{% static 'main/post.css' %}" rel="stylesheet">
|
||||
{% endblock %}
|
||||
|
||||
<section class="main-wrap">
|
||||
<form action="{% url 'post'%}" method="post">
|
||||
{% block navigation %}
|
||||
<a href="/" class="text" style="border: none">Thoughts</a>
|
||||
<span class="text">Post</span>
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<form action="{% url 'post'%}" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<textarea name="text" id="text" class="thought" rows="1" placeholder="What are you thinking?"></textarea>
|
||||
<textarea name="extended_text" id="extended_text" class="thought" rows="2" placeholder="Anything else?"></textarea>
|
||||
|
|
@ -29,8 +21,9 @@
|
|||
|
||||
<input type="submit" id="post-button" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
const textEl = document.getElementById("text");
|
||||
const textExtEl = document.getElementById("extended_text");
|
||||
|
|
@ -101,6 +94,4 @@
|
|||
const timezoneOffsetEl = document.getElementById("timezone_offset");
|
||||
timezoneOffsetEl.value = (new Date()).getTimezoneOffset();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -59,3 +59,7 @@ def post(request):
|
|||
).save()
|
||||
|
||||
return render(request, "whispermaphone/post.html", {})
|
||||
|
||||
|
||||
def about(request):
|
||||
return render(request, "whispermaphone/about.html")
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ BASE_DIR = Path(__file__).resolve().parent.parent
|
|||
SECRET_KEY = 'qdm4_0b)3^)k$6r($!o^a7&0l#^6)@g2wr!x0r40ii@9otfnwo'
|
||||
|
||||
# SECURITY WARNING: don't run with debug turned on in production!
|
||||
DEBUG = False
|
||||
DEBUG = True
|
||||
|
||||
ALLOWED_HOSTS = ["thoughts.learnerpages.com"]
|
||||
if DEBUG:
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ from main.feed import MainFeed
|
|||
|
||||
urlpatterns = [
|
||||
path("", views.index, name="index"),
|
||||
path("about", views.about, name="about"),
|
||||
path("post", views.post, name="post"),
|
||||
path("feed", MainFeed())
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue