Add Google Fonts and Dark Mode

This commit is contained in:
Diego Najar 2021-05-11 17:56:30 +02:00
parent 2de6b6a3b1
commit fca4deb8c9
10 changed files with 243 additions and 68 deletions

View file

@ -537,10 +537,11 @@ class Page {
return $list;
}
// Returns the amount of minutes takes to read the page
public function readingTime() {
global $L;
/* Returns the amount of minutes takes to read the page === Bludit v4
@return string Returns the minutes as string
*/
public function readingTime() {
$words = $this->content(true);
$words = strip_tags($words);
$words = str_word_count($words);
@ -548,10 +549,9 @@ class Page {
$minutes = round($average);
if ($minutes>1) {
return $minutes.' '.$L->get('minutes');
return $minutes;
}
return '~1 '.$L->get('minute');
return '~1';
}
// Returns the value from the field, false if the fields doesn't exists
@ -571,9 +571,10 @@ class Page {
The relation is based on the tags.
@sortByDate boolean TRUE if you want to get sort by date the pages, FALSE random order
@getFirst int Amount of related pages, -1 indicates all related pages
@return array Returns an array with the page keys related to page
*/
public function related($sortByDate=false) {
public function related($sortByDate=false, $getFirst=-1) {
global $tags;
$pageTags = $this->tags(true);
$list = array();
@ -596,13 +597,17 @@ class Page {
$listSortByDate = array();
foreach ($list as $pageKey) {
$tmpPage = new Page($pageKey);
$listSortByDate[$tmpPage->date('U')] = new Page($pageKey);
$listSortByDate[$tmpPage->date('U')] = $pageKey;
}
krsort($listSortByDate);
return $listSortByDate;
$list = $listSortByDate;
}
return $list;
if ($getFirst==-1) {
return $list;
} else {
return array_slice($list, 0, $getFirst);
}
}
/* Returns relative time (e.g. "1 minute ago") === Bludit v4

View file

@ -32,9 +32,23 @@ pre {
border-radius: 5px !important;
}
/* BOOTSTRAP */
.list-group-item {
background-color: inherit;
}
.badge {
font-size: 0.8rem;
font-weight: 400;
}
.bi {
margin-right: .5rem!important;
}
/* PAGE */
section.page h1.title {
font-size: 2rem;
section.page {
font-size: 1.1rem;
}
section.page .description {
@ -45,6 +59,37 @@ section.page a {
color: #0a58ca;
}
section.page p {
margin-bottom: 1.2rem;
}
section.page h1.page-title {
font-size: 2rem;
}
section.page h2 {
font-size: 1.5rem;
}
section.page h3 {
font-size: 1.3rem;
}
section.page h4 {
font-size: 1.1rem;
}
section.page h5 {
font-size: 1rem;
}
section.page h2,
section.page h3,
section.page h4,
section.page h5 {
margin: 2rem 0 1rem 0;
}
/* VIDEO EMBED RESPONSIVE */
.video-embed {
overflow:hidden;

View file

@ -13,4 +13,8 @@
.italic {
font-style: italic;
}
}
.bg-gray {
background-color: #ececec;
}

View file

@ -0,0 +1,39 @@
body {
background-color: #1C1C1E !important;
color: #ddd !important;
}
a {
color: #fff !important;
}
a:hover {
color: #e2e2e2 !important
}
a.badge:hover {
color: #999 !important;
}
.form-text {
color: #989899 !important;
}
.bg-light {
background-color: #000 !important;
}
.color-blue {
color: #688bbd !important;
}
.btn-outline-primary {
color: #688bbd !important;
border-color: #688bbd !important;
}
.page-link {
color: #688bbd !important;
border-color: #688bbd !important;
background-color: #1C1C1E !important;
}

View file

@ -21,7 +21,25 @@
<?php echo HTML::cssBootstrapIcons(); ?>
<!-- Include CSS Styles from this theme -->
<?php echo HTML::css(array('css/style.css', 'css/helpers.css')); ?>
<?php
echo HTML::css(array(
'css/01-style.css',
'css/02-helpers.css'
));
if ($darkMode) {
echo HTML::css(
'css/99-darkmode.css'
);
}
?>
<?php if ($googleFonts): ?>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:sans,bold">
<style>
body { font-family: "Open Sans", sans-serif; }
</style>
<?php endif; ?>
<!-- Execute Bludit plugins for the hook "Site head" -->
<?php execPluginsByHook('siteHead'); ?>

View file

@ -0,0 +1,4 @@
<?php defined('BLUDIT') or die('Bludit CMS.');
$googleFonts = true;
$darkMode = true;

View file

@ -1,12 +1,11 @@
<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
<footer class="footer p-3 p-md-5 mt-5 text-center">
<div class="container">
<ul class="bd-footer-links ps-0 mb-3">
<ul class="footer-links ps-0 mb-1">
<?php foreach (HTML::socialNetworks() as $key => $name) {
echo '<li class="d-inline-block p-2"><i class="me-2 bi bi-' . $key . '"></i>' . $name . '</li>';
echo '<a class="color-blue" href="'.$site->{$key}().'"><li class="d-inline-block pe-4">' . $name . '</li></a>';
}
?>
</ul>
<p class="mb-0">Design for Bludit v4.0</p>
<p class="mb-0">Running over Bludit CMS</p>
<p class="m-0 mt-2">Powered by <a class="color-blue" href="https://www.bludit.com">Bludit</a> - Open source CMS</p>
</div>
</footer>

View file

@ -1,9 +1,11 @@
<header class="p-3">
<div class="container text-center">
<!-- Site logo -->
<div class="site-logo">
<img class="img-thumbnail rounded mx-auto d-block" height="150px" width="150px" src="<?php echo ($site->logo()?$site->logo():HTML_PATH_THEME_IMG.'logo.svg') ?>" alt="">
<img class="img-thumbnail rounded-circle mx-auto d-block" height="150px" width="150px" src="<?php echo ($site->logo()?$site->logo():HTML_PATH_THEME_IMG.'logo.svg') ?>" alt="">
</div>
<!-- End Site logo -->
<!-- Site description -->
<?php if ($site->description()) : ?>
@ -11,6 +13,8 @@
<p><?php echo $site->description(); ?></p>
</div>
<?php endif ?>
<!-- End Site description -->
</div>
</header>
@ -25,70 +29,84 @@
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<!-- Search input -->
<form class="d-flex mb-4">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
<!-- End Search input -->
<!-- Pages -->
<div class="list-group list-group-flush">
<?php foreach ($content as $tmp) : ?>
<div class="list-group-item pt-3 pb-3" aria-current="true">
<div class="list-group-item pt-4 pb-4" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<!-- Print page's title -->
<!-- Page title -->
<a href="<?php echo $tmp->url() ?>">
<h5 class="mb-1"><?php echo $tmp->title() ?></h5>
</a>
<!-- Print page's date -->
<small class="color-blue bold"><?php echo $tmp->relativeTime() ?></small>
<!-- End Page title -->
<!-- Page date -->
<small class="color-blue"><?php echo $tmp->relativeTime() ?></small>
<!-- End Page date -->
</div>
<!-- Print page's description -->
<p class="mb-1 form-text">Some placeholder content in a paragraph.</p>
<!-- Page description -->
<?php if ($tmp->description()): ?>
<p class="mb-1 form-text"><?php echo $tmp->description(); ?></p>
<?php endif ?>
<!-- End Page description -->
<!-- Print page's tags -->
<!-- Page tags -->
<?php
$tagsList = $tmp->tags(true);
if (!empty($tagsList)) {
echo '<small>';
foreach ($tagsList as $tagKey => $tagName) {
echo '<a class="badge bg-light text-dark text-decoration-none" href="' . DOMAIN_TAGS . $tagKey . '">' . $tagName . '</a>';
echo '<a class="badge bg-gray text-dark text-decoration-none me-2" href="' . DOMAIN_TAGS . $tagKey . '">' . $tagName . '</a>';
}
echo '</small>';
}
?>
<!-- End Page tags -->
</div>
<?php endforeach ?>
</div>
<!-- End Pages -->
<!-- Pagination -->
<?php if (Paginator::numberOfPages() > 1) : ?>
<nav class="mt-4">
<ul class="pagination pagination-sm">
<!-- Older pages -->
<?php if (Paginator::showNext()) : ?>
<li class="page-item">
<a class="page-link" href="<?php echo Paginator::nextPageUrl() ?>">&#9664; <?php echo $L->get('Previous'); ?></a>
</li>
<?php endif; ?>
<!-- End Older pages -->
<!-- Newer pages -->
<?php if (Paginator::showPrev()) : ?>
<li class="page-item ms-auto">
<a class="page-link" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1"><?php echo $L->get('Next'); ?> &#9658;</a>
</li>
<?php endif; ?>
<!-- End Newer pages -->
</ul>
</nav>
<?php endif ?>
<!-- End Pagination -->
</div>
</div>
</div>
</section>
<!-- Pagination -->
<?php if (Paginator::numberOfPages() > 1) : ?>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<!-- Older pages -->
<?php if (Paginator::showNext()) : ?>
<li class="page-item">
<a class="page-link" href="<?php echo Paginator::nextPageUrl() ?>">&#9664; <?php echo $L->get('Previus'); ?></a>
</li>
<?php endif; ?>
<!-- Home button -->
<li class="page-item <?php if (Paginator::currentPage() == 1) echo 'disabled' ?>">
<a class="page-link" href="<?php echo $site->url() ?>"><?php echo $L->get('Home'); ?></a>
</li>
<!-- Newer pages -->
<?php if (Paginator::showPrev()) : ?>
<li class="page-item">
<a class="page-link" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1"><?php echo $L->get('Next'); ?> &#9658;</a>
</li>
<?php endif; ?>
</ul>
</nav>
<?php endif ?>
<!-- End Print all the content -->

View file

@ -1,12 +1,11 @@
<nav class="navbar sticky-top">
<nav class="navbar navbar-light bg-light sticky-top">
<div class="container">
<a class="navbar-brand" href="<?php echo $site->url() ?>"><?php echo $site->title() ?></a>
<a class="navbar-brand bold" href="<?php echo $site->url() ?>"><?php echo $site->title() ?></a>
<div class="d-flex">
<!-- Static pages -->
<?php foreach ($staticContent as $tmp): ?>
<a href="<?php echo $tmp->url(); ?>"><?php echo $tmp->title(); ?></a>
<a class="me-3 ms-3" href="<?php echo $tmp->url(); ?>"><?php echo $tmp->title(); ?></a>
<?php endforeach ?>
</div>
</div>
</nav>

View file

@ -5,22 +5,27 @@
<!-- Load Bludit Plugins: Page Begin -->
<?php execPluginsByHook('pageBegin'); ?>
<!-- Page information -->
<div class="page-information form-text">
<span><?php echo $page->date() ?></span>
<span class="ps-3"><?php echo $page->readingTime().' '.$L->g('read') ?></span>
<div class="form-text mb-2">
<!-- Page creation time -->
<span class="pe-3"><i class="bi bi-calendar"></i><?php echo $page->date() ?></span>
<!-- Page reading time -->
<span class="pe-3"><i class="bi bi-clock"></i><?php echo $page->readingTime().' '.$L->get('minutes').' '.$L->g('read') ?></span>
<!-- Page author -->
<span><i class="bi bi-person"></i><?php echo $page->user('nickname') ?></span>
</div>
<!-- Page title -->
<h1 class="title"><?php echo $page->title(); ?></h1>
<h1 class="page-title bold"><?php echo $page->title(); ?></h1>
<!-- Page description -->
<?php if ($page->description()): ?>
<p class="italic mt-1 mb-3 color-light"><?php echo $page->description(); ?></p>
<p class="page-description italic mt-1 color-light"><?php echo $page->description(); ?></p>
<?php endif ?>
<!-- Page content -->
<div class="page-content">
<div class="page-content mt-3">
<?php echo $page->content(); ?>
</div>
@ -29,4 +34,43 @@
</div>
</div>
</div>
</section>
</section>
<!-- Related pages -->
<?php
$relatedPages = $page->related(true, 3);
?>
<?php if (!empty($relatedPages)): ?>
<section class="related mt-4 mb-4">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto p-4 bg-light">
<h4><?php $L->p('Related pages') ?></h4>
<div class="list-group list-group-flush">
<?php foreach ($relatedPages as $pageKey) : ?>
<?php $tmp = new Page($pageKey); ?>
<div class="list-group-item pt-4 pb-4" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<!-- Related page title -->
<a href="<?php echo $tmp->url() ?>">
<h5 class="mb-1"><?php echo $tmp->title() ?></h5>
</a>
<!-- Related page date -->
<small class="color-blue"><?php echo $tmp->relativeTime() ?></small>
</div>
<!-- Related page description -->
<?php if ($tmp->description()): ?>
<p class="mb-1 form-text"><?php echo $tmp->description(); ?></p>
<?php endif ?>
</div>
<?php endforeach ?>
</div>
</div>
</div>
</div>
</section>
<?php endif; ?>