feat: Little bit of redesigning

Fixes articles overflowing on small screens.
This commit is contained in:
2023-07-22 20:55:57 +02:00
parent ba567e0d65
commit a69915b46d
5 changed files with 73 additions and 79 deletions

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>