New post detail design

This commit is contained in:
2020-06-21 02:45:51 -05:00
parent eda08ad193
commit b726ae60d7
3 changed files with 27 additions and 11 deletions

View File

@@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>{{meta_title}}</title> <title>{{meta_title}}</title>
<script src="https://kit.fontawesome.com/5e1f5a95a3.js" crossorigin="anonymous"></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<style> <style>
::selection { ::selection {
@@ -102,15 +103,9 @@
font-size: .9rem; font-size: .9rem;
} }
</style> </style>
{{ghost_header}} {{ghost_head}}
</head> </head>
<body class="font-sans w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 mx-auto"> <body class="font-sans w-11/12 md:w-7/12 lg:w-6/12 xl:w-5/12 mx-auto">
<header class="my-16 text-center">
<a href="{{@blog.url}}">
<h1 class="font-semibold text-4xl">{{@blog.title}}</h1>
</a>
<p class="my-4 text-gray-600">{{@blog.description}}</p>
</header>
<section class="{{body_class}}"> <section class="{{body_class}}">
{{{body}}} {{{body}}}
</section> </section>

View File

@@ -1,4 +1,10 @@
{{!< default}} {{!< default}}
<header class="my-16 text-center">
<a href="{{@site.url}}">
<h1 class="font-semibold text-4xl">{{@site.title}}</h1>
</a>
<p class="my-4 text-gray-600">{{@site.description}}</p>
</header>
<main> <main>
{{#foreach posts}} {{#foreach posts}}
<div class="flex align-center justify-between my-5"> <div class="flex align-center justify-between my-5">

View File

@@ -1,14 +1,29 @@
{{!< default }} {{!< default }}
<header class="mt-12 mb-8">
<div class="flex items-center justify-between">
<a class="flex items-center" href="{{@site.url}}">
<span class="fa fa-arrow-left mr-2"></span>
<h1 class="font-semibold text-2xl">Return</h1>
</a>
<a href="{{@site.url}}">
<h1 class="font-semibold text-3xl">{{@site.title}}</h1>
</a>
</div>
</header>
<main> <main>
{{#post}} {{#post}}
<div class="post-container"> <div class="post-container">
<div class="mt-10 mb-4"> <div class="mb-4">
<h2 class="text-4xl font-bold pt-1 pb-1">{{title}}</h2> <h2 class="text-4xl font-bold pt-1 pb-1">{{title}}</h2>
<p class="text-gray-600 font-sm"> <p class="text-gray-600 font-sm">
Posted by <a href="#/">{{author}}</a> on {{date}} Posted by <a href="#/">{{authors}}</a> on {{date}}
</p> </p>
</div> </div>
<img class="mb-4 mb-8" src="{{feature_image}}" alt="{{title}}"> <div class="mb-8">
{{# if feature_image}}
<img class="mb-8" src="{{feature_image}}" alt="{{title}}">
{{/if}}
</div>
<div class="post mb-16 text-gray-700 text-justify">{{content}}</div> <div class="post mb-16 text-gray-700 text-justify">{{content}}</div>
</div> </div>
{{/post}} {{/post}}