aidan/tinytalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: add initial layout+design w/ placeholder stuff

Browse Source
This commit is contained in:
Aidan 2025-04-26 16:54:04 -04:00
parent be8f1bdb4c
commit 633d3ef634
4 changed files with 64 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/css/font.css Normal file
View File

@ -0,0 +1,4 @@
@font-face {
font-family: 'Karla';
src: url('/assets/fonts/Karla-VariableFont_wght.ttf') format('truetype');
}

4
public/assets/css/tw-pre.css
View File

@ -1 +1,5 @@
@import "tailwindcss";
body {
font-family: 'Karla', sans-serif;
}

BIN
public/assets/fonts/Karla-VariableFont_wght.ttf Normal file
View File

Binary file not shown.

57
templates/home.php
View File

@ -6,9 +6,62 @@
<title>TinyTalk</title>
<!-- Font -->
<link rel="stylesheet" href="/assets/css/font.css">
<!-- Tailwind CSS -->
<link rel="stylesheet" href="/assets/css/tw.css">
</head>
<body>
<h1 class="text-3xl font-bold">TinyTalk</h1>
<div class="w-full border-b border-black bg-gray-100 p-4">
<h1 class="text-3xl font-bold mb-1">blog</h1>
<div class="flex gap-2">
<a href="/login" class="text-blue-500 underline text-sm">posts</a>
<a href="/register" class="text-blue-500 underline text-sm">categories</a>
<a href="/register" class="text-blue-500 underline text-sm">webmaster</a>
</div>
</div>
<div class="w-full flex">
<div class="w-1/5 border-r border-b border-black bg-gray-100">
<div id="recent-posts">
<div class="w-full border-b border-black py-0.5 px-4">
<h1 class="font-bold">recent posts</h1>
</div>
<div class="w-full px-4 mt-1 mb-4 flex flex-col gap-0.5">
<a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
<a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
<a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
<a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
<a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
<a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
<a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
<a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
</div>
</div>
<div id="categories">
<div class="w-full border-b border-t border-black py-0.5 px-4">
<h1 class="font-bold">categories</h1>
</div>
<div class="w-full px-4 mt-1 mb-2 flex flex-col gap-0.5">
<a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
<a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
<a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
<a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
<a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
<a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
</div>
</div>
</div>
<div class="w-4/5 border-b border-black p-4">
<div class="mb-3">
<h1 class="text-3xl font-bold">this is an example post</h1>
<a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
</div>
<div class="flex flex-col mt-2 gap-4">
<p>Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder</p>
<p>Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder</p>
<p>Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder</p>
</div>
</div>
</div>
</body>
</html>