Add Google Fonts and Dark Mode
This commit is contained in:
parent
2de6b6a3b1
commit
fca4deb8c9
10 changed files with 243 additions and 68 deletions
|
@ -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
|
||||
|
|
|
@ -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;
|
|
@ -13,4 +13,8 @@
|
|||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
background-color: #ececec;
|
||||
}
|
39
bl-themes/popeye/css/99-darkmode.css
Normal file
39
bl-themes/popeye/css/99-darkmode.css
Normal 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;
|
||||
}
|
|
@ -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'); ?>
|
||||
|
|
4
bl-themes/popeye/init.php
Normal file
4
bl-themes/popeye/init.php
Normal file
|
@ -0,0 +1,4 @@
|
|||
<?php defined('BLUDIT') or die('Bludit CMS.');
|
||||
|
||||
$googleFonts = true;
|
||||
$darkMode = true;
|
|
@ -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>
|
|
@ -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() ?>">◀ <?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'); ?> ►</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() ?>">◀ <?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'); ?> ►</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<?php endif ?>
|
||||
<!-- End Print all the content -->
|
|
@ -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>
|
|
@ -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; ?>
|
Loading…
Add table
Reference in a new issue