feat: Little bit of redesigning
Fixes articles overflowing on small screens.
This commit is contained in:
parent
ba567e0d65
commit
a69915b46d
16
input.css
16
input.css
@ -2,10 +2,6 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
html {
|
|
||||||
background-color: #212121;
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
article > p > a, h1, h2, h3, h4, h5, h6 {
|
article > p > a, h1, h2, h3, h4, h5, h6 {
|
||||||
@apply text-indigo-400 !important;
|
@apply text-indigo-400 !important;
|
||||||
@ -17,4 +13,16 @@ html {
|
|||||||
article > h1, h2, h3, h4, h5, h6 {
|
article > h1, h2, h3, h4, h5, h6 {
|
||||||
@apply text-indigo-400 !important;
|
@apply text-indigo-400 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #212121;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
@apply text-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
@apply text-indigo-400 !important;
|
||||||
|
}
|
||||||
}
|
}
|
@ -1,14 +1,10 @@
|
|||||||
<!-- Post item -->
|
<!-- Post item -->
|
||||||
<div class="w-4/5 py-4">
|
<div class="flex flex-col pt-4">
|
||||||
<a href="/{{ slug }}.html">
|
<a href="/{{ slug }}.html"><h1 class="text-indigo-400 prose prose-lg text-xl">{{ title }}</h1></a>
|
||||||
<h1 class="prose prose-h1 text-2xl text-indigo-400">{{ title }}</h1>
|
<span class="text-md mt-2">Posted on {{ date }}</span>
|
||||||
</a>
|
|
||||||
|
|
||||||
<p class="prose prose-xs text-white">
|
<!-- Blurp -->
|
||||||
Posted on {{ date }}
|
<span class="prose text-white mt-4">
|
||||||
</p>
|
{{ summary }}
|
||||||
|
</span>
|
||||||
<p class="prose text-white py-2">
|
|
||||||
{{ summary }}...
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
@ -1,4 +1,4 @@
|
|||||||
<!-- Posts wrapper -->
|
<!-- Container for posts -->
|
||||||
<div class="flex flex-col items-center">
|
<div class="mx-auto">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div>
|
</div>
|
@ -1,19 +1,11 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
|
|
||||||
<meta property="og:title" content="{{ title }}" />
|
|
||||||
<meta property="og:description" content="{{ description }}" />
|
|
||||||
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link href="/assets/css/index.css" rel="stylesheet" />
|
<link href="/assets/css/index.css" rel="stylesheet" />
|
||||||
<link href="/assets/css/code.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 -->
|
<!-- Blog -->
|
||||||
<link rel="alternative"
|
<link rel="alternative"
|
||||||
@ -21,29 +13,26 @@
|
|||||||
title="PapaTutuWawa's Blog"
|
title="PapaTutuWawa's Blog"
|
||||||
href="https://{{ blog_url }}/atom.xml" />
|
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">
|
<ul class="list-none">
|
||||||
<div class="flex flex-col items-center">
|
<li class="inline mr-8"><a href="/index.html">Posts</a></li>
|
||||||
<!-- Allow the header to be independently sized from the content -->
|
<li class="inline mr-8"><a href="/atom.xml">RSS</a></li>
|
||||||
<div>
|
<li class="inline mr-8"><a href="https://polynom.me">About</a></li>
|
||||||
<div class="flex flex-row">
|
</ul>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
@ -1,18 +1,19 @@
|
|||||||
<!-- Post wrapper -->
|
<!-- Container for posts -->
|
||||||
<div class="flex flex-col items-center pt-8">
|
<div class="mx-auto mt-4 w-full md:max-w-prose">
|
||||||
<h1 class="prose prose-h1 text-2xl text-indigo-400 self-start">{{ title }}</h1>
|
<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">
|
<!-- Actual article -->
|
||||||
|
<article class="prose lg:prose-lg text-white mt-4">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<!-- Post ending -->
|
<!-- Common post footer -->
|
||||||
<span class="text-white prose prose-lg self-start pt-8">
|
<div class="mt-6">
|
||||||
If you have any questions or comments, then feel free to send me an email (Preferably with GPG encryption) to
|
<span class="prose lg:prose-lg text-md text-white">
|
||||||
{{ email_user }} [at] {{ email_domain }} or
|
If you have any questions or comments, then feel free to send me an email (Preferably with GPG encryption)
|
||||||
reach out to me on the Fediverse at <a class="text-indigo-400"
|
to {{ email_user }} [at] {{ email_domain }} or reach out to me on the Fediverse at <a href="https://{{ fediverse_url }}">{{ fediverse_handle }}</a>.
|
||||||
href="https://{{ fediverse_url }}">{{ fediverse_handle }}</a>.
|
|
||||||
</span>
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
Reference in New Issue
Block a user