feat: version initiale du theme
This commit is contained in:
Kazhnuz
parent
2b7ab55990
commit
a09c77d23f
77 changed files with 4847 additions and 0 deletions
1431
css/style.css
Executable file
1431
css/style.css
Executable file
File diff suppressed because it is too large
Load diff
BIN
fonts/teko-bold-webfont.woff
Executable file
BIN
fonts/teko-bold-webfont.woff
Executable file
Binary file not shown.
BIN
fonts/teko-bold-webfont.woff2
Executable file
BIN
fonts/teko-bold-webfont.woff2
Executable file
Binary file not shown.
BIN
fonts/teko-light-webfont.woff
Executable file
BIN
fonts/teko-light-webfont.woff
Executable file
Binary file not shown.
BIN
fonts/teko-medium-webfont.woff
Executable file
BIN
fonts/teko-medium-webfont.woff
Executable file
Binary file not shown.
BIN
fonts/teko-regular-webfont.woff
Executable file
BIN
fonts/teko-regular-webfont.woff
Executable file
Binary file not shown.
BIN
fonts/teko-semibold-webfont.woff
Executable file
BIN
fonts/teko-semibold-webfont.woff
Executable file
Binary file not shown.
1
generate.sh
Executable file
1
generate.sh
Executable file
|
|
@ -0,0 +1 @@
|
|||
sassc scss/style.scss > css/style.css
|
||||
BIN
img/background.png
Executable file
BIN
img/background.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
img/default-preview.png
Executable file
BIN
img/default-preview.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
img/favicon.png
Executable file
BIN
img/favicon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 159 B |
BIN
img/logo.png
Executable file
BIN
img/logo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
46
index.php
Executable file
46
index.php
Executable file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="<?php echo Theme::lang() ?>">
|
||||
<head>
|
||||
<?php include(THEME_DIR_PHP.'head.php'); ?>
|
||||
</head>
|
||||
<body>
|
||||
<?php include(THEME_DIR_PHP.'icons.php'); ?>
|
||||
<!-- Load Bludit Plugins: Site Body Begin -->
|
||||
<?php Theme::plugins('siteBodyBegin'); ?>
|
||||
|
||||
<div id="wrapper">
|
||||
<!-- Navbar -->
|
||||
<?php include(THEME_DIR_PHP.'header.php'); ?>
|
||||
|
||||
<div class="container-blog">
|
||||
<?php
|
||||
// Bludit content are pages
|
||||
// But if you order the content by date
|
||||
// These pages works as posts
|
||||
|
||||
// $WHERE_AM_I variable detect where the user is browsing
|
||||
// If the user is watching a particular page/post the variable takes the value "page"
|
||||
// If the user is watching the frontpage the variable takes the value "home"
|
||||
if ($WHERE_AM_I == 'page') {
|
||||
include(THEME_DIR_PHP.'page.php');
|
||||
} elseif ($WHERE_AM_I == 'category') {
|
||||
include(THEME_DIR_PHP.'category.php');
|
||||
} elseif ($WHERE_AM_I == 'tag') {
|
||||
include(THEME_DIR_PHP.'tag.php');
|
||||
} elseif ($WHERE_AM_I == 'search') {
|
||||
include(THEME_DIR_PHP.'search.php');
|
||||
} else {
|
||||
include(THEME_DIR_PHP.'home.php');
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<?php include(THEME_DIR_PHP.'footer.php'); ?>
|
||||
|
||||
<!-- Load Bludit Plugins: Site Body End -->
|
||||
<?php Theme::plugins('siteBodyEnd'); ?>
|
||||
</body>
|
||||
</html>
|
||||
7
languages/en.json
Executable file
7
languages/en.json
Executable file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"theme-data":
|
||||
{
|
||||
"name": "Mouette",
|
||||
"description": "Theme de magazine/blog, créé originellement pour Quarante-Douze."
|
||||
}
|
||||
}
|
||||
10
metadata.json
Executable file
10
metadata.json
Executable file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"author": "Kazhnuz",
|
||||
"email": "",
|
||||
"website": "https://kazhnuz.space",
|
||||
"version": "0.0.1",
|
||||
"releaseDate": "2024-03-16",
|
||||
"license": "MIT",
|
||||
"compatible": "3.15.0",
|
||||
"notes": ""
|
||||
}
|
||||
74
php/category.php
Executable file
74
php/category.php
Executable file
|
|
@ -0,0 +1,74 @@
|
|||
<main>
|
||||
<h1 class="page-title" id="title-featured">
|
||||
<svg class="icon" alt=""><use xlink:href="#icon-folder"></use></svg>
|
||||
<?php
|
||||
$category = new Category($url->slug());
|
||||
echo $category->name();
|
||||
?>
|
||||
</h1>
|
||||
<div class="previews-section preview-list">
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<?php if ($page->type() != "sticky") : ?>
|
||||
<a href="<?php echo $page->permalink(); ?>" class="preview">
|
||||
<div class="preview-thumbnail">
|
||||
<?php if ($page->coverImage()) : ?>
|
||||
<img alt="" src="<?php echo $page->thumbCoverImage(); ?>" />
|
||||
<?php else : ?>
|
||||
<img alt="" src="<?php echo HTML_PATH_THEME_IMG; ?>/default-preview.png" />
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<div class="preview-text">
|
||||
<h2><?php echo $page->title(); ?></h2>
|
||||
|
||||
<div class="flex-that">
|
||||
<div>
|
||||
<span class='badge c-secondary small-text m-0'><?php echo $page->category(); ?></span>
|
||||
</div>
|
||||
<div>
|
||||
<time><span class="badge c-secondary small-text m-0"><?php echo $page->date('d/m/Y') ?></span></time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-excerpt"><?php echo $page->description(); ?></div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<?php if (Paginator::numberOfPages() > 1) : ?>
|
||||
<nav class="paginator mb-2 mt-1">
|
||||
<ul class="pagination flex-that no-pills">
|
||||
|
||||
<!-- Previous button -->
|
||||
<?php if (Paginator::showPrev()) : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<a class="page-link btn btn-primary m-0" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1"><?php echo $L->get('Previous'); ?></a>
|
||||
</li>
|
||||
<?php else : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<span class="page-link m-0" tabindex="-1"><?php echo $L->get('Previous'); ?></span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Home button -->
|
||||
<li class="page-item p-0 m-0">
|
||||
<span>Page <?php echo Paginator::currentPage(); ?> sur <?php echo Paginator::numberOfPages(); ?> </span>
|
||||
</li>
|
||||
|
||||
<!-- Next button -->
|
||||
<?php if (Paginator::showNext()) : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<a class="page-link btn btn-primary m-0" href="<?php echo Paginator::nextPageUrl() ?>"><?php echo $L->get('Next'); ?></a>
|
||||
</li>
|
||||
<?php else : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<span class="page-link m-0" tabindex="-1"><?php echo $L->get('Next'); ?> </span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<?php endif ?>
|
||||
</main>
|
||||
|
||||
<?php include(THEME_DIR_PHP.'sidebar.php'); ?>
|
||||
40
php/footer.php
Executable file
40
php/footer.php
Executable file
|
|
@ -0,0 +1,40 @@
|
|||
<footer class="bg-dark fg-light" aria-labelledby="title-footer">
|
||||
<h1 class="sr-only" id="title-footer">Informations sur le site</h1>
|
||||
<nav class="container menu toolbar bg fg-dark" aria-label="title-footer-social">
|
||||
<h2 class="sr-only" id="title-footer-social">Me suivre</h2>
|
||||
<ul class="f-end">
|
||||
<!-- Social Networks -->
|
||||
<?php foreach (Theme::socialNetworks() as $key=>$label): ?>
|
||||
<li>
|
||||
<a href="<?php echo $site->{$key}(); ?>" class="menu-item">
|
||||
<svg class="icon" alt=""><use xlink:href="#icon-<?php echo $key ?>"></use></svg>
|
||||
<span class="sr-only"><?php echo $label; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<li>
|
||||
<a href="/rss.xml" class="menu-item">
|
||||
<svg class="icon" alt=""><use xlink:href="#icon-rss"></use></svg>
|
||||
<span class="sr-only">Flux RSS du site</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="container columns">
|
||||
<section class="col-12 col-md-4">
|
||||
<p>Les contenus sont diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.</p>
|
||||
<p>Ces licences vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! ❤️</p>
|
||||
</section>
|
||||
|
||||
<section class="col-12 col-md-4">
|
||||
<h2 class="sr-only" id="title-footer-section-2">Crédits</h2>
|
||||
<p>Ce site est propulsé par <a target="_blank" class="text-white" href="https://www.bludit.com"><?php echo (defined('BLUDIT_PRO'))?'Bludit Pro':'Bludit' ?></span></a></p>
|
||||
<p>Le <a href="https://git.kobold.cafe/quarante-douze/qdouze2-wordpress-theme">theme</a> de ce blog est disponible sous licence CC BY-SA et GPL v3. Il utilise un framework custom, des icones venant de <a href="https://forkaweso.me/Fork-Awesome/">Fork-Awesome</a>, et la palette <a href="https://yeun.github.io/open-color/">Open-Color</a></p>
|
||||
</section>
|
||||
|
||||
<section class="col-12 col-md-4">
|
||||
<p>Ce site n'a pas de système de commentaire intégré, pour éviter le potentiel travail de modération, gestion des spams, etc (que je préfère faire sur des espaces communautaires).</p>
|
||||
<p>Cependant toute critique, remarque, etc. est la bienvenue. Pour cela, vous pouvez me contacter à kazhnuz [at] kobold [point] cafe ou sur mes <a href="https://kazhnuz.space/links">réseaux sociaux</a>.</p>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
20
php/head.php
Executable file
20
php/head.php
Executable file
|
|
@ -0,0 +1,20 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="generator" content="Bludit">
|
||||
|
||||
<!-- Dynamic title tag -->
|
||||
<?php echo Theme::metaTags('title'); ?>
|
||||
|
||||
<!-- Dynamic description tag -->
|
||||
<?php echo Theme::metaTags('description'); ?>
|
||||
|
||||
<!-- Include Favicon -->
|
||||
<?php echo Theme::favicon('img/favicon.png'); ?>
|
||||
|
||||
<!-- Include CSS Styles from this theme -->
|
||||
<?php echo Theme::css('css/style.css'); ?>
|
||||
|
||||
<!-- Load Bludit Plugins: Site head -->
|
||||
<?php Theme::plugins('siteHead'); ?>
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" title="Flux RSS de Quarante-Douze" href="/rss.xml" />
|
||||
81
php/header.php
Executable file
81
php/header.php
Executable file
|
|
@ -0,0 +1,81 @@
|
|||
<div class="bg-dark skip small-text fg-light">
|
||||
<a href="#skip">Accéder au contenu</a>
|
||||
</div>
|
||||
<header id="page-header">
|
||||
<div class="osd">
|
||||
<div class="container menu toolbar fg-light">
|
||||
<nav class="d-none d-flex-sm">
|
||||
<h2 class="sr-only">Menu des pages</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="<?php echo Theme::siteUrl() ?>" class="menu-item">
|
||||
<svg class="icon icon-home" alt=""><use xlink:href="#icon-home"></use></svg><span class="sr-only">Accueil</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="menu-item submenu">
|
||||
Pages <svg class="icon icon-caret-down" alt=""><use xlink:href="#icon-caret-down"></use></svg>
|
||||
</a>
|
||||
<ul class="bg menu fg-dark">
|
||||
<?php foreach ($staticContent as $tmp) : ?>
|
||||
<?php if ($tmp->position() >= 10) : ?>
|
||||
<li><a class="mr-3 ml-3" href="<?php echo $tmp->permalink(); ?>"><?php echo $tmp->title(); ?></a></li>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</li>
|
||||
<?php foreach ($staticContent as $tmp) : ?>
|
||||
<?php if ($tmp->position() < 10) : ?>
|
||||
<li><a href="<?php echo $tmp->permalink(); ?>"><?php echo $tmp->title(); ?></a></li>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<ul class="f-end d-flex">
|
||||
<li>
|
||||
<div>
|
||||
<label for="searchfield" class="sr-only">Formulaire de recherche</label>
|
||||
<input class="form-control" id="search-input" type="search" placeholder="Rechercher sur le blog" aria-label="Rechercher sur le blog" value="" name="s" id="s" />
|
||||
</div>
|
||||
</li>
|
||||
<script>
|
||||
function searchNow() {
|
||||
var searchURL = "<?php echo Theme::siteUrl(); ?>search/";
|
||||
window.open(searchURL + document.getElementById("search-input").value, "_self");
|
||||
}
|
||||
document.getElementById("search-input").onkeypress = function(e) {
|
||||
if (!e) e = window.event;
|
||||
var keyCode = e.keyCode || e.which;
|
||||
if (keyCode == '13' && document.getElementById("search-input").value !== "") {
|
||||
searchNow();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="logo-area">
|
||||
<h1>
|
||||
<a href="<?php echo Theme::siteUrl() ?>"><img src="<?php echo HTML_PATH_THEME_IMG; ?>/logo.png" alt=""/>
|
||||
<span class="sr-only"><?php echo $site->title() ?></span>
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<nav class="container menu toolbar bg fg-dark categories d-none d-flex-sm">
|
||||
<h2 class="sr-only">Liste des catégories</h2>
|
||||
<ul class="f-around">
|
||||
<?php
|
||||
$items = getCategories();
|
||||
foreach ($items as $category) {
|
||||
if (count($category->pages())>0) {
|
||||
?>
|
||||
<li><a href="<?php echo $category->permalink(); ?>"><?php echo $category->name(); ?> </a></li>
|
||||
<?php }
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
97
php/home.php
Executable file
97
php/home.php
Executable file
|
|
@ -0,0 +1,97 @@
|
|||
<main id="skip" class="fullwidth">
|
||||
<?php Theme::plugins('pageBegin'); ?>
|
||||
<?php if (Paginator::currentPage() == 1) : ?>
|
||||
<section aria-labelledby="title-featured">
|
||||
<h1 class="page-title" id="title-featured">
|
||||
<svg class="icon icon-star" viewBox="0 0 30 32"><path d="M29.714 11.554c0 0.321-0.232 0.625-0.464 0.857l-6.482 6.321 1.536 8.929c0.018 0.125 0.018 0.232 0.018 0.357 0 0.464-0.214 0.893-0.732 0.893-0.25 0-0.5-0.089-0.714-0.214l-8.018-4.214-8.018 4.214c-0.232 0.125-0.464 0.214-0.714 0.214-0.518 0-0.75-0.429-0.75-0.893 0-0.125 0.018-0.232 0.036-0.357l1.536-8.929-6.5-6.321c-0.214-0.232-0.446-0.536-0.446-0.857 0-0.536 0.554-0.75 1-0.821l8.964-1.304 4.018-8.125c0.161-0.339 0.464-0.732 0.875-0.732s0.714 0.393 0.875 0.732l4.018 8.125 8.964 1.304c0.429 0.071 1 0.286 1 0.821z"></path></svg>
|
||||
À la une
|
||||
</h1>
|
||||
<div id="featured-articles">
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<?php if ($page->type() == "sticky") : ?>
|
||||
<article class="preview-featured">
|
||||
<a href="<?php echo $page->permalink(); ?>" class="preview-link">
|
||||
<div class="preview-item" style="background-image:url('<?php echo ($page->thumbCoverImage() ? $page->thumbCoverImage() : HTML_PATH_THEME_IMG . "/default-preview.png") ?>');">
|
||||
<div class="preview-overlay">
|
||||
<div class="preview-categories">
|
||||
<span class='badge c-secondary'><?php echo $page->category(); ?></span>
|
||||
</div>
|
||||
<h2 class="preview-title"><?php echo $page->title(); ?></h2>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif ?>
|
||||
<section aria-labelledby="title-publications">
|
||||
<h1 class="page-title" id="title-publications"><svg class="icon icon-newspaper-o" alt="" viewBox="0 0 37 30"><path d="M18.286 9.143h-6.857v6.857h6.857v-6.857zM20.571 20.571v2.286h-11.429v-2.286h11.429zM20.571 6.857v11.429h-11.429v-11.429h11.429zM32 20.571v2.286h-9.143v-2.286h9.143zM32 16v2.286h-9.143v-2.286h9.143zM32 11.429v2.286h-9.143v-2.286h9.143zM32 6.857v2.286h-9.143v-2.286h9.143zM4.571 24v-17.143h-2.286v17.143c0 0.625 0.518 1.143 1.143 1.143s1.143-0.518 1.143-1.143zM34.286 24v-19.429h-27.429v19.429c0 0.393-0.071 0.786-0.196 1.143h26.482c0.625 0 1.143-0.518 1.143-1.143zM36.571 2.286v21.714c0 1.893-1.536 3.429-3.429 3.429h-29.714c-1.893 0-3.429-1.536-3.429-3.429v-19.429h4.571v-2.286h32z"></path></svg> Publications</h1>
|
||||
|
||||
<div class="previews-section preview-grid">
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<?php if ($page->type() != "sticky") : ?>
|
||||
<a href="<?php echo $page->permalink(); ?>" class="preview">
|
||||
<div class="preview-thumbnail">
|
||||
<?php if ($page->coverImage()) : ?>
|
||||
<img alt="" src="<?php echo $page->coverImage(); ?>" />
|
||||
<?php else : ?>
|
||||
<img alt="" src="<?php echo HTML_PATH_THEME_IMG; ?>/default-preview.png" />
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<div class="preview-text">
|
||||
<h2><?php echo $page->title(); ?></h2>
|
||||
|
||||
<div class="flex-that">
|
||||
<div>
|
||||
<span class='badge c-secondary small-text m-0'><?php echo $page->category(); ?></span>
|
||||
</div>
|
||||
<div>
|
||||
<time><span class="badge c-secondary small-text m-0"><?php echo $page->date('d/m/Y') ?></span></time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-excerpt"><?php echo $page->description(); ?></div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<?php if (Paginator::numberOfPages() > 1) : ?>
|
||||
<nav class="paginator mb-2 mt-1">
|
||||
<ul class="pagination flex-that no-pills">
|
||||
|
||||
<!-- Previous button -->
|
||||
<?php if (Paginator::showPrev()) : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<a class="page-link btn btn-primary m-0" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1"><?php echo $L->get('Previous'); ?></a>
|
||||
</li>
|
||||
<?php else : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<span class="page-link m-0" tabindex="-1"><?php echo $L->get('Previous'); ?></span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Home button -->
|
||||
<li class="page-item p-0 m-0">
|
||||
<span>Page <?php echo Paginator::currentPage(); ?> sur <?php echo Paginator::numberOfPages(); ?> </span>
|
||||
</li>
|
||||
|
||||
<!-- Next button -->
|
||||
<?php if (Paginator::showNext()) : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<a class="page-link btn btn-primary m-0" href="<?php echo Paginator::nextPageUrl() ?>"><?php echo $L->get('Next'); ?></a>
|
||||
</li>
|
||||
<?php else : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<span class="page-link m-0" tabindex="-1"><?php echo $L->get('Next'); ?> </span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<?php endif ?>
|
||||
</section>
|
||||
</main>
|
||||
29
php/icons.php
Executable file
29
php/icons.php
Executable file
|
|
@ -0,0 +1,29 @@
|
|||
<svg class="d-none" alt="">
|
||||
<symbol id="icon-bluesky" viewBox="0 0 34 32">
|
||||
<path d="M34.319 20.998c0 3.789-3.074 6.864-6.864 6.864h-19.448c-4.415 0-8.008-3.593-8.008-8.008 0-3.2 1.895-5.97 4.612-7.239-0.018-0.25-0.036-0.518-0.036-0.769 0-5.059 4.093-9.152 9.152-9.152 3.825 0 7.096 2.342 8.473 5.684 0.787-0.697 1.823-1.108 2.967-1.108 2.52 0 4.576 2.056 4.576 4.576 0 0.912-0.268 1.752-0.733 2.467 3.039 0.715 5.309 3.432 5.309 6.685z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-mastodon" viewBox="0 0 32 32">
|
||||
<path d="M26.866 20.265c-0.411 2.073-3.611 4.344-7.293 4.79-1.93 0.232-3.825 0.447-5.845 0.358-3.307-0.143-5.899-0.787-5.899-0.787 0 0.322 0.018 0.626 0.054 0.912 0.429 3.253 3.235 3.45 5.881 3.539 2.681 0.089 5.076-0.661 5.076-0.661l0.107 2.431s-1.877 1.001-5.219 1.18c-1.841 0.107-4.111-0.054-6.774-0.751-5.773-1.519-6.774-7.686-6.935-13.924-0.054-1.859-0.018-3.593-0.018-5.059 0-6.381 4.201-8.258 4.201-8.258 2.109-0.965 5.72-1.376 9.491-1.412h0.089c3.772 0.036 7.382 0.447 9.491 1.412 0 0 4.183 1.877 4.183 8.258 0 0 0.054 4.701-0.59 7.972zM22.522 12.794c0-1.573-0.393-2.86-1.215-3.772-0.84-0.929-1.913-1.412-3.271-1.412-1.573 0-2.753 0.608-3.539 1.805l-0.769 1.287-0.769-1.287c-0.787-1.198-1.966-1.805-3.539-1.805-1.358 0-2.431 0.483-3.271 1.412-0.804 0.929-1.215 2.199-1.215 3.772v7.722h3.057v-7.507c0-1.573 0.679-2.377 2.002-2.377 1.466 0 2.216 0.965 2.216 2.842v4.093h3.039v-4.093c0-1.877 0.751-2.842 2.216-2.842 1.323 0 2.002 0.804 2.002 2.377v7.507h3.057v-7.722z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-shaarli" viewBox="0 0 30 32">
|
||||
<path d="M15.694 2.695c2.878 0 4.54 2.86 4.969 8.562h1.18c5.13 0.787 7.668 2.413 7.615 4.88 0.429 2.914-1.43 4.254-5.577 4.040 3.182 2.788 4.308 5.398 3.414 7.811-0.697 1.93-2.377 2.556-5.041 1.913-2.931-1.466-5.023-3.146-6.238-5.041h-0.769c-1.144 3.36-3.36 5.041-6.649 5.041h-1.144c-2.735-0.84-3.736-2.502-2.967-4.969l1.43-3.95h-0.411c-4.022-0.572-5.827-2.342-5.452-5.327 0.107-2.735 2.86-4.129 8.258-4.165 1.501-0.161 2.127-0.643 1.877-1.43 0-4.916 1.841-7.364 5.505-7.364zM14.836 6.734c-1.001-0.072-1.484 1.287-1.466 4.058l-0.089 2.288c-0.089 1.144-0.447 1.716-1.090 1.716l-6.435 0.357c-1.001 0.036-1.519 0.447-1.519 1.233 0 0.769 0.554 1.162 1.644 1.215 3.772-0.197 5.541 0.072 5.291 0.769l-1.144 2.449c-1.93 2.914-2.413 4.612-1.43 5.13 1.305 0.787 3.146-1.251 5.541-6.113 0.572-0.518 1.055-0.518 1.43 0 1.68 1.787 3.057 3.253 4.147 4.397 1.108 1.144 2.020 1.484 2.699 1.019 0.822-0.876 0.59-1.805-0.661-2.806-1.215-1.037-2.61-2.449-4.183-4.236-0.161-0.59-0.143-0.894 0.107-0.894 5.327 0.358 7.883 0.018 7.668-1.019 0.161-1.144-2.163-1.716-6.935-1.716-0.733 0.143-1.323-0.036-1.787-0.518v-4.004c0-2.234-0.536-3.325-1.591-3.289-0.054-0.018-0.143-0.036-0.197-0.036v0z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-rss" viewBox="0 0 25 32">
|
||||
<path d="M6.864 24.43c0 1.895-1.537 3.432-3.432 3.432s-3.432-1.537-3.432-3.432 1.537-3.432 3.432-3.432 3.432 1.537 3.432 3.432zM16.016 26.629c0.018 0.322-0.089 0.626-0.304 0.858-0.214 0.25-0.518 0.375-0.84 0.375h-2.413c-0.59 0-1.072-0.447-1.126-1.037-0.518-5.452-4.844-9.777-10.296-10.296-0.59-0.054-1.037-0.536-1.037-1.126v-2.413c0-0.322 0.125-0.626 0.375-0.84 0.197-0.197 0.483-0.304 0.769-0.304h0.089c3.807 0.304 7.4 1.966 10.099 4.683 2.717 2.699 4.379 6.292 4.683 10.099zM25.167 26.664c0.018 0.304-0.089 0.608-0.322 0.84-0.215 0.232-0.5 0.358-0.822 0.358h-2.556c-0.608 0-1.108-0.465-1.144-1.073-0.59-10.385-8.866-18.661-19.251-19.269-0.608-0.036-1.073-0.536-1.073-1.126v-2.556c0-0.322 0.125-0.608 0.357-0.822 0.214-0.215 0.5-0.322 0.786-0.322h0.054c6.256 0.322 12.137 2.949 16.57 7.4 4.451 4.433 7.078 10.314 7.4 16.57z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-home" viewBox="0 0 29 32">
|
||||
<path d="M24.703 18.138v8.58c0 0.626-0.518 1.144-1.144 1.144h-6.864v-6.864h-4.576v6.864h-6.864c-0.626 0-1.144-0.518-1.144-1.144v-8.58c0-0.036 0.018-0.072 0.018-0.107l10.278-8.473 10.278 8.473c0.018 0.036 0.018 0.072 0.018 0.107zM28.689 16.905l-1.108 1.323c-0.089 0.107-0.232 0.179-0.375 0.197h-0.054c-0.143 0-0.268-0.036-0.375-0.125l-12.369-10.314-12.369 10.314c-0.125 0.089-0.268 0.143-0.429 0.125-0.143-0.018-0.286-0.089-0.375-0.197l-1.108-1.323c-0.197-0.232-0.161-0.608 0.072-0.804l12.852-10.707c0.751-0.626 1.966-0.626 2.717 0l4.361 3.646v-3.486c0-0.322 0.25-0.572 0.572-0.572h3.432c0.322 0 0.572 0.25 0.572 0.572v7.293l3.915 3.253c0.232 0.197 0.268 0.572 0.072 0.804z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-bars" viewBox="0 0 32 32">
|
||||
<path d="M30 24v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1zM30 15v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1zM30 6v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-folder" viewBox="0 0 30 32">
|
||||
<path d="M29.743 11.274v12.584c0 2.199-1.805 4.004-4.004 4.004h-21.735c-2.199 0-4.004-1.805-4.004-4.004v-17.16c0-2.199 1.805-4.004 4.004-4.004h5.72c2.199 0 4.004 1.805 4.004 4.004v0.572h12.012c2.199 0 4.004 1.805 4.004 4.004z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-tags" viewBox="0 0 34 32">
|
||||
<path d="M8.008 8.414c0-1.269-1.019-2.288-2.288-2.288s-2.288 1.019-2.288 2.288 1.019 2.288 2.288 2.288 2.288-1.019 2.288-2.288zM27.080 18.71c0 0.608-0.25 1.198-0.661 1.609l-8.776 8.794c-0.429 0.411-1.019 0.661-1.627 0.661s-1.198-0.25-1.609-0.661l-12.78-12.798c-0.912-0.894-1.627-2.628-1.627-3.897v-7.436c0-1.251 1.037-2.288 2.288-2.288h7.436c1.269 0 3.003 0.715 3.915 1.627l12.78 12.762c0.411 0.429 0.661 1.019 0.661 1.627zM33.944 18.71c0 0.608-0.25 1.198-0.661 1.609l-8.776 8.794c-0.429 0.411-1.019 0.661-1.627 0.661-0.929 0-1.394-0.429-2.002-1.055l8.401-8.401c0.411-0.411 0.661-1.001 0.661-1.609s-0.25-1.198-0.661-1.627l-12.78-12.762c-0.912-0.912-2.645-1.627-3.915-1.627h4.004c1.269 0 3.003 0.715 3.915 1.627l12.78 12.762c0.411 0.429 0.661 1.019 0.661 1.627z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-caret-down" viewBox="0 0 18 32">
|
||||
<path d="M18.304 12.99c0 0.304-0.125 0.59-0.34 0.804l-8.008 8.008c-0.214 0.215-0.501 0.34-0.804 0.34s-0.59-0.125-0.804-0.34l-8.008-8.008c-0.214-0.214-0.34-0.501-0.34-0.804 0-0.626 0.518-1.144 1.144-1.144h16.016c0.626 0 1.144 0.518 1.144 1.144z"></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6 KiB |
65
php/page.php
Executable file
65
php/page.php
Executable file
|
|
@ -0,0 +1,65 @@
|
|||
<main id="skip">
|
||||
<?php Theme::plugins('pageBegin'); ?>
|
||||
<article class="article container-article mb-1">
|
||||
<h1 class="page-title"><?php echo $page->title(); ?></h1>
|
||||
<?php if ($page->coverImage()): ?>
|
||||
<div class="thumbnail mb-half" aria-hidden="true">
|
||||
<img alt="" src="<?php echo $page->thumbCoverImage(); ?>"/>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
<?php if (!$page->isStatic() && !$url->notFound()): ?>
|
||||
<p class="align-right pr-half"><span class="btn btn-small c-secondary"> 13 minutes </span></p>
|
||||
<?php endif ?>
|
||||
|
||||
<div class="article-entry mb-1">
|
||||
<?php echo $page->content(); ?>
|
||||
</div>
|
||||
<?php if (!$page->isStatic() && !$url->notFound()): ?>
|
||||
<aside class="card card-noheader article-meta">
|
||||
<h2 class="sr-only">Métadonnées de l'article</h2>
|
||||
<div class="card-body">
|
||||
<div class="author-area">
|
||||
<img alt="" src="<?php echo $page->user('profilePicture');?>" srcset="https://secure.gravatar.com/avatar/8a4aed71aeec9f65c9e098d81ff12638?s=240&d=mm&r=g 2x" class="avatar avatar-120 photo" height="120" width="120" decoding="async"> <div class="author-metadata">
|
||||
<div class="author-pseudo">Écrit par <a href="https://kazhnuz.space"><?php echo $page->user('nickname'); ?></a></div>
|
||||
<small class="author-date">Le <?php echo $page->date('l j F Y à H:i') ?></small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php ?>
|
||||
|
||||
<div class="article-category">
|
||||
<h3 class="sr-only">Tags et catégories</h3>
|
||||
<ul class="nolist" aria-labelledby="title-article-taxo-categories">
|
||||
<h4 class="sr-only" id="title-article-taxo-categories">Catégories</h4>
|
||||
<p class="mb-0 pb-half"><?php echo print_r($page->user('firstName'), TRUE); ?></p>
|
||||
<li>
|
||||
<a href="<?php echo $page->categoryPermalink(); ?>" class="btn btn-small c-primary">
|
||||
<svg class="icon" alt=""><use xlink:href="#icon-folder"></use></svg>
|
||||
<?php echo $page->category(); ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php
|
||||
foreach ($page->tags(true) as $x => $y) {
|
||||
?>
|
||||
<li>
|
||||
<a href="<?php
|
||||
$tagObject = new Tag($x);
|
||||
echo print_r($tagObject->permalink());
|
||||
?>" class="btn btn-small c-secondary">
|
||||
<svg class="icon" alt=""><use xlink:href="#icon-tags"></use></svg>
|
||||
<?php echo $y; ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<?php endif ?>
|
||||
<?php Theme::plugins('pageEnd'); ?>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<?php include(THEME_DIR_PHP.'sidebar.php'); ?>
|
||||
73
php/search.php
Normal file
73
php/search.php
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<main>
|
||||
<h1 class="page-title" id="title-featured">
|
||||
<?php
|
||||
$title = explode("/", $url->slug());
|
||||
echo "Recherche pour « " . $title[1] . " »";
|
||||
?>
|
||||
</h1>
|
||||
<div class="previews-section preview-list">
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<?php if ($page->type() != "sticky") : ?>
|
||||
<a href="<?php echo $page->permalink(); ?>" class="preview">
|
||||
<div class="preview-thumbnail">
|
||||
<?php if ($page->coverImage()) : ?>
|
||||
<img alt="" src="<?php echo $page->thumbCoverImage(); ?>" />
|
||||
<?php else : ?>
|
||||
<img alt="" src="<?php echo HTML_PATH_THEME_IMG; ?>/default-preview.png" />
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<div class="preview-text">
|
||||
<h2><?php echo $page->title(); ?></h2>
|
||||
|
||||
<div class="flex-that">
|
||||
<div>
|
||||
<span class='badge c-secondary small-text m-0'><?php echo $page->category(); ?></span>
|
||||
</div>
|
||||
<div>
|
||||
<time><span class="badge c-secondary small-text m-0"><?php echo $page->date('d/m/Y') ?></span></time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-excerpt"><?php echo $page->description(); ?></div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<?php if (Paginator::numberOfPages() > 1) : ?>
|
||||
<nav class="paginator mb-2 mt-1">
|
||||
<ul class="pagination flex-that no-pills">
|
||||
|
||||
<!-- Previous button -->
|
||||
<?php if (Paginator::showPrev()) : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<a class="page-link btn btn-primary m-0" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1"><?php echo $L->get('Previous'); ?></a>
|
||||
</li>
|
||||
<?php else : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<span class="page-link m-0" tabindex="-1"><?php echo $L->get('Previous'); ?></span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Home button -->
|
||||
<li class="page-item p-0 m-0">
|
||||
<span>Page <?php echo Paginator::currentPage(); ?> sur <?php echo Paginator::numberOfPages(); ?> </span>
|
||||
</li>
|
||||
|
||||
<!-- Next button -->
|
||||
<?php if (Paginator::showNext()) : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<a class="page-link btn btn-primary m-0" href="<?php echo Paginator::nextPageUrl() ?>"><?php echo $L->get('Next'); ?></a>
|
||||
</li>
|
||||
<?php else : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<span class="page-link m-0" tabindex="-1"><?php echo $L->get('Next'); ?> </span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<?php endif ?>
|
||||
</main>
|
||||
|
||||
<?php include(THEME_DIR_PHP.'sidebar.php'); ?>
|
||||
53
php/sidebar.php
Executable file
53
php/sidebar.php
Executable file
|
|
@ -0,0 +1,53 @@
|
|||
<aside class="sidebar">
|
||||
<section class="card c-secondary">
|
||||
<h2 class="card-header"><svg class="icon" alt=""><use xlink:href="#icon-rss"></use></svg> Publications</h2>
|
||||
<div class="menu fg-dark">
|
||||
<ul>
|
||||
<?php
|
||||
$items = $pages->getList(1, 6, true);
|
||||
foreach ($items as $key) {
|
||||
// buildPage function returns a Page-Object
|
||||
$page = buildPage($key);
|
||||
?>
|
||||
<li>
|
||||
<a class="menu-element" href="<?php echo $page->permalink(); ?>"><?php echo $page->title(); ?></a></li>
|
||||
</li>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card c-secondary">
|
||||
<h2 class="card-header"><svg class="icon icon-folder" alt=""><use xlink:href="#icon-folder"></use></svg> Catégories</h2>
|
||||
<div class="menu fg-dark">
|
||||
<ul>
|
||||
<?php
|
||||
$items = getCategories();
|
||||
foreach ($items as $category) {
|
||||
if (count($category->pages())>0) {
|
||||
?>
|
||||
<li><a class="menu-element" href="<?php echo $category->permalink(); ?>"><?php echo $category->name(); ?> <span class="badge bg-primary m0"><?php echo count($category->pages()); ?></span></a></li>
|
||||
<?php }
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card c-secondary">
|
||||
<h2 class="card-header"><svg class="icon" alt=""><use xlink:href="#icon-tags"></use></svg> Tags</h2>
|
||||
<div class="card-body">
|
||||
<ul class="tag-list">
|
||||
<?php
|
||||
$items = getTags();
|
||||
|
||||
foreach ($items as $tag) {
|
||||
if (count($tag->pages()) > 1) {
|
||||
echo '<li><a href="'.$tag->permalink().'">'.$tag->name().'</a></li>';
|
||||
}
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
74
php/tag.php
Normal file
74
php/tag.php
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<main>
|
||||
<h1 class="page-title" id="title-featured">
|
||||
<svg class="icon" alt=""><use xlink:href="#icon-tags"></use></svg>
|
||||
<?php
|
||||
$tag = new Tag($url->slug());
|
||||
echo $tag->name();
|
||||
?>
|
||||
</h1>
|
||||
<div class="previews-section preview-list">
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<?php if ($page->type() != "sticky") : ?>
|
||||
<a href="<?php echo $page->permalink(); ?>" class="preview">
|
||||
<div class="preview-thumbnail">
|
||||
<?php if ($page->coverImage()) : ?>
|
||||
<img alt="" src="<?php echo $page->thumbCoverImage(); ?>" />
|
||||
<?php else : ?>
|
||||
<img alt="" src="<?php echo HTML_PATH_THEME_IMG; ?>/default-preview.png" />
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<div class="preview-text">
|
||||
<h2><?php echo $page->title(); ?></h2>
|
||||
|
||||
<div class="flex-that">
|
||||
<div>
|
||||
<span class='badge c-secondary small-text m-0'><?php echo $page->category(); ?></span>
|
||||
</div>
|
||||
<div>
|
||||
<time><span class="badge c-secondary small-text m-0"><?php echo $page->date('d/m/Y') ?></span></time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-excerpt"><?php echo $page->description(); ?></div>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<?php if (Paginator::numberOfPages() > 1) : ?>
|
||||
<nav class="paginator mb-2 mt-1">
|
||||
<ul class="pagination flex-that no-pills">
|
||||
|
||||
<!-- Previous button -->
|
||||
<?php if (Paginator::showPrev()) : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<a class="page-link btn btn-primary m-0" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1"><?php echo $L->get('Previous'); ?></a>
|
||||
</li>
|
||||
<?php else : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<span class="page-link m-0" tabindex="-1"><?php echo $L->get('Previous'); ?></span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Home button -->
|
||||
<li class="page-item p-0 m-0">
|
||||
<span>Page <?php echo Paginator::currentPage(); ?> sur <?php echo Paginator::numberOfPages(); ?> </span>
|
||||
</li>
|
||||
|
||||
<!-- Next button -->
|
||||
<?php if (Paginator::showNext()) : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<a class="page-link btn btn-primary m-0" href="<?php echo Paginator::nextPageUrl() ?>"><?php echo $L->get('Next'); ?></a>
|
||||
</li>
|
||||
<?php else : ?>
|
||||
<li class="page-item m-0 p-0">
|
||||
<span class="page-link m-0" tabindex="-1"><?php echo $L->get('Next'); ?> </span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
<?php endif ?>
|
||||
</main>
|
||||
|
||||
<?php include(THEME_DIR_PHP.'sidebar.php'); ?>
|
||||
9
scss/_core.scss
Executable file
9
scss/_core.scss
Executable file
|
|
@ -0,0 +1,9 @@
|
|||
/* 0. CORE
|
||||
** All the basic functions from the stylesheet
|
||||
*/
|
||||
|
||||
@import 'core/bases';
|
||||
@import 'core/typography';
|
||||
@import 'core/containers';
|
||||
@import 'core/icons';
|
||||
//@import 'core/columns';
|
||||
12
scss/_definitions.scss
Executable file
12
scss/_definitions.scss
Executable file
|
|
@ -0,0 +1,12 @@
|
|||
// DEFINITIONS
|
||||
|
||||
// Global definitions and variables of the stylesheet
|
||||
// With them, you can customize easily how the style look
|
||||
// Look at each component inside the definitions subfolder to customize the
|
||||
// styles
|
||||
|
||||
@import 'definitions/palette';
|
||||
@import 'definitions/shadows';
|
||||
@import 'definitions/fonts';
|
||||
@import 'definitions/borders';
|
||||
@import 'definitions/sizing';
|
||||
2
scss/_dep.scss
Executable file
2
scss/_dep.scss
Executable file
|
|
@ -0,0 +1,2 @@
|
|||
// DEPENDECIES
|
||||
// Other style used as dependencies
|
||||
18
scss/_drawing.scss
Executable file
18
scss/_drawing.scss
Executable file
|
|
@ -0,0 +1,18 @@
|
|||
/* --- 04. COMPOSANTS --- */
|
||||
|
||||
/*
|
||||
* Les différents composants réutilisables de la page.
|
||||
*
|
||||
*/
|
||||
|
||||
@import 'components/badges';
|
||||
@import 'components/buttons';
|
||||
@import 'components/btn-groups';
|
||||
@import 'components/breadcrumb';
|
||||
@import 'components/pagination';
|
||||
@import 'components/cards';
|
||||
@import 'components/menus';
|
||||
@import 'components/toasts';
|
||||
@import 'components/tables';
|
||||
@import 'components/sidebar';
|
||||
@import 'components/input';
|
||||
9
scss/_global.scss
Executable file
9
scss/_global.scss
Executable file
|
|
@ -0,0 +1,9 @@
|
|||
/* 4 - Custom styling
|
||||
* Styles that are custom to this particular theme
|
||||
**/
|
||||
|
||||
@import 'custom/global';
|
||||
@import 'custom/previews';
|
||||
@import 'custom/featured';
|
||||
@import 'custom/article';
|
||||
@import 'custom/mobile';
|
||||
10
scss/_mixins.scss
Executable file
10
scss/_mixins.scss
Executable file
|
|
@ -0,0 +1,10 @@
|
|||
// MIXINS
|
||||
// Include every mixins files
|
||||
|
||||
@import 'mixins/colors';
|
||||
@import 'mixins/responsive';
|
||||
@import 'mixins/borders';
|
||||
@import 'mixins/shape';
|
||||
@import 'mixins/btns';
|
||||
@import 'mixins/panels';
|
||||
@import 'mixins/li';
|
||||
12
scss/_utils.scss
Executable file
12
scss/_utils.scss
Executable file
|
|
@ -0,0 +1,12 @@
|
|||
/* 1. Utils
|
||||
** All the utilities class of the stylesheet
|
||||
*/
|
||||
|
||||
@import 'utils/a11y';
|
||||
@import 'utils/align';
|
||||
@import 'utils/borders';
|
||||
@import 'utils/colorize';
|
||||
@import 'utils/lists';
|
||||
@import 'utils/sizing';
|
||||
@import 'utils/flex';
|
||||
@import 'utils/display';
|
||||
9
scss/components/_badges.scss
Executable file
9
scss/components/_badges.scss
Executable file
|
|
@ -0,0 +1,9 @@
|
|||
.badge {
|
||||
@include shape-style($button_large);
|
||||
line-height: 1.5em;
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
text-decoration: none !important;
|
||||
background-color: var(--accent-color);
|
||||
color: var(--text-color-contrast);
|
||||
}
|
||||
25
scss/components/_breadcrumb.scss
Executable file
25
scss/components/_breadcrumb.scss
Executable file
|
|
@ -0,0 +1,25 @@
|
|||
ul.breadcrumb,
|
||||
ol.breadcrumb,
|
||||
.breadcrumb {
|
||||
@include shape-style($button_large);
|
||||
background-color: $color-background-alt;
|
||||
|
||||
&::before {
|
||||
background-color: $color-background-alt;
|
||||
}
|
||||
|
||||
padding: $button_large/2;
|
||||
margin: 0 0 $lineheight;
|
||||
@include li-flex();
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
li:not(:first-child)::before {
|
||||
content: "/";
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
24
scss/components/_btn-groups.scss
Executable file
24
scss/components/_btn-groups.scss
Executable file
|
|
@ -0,0 +1,24 @@
|
|||
.btn-toolbar {
|
||||
padding: 0 $button-large;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
& > .btn {
|
||||
@include border-radius($btn-radius);
|
||||
margin:0 $button-group-margin 0 $button-group-margin!important;
|
||||
}
|
||||
|
||||
&:not(:first-child) > .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius:0;
|
||||
&:before {
|
||||
content: " "!important;
|
||||
border-left:1px solid rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) > .btn {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
}
|
||||
72
scss/components/_buttons.scss
Executable file
72
scss/components/_buttons.scss
Executable file
|
|
@ -0,0 +1,72 @@
|
|||
.btn {
|
||||
@include shape-style($button_large);
|
||||
text-decoration: none;
|
||||
padding: $button_large/3 $button_large;
|
||||
margin: $button_large/3 $button_large/2 $lineheight;
|
||||
line-height: $lineheight;
|
||||
height: auto;
|
||||
|
||||
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
|
||||
outline-color: var(--accent-color);
|
||||
color: var(--text-color-contrast);
|
||||
background-color: var(--accent-color);
|
||||
|
||||
&:visited {
|
||||
color: var(--text-color-contrast);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--accent-color-hover);
|
||||
outline-color: var(--accent-color-hover);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
font-weight: $fontweight_base;
|
||||
|
||||
p &:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fake {
|
||||
background-color: transparent !important;
|
||||
color:var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.disabled,
|
||||
.btn:disabled {
|
||||
opacity: 0.8;
|
||||
background-color: var(--accent-color) !important;
|
||||
outline-color: var(--accent-color) !important;
|
||||
color: var(--text-color-contrast) !important;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: $button_small/3 $button_small/2;
|
||||
margin: $button_small/3 $button_small/2 $lineheight;
|
||||
|
||||
&:before {
|
||||
left: -$button_small/2;
|
||||
right: -$button_small/2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-readmore,
|
||||
.btn-link {
|
||||
color: var(--link-color);
|
||||
|
||||
&:visited {
|
||||
color: var(--link-color);
|
||||
}
|
||||
background-color: transparent;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
&::before {
|
||||
background-color: var(--link-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
60
scss/components/_cards.scss
Executable file
60
scss/components/_cards.scss
Executable file
|
|
@ -0,0 +1,60 @@
|
|||
$card-bigpad: $lineheight_rel * 1.25;
|
||||
$card-smallpad: $lineheight_rel / 4;
|
||||
|
||||
.card {
|
||||
@include panel($card-bigpad);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: $color-font;
|
||||
|
||||
&-body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&-header {
|
||||
@include panel-header($card-bigpad);
|
||||
|
||||
.icon {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
font-family: $basefont;
|
||||
color: var(--text-color-contrast);
|
||||
|
||||
&::before {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin list-symbol($symbol) {
|
||||
li.list-element {
|
||||
list-style: none;
|
||||
|
||||
&::before {
|
||||
font-family: "ForkAwesome";
|
||||
content: $symbol;
|
||||
padding-right: $lineheight_rel / 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin list-color($color) {
|
||||
li.list-element {
|
||||
&::before {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.card-list,
|
||||
.card>ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li.list-element {
|
||||
line-height: $lineheight_rel / 2;
|
||||
padding: $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 2;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
93
scss/components/_input.scss
Executable file
93
scss/components/_input.scss
Executable file
|
|
@ -0,0 +1,93 @@
|
|||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
background-color: $color-background;
|
||||
border-radius: $btn-radius;
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
padding: $lineheight_rel / 4;
|
||||
line-height: $lineheight_rel;
|
||||
}button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
appearance: button;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 2px dotted var(--accent-color);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
appearance: textfield;
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
122
scss/components/_menus.scss
Executable file
122
scss/components/_menus.scss
Executable file
|
|
@ -0,0 +1,122 @@
|
|||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
display: flex;
|
||||
line-height: $lineheight_rel;
|
||||
padding: $lineheight_rel / 4;
|
||||
margin: 0;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
|
||||
word-wrap: none;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
.badge {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
outline-color: var(--text-color);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.submenu:focus {
|
||||
background-color: var(--link-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu .fa-caret-down {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
flex-direction: row;
|
||||
padding: $lineheight_rel/4;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
a,
|
||||
span,
|
||||
em,
|
||||
strong,
|
||||
&.toolbar-element {
|
||||
display: block;
|
||||
padding: $lineheight_rel/3 $lineheight_rel/2;
|
||||
}
|
||||
|
||||
ul {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: all 0.5s ease;
|
||||
margin-top: 0rem;
|
||||
left: 0;
|
||||
display: none;
|
||||
padding: 0.33rem;
|
||||
z-index: 2;
|
||||
background-color: $color-background-alt;
|
||||
}
|
||||
|
||||
&:hover ul,
|
||||
ul:hover,
|
||||
&:focus-within ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: $card-radius;
|
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
width: max-content;
|
||||
|
||||
li {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-divider,
|
||||
.menu ul h1,
|
||||
ul.menu h1,
|
||||
.menu h2,
|
||||
ul.menu h2 {
|
||||
position: relative;
|
||||
left: -$lineheight_rel / 4;
|
||||
font-weight: $fontweight_hyper;
|
||||
padding-top: $lineheight_rel / 4;
|
||||
padding-bottom: $lineheight_rel / 4;
|
||||
font-size: 1em;
|
||||
line-height: $lineheight_rel;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
@include button-hover();
|
||||
padding-left: $button_small;
|
||||
padding-right: $button_small;
|
||||
}
|
||||
32
scss/components/_pagination.scss
Executable file
32
scss/components/_pagination.scss
Executable file
|
|
@ -0,0 +1,32 @@
|
|||
nav.pagination {
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
.nav-links {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-numbers,
|
||||
.next,
|
||||
.prev {
|
||||
@include shape-style($button_small);
|
||||
padding: $button_small/2 $button_small;
|
||||
margin: $button_small / 2;
|
||||
text-decoration: none;
|
||||
|
||||
&:not(.current):not(.dots) {
|
||||
outline-color: var(--accent-color);
|
||||
color: var(--link-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--link-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
@include background-color($color-primary);
|
||||
|
||||
background-color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
263
scss/components/_previews.scss
Executable file
263
scss/components/_previews.scss
Executable file
|
|
@ -0,0 +1,263 @@
|
|||
$preview-height: 8*$lineheight;
|
||||
$preview-content-height:165px;
|
||||
$comment-peek-height:0px;
|
||||
$comment-height:30px;
|
||||
|
||||
.preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
@include md() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@include xl() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@include xxl() {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
@media(max-width:767px){}
|
||||
@media(min-width:768px){}
|
||||
@media(min-width:992px){
|
||||
|
||||
.prev-col-2 .preview-container {
|
||||
width:50%;
|
||||
}
|
||||
|
||||
.prev-col-3 .preview-container {
|
||||
width:33%;
|
||||
}
|
||||
|
||||
.prev-col-4 .preview-container {
|
||||
width:25%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
padding:0;
|
||||
width:100%;
|
||||
margin:auto;
|
||||
box-shadow: $large-shadow, $inset-shadow;
|
||||
}
|
||||
|
||||
.preview-link {
|
||||
padding:0;
|
||||
background-color: transparent;
|
||||
margin:0!important;
|
||||
}
|
||||
|
||||
.preview-item {
|
||||
height: $preview-height;
|
||||
font-size:0.9rem;
|
||||
line-height: $lineheight !important;
|
||||
text-align:justify;
|
||||
background-color:rgba(0,0,0,0.00);
|
||||
color:dim(getFontColor());
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
justify-content: center;
|
||||
|
||||
.preview-overlay {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
padding-top: $card-header-vmargin/2;
|
||||
backdrop-filter: none;
|
||||
transition: background-color 0.3s;
|
||||
@include border-radius($card-radius);
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $color-font-light;
|
||||
font-size: 1rem;
|
||||
line-height: $lineheight;
|
||||
font-weight:$fontweight_big;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-family: $basefont;
|
||||
font-size: 1rem;
|
||||
@include panel-header($lineheight_half);
|
||||
@include colorize-shape($color-primary);
|
||||
color:getTextColorFromBackground($color-primary);
|
||||
font-weight: $fontweight_big;
|
||||
margin-top:0px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.preview-overlay {
|
||||
backdrop-filter: blur(2px);
|
||||
background-color:rgba(0,0,0,0.4);
|
||||
|
||||
.metadata-pills {
|
||||
opacity: .9;
|
||||
transition: opacity .5s, height .5s;
|
||||
height:$preview-content-height - $comment-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
max-height: $preview-height;
|
||||
overflow:hidden;
|
||||
background-size: cover;
|
||||
min-height:100%;
|
||||
min-width:100%;
|
||||
@include border-radius($card-radius);
|
||||
font-size:0.85rem;
|
||||
line-height:1.25rem;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom:0px;
|
||||
max-width:100%;
|
||||
display:none;
|
||||
}
|
||||
|
||||
& > p {
|
||||
width:100%;
|
||||
margin:auto;
|
||||
|
||||
& > img {
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
vertical-align:middle;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
&.p-img {
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
padding:auto;
|
||||
display: block;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-metadata {
|
||||
color: $color-font-light;
|
||||
height:$preview-content-height;
|
||||
overflow: hidden;
|
||||
@include border-radius($card-radius);
|
||||
|
||||
.metadata-pills {
|
||||
height:$preview-content-height - $comment-peek-height;
|
||||
opacity: 0;
|
||||
transition: opacity .3s, height .3s;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
padding-left: $lineheight/2;
|
||||
padding-right: $lineheight/2;
|
||||
font-size:0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview.head-info {
|
||||
.comment-text {
|
||||
background-color:$color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview.card-grey {
|
||||
.comment-text {
|
||||
background-color:$color-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
color: $color-font-light;
|
||||
background-color:$color-primary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-preview time {
|
||||
margin-bottom:0.4em;
|
||||
display:block;
|
||||
}
|
||||
|
||||
// Author area
|
||||
|
||||
.author-area {
|
||||
display:flex;
|
||||
|
||||
img.author-avatar, img.avatar {
|
||||
display:block;
|
||||
height: $lineheight*3;
|
||||
width:auto;
|
||||
border-radius:100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
margin-right:$lineheight;
|
||||
}
|
||||
|
||||
.author-metadata {
|
||||
align-items:center;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.author-date {
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom:$lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
.pigimg {
|
||||
display:block;
|
||||
max-width: 100%;
|
||||
height:auto;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mwarea {
|
||||
padding-bottom: $lineheight;
|
||||
.avatar {
|
||||
width:80%;
|
||||
height:auto;
|
||||
display:block;
|
||||
margin:auto;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
width:100%;
|
||||
height:auto;
|
||||
@include border-radius($card-radius);
|
||||
}
|
||||
|
||||
.roman {
|
||||
@include md() {
|
||||
width:80%;
|
||||
position:relative;
|
||||
top:-240px;
|
||||
margin:auto;
|
||||
}
|
||||
}
|
||||
21
scss/components/_sidebar.scss
Executable file
21
scss/components/_sidebar.scss
Executable file
|
|
@ -0,0 +1,21 @@
|
|||
.sidebar-container {
|
||||
width:100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: $lineheight*2;
|
||||
grid-template-areas:
|
||||
"side"
|
||||
"main";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 360px auto;
|
||||
grid-template-areas: "side main";
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding:1rem;
|
||||
}
|
||||
}
|
||||
19
scss/components/_tables.scss
Executable file
19
scss/components/_tables.scss
Executable file
|
|
@ -0,0 +1,19 @@
|
|||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
th, td {
|
||||
vertical-align:center;
|
||||
padding-top: 0.325em;
|
||||
padding-bottom: 0.325em;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: $fontweight_hyper;
|
||||
}
|
||||
33
scss/components/_toasts.scss
Executable file
33
scss/components/_toasts.scss
Executable file
|
|
@ -0,0 +1,33 @@
|
|||
@mixin well() {
|
||||
border: 0;
|
||||
border-radius: $well-radius;
|
||||
|
||||
margin: 0 0 $lineheight 0;
|
||||
padding: $lineheight 1rem $lineheight 1rem;
|
||||
|
||||
max-width: 100%;
|
||||
font-style: italic;
|
||||
@include background-color($color-background-alt);
|
||||
box-shadow: $narrow-shadow;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
.quote,
|
||||
.well,
|
||||
pre,
|
||||
.pre,
|
||||
.well-pre,
|
||||
.toast,
|
||||
.code {
|
||||
@include well();
|
||||
}
|
||||
|
||||
.toast {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5em;
|
||||
padding: $card-smallpad * 2;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace, monospace;
|
||||
}
|
||||
47
scss/core/_bases.scss
Executable file
47
scss/core/_bases.scss
Executable file
|
|
@ -0,0 +1,47 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
// Text initialization
|
||||
font-family: $basefont;
|
||||
text-align: left;
|
||||
font-size: $fontsize;
|
||||
line-height: $lineheight;
|
||||
font-weight: $fontweight_base;
|
||||
|
||||
// Normalization
|
||||
box-sizing: border-box;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
text-rendering: optimizeLegibility;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
18
scss/core/_box-sizing.scss
Executable file
18
scss/core/_box-sizing.scss
Executable file
|
|
@ -0,0 +1,18 @@
|
|||
/* 0.2 - Box-sizing
|
||||
* Make sure that everything have its box-sizing to border-box
|
||||
**/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
68
scss/core/_columns.scss
Executable file
68
scss/core/_columns.scss
Executable file
|
|
@ -0,0 +1,68 @@
|
|||
@mixin column($size) {
|
||||
grid-column: span $size;
|
||||
width:100%;
|
||||
margin:0;
|
||||
|
||||
& > *:last-child {
|
||||
margin-bottom:0!important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin column-list() {
|
||||
&-1 {@include column(1);}
|
||||
&-2 {@include column(2);}
|
||||
&-3 {@include column(3);}
|
||||
&-4 {@include column(4);}
|
||||
&-5 {@include column(5);}
|
||||
&-6 {@include column(6);}
|
||||
&-7 {@include column(7);}
|
||||
&-8 {@include column(8);}
|
||||
&-9 {@include column(9);}
|
||||
&-10 {@include column(10);}
|
||||
&-11 {@include column(11);}
|
||||
&-12 {@include column(12);}
|
||||
}
|
||||
|
||||
.columns {
|
||||
display:grid;
|
||||
grid-gap:$lineheight;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: auto;
|
||||
padding:$lineheight;
|
||||
&-nogap {
|
||||
grid-gap:0px;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
@include column(12);
|
||||
}
|
||||
|
||||
.col {
|
||||
@include column-list();
|
||||
&-sm {
|
||||
@include sm() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-md {
|
||||
@include md() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-lg {
|
||||
@include lg() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-xl {
|
||||
@include xl() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-xxl {
|
||||
@include xxl() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
}
|
||||
11
scss/core/_containers.scss
Executable file
11
scss/core/_containers.scss
Executable file
|
|
@ -0,0 +1,11 @@
|
|||
#wrapper {
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
.container-big {
|
||||
@include container($container-size-large, $lineheight);
|
||||
}
|
||||
|
||||
.container, .container-onecolumn {
|
||||
@include container($container-size, $lineheight);
|
||||
}
|
||||
15
scss/core/_icons.scss
Executable file
15
scss/core/_icons.scss
Executable file
|
|
@ -0,0 +1,15 @@
|
|||
.icon {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
color: currentColor;
|
||||
position: relative;
|
||||
top: 0.1em;
|
||||
}
|
||||
|
||||
.icon.icon-newspaper-o {
|
||||
top: 0.15em;
|
||||
}
|
||||
349
scss/core/_normalize.scss
Executable file
349
scss/core/_normalize.scss
Executable file
|
|
@ -0,0 +1,349 @@
|
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
179
scss/core/_typography.scss
Executable file
179
scss/core/_typography.scss
Executable file
|
|
@ -0,0 +1,179 @@
|
|||
@mixin paragraph() {
|
||||
padding:0;
|
||||
padding-bottom: $lineheight;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
@include accent-color($color-primary, get-color-light("primary"));
|
||||
--text-color:#{$color-font};
|
||||
--link-color-hover:#{transparentize($color-font, 0.85)};
|
||||
--link-color:#{darken($color-link, 10%)};
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: $fontweight_bold;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.05rem 0.25rem;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
outline-color: $color-link;
|
||||
padding: 0.05rem;
|
||||
border-radius: 0.1rem;
|
||||
text-decoration: underline dashed 1px;
|
||||
text-underline-offset: 0.1rem;
|
||||
|
||||
&:visited {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--link-color-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a:focus-visible, input:focus-visible {
|
||||
outline-style: dashed;
|
||||
outline-width: 2px;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: lighten($color-mark, 30%);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
p, ul, ol {
|
||||
@include paragraph();
|
||||
&:last-child {
|
||||
padding-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: disc;
|
||||
ul, ol {
|
||||
padding-bottom:0;
|
||||
margin:0;
|
||||
}
|
||||
li {
|
||||
margin:0;
|
||||
margin-left: $lineheight;
|
||||
line-height: $lineheight;
|
||||
}
|
||||
|
||||
&.nolist {
|
||||
display:inline;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::selection, ::-moz-selection {
|
||||
@include background-color($color-selection);
|
||||
}
|
||||
|
||||
@mixin newTitle($size, $weight) {
|
||||
$lineNumber: ceil($size / 1.5);
|
||||
font-size: $size * 1rem;
|
||||
line-height: $lineNumber * $lineheight;
|
||||
font-weight: $weight;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7 {
|
||||
font-family: $basefont;
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
padding:0;
|
||||
margin:0;
|
||||
font-weight: $fontweight_base;
|
||||
padding-bottom: $lineheight;
|
||||
a {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
sup, sub {
|
||||
& > a {
|
||||
color: $color-link;
|
||||
background-color:transparent;
|
||||
&:hover, &:focus, &:active {
|
||||
color: darken($color-link, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-family: $titlefont;
|
||||
@include newTitle(3.815, $fontweight_hyper);
|
||||
}
|
||||
|
||||
h1, .title-1 {
|
||||
font-family: $titlefont;
|
||||
@include newTitle(2.441, $fontweight_hyper);
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
h2, .title-2 {
|
||||
@include newTitle(2.441, $fontweight_big);
|
||||
}
|
||||
|
||||
h3, .title-3 {
|
||||
@include newTitle(1.953, $fontweight_bold);
|
||||
}
|
||||
|
||||
h4, .title-4 {
|
||||
@include newTitle(1.563, $fontweight_hyper);
|
||||
}
|
||||
|
||||
h5, .title-5 {
|
||||
@include newTitle(1.25, $fontweight_bold);
|
||||
}
|
||||
|
||||
h6, .title-6 {
|
||||
@include newTitle(1, $fontweight_hyper);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0px solid rgba(1, 1, 1, 0.15);
|
||||
border-bottom: 1px;
|
||||
margin: 1.5em;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.small-text,
|
||||
small {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
37
scss/custom/_article.scss
Executable file
37
scss/custom/_article.scss
Executable file
|
|
@ -0,0 +1,37 @@
|
|||
.article {
|
||||
img {
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.thumbnail img {
|
||||
width:100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: $card-radius;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
.author-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $lineheight / 2;
|
||||
|
||||
img {
|
||||
border-radius: 9999px;
|
||||
width: $lineheight * 3;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
margin-right: $lineheight / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.article-category {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
margin-bottom: $lineheight / 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
39
scss/custom/_featured.scss
Executable file
39
scss/custom/_featured.scss
Executable file
|
|
@ -0,0 +1,39 @@
|
|||
.preview-featured {
|
||||
font-size: 0.8rem;
|
||||
padding: $lineheight / 3;
|
||||
|
||||
.preview-link {
|
||||
display: block;
|
||||
padding:0;
|
||||
border-radius: $card-radius;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
.preview-item {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
background-size:100% auto;
|
||||
background-position: center center;
|
||||
transition: background-size .5s;
|
||||
|
||||
&:hover {
|
||||
background-size: 120% auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-overlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
height:100%;
|
||||
color: white !important;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 60%);
|
||||
padding:$lineheight / 8;
|
||||
|
||||
h2 {
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
200
scss/custom/_global.scss
Executable file
200
scss/custom/_global.scss
Executable file
|
|
@ -0,0 +1,200 @@
|
|||
/* --- 03. GLOBAL STYLING --- */
|
||||
|
||||
/*
|
||||
* Les styles "globaux" touchant toute la page.
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container-big() {
|
||||
padding-left: $lineheight;
|
||||
padding-right: $lineheight;
|
||||
max-width: $container-size;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.no-pills {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.align {
|
||||
&-center {text-align: center;}
|
||||
&-left {text-align: left;}
|
||||
&-right {text-align: right;}
|
||||
}
|
||||
|
||||
/* ------------------ HEADERS ------------------- */
|
||||
|
||||
#page-header {
|
||||
background: $color-primary url('../img/background.png');
|
||||
margin-bottom:1.5rem;
|
||||
font-size: 0.8rem;
|
||||
.fa {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
header h1 {
|
||||
border-style:none !important;
|
||||
font-weight: $fontweight_hyper;
|
||||
font-size:5.4em;
|
||||
font-style:oblique;
|
||||
padding:1.5rem;
|
||||
line-height: 1rem;
|
||||
max-width: $container-size;
|
||||
margin: auto;
|
||||
text-align:center;
|
||||
|
||||
img {
|
||||
max-width: 800px;
|
||||
height: auto;
|
||||
margin-top:0rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a, a:visited, a:hover {
|
||||
background-color:transparent;
|
||||
outline-color:white;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.osd {
|
||||
background-color:rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
padding: 0.75rem;
|
||||
color: $color-font-light;
|
||||
a {
|
||||
color: $color-font-light;
|
||||
}
|
||||
@include li-no-margin();
|
||||
}
|
||||
|
||||
.categories {
|
||||
font-weight:800;
|
||||
font-size:0.8rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $narrow-shadow, $inset-shadow;
|
||||
}
|
||||
/* ------------------ CONTAINERS ------------------- */
|
||||
|
||||
.container-big {
|
||||
@include container-big();
|
||||
}
|
||||
|
||||
.container-blog {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 1.5rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: auto 300px;
|
||||
grid-template-areas: "main side";
|
||||
}
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: side;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
ul.tag-list {
|
||||
display:flex;
|
||||
padding-bottom:0;
|
||||
overflow: hidden;
|
||||
height:auto;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin:3px;
|
||||
}
|
||||
}
|
||||
|
||||
.container-preview {
|
||||
@include container-big();
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 3rem;
|
||||
grid-template-areas:
|
||||
"main"
|
||||
"side";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 360px auto;
|
||||
grid-template-areas: "side main";
|
||||
}
|
||||
}
|
||||
|
||||
.container-onecolumn {
|
||||
max-width:1280px;
|
||||
margin: auto;
|
||||
padding-bottom: $lineheight;
|
||||
}
|
||||
|
||||
/* ------------------ PAGE ------------------- */
|
||||
|
||||
#wrapper {
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
/* ------------------ FOOTER ------------------- */
|
||||
|
||||
$color-footer-back: get-color("dark");
|
||||
$color-footer-text: get-color("light");
|
||||
|
||||
body {
|
||||
// On colorise le background de la page complete de la même
|
||||
// couleur que le fond du footer.
|
||||
background-color: $color-footer-back;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: $color-footer-text;
|
||||
--link-color: $color-footer-text;
|
||||
padding-bottom:1.5rem;
|
||||
.columns {
|
||||
font-size:0.8rem;
|
||||
margin-top: 1.5rem;
|
||||
@include md() {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: $lineheight;
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-bottom: $lineheight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-toast {
|
||||
max-width:800px;
|
||||
width:100%;
|
||||
margin:auto;
|
||||
}
|
||||
41
scss/custom/_mobile.scss
Executable file
41
scss/custom/_mobile.scss
Executable file
|
|
@ -0,0 +1,41 @@
|
|||
#mobile-sidebar {
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:-100vw;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
transition: left 0.2s;
|
||||
padding: 1rem;
|
||||
overflow: scroll;
|
||||
&.shown {
|
||||
left:0;
|
||||
}
|
||||
|
||||
@include sm() {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
position:fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
background-color:rgba(0,0,0,0.2);
|
||||
color:$color-font-light;
|
||||
padding:0.75em;
|
||||
border:none;
|
||||
font-size:1.2rem;
|
||||
display:flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
aspect-ratio: 1;
|
||||
border-radius:999px;
|
||||
|
||||
&:hover {
|
||||
background-color:$color-primary;
|
||||
}
|
||||
|
||||
@include sm() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
99
scss/custom/_previews.scss
Executable file
99
scss/custom/_previews.scss
Executable file
|
|
@ -0,0 +1,99 @@
|
|||
#featured-articles, .preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: $lineheight / 3;
|
||||
margin: -$lineheight / 3;
|
||||
padding-bottom: $lineheight;
|
||||
|
||||
@include sm() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-grid {
|
||||
@include xl() {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
.preview {
|
||||
display: block;
|
||||
}
|
||||
@include sm() {
|
||||
.preview-thumbnail {
|
||||
width: min-content;
|
||||
img {
|
||||
width: 240px;
|
||||
margin-right: $lineheight /2;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
margin-bottom: $lineheight;
|
||||
}
|
||||
}
|
||||
@include xl() {
|
||||
.preview-thumbnail img {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-text {
|
||||
flex-grow:1;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
font-size: 0.8rem;
|
||||
text-decoration: none;
|
||||
padding: $lineheight / 3;
|
||||
border-radius: $card-radius;
|
||||
}
|
||||
|
||||
.preview-thumbnail {
|
||||
display:block;
|
||||
width: 100%;
|
||||
background-color:transparent;
|
||||
object-fit: cover;
|
||||
padding:0;
|
||||
line-height:0;
|
||||
img {
|
||||
width:100%;
|
||||
object-fit: cover;
|
||||
height: auto;
|
||||
aspect-ratio: 16/9;
|
||||
border-radius: $card-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.preview h2, .preview-featured h2 {
|
||||
font-size:1.25rem;
|
||||
line-height: 1.5rem;
|
||||
font-family: $titlefont;
|
||||
font-weight: 800;
|
||||
height:3rem;
|
||||
color: $color-font;
|
||||
a {
|
||||
background-color:transparent!important;
|
||||
color:$color-font;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-featured h2 {
|
||||
color: $color-font-light;
|
||||
}
|
||||
|
||||
.preview-excerpt {
|
||||
margin-top: $lineheight / 2;
|
||||
font-size:0.8rem;
|
||||
line-height:1.25rem;
|
||||
color:transparentize($color-font, 0.2);
|
||||
}
|
||||
6
scss/definitions/_borders.scss
Executable file
6
scss/definitions/_borders.scss
Executable file
|
|
@ -0,0 +1,6 @@
|
|||
// BORDERS AND BORDER-RADIUSES
|
||||
|
||||
$card-radius: 8px;
|
||||
$btn-radius: 4px;
|
||||
$well-radius: $btn-radius;
|
||||
$border-size: 0px;
|
||||
54
scss/definitions/_fonts.scss
Executable file
54
scss/definitions/_fonts.scss
Executable file
|
|
@ -0,0 +1,54 @@
|
|||
// FONTS
|
||||
// Define how looks the text
|
||||
|
||||
$fontsize: 4.75mm;
|
||||
|
||||
$fontweight_big: 300;
|
||||
$fontweight_base: 400;
|
||||
$fontweight_bold: 600;
|
||||
$fontweight_hyper: 800;
|
||||
|
||||
$basefont: Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Cantarell,
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
$titlefont: Teko, sans-serif;
|
||||
|
||||
@font-face {
|
||||
font-family: 'Teko';
|
||||
src: url('../fonts/teko-light-webfont.woff');
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Teko';
|
||||
src: url('../fonts/teko-regular-webfont.woff');
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Teko';
|
||||
src: url('../fonts/teko-medium-webfont.woff');
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Teko';
|
||||
src: url('../fonts/teko-semibold-webfont.woff');
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Teko';
|
||||
src: url('../fonts/teko-bold-webfont.woff2') format('woff2'), url('../fonts/teko-bold-webfont.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
}
|
||||
113
scss/definitions/_palette.scss
Executable file
113
scss/definitions/_palette.scss
Executable file
|
|
@ -0,0 +1,113 @@
|
|||
/* --- 00. PALETTE --- */
|
||||
|
||||
/*
|
||||
* Les définitions globales des couleurs du theme.
|
||||
*
|
||||
* Elle permettent de définir rapidement à la fois les couleurs
|
||||
* de base qui seront utilisée pour tout le theme, mais
|
||||
* également celles spécifiques pour certains sujets (liens, texte)
|
||||
*
|
||||
*/
|
||||
|
||||
$whiteness_value: 0.8;
|
||||
|
||||
// Couleurs de base du theme :
|
||||
|
||||
$palette: (
|
||||
"blue":#1971c2,
|
||||
"violet":#6741d9,
|
||||
"red":#e03131,
|
||||
"orange":#e8590c,
|
||||
"green":#2f9e44,
|
||||
"skyblue":#0c8599,
|
||||
"dark": #343a40,
|
||||
"light":#ffffff,
|
||||
"yellow":#ffe066,
|
||||
"grey":#adb5bd,
|
||||
"dark2":#212529,
|
||||
"light2":#e9ecef);
|
||||
|
||||
$palette-light: (
|
||||
"blue": #d0ebff,
|
||||
"violet":#e5dbff,
|
||||
"red":#ffe3e3,
|
||||
"orange":#ffe8cc,
|
||||
"green":#d3f9d8,
|
||||
"skyblue":#c5f6fa,
|
||||
"yellow":#fff3bf,
|
||||
"light":#ffffff,
|
||||
"grey":#f1f3f5,
|
||||
"dark":#ced4da
|
||||
);
|
||||
|
||||
$semantics: (
|
||||
"primary":"red",
|
||||
"secondary":"dark",
|
||||
"warning":"orange",
|
||||
"danger":"red",
|
||||
"info":"blue",
|
||||
"success":"green",
|
||||
"muted":"grey",
|
||||
"light":"light",
|
||||
"dark":"dark");
|
||||
|
||||
$helpers: (
|
||||
"font":"dark2",
|
||||
"font-light":"light",
|
||||
"background":"light",
|
||||
"background-alt":"light2",
|
||||
"link":"red",
|
||||
"selection":"blue",
|
||||
"mark":"yellow",
|
||||
);
|
||||
|
||||
@function get-color($name) {
|
||||
@if map-has-key($helpers, $name) {
|
||||
@return map-get($palette, map-get($helpers, $name));
|
||||
} @else {
|
||||
@if map-has-key($semantics, $name) {
|
||||
@return map-get($palette, map-get($semantics, $name));
|
||||
} @else {
|
||||
@return map-get($palette, $name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@function get-color-light($name) {
|
||||
@if map-has-key($helpers, $name) {
|
||||
@return map-get($palette-light, map-get($helpers, $name));
|
||||
}
|
||||
|
||||
@else {
|
||||
@if map-has-key($semantics, $name) {
|
||||
@return map-get($palette-light, map-get($semantics, $name));
|
||||
}
|
||||
|
||||
@else {
|
||||
@return map-get($palette-light, $name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// **Couleurs du theme**
|
||||
// Ne pas retirer ces couleurs, qui
|
||||
// sont essentielle pour que le framework functionne.
|
||||
// Pour les modifier, modifier le contenu du tableau $semantics.
|
||||
|
||||
$color-link: get-color("link");
|
||||
$color-selection: get-color("selection");
|
||||
$color-mark: get-color("mark");
|
||||
$color-font: get-color("font");
|
||||
$color-font-light: get-color("font-light");
|
||||
|
||||
$color-primary: get-color("primary");
|
||||
$color-secondary: get-color("secondary");
|
||||
$color-warning: get-color("warning");
|
||||
$color-danger: get-color("danger");
|
||||
$color-info: get-color("info");
|
||||
$color-success: get-color("success");
|
||||
|
||||
$color-muted: get-color("muted");
|
||||
|
||||
$color-background: get-color("background");
|
||||
$color-background-alt: get-color("background-alt");
|
||||
8
scss/definitions/_shadows.scss
Executable file
8
scss/definitions/_shadows.scss
Executable file
|
|
@ -0,0 +1,8 @@
|
|||
// SHADOWS
|
||||
// Define how looks the shadows and the relief effects
|
||||
|
||||
$large-shadow: 0px 2px 4px rgba(0, 0, 0, 0);
|
||||
$narrow-shadow: 0px 1px 2px rgba(0, 0, 0, 0);
|
||||
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0);
|
||||
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0);
|
||||
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0);
|
||||
35
scss/definitions/_sizing.scss
Executable file
35
scss/definitions/_sizing.scss
Executable file
|
|
@ -0,0 +1,35 @@
|
|||
// SIZING
|
||||
// All the spacing and sizing variables
|
||||
|
||||
$baseline: 1.6;
|
||||
|
||||
$lineheight: $baseline * 1rem;
|
||||
$lineheight_half: $lineheight/2;
|
||||
$lineheight_quarter: $lineheight/4;
|
||||
$lineheight_rel: $baseline * 1em;
|
||||
|
||||
$card-header-vmargin: 0px;
|
||||
$card-header-hmargin: 0px;
|
||||
$card-header-padding: $lineheight_rel;
|
||||
$card-header-width: 100%;
|
||||
$card-header-position:0px;
|
||||
// Buttons
|
||||
$button_large: $lineheight_rel;
|
||||
$button_small: $lineheight_rel / 4;
|
||||
$button-group-margin: 0;
|
||||
|
||||
// Responsives sizes
|
||||
// - sm : Small tablets and large smartphones (landscape view)
|
||||
// - md : Small tablets (portrait view)
|
||||
// - lg : Tablets and small desktops
|
||||
// - xl : Large tablets and desktops
|
||||
// - xxl : Very large desktops
|
||||
$screen-sm-min: 576px;
|
||||
$screen-md-min: 768px;
|
||||
$screen-lg-min: 992px;
|
||||
$screen-xl-min: 1200px;
|
||||
$screen-xxl-min: 1600px;
|
||||
|
||||
// Containers size
|
||||
$container-size: $screen-xl-min;
|
||||
$container-size-large: $screen-xxl-min;
|
||||
15
scss/mixins/_borders.scss
Executable file
15
scss/mixins/_borders.scss
Executable file
|
|
@ -0,0 +1,15 @@
|
|||
// Border, border radius and margin
|
||||
|
||||
@mixin borders() {
|
||||
border: $border-size solid rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
@mixin prefer-no-borders() {
|
||||
&:not(:hover) {
|
||||
border-color:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-radius($border-radius) {
|
||||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
||||
}
|
||||
48
scss/mixins/_btns.scss
Executable file
48
scss/mixins/_btns.scss
Executable file
|
|
@ -0,0 +1,48 @@
|
|||
@mixin button($size) {
|
||||
@include button-layout($size);
|
||||
@include shape-style($size);
|
||||
@include button-hover();
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
@mixin button-layout($size) {
|
||||
padding: $size;
|
||||
padding-top: $size/3;
|
||||
padding-bottom: $size/3;
|
||||
margin:$size/2;
|
||||
margin-top: $size/3;
|
||||
margin-bottom: $lineheight;
|
||||
//font-size: 4.75mm;
|
||||
line-height:$lineheight;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
@mixin button-hover() {
|
||||
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
|
||||
&:hover, &:active {
|
||||
background-color:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
|
||||
@include colorize-shape($background-color);
|
||||
outline-color: $background-color;
|
||||
color:$text-color;
|
||||
&:visited {
|
||||
@include colorize-shape($background-color);
|
||||
color:$text-color;
|
||||
}
|
||||
&, &:visited, &:not(.disabled):not(:disabled) {
|
||||
&:hover, &:active {
|
||||
@include colorize-shape($hover-color);
|
||||
color:lighten($text-color, 5%);
|
||||
outline-color: $hover-color;
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-color($background-color) {
|
||||
@include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color));
|
||||
box-shadow: $narrow-shadow;
|
||||
}
|
||||
67
scss/mixins/_colors.scss
Executable file
67
scss/mixins/_colors.scss
Executable file
|
|
@ -0,0 +1,67 @@
|
|||
/* --- 00. COLORS --- */
|
||||
|
||||
/*
|
||||
* La gestion des couleurs dans le theme. Cette partie de la stylesheet est
|
||||
* automatique et n'a pas besoin d'être modifiée
|
||||
*/
|
||||
|
||||
// FUNCTIONS TO GET MORE EASILY COLORS
|
||||
@function list-colors() {
|
||||
@return $semantics;
|
||||
}
|
||||
|
||||
@function luminance($color) {
|
||||
$c_red: red($color);
|
||||
$c_grn: green($color);
|
||||
$c_blu: blue($color);
|
||||
|
||||
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
|
||||
|
||||
@return $luminance
|
||||
}
|
||||
|
||||
@function getFontColor() {
|
||||
@return getTextColorFromBackground(get-color("background-alt"));
|
||||
}
|
||||
|
||||
@function getTextColorFromBackground($background-color) {
|
||||
@if (luminance($background-color) < 255 * $whiteness_value) {
|
||||
@return $color-font-light;
|
||||
} @else {
|
||||
@return $color-font;
|
||||
}
|
||||
}
|
||||
|
||||
@function accentuate($color) {
|
||||
@if (luminance($color) > 64) {
|
||||
@return darken($color, 7.5%);
|
||||
} @else {
|
||||
@return lighten($color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@function dim($color) {
|
||||
@if (luminance($color) > 255 * $whiteness_value) {
|
||||
@return transparentize($color, 0.8);
|
||||
} @else {
|
||||
@return transparentize($color, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
// fonction texte et background
|
||||
|
||||
@mixin text-color($text-color) {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
@mixin background-color($background-color) {
|
||||
background-color: $background-color;
|
||||
color: getTextColorFromBackground($background-color);
|
||||
}
|
||||
|
||||
@mixin accent-color($accent-color, $soft-color) {
|
||||
--accent-color: #{$accent-color};
|
||||
--text-color-contrast: #{getTextColorFromBackground($accent-color)};
|
||||
--accent-color-hover: #{accentuate($accent-color)};
|
||||
--accent-color-soft: #{$soft-color};
|
||||
}
|
||||
13
scss/mixins/_li.scss
Executable file
13
scss/mixins/_li.scss
Executable file
|
|
@ -0,0 +1,13 @@
|
|||
@mixin li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin li-flex() {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
@include li-no-margin();
|
||||
list-style: none;
|
||||
}
|
||||
58
scss/mixins/_panels.scss
Executable file
58
scss/mixins/_panels.scss
Executable file
|
|
@ -0,0 +1,58 @@
|
|||
@mixin panel($size) {
|
||||
@include border-radius($card-radius);
|
||||
background-color: $color-background-alt;
|
||||
box-shadow: $large-shadow;
|
||||
border: none;
|
||||
margin:0;
|
||||
margin-bottom:$lineheight;
|
||||
|
||||
& > * {
|
||||
margin-left: $size / 2;
|
||||
margin-right: $size / 2;
|
||||
&:first-child,
|
||||
&.sr-only:first-child ~ * {
|
||||
margin-top: $size;
|
||||
&.card-header {
|
||||
margin-top:$card-header-vmargin;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: $size;
|
||||
&.card-header {
|
||||
margin-bottom:$card-header-vmargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin panel-header($size) {
|
||||
font-family: $basefont;
|
||||
font-size: 1em;
|
||||
font-weight: $fontweight_bold;
|
||||
|
||||
|
||||
padding: $size/2 $card-header-padding;
|
||||
padding-bottom: $size/2 !important;
|
||||
margin: $lineheight_rel / 2 $card-header-hmargin;
|
||||
// margin-bottom:$lineheight_rel / 2;
|
||||
// margin-top:$lineheight_rel / 2;
|
||||
line-height: 1;
|
||||
|
||||
position: relative;
|
||||
left: $card-header-position;
|
||||
width: $card-header-width;
|
||||
|
||||
@include shape-style($size);
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: $card-radius;
|
||||
border-top-right-radius: $card-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $card-radius;
|
||||
border-bottom-right-radius: $card-radius;
|
||||
}
|
||||
}
|
||||
84
scss/mixins/_responsive.scss
Executable file
84
scss/mixins/_responsive.scss
Executable file
|
|
@ -0,0 +1,84 @@
|
|||
// MIXINS RESPONSIVES
|
||||
|
||||
// Small devices
|
||||
@mixin sm {
|
||||
@media (min-width: #{$screen-sm-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Medium devices
|
||||
@mixin md {
|
||||
@media (min-width: #{$screen-md-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Large devices
|
||||
@mixin lg {
|
||||
@media (min-width: #{$screen-lg-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Extra large devices
|
||||
@mixin xl {
|
||||
@media (min-width: #{$screen-xl-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Extra large desktops
|
||||
@mixin xxl {
|
||||
@media (min-width: #{$screen-xxl-min}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Custom devices
|
||||
@mixin rwd($screen) {
|
||||
@media (min-width: $screen+'px' ) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container($size, $padding) {
|
||||
padding-left: $padding;
|
||||
padding-right: $padding;
|
||||
max-width: $size;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
@mixin responsive() {
|
||||
@content;
|
||||
|
||||
&-sm {
|
||||
@include sm() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&-md {
|
||||
@include md() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
@include lg() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&-xl {
|
||||
@include xl() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&-xxl {
|
||||
@include xxl() {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
10
scss/mixins/_shape.scss
Executable file
10
scss/mixins/_shape.scss
Executable file
|
|
@ -0,0 +1,10 @@
|
|||
@mixin shape-style($size) {
|
||||
@include borders();
|
||||
@include border-radius($btn-radius);
|
||||
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
@mixin colorize-shape($background-color) {
|
||||
background-color: $background-color;
|
||||
}
|
||||
8
scss/style.scss
Executable file
8
scss/style.scss
Executable file
|
|
@ -0,0 +1,8 @@
|
|||
@import 'dep';
|
||||
@import 'definitions';
|
||||
@import 'mixins';
|
||||
|
||||
@import 'core';
|
||||
@import 'drawing';
|
||||
@import 'utils';
|
||||
@import 'global';
|
||||
39
scss/utils/_a11y.scss
Executable file
39
scss/utils/_a11y.scss
Executable file
|
|
@ -0,0 +1,39 @@
|
|||
/* 1.0 - Accessibility classes
|
||||
* Some classes to help accessibility
|
||||
**/
|
||||
|
||||
.sr-only, .screen-reader-text {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sr-only-focusable:active,
|
||||
.sr-only-focusable:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
|
||||
.skip {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skip:focus-within {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
14
scss/utils/_align.scss
Executable file
14
scss/utils/_align.scss
Executable file
|
|
@ -0,0 +1,14 @@
|
|||
/* 1.1 - Alignement classes
|
||||
* Handle easily alignement and flexboxes
|
||||
**/
|
||||
|
||||
.flex-that {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.align {
|
||||
&-center {text-align: center;text-indent: 0!important;}
|
||||
&-left {text-align: left;}
|
||||
&-right {text-align: right;}
|
||||
}
|
||||
8
scss/utils/_borders.scss
Executable file
8
scss/utils/_borders.scss
Executable file
|
|
@ -0,0 +1,8 @@
|
|||
.round, .pill {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.no-borders {
|
||||
border-width:0px;
|
||||
border-style:none;
|
||||
}
|
||||
98
scss/utils/_colorize.scss
Executable file
98
scss/utils/_colorize.scss
Executable file
|
|
@ -0,0 +1,98 @@
|
|||
/* 1.2 - Colorization classes
|
||||
* Colorize some aspect of a class
|
||||
**/
|
||||
|
||||
.c {
|
||||
|
||||
@each $name,
|
||||
$color in list-colors() {
|
||||
&-#{$name} {
|
||||
@include accent-color(get-color($name), get-color-light($name));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin heading-color($background-color) {
|
||||
|
||||
& .card-header,
|
||||
& .menu-header,
|
||||
&.header-bg th {
|
||||
@include colorize-shape($background-color);
|
||||
color: getTextColorFromBackground($background-color);
|
||||
}
|
||||
|
||||
th {
|
||||
color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-color($background-color) {
|
||||
@include background-color($background-color);
|
||||
|
||||
a {
|
||||
color:currentColor;
|
||||
outline-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-accent {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: get-color("dark");
|
||||
}
|
||||
|
||||
.bg {
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
.bg-alt {
|
||||
background-color: $color-background-alt;
|
||||
}
|
||||
|
||||
.bg-soft {
|
||||
background-color: var(--accent-color-soft);
|
||||
}
|
||||
|
||||
// .text {
|
||||
|
||||
// @each $name,
|
||||
// $color in list-colors() {
|
||||
// &-#{$name} {
|
||||
// @include text-color(get-color($name));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .btn {
|
||||
|
||||
// @each $name,
|
||||
// $color in list-colors() {
|
||||
// &-#{$name} {
|
||||
// @include button-color(get-color($name));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .head {
|
||||
|
||||
// @each $name,
|
||||
// $color in list-colors() {
|
||||
// &-#{$name} {
|
||||
// @include heading-color(get-color($name));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.fg-light {
|
||||
--text-color:#{$color-font-light};
|
||||
--link-color-hover:#{transparentize($color-font-light, 0.7)};
|
||||
}
|
||||
|
||||
.fg-dark {
|
||||
color: $color-font;
|
||||
--text-color:#{$color-font};
|
||||
--link-color-hover:#{transparentize($color-font, 0.85)};
|
||||
}
|
||||
17
scss/utils/_display.scss
Executable file
17
scss/utils/_display.scss
Executable file
|
|
@ -0,0 +1,17 @@
|
|||
.d-none {
|
||||
@include responsive() {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-block {
|
||||
@include responsive() {
|
||||
display: block!important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
@include responsive() {
|
||||
display: flex!important;
|
||||
}
|
||||
}
|
||||
35
scss/utils/_flex.scss
Executable file
35
scss/utils/_flex.scss
Executable file
|
|
@ -0,0 +1,35 @@
|
|||
.f-column {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
&.reverse {
|
||||
flex-direction:column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.f-row {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
&.reverse {
|
||||
flex-direction:row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.f-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.f-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.f-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.f-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.f-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
7
scss/utils/_lists.scss
Executable file
7
scss/utils/_lists.scss
Executable file
|
|
@ -0,0 +1,7 @@
|
|||
/* 1.3 - List classes
|
||||
* Handle more easily list
|
||||
**/
|
||||
|
||||
.no-pills {
|
||||
list-style:none;
|
||||
}
|
||||
61
scss/utils/_sizing.scss
Executable file
61
scss/utils/_sizing.scss
Executable file
|
|
@ -0,0 +1,61 @@
|
|||
/* 1.3 - Sizing classes
|
||||
* Handle sizing and margin
|
||||
**/
|
||||
|
||||
@mixin addmargins($name, $size) {
|
||||
&-#{$name} {
|
||||
margin:$size;
|
||||
}
|
||||
|
||||
&b-#{$name} {
|
||||
margin-bottom:$size;
|
||||
}
|
||||
|
||||
&r-#{$name} {
|
||||
margin-right:$size;
|
||||
}
|
||||
|
||||
&l-#{$name} {
|
||||
margin-left:$size;
|
||||
}
|
||||
|
||||
&t-#{$name} {
|
||||
margin-top:$size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin addpaddings($name, $size) {
|
||||
&-#{$name} {
|
||||
padding:$size;
|
||||
}
|
||||
|
||||
&b-#{$name} {
|
||||
padding-bottom:$size;
|
||||
}
|
||||
|
||||
&r-#{$name} {
|
||||
padding-right:$size;
|
||||
}
|
||||
|
||||
&l-#{$name} {
|
||||
padding-left:$size;
|
||||
}
|
||||
|
||||
&t-#{$name} {
|
||||
padding-top:$size;
|
||||
}
|
||||
}
|
||||
|
||||
.m {
|
||||
@include addmargins("half", $lineheight * .5);
|
||||
@for $i from 0 through 4 {
|
||||
@include addmargins($i, $lineheight*$i)
|
||||
}
|
||||
}
|
||||
|
||||
.p {
|
||||
@include addpaddings("half", $lineheight * .5);
|
||||
@for $i from 0 through 4 {
|
||||
@include addpaddings($i, $lineheight*$i)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue