feat: version initiale du theme
This commit is contained in:
parent
2b7ab55990
commit
a09c77d23f
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1 @@
|
|||
sassc scss/style.scss > css/style.css
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 159 B |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"theme-data":
|
||||
{
|
||||
"name": "Mouette",
|
||||
"description": "Theme de magazine/blog, créé originellement pour Quarante-Douze."
|
||||
}
|
||||
}
|
||||
|
|
@ -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": ""
|
||||
}
|
||||
|
|
@ -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'); ?>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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" />
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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.0 KiB |
|
|
@ -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'); ?>
|
||||
|
|
@ -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'); ?>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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'); ?>
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
// DEPENDECIES
|
||||
// Other style used as dependencies
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
// BORDERS AND BORDER-RADIUSES
|
||||
|
||||
$card-radius: 8px;
|
||||
$btn-radius: 4px;
|
||||
$well-radius: $btn-radius;
|
||||
$border-size: 0px;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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");
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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};
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
@import 'dep';
|
||||
@import 'definitions';
|
||||
@import 'mixins';
|
||||
|
||||
@import 'core';
|
||||
@import 'drawing';
|
||||
@import 'utils';
|
||||
@import 'global';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.round, .pill {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.no-borders {
|
||||
border-width:0px;
|
||||
border-style:none;
|
||||
}
|
||||
|
|
@ -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)};
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
/* 1.3 - List classes
|
||||
* Handle more easily list
|
||||
**/
|
||||
|
||||
.no-pills {
|
||||
list-style:none;
|
||||
}
|
||||
|
|
@ -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 New Issue