Bootstrap 5 + Darkmode changes
This commit is contained in:
Joey Kimsey
@ -29,6 +29,7 @@ class BlogLoader extends DefaultLoader {
|
||||
$posts = $blog->posts;
|
||||
Components::set('SIDEBAR', Views::simpleView('blog.sidebar', $posts->recent(5)));
|
||||
Components::set('SIDEBAR2', Views::simpleView('blog.sidebar2', $posts->archive()));
|
||||
Components::set('SIDEBARABOUT', Views::simpleView('blog.about'));
|
||||
Navigation::setCrumbComponent( 'BLOG_BREADCRUMBS', Input::get( 'url' ) );
|
||||
Components::set( 'BLOG_TEMPLATE_URL', Template::parse( '{ROOT_URL}app/plugins/comments/' ) );
|
||||
$this->addCss( '<link rel="stylesheet" href="{BLOG_TEMPLATE_URL}css/comments.css">' );
|
||||
|
||||
@ -10,10 +10,10 @@
|
||||
* @license https://opensource.org/licenses/MIT [MIT LICENSE]
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta property="og:url" content="{CURRENT_URL}">
|
||||
<meta name='twitter:card' content='summary' />
|
||||
<meta name='twitter:card' content='summary_large_image' />
|
||||
<title>{TITLE}</title>
|
||||
<meta itemprop="name" content="{TITLE}">
|
||||
<meta name="twitter:title" content="{TITLE}">
|
||||
@ -28,10 +28,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="author" content="The Tempus Project">
|
||||
{ROBOT}
|
||||
<link rel="alternate" hreflang="en-us" href="alternateURL">
|
||||
<link rel="icon" href="{ROOT_URL}images/favicon.ico">
|
||||
<!-- Required CSS -->
|
||||
<link rel="stylesheet" href="{FONT_AWESOME_URL}fontawesome.min.css" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="{BOOTSTRAP_CDN}css/bootstrap.min.css" crossorigin="anonymous">
|
||||
<!-- RSS -->
|
||||
<link rel="alternate" href="{ROOT_URL}blog/rss" title="{TITLE} Feed" type="application/rss+xml" />
|
||||
@ -54,38 +53,106 @@
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container-fluid">
|
||||
{ISSUES}
|
||||
<div class="container pt-4">
|
||||
<div class="row">
|
||||
{ERROR}
|
||||
{NOTICE}
|
||||
{SUCCESS}
|
||||
{INFO}
|
||||
</div>
|
||||
</div>
|
||||
{/ISSUES}
|
||||
<div class="pt-4">
|
||||
<div class="container">
|
||||
<h1 class="blog-title text-center">{SITENAME} Blog</h1>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="d-flex flex-column min-vh-100">
|
||||
<div class="flex-container flex-grow-1">
|
||||
{ISSUES}
|
||||
<div class="container pt-4">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
{BLOG_BREADCRUMBS}
|
||||
{CONTENT}
|
||||
{ERROR}
|
||||
{NOTICE}
|
||||
{SUCCESS}
|
||||
{INFO}
|
||||
</div>
|
||||
</div>
|
||||
{/ISSUES}
|
||||
|
||||
<!-- Leading Content -->
|
||||
<div class="container">
|
||||
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
|
||||
<div class="col-md-6 px-0">
|
||||
<h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
|
||||
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
|
||||
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
|
||||
</div>
|
||||
<div class="col-sm-4 blog-sidebar">
|
||||
<div class="sidebar-module">
|
||||
{SIDEBAR}
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-primary">World</strong>
|
||||
<h3 class="mb-0">Featured post</h3>
|
||||
<div class="mb-1 text-muted">Nov 12</div>
|
||||
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="stretched-link">Continue reading</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-module">
|
||||
{SIDEBAR2}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-success">Design</strong>
|
||||
<h3 class="mb-0">Post title</h3>
|
||||
<div class="mb-1 text-muted">Nov 11</div>
|
||||
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="stretched-link">Continue reading</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="pt-4">
|
||||
<div class="container">
|
||||
|
||||
|
||||
|
||||
<h3 class="pb-4 mb-4 fst-italic border-bottom">
|
||||
{SITENAME} Blog
|
||||
</h3>
|
||||
<div class="row g-5">
|
||||
<!-- Main Content -->
|
||||
<div class="col-md-8">
|
||||
{CONTENT}
|
||||
</div>
|
||||
<!-- Sidebar Content -->
|
||||
<div class="col-md-4">
|
||||
<div class="position-sticky" style="top: 2rem;">
|
||||
<div class="p-4 mb-3 bg-light rounded">
|
||||
{SIDEBARABOUT}
|
||||
</div>
|
||||
<div class="p-4">
|
||||
{SIDEBAR}
|
||||
</div>
|
||||
<div class="p-4">
|
||||
{SIDEBAR2}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{FOOT}
|
||||
</div>
|
||||
{FOOT}
|
||||
<!-- Bootstrap core JavaScript and jquery -->
|
||||
<script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="{JQUERY_CDN}jquery.min.js"></script>
|
||||
<script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
|
||||
|
||||
6
app/plugins/blog/views/about.html
Normal file
6
app/plugins/blog/views/about.html
Normal file
@ -0,0 +1,6 @@
|
||||
<div class="p-4 mb-3 bg-light rounded">
|
||||
<h4 class="fst-italic">About</h4>
|
||||
<p class="mb-0">
|
||||
The blog is mostly here to serve ass a simple way to link to long-form content on the site. There won't be any breaking news or tell-all stories here. Just good ole fashioned boring crap no one wants to read.
|
||||
</p>
|
||||
</div>
|
||||
@ -1,18 +1,15 @@
|
||||
{PAGINATION}
|
||||
{LOOP}
|
||||
<div class="blog-post">
|
||||
<h2 class="blog-post-title"><a href="{ROOT_URL}blog/post/{ID}">{title}</a></h2>
|
||||
<hr>
|
||||
<article class="blog-post">
|
||||
<h2 class="blog-post-title mb-1">{title}</h2>
|
||||
<p class="blog-post-meta">{DTC date}{created}{/DTC} by <a href="{ROOT_URL}home/profile/{author}">{authorName}</a></p>
|
||||
<div class="well">
|
||||
<p class="blog-post-meta">
|
||||
Posted on <i>{DTC date}{created}{/DTC}</i> by <a href="{ROOT_URL}home/profile/{author}"><strong>{authorName}</strong></a>
|
||||
</p>
|
||||
{contentSummary}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<hr>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<div class="blog-post">
|
||||
<article class="blog-post">
|
||||
<p class="blog-post-meta">No Posts Found.</p>
|
||||
</div>
|
||||
</article>
|
||||
{/ALT}
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
<div class="card panel-info">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Archives</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ol class="list-unstyled">
|
||||
{LOOP}
|
||||
<li>({count}) <a href="{ROOT_URL}blog/month/{month}/{year}">{monthText} {year}</a></li>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
{/ALT}
|
||||
</ol>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">Archives</h4>
|
||||
<ul class="list-unstyled mb-0">
|
||||
{LOOP}
|
||||
<li>({count}) <a href="{ROOT_URL}blog/month/{month}/{year}">{monthText} {year}</a></li>
|
||||
{/LOOP}
|
||||
{ALT}
|
||||
<li>None To Show</li>
|
||||
{/ALT}
|
||||
</ul>
|
||||
</div>
|
||||
@ -1,11 +1,12 @@
|
||||
<div class="dropdown nav-item mx-2">
|
||||
<!-- Notifications Dropdown -->
|
||||
<div class="dropdown nav-item mx-2">
|
||||
<a
|
||||
href="#"
|
||||
class="nav-link dropdown-toggle"
|
||||
id="notiificationsDropdown"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<i class="fa fa-fw fa-bell"></i><span class="ml-3">{MBADGE}</span>
|
||||
<i class="fa fa-fw fa-bell"></i><span class="ml-3">{NBADGE}</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notiificationsDropdown">
|
||||
{LOOP}
|
||||
|
||||
Reference in New Issue
Block a user