polynom.me/blog.polynom.me
Archived
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

feat: Little bit of redesigning

Browse Source 
Fixes articles overflowing on small screens.
This commit is contained in:
PapaTutuWawa 2023-07-22 20:55:57 +02:00
parent ba567e0d65
commit a69915b46d
5 changed files with 73 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
input.css
View File

@ -2,19 +2,27 @@
@tailwind components;
@tailwind utilities;
html {
background-color: #212121;
}
@layer base {
article > p > a, h1, h2, h3, h4, h5, h6 {
@apply text-indigo-400 !important;
}
article > p > strong, code {
@apply text-white !important;
}
article > p > a, h1, h2, h3, h4, h5, h6 {
@apply text-indigo-400 !important;
}
article > p > strong, code {
@apply text-white !important;
}
article > h1, h2, h3, h4, h5, h6 {
@apply text-indigo-400 !important;
}
}
article > h1, h2, h3, h4, h5, h6 {
@apply text-indigo-400 !important;
}
body {
background-color: #212121;
}
html {
@apply text-white;
}
a {
@apply text-indigo-400 !important;
}
}

20
layout/item.html
View File

@ -1,14 +1,10 @@
<!-- Post item -->
<div class="w-4/5 py-4">
<a href="/{{ slug }}.html">
<h1 class="prose prose-h1 text-2xl text-indigo-400">{{ title }}</h1>
</a>
<div class="flex flex-col pt-4">
<a href="/{{ slug }}.html"><h1 class="text-indigo-400 prose prose-lg text-xl">{{ title }}</h1></a>
<span class="text-md mt-2">Posted on {{ date }}</span>
<p class="prose prose-xs text-white">
Posted on {{ date }}
</p>
<p class="prose text-white py-2">
{{ summary }}...
</p>
</div>
<!-- Blurp -->
<span class="prose text-white mt-4">
{{ summary }}
</span>
</div>

8
layout/list.html
View File

@ -1,4 +1,4 @@
<!-- Posts wrapper -->
<div class="flex flex-col items-center">
{{ content }}
</div>
<!-- Container for posts -->
<div class="mx-auto">
{{ content }}
</div>

59
layout/page.html
View File

@ -1,49 +1,38 @@
<!doctype html>
<html>
<head>
<title>{{ title }}</title>
<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ description }}" />
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/assets/css/index.css" rel="stylesheet" />
<link href="/assets/css/code.css" rel="stylesheet" />
<link href="/feed.xml" type="application/atom+xml" rel="alternate" title="Moxxy Blog" />
<!-- Optional MathJax -->
{{ mathjax_include }}
<!-- Blog -->
<link rel="alternative"
type="application/rss+xml"
<!-- Blog -->
<link rel="alternative"
type="application/rss+xml"
title="PapaTutuWawa's Blog"
href="https://{{ blog_url }}/atom.xml" />
</head>
<!-- Optional MathJax -->
{{ mathjax_include }}
</head>
<body>
<div class="flex flex-col p-2 md:p-8 items-start md:w-4/5 mx-auto">
<!-- Header -->
<div class="flex flex-row self-center">
<img class="w-12 h-12 md:w-24 md:h-24 rounded-lg" src="https://git.polynom.me/avatars/5b7b58054c0a93e5f66191f097d15215?size=870" alt="Profile picture"/>
<div class="ml-4 self-center">
<a class="self-center text-2xl font-bold" href="/">PapaTutuWawa's Blog</a>
<body class="min-h-screen h-full flex flex-col p-8 h-full">
<div class="flex flex-col items-center">
<!-- Allow the header to be independently sized from the content -->
<div>
<div class="flex flex-row">
<img class="w-32 md:w-36 lg:w-48 h-32 md:h-36 lg:h-48 rounded-lg" src="https://cdn.polynom.me/img/avatar.jpg" />
<div class="flex flex-col justify-center px-8">
<h1 class="text-xl lg:text-4xl text-white">PapaTutuWawa's blog</h1>
<div class="flex flex-row justify-between">
<a class="text-indigo-400" href="/index.html">Posts</a>
<a class="text-indigo-400" href="/atom.xml">RSS</a>
<a class="text-indigo-400" href="https://polynom.me">About</a>
</div>
</div>
</div>
<ul class="list-none">
<li class="inline mr-8"><a href="/index.html">Posts</a></li>
<li class="inline mr-8"><a href="/atom.xml">RSS</a></li>
<li class="inline mr-8"><a href="https://polynom.me">About</a></li>
</ul>
</div>
</div>
{{ content }}
{{ content }}
</div>
</body>
</html>
</body>
</html>

29
layout/post.html
View File

@ -1,18 +1,19 @@
<!-- Post wrapper -->
<div class="flex flex-col items-center pt-8">
<h1 class="prose prose-h1 text-2xl text-indigo-400 self-start">{{ title }}</h1>
<!-- Container for posts -->
<div class="mx-auto mt-4 w-full md:max-w-prose">
<h1 class="text-indigo-400 text-3xl">{{ title }}</h1>
<p class="prose prose-xs text-white self-start">Posted on {{ date }}</p>
<span class="text-md mt-2">Posted on {{ date }}</span>
<article class="text-white prose prose-lg pt-8">
{{ content }}
</article>
<!-- Actual article -->
<article class="prose lg:prose-lg text-white mt-4">
{{ content }}
</article>
<!-- Post ending -->
<span class="text-white prose prose-lg self-start pt-8">
If you have any questions or comments, then feel free to send me an email (Preferably with GPG encryption) to
{{ email_user }} [at] {{ email_domain }} or
reach out to me on the Fediverse at <a class="text-indigo-400"
href="https://{{ fediverse_url }}">{{ fediverse_handle }}</a>.
<!-- Common post footer -->
<div class="mt-6">
<span class="prose lg:prose-lg text-md text-white">
If you have any questions or comments, then feel free to send me an email (Preferably with GPG encryption)
to {{ email_user }} [at] {{ email_domain }} or reach out to me on the Fediverse at <a href="https://{{ fediverse_url }}">{{ fediverse_handle }}</a>.
</span>
</div>
</div>
</div>