aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--static/css/home.css10
-rw-r--r--static/css/old_ports.css0
-rw-r--r--static/css/phone_compatibility.css297
-rw-r--r--static/css/styles.css66
-rw-r--r--static/js/phone_compatibility.js33
-rw-r--r--templates/blog/home.html4
-rw-r--r--templates/blog/partials/base.html49
-rw-r--r--templates/blog/partials/post_list.html61
-rw-r--r--templates/blog/partials/sidebar.html1
-rw-r--r--templates/blog/post.html33
10 files changed, 481 insertions, 73 deletions
diff --git a/static/css/home.css b/static/css/home.css
index 289a0712..8405b6e7 100644
--- a/static/css/home.css
+++ b/static/css/home.css
@@ -101,4 +101,12 @@ marquee::after {
marquee>ul {
text-align: justify;
-} \ No newline at end of file
+}
+
+#uc {
+ width: 730px;
+}
+
+#adfs {
+ width: 720px;
+}
diff --git a/static/css/old_ports.css b/static/css/old_ports.css
deleted file mode 100644
index e69de29b..00000000
--- a/static/css/old_ports.css
+++ /dev/null
diff --git a/static/css/phone_compatibility.css b/static/css/phone_compatibility.css
new file mode 100644
index 00000000..054f9467
--- /dev/null
+++ b/static/css/phone_compatibility.css
@@ -0,0 +1,297 @@
+/*
+This is for compatibility for phones for resolution < 450
+
+All global modifications for phones are stored here. Since, I wrote the
+site for desktop only in mind, this is a quick fix for phones.
+
+There would certainly room for improvement later, if required. Right now,
+we will make the minimum changes to make sure all the content is visible
+and readable on phones. Some features might need to be disabled for phones,
+I am not sure yet.
+*/
+
+@media only screen and (max-width: 450px) {
+ body {
+ max-width: 100vw !important;
+ font-size: 12px !important;
+ /* line-height: 1.2rem; */
+ box-sizing: border-box;
+ }
+
+ h2 {
+ font-size: 14px !important;
+ }
+
+ h1,
+ .post-header h1,
+ article>h1 {
+ font-size: 1.5rem !important;
+ line-height: 1.8rem !important;
+ }
+
+ /* All elastic widths */
+ #wrap {
+ width: calc(100% - 20px) !important;
+ max-width: calc(100vw - 20px) !important;
+ margin: 0px auto !important;
+ padding: 10px;
+ }
+
+ #header,
+ #content,
+ #article,
+ #comments,
+ #new-comment,
+ #footer,
+ #welcome,
+ #welcome>p,
+ #uc,
+ #announcements,
+ marquee,
+ .post-image,
+ #post-actions-bar,
+ #article-body,
+ #archives-area,
+ #main-section,
+ #chatbox, #chatbox-input, #search_sidebar, #search_results {
+ width: calc(100% - 0px) !important;
+ max-width: calc(100% - 0px) !important;
+ box-sizing: border-box;
+ display: block !important;
+ }
+ p > img, .area > div {
+ max-width: 100% !important;
+ }
+
+ #header,
+ #content,
+ #article,
+ #footer,
+ #welcome,
+ #welcome>p,
+ #uc,
+ #announcements,
+ marquee,
+ .post-image,
+ #post-actions-bar,
+ #article-body,
+ #main-section #search_results {
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+
+ #adfs {
+ width: calc(100% - 10px);
+ }
+
+ #sidebar {
+ display: none;
+ width: 100vw !important;
+ max-width: 100vw !important;
+ height: 100vh !important;
+ max-height: 100vh !important;
+ position: fixed !important;
+ top: 0 !important;
+ left: 0 !important;
+ z-index: 5 !important;
+ background: #000000fa !important;
+ box-sizing: border-box;
+ padding: 2rem !important;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ }
+
+ #header {
+ height: 50vw !important;
+ margin-bottom: 15vw !important;
+ }
+
+ #welcome {
+ background: none !important;
+ background-size: auto !important;
+ margin: 1rem 0 !important;
+ border-radius: 0 !important;
+ min-height: auto !important;
+ }
+
+ #welcome>p {
+ margin: 12px 0 !important;
+ position: unset !important;
+ }
+ #chatbox {
+ display: block !important;
+ position: unset !important;
+ border: 10px solid #9566ff52 !important;
+ padding: 15px;
+ border-radius: 8px;
+ }
+
+ #ハンバーガー {
+ display: block !important;
+ }
+
+ #search-area {
+ top: 50vw !important;
+ }
+
+ #announcements {
+ height: auto !important;
+ background: none !important;
+ background-size: auto !important;
+ margin-top: 15px !important;
+ }
+
+ marquee {
+ position: unset !important;
+ width: calc(100% - 0px) !important;
+ height: 40vh !important;
+ padding: 10px !important;
+ }
+
+ #update-gif {
+ top: -13px !important;
+ left: 0 !important;
+ }
+
+ .author-info {
+ display: block !important;
+ margin: 15px 0 !important;
+ }
+
+ .post-image {
+ display: block !important;
+ height: auto !important;
+ margin: 15px 0 !important;
+ float: none !important;
+ }
+
+ #comments>div>table>tbody>tr>td:nth-child(2),
+ .comment,
+ .highlight {
+ width: calc(100vw - 90px) !important;
+ font-size: 11px;
+ }
+
+ #comments>div>table>tbody>tr>td:nth-child(2) {
+ padding-left: 10px;
+ }
+
+ #article-body p,
+ #article-body ul,
+ #article-body ol,
+ #article-body blockquote,
+ #article-body pre,
+ #article-body table {
+ font-size: 12px !important;
+ }
+
+ #article-body img {
+ width: 100% !important;
+ height: auto !important;
+ margin: 15px 0 !important;
+ float: none !important;
+ }
+
+ #article-body h1,
+ #article-body h2 {
+ font-size: 14px !important;
+ }
+}
+
+#ham {
+ width: 35px;
+ height: 30px;
+ margin: 10px 10px;
+ position: relative;
+ cursor: pointer;
+ display: inline-block;
+}
+
+#ham span {
+ background-color: #FFF;
+ position: absolute;
+ border-radius: 2px;
+ transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+}
+
+#ham span:nth-child(1) {
+ width: 100%;
+ height: 4px;
+ display: block;
+ top: 0px;
+ left: 0px;
+}
+
+#ham span:nth-child(2) {
+ width: 100%;
+ height: 4px;
+ display: block;
+ top: 13px;
+ left: 0px;
+}
+
+#ham span:nth-child(3) {
+ width: 100%;
+ height: 4px;
+ display: block;
+ bottom: 0px;
+ left: 0px;
+}
+
+#ham:not(.open):hover span:nth-child(1) {
+ width: 100%;
+ height: 4px;
+ display: block;
+ top: -2px;
+ left: 0px;
+ transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+}
+
+#ham:not(.open):hover span:nth-child(2) {
+ width: 100%;
+ height: 4px;
+ display: block;
+ top: 13px;
+ left: 0px;
+ transition: .4s cubic-bezier(.8, .5, .2, 1.4);
+}
+
+#ham:not(.open):hover span:nth-child(3) {
+ width: 100%;
+ height: 4px;
+ display: block;
+ bottom: -2px;
+ left: 0px;
+ transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+}
+
+#ham.open {
+ transform: rotate(90deg);
+}
+
+#ham.open span:nth-child(1) {
+ left: 3px;
+ top: 12px;
+ width: 30px;
+ transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+ transform: rotate(90deg);
+ transition-delay: 150ms;
+}
+
+#ham.open span:nth-child(2) {
+ left: 2px;
+ top: 20px;
+ width: 20px;
+ transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+ transform: rotate(45deg);
+ transition-delay: 50ms;
+}
+
+#ham.open span:nth-child(3) {
+ left: 14px;
+ top: 20px;
+ width: 20px;
+ transition: .3s cubic-bezier(.8, .5, .2, 1.4);
+ transform: rotate(-45deg);
+ transition-delay: 100ms;
+} \ No newline at end of file
diff --git a/static/css/styles.css b/static/css/styles.css
index c4d9be36..4837896e 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -13,7 +13,8 @@ body {
box-sizing: border-box;
}
-input, textarea {
+input,
+textarea {
font-family: 'Mali', sans-serif !important;
}
@@ -51,13 +52,14 @@ a,
text-decoration: none;
}
-#fake-banner-ad{
+#fake-banner-ad {
border: dashed 1px #dddddd;
padding: 4px;
border-radius: 8px;
}
-#fake-banner-ad img, #fake-ad-area img {
+#fake-banner-ad img,
+#fake-ad-area img {
display: block;
margin: 0px auto;
width: calc(100% - 8px);
@@ -372,4 +374,62 @@ blockquote {
border-bottom: none;
margin: 11px 0px;
font-size: 14px;
+}
+
+#ハンバーガー {
+ display: none;
+ position: absolute;
+ bottom: -15vw;
+ left: -10px;
+ cursor: pointer;
+ z-index: 999;
+}
+
+.post {
+ clear: both;
+ text-align: justify;
+}
+
+.post-header h1 {
+ margin: 30px 0px 0px 0px;
+ text-align: left;
+ font-size: 18px;
+}
+
+.author-info {
+ margin: 10px 0px 10px 20px;
+ display: inline-block;
+}
+
+.post-profile-image {
+ height: 20px;
+ width: 20px;
+ display: inline-block;
+ margin-right: 4px;
+ border-radius: 10px;
+ background-size: cover;
+ background-position: center;
+ position: relative;
+ top: 5px;
+}
+
+.post-image {
+ width: 350px;
+ height: 233px;
+ border-radius: 8px;
+}
+
+.post-image-r {
+ float: right;
+ margin-left: 11px;
+}
+
+.post-image-l {
+ float: left;
+ margin-right: 11px;
+}
+
+#article>h1 {
+ font-size: 32px;
+ margin-bottom: 10px;
} \ No newline at end of file
diff --git a/static/js/phone_compatibility.js b/static/js/phone_compatibility.js
new file mode 100644
index 00000000..f3a945f7
--- /dev/null
+++ b/static/js/phone_compatibility.js
@@ -0,0 +1,33 @@
+/**
+ * Phone compatibility JS, for handling things on phone as
+ * this site was written for desktop
+ */
+
+const windowBreakpoint = 450;
+
+// Listen for window resize
+$(window).resize(function() {
+ if($(window).width() > windowBreakpoint) {
+ $('#sidebar').css('display', 'block');
+ $('#ハンバーガー').css('display', 'none');
+ } else {
+ $('#sidebar').css('display', 'none');
+ $('#ハンバーガー').css('display', 'block');
+ }
+});
+
+$(document).ready(function() {
+ $('#ハンバーガー').click(function() {
+ $('#ham').toggleClass('open');
+ if($('#sidebar').css('display') == 'none') {
+ $('#sidebar').css('display', 'block');
+ $('body').css('overflow', 'hidden');
+ $('#ハンバーガー').css('background-color', 'red');
+
+ } else {
+ $('#sidebar').css('display', 'none');
+ $('body').css('overflow', 'auto');
+ $('#ハンバーガー').css('background-color', 'transparent');
+ }
+ });
+}); \ No newline at end of file
diff --git a/templates/blog/home.html b/templates/blog/home.html
index 391c510e..d9cb006f 100644
--- a/templates/blog/home.html
+++ b/templates/blog/home.html
@@ -18,7 +18,7 @@
<textarea id="chatbox-input" placeholder="Type your message here... (⏎ to send)"></textarea>
</div>
</div>
-<img src="{% static 'images/gifs/construction.gif' %}" style="width: 730px;">
+<img src="{% static 'images/gifs/construction.gif' %}" id="uc">
<div id="announcements">
<img src = "{% static 'images/gifs/update.gif' %}" style="height: 14px;" id="update-gif">
{% if announcements is not None %}
@@ -45,7 +45,7 @@
</div>
<div id="fake-banner-ad" class="mtctitem">
{% load ad %}
- <img src="{{'banner'|ad }}" alt="Ad" style="width: 720px;" border="0"/>
+ <img src="{{'banner'|ad }}" alt="Ad" id="adfs" border="0"/>
</div>
{% if posts %}
<div id="recent-posts" class="mtctitem">
diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index f9797bd9..ab10b6c4 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0 " />
<meta name="description" content="{{ request.meta.description }}" />
<meta name="image" content="{{ request.meta.image }}" />
<meta name="url" content="{{ request.meta.url }}" />
@@ -14,8 +14,14 @@
<meta property="og:image" content="{{ request.meta.image }}" />
<meta property="og:url" content="{{ request.meta.url }}" />
<meta property="twitter:card" content="summary_large_image" />
- <meta property="twitter:title" content="That Computer Scientist - {{ title }}" />
- <meta property="twitter:description" content="{{ request.meta.description }}" />
+ <meta
+ property="twitter:title"
+ content="That Computer Scientist - {{ title }}"
+ />
+ <meta
+ property="twitter:description"
+ content="{{ request.meta.description }}"
+ />
<meta property="twitter:image" content="{{ request.meta.image }}" />
<meta property="robots" content="{{ request.meta.robots }}" />
<title>That Computer Scientist - {{ title }}</title>
@@ -25,6 +31,11 @@
href="{% static 'css/styles.css' %}"
/>
<link
+ type="text/css"
+ rel="stylesheet"
+ href="{% static 'css/phone_compatibility.css' %}"
+ />
+ <link
rel="apple-touch-icon"
sizes="180x180"
href="{% static 'images/favicons/apple-touch-icon.png' %}"
@@ -50,21 +61,14 @@
transition: 0.4s;
opacity: 1;
}
-
+
html.is-animating .transition-fade {
opacity: 0;
}
</style>
</head>
<body>
- <video
- id="bg-video"
- muted
- autoplay
- playsinline
- loop
- preload="auto"
- >
+ <video id="bg-video" muted autoplay playsinline loop preload="auto">
<source
src="{% static 'videos/background.mp4' %}#t=0.1"
type="video/mp4"
@@ -73,6 +77,13 @@
<div id="overlay"></div>
<div id="wrap">
<div id="header">
+ <div id="ハンバーガー">
+ <div id="ham">
+ <span></span>
+ <span></span>
+ <span></span>
+ </div>
+ </div>
<div id="search-area">
<form action="{% url 'blog:search' %}" method="get" id="search-form">
<input
@@ -140,14 +151,20 @@
</body>
<script src="{% static 'js/oneko.js' %}"></script>
<script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
+ <script src="{% static 'js/phone_compatibility.js' %}"></script>
{% block scripts %} {% endblock %}
<!-- Google tag (gtag.js) -->
- <script async src="https://www.googletagmanager.com/gtag/js?id=G-72XTC500FR"></script>
+ <script
+ async
+ src="https://www.googletagmanager.com/gtag/js?id=G-72XTC500FR"
+ ></script>
<script>
window.dataLayer = window.dataLayer || [];
- function gtag(){dataLayer.push(arguments);}
- gtag('js', new Date());
+ function gtag() {
+ dataLayer.push(arguments);
+ }
+ gtag("js", new Date());
- gtag('config', 'G-72XTC500FR');
+ gtag("config", "G-72XTC500FR");
</script>
</html>
diff --git a/templates/blog/partials/post_list.html b/templates/blog/partials/post_list.html
index 933faccb..cdab9c41 100644
--- a/templates/blog/partials/post_list.html
+++ b/templates/blog/partials/post_list.html
@@ -1,42 +1,33 @@
{% load tz %}
{% load static %}
{% for post in posts %}
- <div class="post" style="clear: both;">
- <div style="float:none;text-align: justify; margin-bottom: 0px; line-height: 15px;">
- <div class="post-header">
- <h1 style="margin: 30px 0px 0px 0px; text-align: left; font-size: 18px; font-weight: bold;">
- <a style="color: #f4ebff;" href="{% url 'blog:post' post.slug %}">{{ post.title }}</a>
- </h1>
- <div style="margin: 15px 0px 0px 20px; display: inline-block;">
- {% with post.author.userprofile_set.first as userprofile %}
- <div style="height: 20px; width: 20px; display: inline-block; margin-right: 4px; border-radius: 10px; background-image: url('{% static 'images/avatars/' %}{{ userprofile.avatar_url }}.gif'); background-size: cover; background-position: center;"></div>
- {% endwith %}
- <div style="display: inline-block; vertical-align: top;">
- <a href="{% url 'blog:user_activity' post.author %}" style="font-weight: bold; font-size: 11px; position: relative; top: 2.5px;">
- {{ post.author.first_name }} {{ post.author.last_name }}
- </a>
- <span style="position: relative; top: 2.5px;">posted in</span>
- <a href="{% url 'blog:categories' %}/{{ post.category.slug }}" style="position: relative; top: 2.5px;">
- {{ post.category }}
- </a>
- <span style="position: relative; top: 2.5px; margin-left: 4px;"><b>|</b></span>
- <span style="position: relative; top: 2.5px; margin-left: 4px;">{% localtime on %}{{ post.date | date:"M d, Y" }}{% endlocaltime %}</span>
- </div>
- </div>
- </div>
- <div class="post-body">
- <img style="{% if forloop.counter|divisibleby:2 %}float:right; margin-left: 11px;{% else %}float:left; margin-right: 11px;{% endif %} width: 350px; height: 233px; border-radius: 8px;" src="{% url 'ignis:post_image' '350' post.id %}.gif">
- {{ post.excerpt | safe }}
- </div>
- {% comment %} <h1 style="margin-top: 0px; margin-bottom: 0px;">
- <a href="{% url 'blog:post' post.slug %}">{{ post.title }}</a>
+ <div class="post">
+ <div class="post-header">
+ <h1>
+ <a style="color: #f4ebff;" href="{% url 'blog:post' post.slug %}">{{ post.title }}</a>
</h1>
- <span style="font-size: 11px">Posted on <em><u>{% localtime on %}{{ post.date | date:"M d, Y" }}{% endlocaltime %}</u></em> by <em><a href="{% url 'blog:user_activity' post.author %}">{{ post.author }}</a> in <a href="{% url 'blog:categories' %}/{{ post.category.slug }}">{{ post.category }}</a></em></span>
- <span style="font-size: 11px">Tags: </span>
- {% for tag in post.tags.all %}
- <a href="#" class="tag">{{ tag.name|title }}</a>{% if not forloop.last %},{% endif %}
- {% endfor %}
- {{ post.excerpt | safe }} {% endcomment %}
+ <div class="author-info">
+ {% with post.author.userprofile_set.first as userprofile %}
+ <span style="background-image: url('{% static 'images/avatars/' %}{{ userprofile.avatar_url }}.gif');" class="post-profile-image"></span>
+ {% endwith %}
+ <span>
+ <a href="{% url 'blog:user_activity' post.author %}" style="font-weight: bold;">
+ {{ post.author.first_name }} {{ post.author.last_name }}
+ </a>
+ </span>
+ <span>posted in</span>
+ <span>
+ <a href="{% url 'blog:categories' %}/{{ post.category.slug }}" style="">
+ {{ post.category }}
+ </a>
+ </span>
+ <span style="margin-left: 4px;"><b>|</b></span>
+ <span style="margin-left: 4px;">{% localtime on %}{{ post.date | date:"M d, Y" }}{% endlocaltime %}</span>
+ </div>
+ </div>
+ <div class="post-body">
+ <img class="post-image {% if forloop.counter|divisibleby:2 %}post-image-r{% else %}post-image-l{% endif %}" src="{% url 'ignis:post_image' '350' post.id %}.gif">
+ {{ post.excerpt | safe }}
</div>
<div class="post-actions" style="clear: both;">
<a href="{% url 'blog:post' post.slug %}">Continue Reading</a> | <a href="{% url 'blog:post' post.slug %}#comments">{{ post.num_comments }}
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index 1ef7877b..bc3a58be 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -2,7 +2,6 @@
{% comment %} Login Area {% endcomment %}
{% if not user.is_authenticated %}
<link rel="stylesheet" href="{% static 'css/login-area.css' %}">
-</div>
{% for message in messages %}
{% if 'loginError' in message.tags %}
{% if message.message == "ENVERR" and request.GET.username %}
diff --git a/templates/blog/post.html b/templates/blog/post.html
index 2a5de531..c36961e2 100644
--- a/templates/blog/post.html
+++ b/templates/blog/post.html
@@ -15,32 +15,35 @@
</a> {% endcomment %}
</div>
<div id="article">
- <h1 style="padding: 20px 0; margin: 0; text-align: left; font-size: 32px; font-weight: bold; color: #f4ebff;">
+ <h1 style="text-align: left; color: #f4ebff;">
{{ post.title }}
</h1>
- <div style="margin: 10px 0px 10px 0px; display: inline-block;">
+ <div class="author-info" style="margin-top: 0;">
{% with post.author.userprofile_set.first as userprofile %}
- <div style="height: 20px; width: 20px; display: inline-block; margin-right: 4px; border-radius: 10px; background-image: url('{% static 'images/avatars/' %}{{ userprofile.avatar_url }}.gif'); background-size: cover; background-position: center;"></div>
+ <span style="background-image: url('{% static 'images/avatars/' %}{{ userprofile.avatar_url }}.gif');" class="post-profile-image"></span>
{% endwith %}
- <div style="display: inline-block; vertical-align: top;">
- <a href="{% url 'blog:user_activity' post.author %}" style="font-weight: bold; font-size: 11px; position: relative; top: 2.5px;">
+ <span>
+ <a href="{% url 'blog:user_activity' post.author %}" style="font-weight: bold;">
{{ post.author.first_name }} {{ post.author.last_name }}
</a>
- <span style="position: relative; top: 2.5px;">posted in</span>
- <a href="{% url 'blog:categories' %}/{{ post.category.slug }}" style="position: relative; top: 2.5px;">
+ </span>
+ <span>posted in</span>
+ <span>
+ <a href="{% url 'blog:categories' %}/{{ post.category.slug }}" style="">
{{ post.category }}
</a>
- <span style="position: relative; top: 2.5px; margin-left: 4px;"><b>|</b></span>
- <span style="position: relative; top: 2.5px; margin-left: 4px;">{% localtime on %}{{ post.date | date:"M d, Y" }}{% endlocaltime %}</span>
- <span style="position: relative; top: 2.5px; margin-left: 4px;"><b>|</b></span>
- <span style="position: relative; top: 2.5px; margin-left: 4px;">{{ post.views }} view{% if not post.views == 1%}s{% endif %}</span>
- </div>
+ </span>
+ <span style="margin-left: 4px;"><b>|</b></span>
+ <span style="margin-left: 4px;">{% localtime on %}{{ post.date | date:"M d, Y" }}{% endlocaltime %}</span>
+ <span style="margin-left: 4px;"><b>|</b></span>
+ <span style="margin-left: 4px;">{{ post.views }} view{% if not post.views == 1%}s{% endif %}</span>
</div>
<div id="article-body">
- <div>{{ post.first_paragraph | safe }}</div>
- <div style="width: 710px; height: 473.3333px; margin: 20px auto; display: block; border-radius: 8px; background-image: url('{% url 'ignis:post_image' '710' post.id %}.gif'); background-size: cover; background-position: center;"></div>
- <div>{{ post.body | safe }}</div>
+ {{ post.first_paragraph | safe }}
+ <img style="width: 100%; height: 473.3333px; margin: 20px auto; display: block; border-radius: 8px;" src="{% url 'ignis:post_image' '710' post.id %}.gif" alt="Post Image for {{ post.title }}">
+ <hr>
+ {{ post.body | safe }}
</div>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 04:09:02 +0000