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 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;
} }
article > p > strong, code { article > p > strong, code {
@apply text-white !important; @apply text-white !important;
} }
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;
}
}

20
layout/item.html
View File

@ -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"> </div>
{{ summary }}...
</p>
</div>

8
layout/list.html
View File

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

59
layout/page.html
View File

@ -1,49 +1,38 @@
<!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 --> <!-- Blog -->
{{ mathjax_include }} <link rel="alternative"
type="application/rss+xml"
<!-- Blog -->
<link rel="alternative"
type="application/rss+xml"
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>

29
layout/post.html
View File

@ -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 -->
{{ content }} <article class="prose lg:prose-lg text-white mt-4">
</article> {{ content }}
</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>