feat: version initiale du theme
This commit is contained in:
Kazhnuz
parent
9ff6792b41
commit
297faf8008
78 changed files with 5019 additions and 0 deletions
1755
css/style.css
Executable file
1755
css/style.css
Executable file
File diff suppressed because it is too large
Load diff
BIN
fonts/ComicNeue-BoldItalic.woff
Normal file
BIN
fonts/ComicNeue-BoldItalic.woff
Normal file
Binary file not shown.
BIN
fonts/ComicNeue-BoldItalic.woff2
Normal file
BIN
fonts/ComicNeue-BoldItalic.woff2
Normal file
Binary file not shown.
1
generate.sh
Executable file
1
generate.sh
Executable file
|
|
@ -0,0 +1 @@
|
|||
sassc scss/style.scss > css/style.css
|
||||
BIN
img/background.png
Executable file
BIN
img/background.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
img/cc-by-sa.gif
Normal file
BIN
img/cc-by-sa.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 861 B |
BIN
img/default-preview.png
Normal file
BIN
img/default-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
BIN
img/favicon.png
Normal file
BIN
img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 494 B |
BIN
img/hhghtthrhtr-medium.png
Normal file
BIN
img/hhghtthrhtr-medium.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 480 KiB |
BIN
img/hhghtthrhtr-small.avif
Normal file
BIN
img/hhghtthrhtr-small.avif
Normal file
Binary file not shown.
BIN
img/hhghtthrhtr-small.png
Normal file
BIN
img/hhghtthrhtr-small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
img/koboldcafe.gif
Normal file
BIN
img/koboldcafe.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,003 B |
BIN
img/logo.png
Normal file
BIN
img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
51
index.php
Executable file
51
index.php
Executable file
|
|
@ -0,0 +1,51 @@
|
|||
<!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'); ?>
|
||||
<div class="bg-dark skip small-text">
|
||||
<a href="#skip">Accéder au contenu</a>
|
||||
</div>
|
||||
<?php include(THEME_DIR_PHP.'mainmenu.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');
|
||||
}
|
||||
?>
|
||||
<?php include(THEME_DIR_PHP.'footer.php'); ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button id="mobile-button" class="menu-button"><svg class="icon icon-bars" alt=""><use xlink:href="#icon-bars"></use></svg> <span class="sr-only">Afficher le menu</span></button>
|
||||
<!-- Footer -->
|
||||
|
||||
<!-- Load Bludit Plugins: Site Body End -->
|
||||
<?php Theme::plugins('siteBodyEnd'); ?>
|
||||
</body>
|
||||
</html>
|
||||
7
languages/en.json
Executable file
7
languages/en.json
Executable file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"theme-data":
|
||||
{
|
||||
"name": "Kazhnuz Space",
|
||||
"description": "Theme de mon blog, Kazhnuz Space."
|
||||
}
|
||||
}
|
||||
10
metadata.json
Executable file
10
metadata.json
Executable file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"author": "Kazhnuz",
|
||||
"email": "",
|
||||
"website": "https://kazhnuz.space",
|
||||
"version": "0.0.1",
|
||||
"releaseDate": "2024-03-16",
|
||||
"license": "MIT",
|
||||
"compatible": "3.15.0",
|
||||
"notes": ""
|
||||
}
|
||||
53
php/category.php
Executable file
53
php/category.php
Executable file
|
|
@ -0,0 +1,53 @@
|
|||
<main>
|
||||
<h1 class="page-title" id="title-featured">
|
||||
<?php
|
||||
$category = new Category($url->slug());
|
||||
echo $category->name();
|
||||
?>
|
||||
</h1>
|
||||
<ul class="">
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<li>
|
||||
<?php echo $page->date('j F Y') ?> : « <a href="<?php echo $page->permalink(); ?>" ><?php echo $page->title(); ?></a> »
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
|
||||
<!-- 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 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 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'); ?>
|
||||
10
php/footer.php
Executable file
10
php/footer.php
Executable file
|
|
@ -0,0 +1,10 @@
|
|||
<footer>
|
||||
<p>
|
||||
<a href="https://kobold.cafe/">
|
||||
<img src="<?php echo HTML_PATH_THEME_IMG; ?>/koboldcafe.gif" alt="Ce site hébergé par Kobold Cafe">
|
||||
</a>
|
||||
<a href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr">
|
||||
<img src="<?php echo HTML_PATH_THEME_IMG; ?>/cc-by-sa.gif" alt="Ce site est sous Creative Common Attribution - Partage dans les Mêmes Conditions 4.0 International">
|
||||
</a>
|
||||
</p>
|
||||
</footer>
|
||||
18
php/head.php
Executable file
18
php/head.php
Executable file
|
|
@ -0,0 +1,18 @@
|
|||
<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'); ?>
|
||||
9
php/header.php
Executable file
9
php/header.php
Executable file
|
|
@ -0,0 +1,9 @@
|
|||
<header id="page-header">
|
||||
<div class="logo-area container">
|
||||
<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>
|
||||
</header>
|
||||
57
php/home.php
Executable file
57
php/home.php
Executable file
|
|
@ -0,0 +1,57 @@
|
|||
<main id="skip">
|
||||
<?php Theme::plugins('pageBegin'); ?>
|
||||
<h1 class="page-title" id="title-featured">
|
||||
Bienvenue sur mon blog
|
||||
</h1>
|
||||
<section class="mb-1">
|
||||
<p>Bienvenue sur la partie blog de mon site ! Sur cette partie, j'y poste mes pensées, mes textes, bref tout ce que je fais un peu en vrac (heureusement y'a les tags et les catégories pour s'y retrouver).</p>
|
||||
</section>
|
||||
<section>
|
||||
<ul class="">
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<?php if ($page->type() != "sticky") : ?>
|
||||
<li>
|
||||
<?php echo $page->date('j F Y') ?> : « <a href="<?php echo $page->permalink(); ?>" ><?php echo $page->title(); ?></a> »
|
||||
</li>
|
||||
<?php endif ?>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
</section>
|
||||
<!-- 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 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 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'); ?>
|
||||
29
php/icons.php
Executable file
29
php/icons.php
Executable file
|
|
@ -0,0 +1,29 @@
|
|||
<svg class="d-none" alt="">
|
||||
<symbol id="icon-bluesky" viewBox="0 0 34 32">
|
||||
<path d="M34.319 20.998c0 3.789-3.074 6.864-6.864 6.864h-19.448c-4.415 0-8.008-3.593-8.008-8.008 0-3.2 1.895-5.97 4.612-7.239-0.018-0.25-0.036-0.518-0.036-0.769 0-5.059 4.093-9.152 9.152-9.152 3.825 0 7.096 2.342 8.473 5.684 0.787-0.697 1.823-1.108 2.967-1.108 2.52 0 4.576 2.056 4.576 4.576 0 0.912-0.268 1.752-0.733 2.467 3.039 0.715 5.309 3.432 5.309 6.685z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-mastodon" viewBox="0 0 32 32">
|
||||
<path d="M26.866 20.265c-0.411 2.073-3.611 4.344-7.293 4.79-1.93 0.232-3.825 0.447-5.845 0.358-3.307-0.143-5.899-0.787-5.899-0.787 0 0.322 0.018 0.626 0.054 0.912 0.429 3.253 3.235 3.45 5.881 3.539 2.681 0.089 5.076-0.661 5.076-0.661l0.107 2.431s-1.877 1.001-5.219 1.18c-1.841 0.107-4.111-0.054-6.774-0.751-5.773-1.519-6.774-7.686-6.935-13.924-0.054-1.859-0.018-3.593-0.018-5.059 0-6.381 4.201-8.258 4.201-8.258 2.109-0.965 5.72-1.376 9.491-1.412h0.089c3.772 0.036 7.382 0.447 9.491 1.412 0 0 4.183 1.877 4.183 8.258 0 0 0.054 4.701-0.59 7.972zM22.522 12.794c0-1.573-0.393-2.86-1.215-3.772-0.84-0.929-1.913-1.412-3.271-1.412-1.573 0-2.753 0.608-3.539 1.805l-0.769 1.287-0.769-1.287c-0.787-1.198-1.966-1.805-3.539-1.805-1.358 0-2.431 0.483-3.271 1.412-0.804 0.929-1.215 2.199-1.215 3.772v7.722h3.057v-7.507c0-1.573 0.679-2.377 2.002-2.377 1.466 0 2.216 0.965 2.216 2.842v4.093h3.039v-4.093c0-1.877 0.751-2.842 2.216-2.842 1.323 0 2.002 0.804 2.002 2.377v7.507h3.057v-7.722z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-shaarli" viewBox="0 0 30 32">
|
||||
<path d="M15.694 2.695c2.878 0 4.54 2.86 4.969 8.562h1.18c5.13 0.787 7.668 2.413 7.615 4.88 0.429 2.914-1.43 4.254-5.577 4.040 3.182 2.788 4.308 5.398 3.414 7.811-0.697 1.93-2.377 2.556-5.041 1.913-2.931-1.466-5.023-3.146-6.238-5.041h-0.769c-1.144 3.36-3.36 5.041-6.649 5.041h-1.144c-2.735-0.84-3.736-2.502-2.967-4.969l1.43-3.95h-0.411c-4.022-0.572-5.827-2.342-5.452-5.327 0.107-2.735 2.86-4.129 8.258-4.165 1.501-0.161 2.127-0.643 1.877-1.43 0-4.916 1.841-7.364 5.505-7.364zM14.836 6.734c-1.001-0.072-1.484 1.287-1.466 4.058l-0.089 2.288c-0.089 1.144-0.447 1.716-1.090 1.716l-6.435 0.357c-1.001 0.036-1.519 0.447-1.519 1.233 0 0.769 0.554 1.162 1.644 1.215 3.772-0.197 5.541 0.072 5.291 0.769l-1.144 2.449c-1.93 2.914-2.413 4.612-1.43 5.13 1.305 0.787 3.146-1.251 5.541-6.113 0.572-0.518 1.055-0.518 1.43 0 1.68 1.787 3.057 3.253 4.147 4.397 1.108 1.144 2.020 1.484 2.699 1.019 0.822-0.876 0.59-1.805-0.661-2.806-1.215-1.037-2.61-2.449-4.183-4.236-0.161-0.59-0.143-0.894 0.107-0.894 5.327 0.358 7.883 0.018 7.668-1.019 0.161-1.144-2.163-1.716-6.935-1.716-0.733 0.143-1.323-0.036-1.787-0.518v-4.004c0-2.234-0.536-3.325-1.591-3.289-0.054-0.018-0.143-0.036-0.197-0.036v0z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-rss" viewBox="0 0 25 32">
|
||||
<path d="M6.864 24.43c0 1.895-1.537 3.432-3.432 3.432s-3.432-1.537-3.432-3.432 1.537-3.432 3.432-3.432 3.432 1.537 3.432 3.432zM16.016 26.629c0.018 0.322-0.089 0.626-0.304 0.858-0.214 0.25-0.518 0.375-0.84 0.375h-2.413c-0.59 0-1.072-0.447-1.126-1.037-0.518-5.452-4.844-9.777-10.296-10.296-0.59-0.054-1.037-0.536-1.037-1.126v-2.413c0-0.322 0.125-0.626 0.375-0.84 0.197-0.197 0.483-0.304 0.769-0.304h0.089c3.807 0.304 7.4 1.966 10.099 4.683 2.717 2.699 4.379 6.292 4.683 10.099zM25.167 26.664c0.018 0.304-0.089 0.608-0.322 0.84-0.215 0.232-0.5 0.358-0.822 0.358h-2.556c-0.608 0-1.108-0.465-1.144-1.073-0.59-10.385-8.866-18.661-19.251-19.269-0.608-0.036-1.073-0.536-1.073-1.126v-2.556c0-0.322 0.125-0.608 0.357-0.822 0.214-0.215 0.5-0.322 0.786-0.322h0.054c6.256 0.322 12.137 2.949 16.57 7.4 4.451 4.433 7.078 10.314 7.4 16.57z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-home" viewBox="0 0 29 32">
|
||||
<path d="M24.703 18.138v8.58c0 0.626-0.518 1.144-1.144 1.144h-6.864v-6.864h-4.576v6.864h-6.864c-0.626 0-1.144-0.518-1.144-1.144v-8.58c0-0.036 0.018-0.072 0.018-0.107l10.278-8.473 10.278 8.473c0.018 0.036 0.018 0.072 0.018 0.107zM28.689 16.905l-1.108 1.323c-0.089 0.107-0.232 0.179-0.375 0.197h-0.054c-0.143 0-0.268-0.036-0.375-0.125l-12.369-10.314-12.369 10.314c-0.125 0.089-0.268 0.143-0.429 0.125-0.143-0.018-0.286-0.089-0.375-0.197l-1.108-1.323c-0.197-0.232-0.161-0.608 0.072-0.804l12.852-10.707c0.751-0.626 1.966-0.626 2.717 0l4.361 3.646v-3.486c0-0.322 0.25-0.572 0.572-0.572h3.432c0.322 0 0.572 0.25 0.572 0.572v7.293l3.915 3.253c0.232 0.197 0.268 0.572 0.072 0.804z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-bars" viewBox="0 0 32 32">
|
||||
<path d="M30 24v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1zM30 15v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1zM30 6v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-folder" viewBox="0 0 30 32">
|
||||
<path d="M29.743 11.274v12.584c0 2.199-1.805 4.004-4.004 4.004h-21.735c-2.199 0-4.004-1.805-4.004-4.004v-17.16c0-2.199 1.805-4.004 4.004-4.004h5.72c2.199 0 4.004 1.805 4.004 4.004v0.572h12.012c2.199 0 4.004 1.805 4.004 4.004z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-tags" viewBox="0 0 34 32">
|
||||
<path d="M8.008 8.414c0-1.269-1.019-2.288-2.288-2.288s-2.288 1.019-2.288 2.288 1.019 2.288 2.288 2.288 2.288-1.019 2.288-2.288zM27.080 18.71c0 0.608-0.25 1.198-0.661 1.609l-8.776 8.794c-0.429 0.411-1.019 0.661-1.627 0.661s-1.198-0.25-1.609-0.661l-12.78-12.798c-0.912-0.894-1.627-2.628-1.627-3.897v-7.436c0-1.251 1.037-2.288 2.288-2.288h7.436c1.269 0 3.003 0.715 3.915 1.627l12.78 12.762c0.411 0.429 0.661 1.019 0.661 1.627zM33.944 18.71c0 0.608-0.25 1.198-0.661 1.609l-8.776 8.794c-0.429 0.411-1.019 0.661-1.627 0.661-0.929 0-1.394-0.429-2.002-1.055l8.401-8.401c0.411-0.411 0.661-1.001 0.661-1.609s-0.25-1.198-0.661-1.627l-12.78-12.762c-0.912-0.912-2.645-1.627-3.915-1.627h4.004c1.269 0 3.003 0.715 3.915 1.627l12.78 12.762c0.411 0.429 0.661 1.019 0.661 1.627z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-caret-down" viewBox="0 0 18 32">
|
||||
<path d="M18.304 12.99c0 0.304-0.125 0.59-0.34 0.804l-8.008 8.008c-0.214 0.215-0.501 0.34-0.804 0.34s-0.59-0.125-0.804-0.34l-8.008-8.008c-0.214-0.214-0.34-0.501-0.34-0.804 0-0.626 0.518-1.144 1.144-1.144h16.016c0.626 0 1.144 0.518 1.144 1.144z"></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6 KiB |
57
php/mainmenu.php
Normal file
57
php/mainmenu.php
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<nav id="mobile-sidebar" class="bg-dark fg-light sidebar menu hidden">
|
||||
<picture>
|
||||
<source type="image/avif" srcset="<?php echo HTML_PATH_THEME_IMG; ?>/hhghtthrhtr-small.avif" />
|
||||
<img
|
||||
src="<?php echo HTML_PATH_THEME_IMG; ?>/hhghtthrhtr-small.png"
|
||||
alt=""
|
||||
class="myavatar" />
|
||||
</picture>
|
||||
<h1 class="align-center text-light sr-only">Menu du site</h1>
|
||||
<div class="mb-half">
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://kazhnuz.space/" class="menu-item">
|
||||
<span>Accueil</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="item">
|
||||
<a href="/" class="menu-item active">
|
||||
<span>Blog</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://shaarli.kazhnuz.space" class="menu-item">
|
||||
<span>Veille informatique</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Pages</h2>
|
||||
<ul class="nav">
|
||||
<li class="item"><a href="https://kazhnuz.space/about/" class="itemLink">À propos</a></li>
|
||||
<li class="item"><a href="https://kazhnuz.space/univers/" class="itemLink">Mes univers</a></li>
|
||||
<li class="item"><a href="https://kazhnuz.space/projets/" class="itemLink">Mes projets</a></li>
|
||||
<li class="item"><a href="https://kazhnuz.space/fandom/" class="itemLink">Fandoms et shrines</a></li>
|
||||
<li class="item"><a href="https://kazhnuz.space/outils/" class="itemLink">Outils et guides</a></li>
|
||||
<li class="item"><a href="https://kazhnuz.space/siteroll/" class="itemLink">Siteroll</a></li>
|
||||
<li class="item"><a href="https://kazhnuz.space/vault/" class="itemLink">Vieux trucs</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<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>
|
||||
59
php/page.php
Executable file
59
php/page.php
Executable file
|
|
@ -0,0 +1,59 @@
|
|||
<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->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 $page->description(); ?></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 $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'); ?>
|
||||
53
php/search.php
Normal file
53
php/search.php
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<main>
|
||||
<h1 class="page-title" id="title-featured">
|
||||
<?php
|
||||
$title = explode("/", $url->slug());
|
||||
echo "Recherche pour « " . $title[1] . " »";
|
||||
?>
|
||||
</h1>
|
||||
<ul class="">
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<li>
|
||||
<?php echo $page->date('j F Y') ?> : « <a href="<?php echo $page->permalink(); ?>" ><?php echo $page->title(); ?></a> »
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
|
||||
<!-- 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 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 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'); ?>
|
||||
61
php/sidebar.php
Executable file
61
php/sidebar.php
Executable file
|
|
@ -0,0 +1,61 @@
|
|||
<aside class="sidebar">
|
||||
<?php
|
||||
if ($WHERE_AM_I != 'home') {
|
||||
?>
|
||||
<p><a href="/" class="btn btn-primary">← Accueil</a></p>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<section class="card c-primary">
|
||||
<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-primary">
|
||||
<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-primary">
|
||||
<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>
|
||||
<p class="align-center"><a href="/rss.xml" class="btn btn-warning">Flux RSS du blog</a></p>
|
||||
</aside>
|
||||
53
php/tag.php
Normal file
53
php/tag.php
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<main>
|
||||
<h1 class="page-title" id="title-featured">
|
||||
<?php
|
||||
$tag = new Tag($url->slug());
|
||||
echo $tag->name();
|
||||
?>
|
||||
</h1>
|
||||
<ul class="">
|
||||
<?php foreach ($content as $page) : ?>
|
||||
<li>
|
||||
<?php echo $page->date('j F Y') ?> : « <a href="<?php echo $page->permalink(); ?>" ><?php echo $page->title(); ?></a> »
|
||||
</li>
|
||||
<?php endforeach ?>
|
||||
</ul>
|
||||
|
||||
<!-- 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 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 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'); ?>
|
||||
6
scss/_core.scss
Normal file
6
scss/_core.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
//@import 'core/normalize';
|
||||
@import 'core/bases';
|
||||
@import 'core/typography';
|
||||
@import 'core/containers';
|
||||
@import 'core/icons';
|
||||
//@import 'core/columns';
|
||||
12
scss/_definitions.scss
Normal file
12
scss/_definitions.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// DEFINITIONS
|
||||
|
||||
// Global definitions and variables of the stylesheet
|
||||
// With them, you can customize easily how the style look
|
||||
// Look at each component inside the definitions subfolder to customize the
|
||||
// styles
|
||||
|
||||
@import 'definitions/palette';
|
||||
@import 'definitions/shadows';
|
||||
@import 'definitions/fonts';
|
||||
@import 'definitions/borders';
|
||||
@import 'definitions/sizing';
|
||||
2
scss/_dep.scss
Normal file
2
scss/_dep.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
// DEPENDECIES
|
||||
// Other style used as dependencies
|
||||
11
scss/_drawing.scss
Normal file
11
scss/_drawing.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@import 'components/buttons';
|
||||
@import 'components/btn-groups';
|
||||
@import 'components/breadcrumb';
|
||||
@import 'components/badges';
|
||||
@import 'components/pagination';
|
||||
@import 'components/cards';
|
||||
@import 'components/menus';
|
||||
@import 'components/toasts';
|
||||
@import 'components/tables';
|
||||
@import 'components/sidebar';
|
||||
@import 'components/input';
|
||||
5
scss/_global.scss
Normal file
5
scss/_global.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import 'custom/global';
|
||||
@import 'components/previews';
|
||||
@import 'custom/featured';
|
||||
@import 'custom/article';
|
||||
@import 'custom/mobile';
|
||||
10
scss/_mixins.scss
Normal file
10
scss/_mixins.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// MIXINS
|
||||
// Include every mixins files
|
||||
|
||||
@import 'mixins/colors';
|
||||
@import 'mixins/responsive';
|
||||
@import 'mixins/borders';
|
||||
@import 'mixins/shape';
|
||||
//@import 'mixins/btns';
|
||||
@import 'mixins/panels';
|
||||
@import 'mixins/li';
|
||||
8
scss/_utils.scss
Normal file
8
scss/_utils.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@import 'utils/a11y';
|
||||
@import 'utils/align';
|
||||
@import 'utils/borders';
|
||||
@import 'utils/colorize';
|
||||
@import 'utils/lists';
|
||||
@import 'utils/sizing';
|
||||
@import 'utils/flex';
|
||||
@import 'utils/display';
|
||||
8
scss/components/_badges.scss
Normal file
8
scss/components/_badges.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.badge {
|
||||
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);
|
||||
}
|
||||
22
scss/components/_breadcrumb.scss
Normal file
22
scss/components/_breadcrumb.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
ul.breadcrumb, ol.breadcrumb, .breadcrumb {
|
||||
@include shape-style($button_large);
|
||||
background-color: $color-background-alt;
|
||||
&::before {
|
||||
background-color: $color-background-alt;
|
||||
box-shadow: $btn-shadow;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
26
scss/components/_btn-groups.scss
Normal file
26
scss/components/_btn-groups.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
// BUTTONS GROUPS
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
141
scss/components/_buttons.scss
Normal file
141
scss/components/_buttons.scss
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
|
||||
.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: none!important;
|
||||
|
||||
&::before {
|
||||
background-color: var(--accent-color);
|
||||
box-shadow: $btn-shadow;
|
||||
}
|
||||
&:visited {
|
||||
color: var(--text-color-contrast);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
&::before {
|
||||
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;
|
||||
|
||||
&::before {
|
||||
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!important;
|
||||
&::before {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
&::before {
|
||||
background-color: var(--link-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
55
scss/components/_cards.scss
Normal file
55
scss/components/_cards.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
$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);
|
||||
box-shadow: $btn-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
99
scss/components/_input.scss
Normal file
99
scss/components/_input.scss
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
background-color: $color-background-alt;
|
||||
border-radius: $well-radius;
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
padding: $lineheight_rel / 4;
|
||||
line-height: $lineheight_rel;
|
||||
overflow: auto;
|
||||
|
||||
.card & {
|
||||
background-color: $color-background;
|
||||
}
|
||||
}
|
||||
|
||||
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"] {
|
||||
-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;
|
||||
}
|
||||
129
scss/components/_menus.scss
Normal file
129
scss/components/_menus.scss
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
&.toolbar a,
|
||||
&.toolbar a:visited {
|
||||
margin: 0px 2px;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
display: flex;
|
||||
line-height: $lineheight_rel;
|
||||
padding: $lineheight_rel / 4;
|
||||
margin: 2px 0px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
border-radius: $btn-radius;
|
||||
|
||||
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,
|
||||
&.active {
|
||||
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;
|
||||
}
|
||||
30
scss/components/_pagination.scss
Normal file
30
scss/components/_pagination.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
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 {
|
||||
&::before {
|
||||
background-color: var(--link-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
@include background-color($color-primary);
|
||||
&::before {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
289
scss/components/_previews.scss
Normal file
289
scss/components/_previews.scss
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
$preview-height: 8*$lineheight;
|
||||
$preview-content-height:165px;
|
||||
$comment-peek-height:0px;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-grid-3 {
|
||||
@include xl() {
|
||||
grid-template-columns: 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;
|
||||
max-width:360px;
|
||||
}
|
||||
|
||||
.preview-link {
|
||||
padding:0;
|
||||
background-color: transparent;
|
||||
margin:0!important;
|
||||
text-decoration: none;
|
||||
position:relative;
|
||||
height: $preview-height;
|
||||
|
||||
.card-header {
|
||||
letter-spacing: normal;
|
||||
padding: $lineheight_half/2 $card-header-padding;
|
||||
padding-bottom: $lineheight_half/2 !important;
|
||||
&:before {
|
||||
left: -$lineheight_half/2;
|
||||
right: -$lineheight_half/2;
|
||||
box-shadow: $btn-shadow;
|
||||
}
|
||||
|
||||
position:absolute;
|
||||
margin:0;
|
||||
top:0.5rem;
|
||||
z-index:1;
|
||||
min-height:2.8rem;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
font-size:0.9rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
line-height: $lineheight !important;
|
||||
text-align:justify;
|
||||
background-color:rgba(0,0,0,0.00);
|
||||
color: transparentize($color-font, 0.3);
|
||||
position: relative;
|
||||
overflow:hidden;
|
||||
@include border-radius($card-radius);
|
||||
box-shadow: $btn-shadow;
|
||||
|
||||
.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, backdrop-filter 0.3s;
|
||||
overflow: hidden;
|
||||
@include border-radius($card-radius);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.preview-overlay {
|
||||
backdrop-filter: blur(2px);
|
||||
background-color:rgba(0,0,0,0.4);
|
||||
|
||||
.metadata-pills {
|
||||
opacity: .9;
|
||||
transition: opacity .5s, height .5s;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
bottom:0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-exerpt {
|
||||
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;
|
||||
|
||||
display: flex;
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
justify-content: center;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom:0px;
|
||||
max-width:100%;
|
||||
display:none;
|
||||
}
|
||||
|
||||
& > p {
|
||||
width:100%;
|
||||
margin:auto;
|
||||
|
||||
&:not(.p-img) {
|
||||
position:absolute;
|
||||
top:3rem;
|
||||
padding:0.5rem;
|
||||
}
|
||||
|
||||
& > 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:100%;
|
||||
overflow: hidden;
|
||||
@include border-radius($card-radius);
|
||||
|
||||
.metadata-pills {
|
||||
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;
|
||||
padding-top:3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview.head-info {
|
||||
.comment-text {
|
||||
@include angled-edge('outside top', 'upper left', $color-secondary, 16);
|
||||
background-color:$color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview.card-grey {
|
||||
.comment-text {
|
||||
@include angled-edge('outside top', 'upper left', $color-muted, 16);
|
||||
background-color:$color-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
color: $color-font-light;
|
||||
background-color:$color-primary;
|
||||
@include angled-edge('outside top', 'upper left', $color-primary, 16);
|
||||
text-align: center;
|
||||
position:absolute;
|
||||
bottom:-$lineheight;
|
||||
width:100%;
|
||||
transition: bottom 0.3s;
|
||||
}
|
||||
|
||||
.card-preview time {
|
||||
margin-bottom:0.4em;
|
||||
display:block;
|
||||
}
|
||||
|
||||
// Author area
|
||||
|
||||
.author-area {
|
||||
display:flex;
|
||||
|
||||
img.author-avatar, img.avatar {
|
||||
display:block;
|
||||
height: $lineheight*3;
|
||||
width:auto;
|
||||
border-radius:100%;
|
||||
padding:0;
|
||||
margin:0;
|
||||
margin-right:$lineheight;
|
||||
}
|
||||
|
||||
.author-metadata {
|
||||
align-items:center;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.author-date {
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom:$lineheight;
|
||||
}
|
||||
}
|
||||
|
||||
.pigimg {
|
||||
display:block;
|
||||
max-width: 100%;
|
||||
height:auto;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mwarea {
|
||||
padding-bottom: $lineheight;
|
||||
.avatar {
|
||||
width:80%;
|
||||
height:auto;
|
||||
display:block;
|
||||
margin:auto;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
width:100%;
|
||||
height:auto;
|
||||
@include border-radius($card-radius);
|
||||
}
|
||||
|
||||
.roman {
|
||||
@include md() {
|
||||
width:80%;
|
||||
position:relative;
|
||||
top:-240px;
|
||||
margin:auto;
|
||||
}
|
||||
}
|
||||
21
scss/components/_sidebar.scss
Normal file
21
scss/components/_sidebar.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.sidebar-container {
|
||||
width:100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: $lineheight*2;
|
||||
grid-template-areas:
|
||||
"side"
|
||||
"main";
|
||||
|
||||
@include lg() {
|
||||
grid-template-columns: 360px auto;
|
||||
grid-template-areas: "side main";
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
padding:1rem;
|
||||
}
|
||||
}
|
||||
19
scss/components/_tables.scss
Normal file
19
scss/components/_tables.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
th, td {
|
||||
vertical-align:center;
|
||||
padding-top: 0.325em;
|
||||
padding-bottom: 0.325em;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: $fontweight_hyper;
|
||||
}
|
||||
30
scss/components/_toasts.scss
Normal file
30
scss/components/_toasts.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
@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();
|
||||
}
|
||||
|
||||
.well {
|
||||
box-shadow: $btn-shadow;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--text-color-contrast);
|
||||
box-shadow: $btn-shadow;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace, monospace;
|
||||
}
|
||||
50
scss/core/_bases.scss
Normal file
50
scss/core/_bases.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
// Text initialization
|
||||
font-family: $basefont;
|
||||
text-align: left;
|
||||
font-size: $fontsize;
|
||||
@include old() {
|
||||
font-size: $fontsize-small;
|
||||
}
|
||||
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;
|
||||
}
|
||||
72
scss/core/_columns.scss
Normal file
72
scss/core/_columns.scss
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
@mixin column($size) {
|
||||
grid-column: span $size;
|
||||
}
|
||||
|
||||
[class*=" col-"],
|
||||
[class^=col-] {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
&>*:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin column-list() {
|
||||
&-1 {@include column(1);}
|
||||
&-2 {@include column(2);}
|
||||
&-3 {@include column(3);}
|
||||
&-4 {@include column(4);}
|
||||
&-5 {@include column(5);}
|
||||
&-6 {@include column(6);}
|
||||
&-7 {@include column(7);}
|
||||
&-8 {@include column(8);}
|
||||
&-9 {@include column(9);}
|
||||
&-10 {@include column(10);}
|
||||
&-11 {@include column(11);}
|
||||
&-12 {@include column(12);}
|
||||
}
|
||||
|
||||
.columns {
|
||||
display:grid;
|
||||
grid-gap:$lineheight;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: auto;
|
||||
padding:$lineheight;
|
||||
&-nogap {
|
||||
grid-gap:0px;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
@include column(12);
|
||||
}
|
||||
|
||||
.col {
|
||||
@include column-list();
|
||||
&-sm {
|
||||
@include sm() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-md {
|
||||
@include md() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-lg {
|
||||
@include lg() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-xl {
|
||||
@include xl() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
&-xxl {
|
||||
@include xxl() {
|
||||
@include column-list();
|
||||
}
|
||||
}
|
||||
}
|
||||
11
scss/core/_containers.scss
Normal file
11
scss/core/_containers.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
#wrapper {
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
.container-big {
|
||||
@include container($container-size-large, $lineheight);
|
||||
}
|
||||
|
||||
.container, .container-onecolumn {
|
||||
@include container($container-size, $lineheight);
|
||||
}
|
||||
19
scss/core/_icons.scss
Normal file
19
scss/core/_icons.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.icon {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
color: currentColor;
|
||||
position: relative;
|
||||
top: 0.1em;
|
||||
}
|
||||
|
||||
.social .icon {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.toolbar .icon {
|
||||
top: 0.2em;
|
||||
}
|
||||
44
scss/core/_normalize.scss
Normal file
44
scss/core/_normalize.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/* 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;
|
||||
}
|
||||
192
scss/core/_typography.scss
Normal file
192
scss/core/_typography.scss
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
@mixin paragraph() {
|
||||
padding:0;
|
||||
padding-bottom: $lineheight;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
@include accent-color($color-primary);
|
||||
--text-color:#{$color-font};
|
||||
--link-color-hover:#{transparentize($color-font, 0.85)};
|
||||
--link-color:#{darken($color-link, 10%)};
|
||||
}
|
||||
|
||||
// html, body {
|
||||
// font-family: $basefont;
|
||||
// text-align: left;
|
||||
// font-size: $fontsize;
|
||||
// line-height: $lineheight;
|
||||
// color: getFontColor();
|
||||
// font-weight: $fontweight_base;
|
||||
// }
|
||||
|
||||
strong {
|
||||
font-weight: $fontweight_bold;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.05rem 0.25rem;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
article & {
|
||||
max-width:100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1, .title-1, .main-title,
|
||||
.page-title {
|
||||
font-family: $titlefont;
|
||||
@include newTitle(3, $fontweight_hyper);
|
||||
color: $color-primary;
|
||||
letter-spacing: -3px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
143
scss/custom/_angled-edges.scss
Normal file
143
scss/custom/_angled-edges.scss
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
//-------------------------------------------------------------------------------------
|
||||
// Angled Edges v2.0.0 (https://github.com/josephfusco/angled-edges)
|
||||
// Copyright 2017 Joseph Fusco
|
||||
// Licensed under MIT (https://github.com/josephfusco/angled-edges/blob/master/LICENSE)
|
||||
//-------------------------------------------------------------------------------------
|
||||
|
||||
/// Replace `$search` with `$replace` in `$string`.
|
||||
///
|
||||
/// @author Hugo Giraudel
|
||||
/// @link http://www.sassmeister.com/gist/1b4f2da5527830088e4d
|
||||
///
|
||||
/// @param {String} $string - Initial string
|
||||
/// @param {String} $search - Substring to replace
|
||||
/// @param {String} $replace ('') - New value
|
||||
/// @return {String} Updated string
|
||||
///
|
||||
@function ae-str-replace($string, $search, $replace: '') {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + ae-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
/// Encode SVG to use as background.
|
||||
///
|
||||
/// @param {String} $string
|
||||
/// @return {String} Encoded svg data
|
||||
///
|
||||
@function ae-svg-encode($string){
|
||||
$result: ae-str-replace($string, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
|
||||
$result: ae-str-replace($result, '%', '%25');
|
||||
$result: ae-str-replace($result, '"', '\'');
|
||||
$result: ae-str-replace($result, '<', '%3C');
|
||||
$result: ae-str-replace($result, '>', '%3E');
|
||||
|
||||
@return 'data:image/svg+xml,' + $result;
|
||||
}
|
||||
|
||||
/// Outputs pseudo content for main mixin.
|
||||
///
|
||||
/// @author Joseph Fusco
|
||||
///
|
||||
/// @param {String} $location
|
||||
/// @param {Number} $height
|
||||
/// @output psuedo content
|
||||
///
|
||||
@mixin ae-pseudo($wedge, $height, $width) {
|
||||
background-image: url($wedge);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
// full width wedge - needed as Firefox ignores preserveAspectRatio="none" in this case
|
||||
@if ($width == null) {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
content: '';
|
||||
height: $height * 1px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/// Attatches an svg wedge shape to an element.
|
||||
///
|
||||
/// @author Joseph Fusco
|
||||
///
|
||||
/// @param {String} $location - 'inside top', 'outside top', 'inside bottom', 'outside bottom'
|
||||
/// @param {String} $hypotenuse - 'upper left', 'upper right', 'lower left', 'lower right'
|
||||
/// @param {Color} $fill
|
||||
/// @param {Number} $height
|
||||
/// @param {Number} $width
|
||||
/// @output '::before' and/or '::after' with svg background image
|
||||
///
|
||||
@mixin angled-edge($location, $hypotenuse, $fill, $height: 100, $width: null) {
|
||||
|
||||
position: relative;
|
||||
|
||||
$points: (
|
||||
'upper left': '0,#{$height} #{$width},#{$height} #{$width},0',
|
||||
'upper right': '0,#{$height} #{$width},#{$height} 0,0',
|
||||
'lower left': '0,0 #{$width},#{$height} #{$width},0',
|
||||
'lower right': '0,0 #{$width},0 0,#{$height}'
|
||||
);
|
||||
|
||||
// full width wedge
|
||||
@if ($width == null) {
|
||||
$points: (
|
||||
'upper left': '0,#{$height} 100,#{$height} 100,0',
|
||||
'upper right': '0,#{$height} 100,#{$height} 0,0',
|
||||
'lower left': '0,0 100,#{$height} 100,0',
|
||||
'lower right': '0,0 100,0 0,#{$height}'
|
||||
);
|
||||
}
|
||||
|
||||
// ensure $fill color is using rgb()
|
||||
$fill-rgb: 'rgb(' + round(red($fill)) + ',' + round(green($fill)) + ',' + round(blue($fill)) + ')';
|
||||
|
||||
// capture alpha component of $fill to use with fill-opacity
|
||||
$fill-alpha: alpha($fill);
|
||||
|
||||
$wedge: '<svg width="#{$width}" height="#{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
|
||||
|
||||
// full width wedge
|
||||
@if ($width == null) {
|
||||
$wedge: '<svg preserveAspectRatio="none" viewBox="0 0 100 #{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
|
||||
}
|
||||
|
||||
$encoded-wedge: ae-svg-encode($wedge);
|
||||
|
||||
@if ($location == 'inside top') {
|
||||
&::before {
|
||||
@include ae-pseudo($encoded-wedge, $height, $width);
|
||||
top: 0;
|
||||
}
|
||||
} @else if ($location == 'outside top') {
|
||||
&::before {
|
||||
@include ae-pseudo($encoded-wedge, $height, $width);
|
||||
top: -$height * 1px;
|
||||
}
|
||||
} @else if ($location == 'inside bottom') {
|
||||
&::after {
|
||||
@include ae-pseudo($encoded-wedge, $height, $width);
|
||||
bottom: 0;
|
||||
}
|
||||
} @else if ($location == 'outside bottom') {
|
||||
&::after {
|
||||
@include ae-pseudo($encoded-wedge, $height, $width);
|
||||
bottom: -$height * 1px;
|
||||
}
|
||||
} @else {
|
||||
@error 'Invalid argument for $location - must use: `inside top`, `outside top`, `inside bottom`, `outside bottom`';
|
||||
}
|
||||
|
||||
@if (map-has-key($points, $hypotenuse) == false) {
|
||||
@error 'Invalid argument for $hypotenuse - must use: `upper left`, `upper right`, `lower left`, `lower right`';
|
||||
}
|
||||
}
|
||||
68
scss/custom/_article.scss
Normal file
68
scss/custom/_article.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-anchor {
|
||||
color: rgba(0,0,0,0.4);
|
||||
font-weight: 900;
|
||||
font-family: $basefont;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.header-anchor {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:hover > .header-anchor {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#sommaire {
|
||||
position: sticky;
|
||||
top: 32px;
|
||||
}
|
||||
38
scss/custom/_featured.scss
Normal file
38
scss/custom/_featured.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
.preview-featured {
|
||||
font-size: 0.8rem;
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
294
scss/custom/_global.scss
Normal file
294
scss/custom/_global.scss
Normal file
|
|
@ -0,0 +1,294 @@
|
|||
@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;}
|
||||
}
|
||||
|
||||
#description {
|
||||
display:grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"illustration"
|
||||
"content";
|
||||
@include xl() {
|
||||
grid-template-columns: 400px auto;
|
||||
grid-template-areas:
|
||||
"title title"
|
||||
"illustration content";
|
||||
}
|
||||
}
|
||||
|
||||
#desc-title {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
#description-content {
|
||||
grid-area:content;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
display:block;
|
||||
margin:auto;
|
||||
grid-area:illustration;
|
||||
max-width:100%;
|
||||
height:auto;
|
||||
@include xl() {
|
||||
padding-bottom: 0;
|
||||
max-width: 530px;
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
right: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.align-centered-block {
|
||||
text-align:center;
|
||||
padding:1rem;
|
||||
}
|
||||
|
||||
#page-header {
|
||||
background: get-color("skyblue") url("data:image/svg+xml,%3Csvg width='800' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='420' cy='440' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='700' cy='510' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='-100' cy='510' r='300' fill='%23FDF7E7' /%3E%3Ccircle cx='150' cy='380' r='150' fill='%23FDF7E7' /%3E%3C/svg%3E");
|
||||
border-top: 6px solid get-color("dark");
|
||||
background-position: bottom center;
|
||||
background-repeat: repeat-x;
|
||||
margin-bottom:0;
|
||||
padding-bottom:5rem;
|
||||
.fa {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@include sm() {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
header h1 {
|
||||
border-style:none !important;
|
||||
font-weight: $fontweight_hyper;
|
||||
font-size:5.4em;
|
||||
font-style:oblique;
|
||||
padding:0rem;
|
||||
line-height: 1rem;
|
||||
max-width: $container-size;
|
||||
margin: auto;
|
||||
text-align:center;
|
||||
|
||||
@include xl() {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 560px;
|
||||
height: auto;
|
||||
margin-top:0rem;
|
||||
width: 100%;
|
||||
|
||||
@include xl() {
|
||||
position: relative;
|
||||
left:-4rem;
|
||||
}
|
||||
z-index:0;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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 320px;
|
||||
grid-template-areas: "main side";
|
||||
}
|
||||
}
|
||||
|
||||
.grid-2-elements {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
row-gap: $lineheight;
|
||||
column-gap: 1.5rem;
|
||||
@include lg() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: side;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
$color-footer-back: get-color("dark");
|
||||
$color-footer-text: get-color("light");
|
||||
|
||||
body {
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-bottom:1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
.columns {
|
||||
@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;
|
||||
}
|
||||
|
||||
ul.social {
|
||||
font-size: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
line-height: 1;
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: $color-font-light;
|
||||
background-color: var(--accent-color);
|
||||
box-shadow: $btn-shadow;
|
||||
padding: 0.3em;
|
||||
width: 3rem;
|
||||
aspect-ratio: 1;
|
||||
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border-radius: 100%;
|
||||
line-height: 1;
|
||||
margin:0.33rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 428px;
|
||||
border:none;
|
||||
}
|
||||
73
scss/custom/_mobile.scss
Normal file
73
scss/custom/_mobile.scss
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
html {
|
||||
margin-left:0;
|
||||
@include lg() {
|
||||
margin-left:320px;
|
||||
}
|
||||
}
|
||||
|
||||
#searchfield {
|
||||
outline-color: $color-background-alt;
|
||||
border-radius: $card-radius;
|
||||
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
|
||||
|
||||
}
|
||||
|
||||
#mobile-sidebar {
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:-100vw;
|
||||
width: 320px;
|
||||
height:100vh;
|
||||
transition: left 0.2s;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
&.shown {
|
||||
left:0;
|
||||
}
|
||||
|
||||
@include lg() {
|
||||
left:0;
|
||||
}
|
||||
|
||||
z-index:10;
|
||||
box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
img.myavatar {
|
||||
height: 140px;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin: 1rem auto 1.5rem auto;
|
||||
border: 3px solid $color-background;
|
||||
box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
@include old() {
|
||||
height: 128px;
|
||||
margin: 0.25rem auto 1rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
z-index: 12;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
@include lg() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
6
scss/definitions/_borders.scss
Normal file
6
scss/definitions/_borders.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// BORDERS AND BORDER-RADIUSES
|
||||
|
||||
$card-radius: 6px;
|
||||
$btn-radius: 3px;
|
||||
$well-radius: $card-radius;
|
||||
$border-size: 0px;
|
||||
34
scss/definitions/_fonts.scss
Normal file
34
scss/definitions/_fonts.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
// FONTS
|
||||
// Define how looks the text
|
||||
|
||||
$fontsize: 4.5mm;
|
||||
$fontsize-small:4.25mm;
|
||||
|
||||
$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: 'Comic Neue Bold Italic', sans-serif;
|
||||
|
||||
@font-face {
|
||||
font-family: 'Comic Neue Bold Italic';
|
||||
src: local('Comic Neue Bold Italic'), local('ComicNeue-BoldItalic'),
|
||||
url('../fonts/ComicNeue-BoldItalic.woff2') format('woff2'),
|
||||
url('../fonts/ComicNeue-BoldItalic.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
73
scss/definitions/_palette.scss
Normal file
73
scss/definitions/_palette.scss
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
$whiteness_value: 0.8;
|
||||
|
||||
// Couleurs de base du theme :
|
||||
|
||||
$palette: (
|
||||
"blue":#0f7e84,
|
||||
"violet":#CB357D,
|
||||
"red":#dc322f,
|
||||
"orange":#cb4b16,
|
||||
"green":#859900,
|
||||
"skyblue":#0f7e84,
|
||||
"dark": #002b36,
|
||||
"light":#FDF7E7,
|
||||
"yellow":#b58900,
|
||||
"grey":#586e75,
|
||||
"dark2":#073642,
|
||||
"light2":#eee8d5);
|
||||
|
||||
$semantics: (
|
||||
"primary":"violet",
|
||||
"secondary":"skyblue",
|
||||
"warning":"orange",
|
||||
"danger":"red",
|
||||
"info":"skyblue",
|
||||
"success":"green",
|
||||
"muted":"grey",
|
||||
"light":"light",
|
||||
"dark":"dark");
|
||||
|
||||
$helpers: (
|
||||
"font":"dark2",
|
||||
"font-light":"light",
|
||||
"background":"light",
|
||||
"background-alt":"light2",
|
||||
"link":"violet",
|
||||
"selection":"skyblue",
|
||||
"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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// **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");
|
||||
10
scss/definitions/_shadows.scss
Normal file
10
scss/definitions/_shadows.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// 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);
|
||||
|
||||
$btn-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
|
||||
35
scss/definitions/_sizing.scss
Normal file
35
scss/definitions/_sizing.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// SIZING
|
||||
// All the spacing and sizing variables
|
||||
|
||||
$baseline: 1.6;
|
||||
|
||||
$lineheight: $baseline * 1rem;
|
||||
$lineheight_half: $lineheight/2;
|
||||
$lineheight_quarter: $lineheight/4;
|
||||
$lineheight_rel: $baseline * 1em;
|
||||
|
||||
$card-header-vmargin: $lineheight_rel / 2;
|
||||
$card-header-hmargin: 0px;
|
||||
$card-header-padding: $lineheight_rel;
|
||||
$card-header-width: 85%;
|
||||
$card-header-position:0px;
|
||||
// Buttons
|
||||
$button_large: $lineheight_rel;
|
||||
$button_small: $lineheight_rel / 4;
|
||||
$button-group-margin: 0;
|
||||
|
||||
// Responsives sizes
|
||||
// - sm : Small tablets and large smartphones (landscape view)
|
||||
// - md : Small tablets (portrait view)
|
||||
// - lg : Tablets and small desktops
|
||||
// - xl : Large tablets and desktops
|
||||
// - xxl : Very large desktops
|
||||
$screen-sm-min: 576px;
|
||||
$screen-md-min: 768px;
|
||||
$screen-lg-min: 992px;
|
||||
$screen-xl-min: 1200px;
|
||||
$screen-xxl-min: 1600px;
|
||||
|
||||
// Containers size
|
||||
$container-size: $screen-xl-min;
|
||||
$container-size-large: $screen-xxl-min;
|
||||
15
scss/mixins/_borders.scss
Normal file
15
scss/mixins/_borders.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
// Border, border radius and margin
|
||||
|
||||
@mixin borders() {
|
||||
border: $border-size solid rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
@mixin prefer-no-borders() {
|
||||
&:not(:hover) {
|
||||
border-color:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-radius($border-radius) {
|
||||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
||||
}
|
||||
48
scss/mixins/_btns.scss
Normal file
48
scss/mixins/_btns.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
@mixin button($size) {
|
||||
@include button-layout($size);
|
||||
@include shape-style($size);
|
||||
@include button-hover();
|
||||
font-weight: $fontweight_base;
|
||||
}
|
||||
|
||||
@mixin button-layout($size) {
|
||||
padding: $size;
|
||||
padding-top: $size/3;
|
||||
padding-bottom: $size/3;
|
||||
margin:$size/2;
|
||||
margin-top: $size/3;
|
||||
margin-bottom: $lineheight;
|
||||
//font-size: 4.75mm;
|
||||
line-height:$lineheight;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
@mixin button-hover() {
|
||||
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
|
||||
&:hover, &:active {
|
||||
background-color:transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
|
||||
@include colorize-shape($background-color);
|
||||
outline-color: $background-color;
|
||||
color:$text-color;
|
||||
&:visited {
|
||||
@include colorize-shape($background-color);
|
||||
color:$text-color;
|
||||
}
|
||||
&, &:visited, &:not(.disabled):not(:disabled) {
|
||||
&:hover, &:active {
|
||||
@include colorize-shape($hover-color);
|
||||
color:lighten($text-color, 5%);
|
||||
outline-color: $hover-color;
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-color($background-color) {
|
||||
@include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color));
|
||||
box-shadow: $narrow-shadow;
|
||||
}
|
||||
59
scss/mixins/_colors.scss
Normal file
59
scss/mixins/_colors.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
// 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) {
|
||||
--accent-color: #{$accent-color};
|
||||
--text-color-contrast: #{getTextColorFromBackground($accent-color)};
|
||||
--accent-color-hover: #{accentuate($accent-color)};
|
||||
}
|
||||
13
scss/mixins/_li.scss
Normal file
13
scss/mixins/_li.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@mixin li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin li-flex() {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
@include li-no-margin();
|
||||
list-style: none;
|
||||
}
|
||||
58
scss/mixins/_panels.scss
Normal file
58
scss/mixins/_panels.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
@mixin panel($size) {
|
||||
@include border-radius($card-radius);
|
||||
background-color: $color-background-alt;
|
||||
box-shadow: $large-shadow;
|
||||
border: none;
|
||||
margin:0;
|
||||
margin-bottom:$lineheight;
|
||||
|
||||
box-shadow: $btn-shadow;
|
||||
|
||||
& > * {
|
||||
margin-left: $size / 2;
|
||||
margin-right: $size / 2;
|
||||
&:first-child,
|
||||
&.sr-only:first-child ~ * {
|
||||
margin-top: $size;
|
||||
&.card-header {
|
||||
margin-top:$card-header-vmargin;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
}
|
||||
&: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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
91
scss/mixins/_responsive.scss
Normal file
91
scss/mixins/_responsive.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// Old desktop
|
||||
@mixin old {
|
||||
@media (max-width: 1366px) and (max-height: 768px) {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
34
scss/mixins/_shape.scss
Normal file
34
scss/mixins/_shape.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
@mixin biseau($size) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: visible;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -$size/2;
|
||||
right: -$size/2;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transform: skewX(-15deg);
|
||||
transition: background-color 0.3s;
|
||||
border-radius: $card-radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin shape-style($size) {
|
||||
@include borders();
|
||||
@include border-radius($btn-radius);
|
||||
@include biseau($size);
|
||||
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
@mixin colorize-shape($background-color) {
|
||||
background-color: $background-color;
|
||||
|
||||
&:before {
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
25
scss/style.scss
Normal file
25
scss/style.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
/*
|
||||
Theme Name: Kazhnuz Space
|
||||
Theme URI: https://git.kobold.cafe/quarante-douze/qdouze2-wordpress-theme
|
||||
Author: Kazhnuz
|
||||
Author URI: https://kazhnuz.space
|
||||
Description: The default theme for Kazhnuz Space, my personnal blog.
|
||||
Version: 0.2
|
||||
License: GNU General Public License v3 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Tags: blog, two-columns, right-sidebar
|
||||
Text Domain: kspace-wordpress-theme
|
||||
|
||||
This theme is licensed under the GPLv3.
|
||||
*/
|
||||
|
||||
@import 'custom/angled-edges';
|
||||
|
||||
@import 'dep';
|
||||
@import 'definitions';
|
||||
@import 'mixins';
|
||||
|
||||
@import 'core';
|
||||
@import 'drawing';
|
||||
@import 'utils';
|
||||
@import 'global';
|
||||
69
scss/utils/_a11y.scss
Normal file
69
scss/utils/_a11y.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.screen-reader-text, .sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
opacity: 0;
|
||||
transition-delay: .8s;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.sr-only-focusable:active,
|
||||
.sr-only-focusable:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
|
||||
a.sr-hover {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sr-hover:hover .sr-only {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
clip: auto;
|
||||
overflow: visible;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 6px;
|
||||
top: 110%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
padding: 3px 9px;
|
||||
margin: 0px;
|
||||
font-size: 1rem;
|
||||
z-index: 10;
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.article img::before {
|
||||
content:"alt";
|
||||
}
|
||||
|
||||
.skip {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skip:focus-within {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
16
scss/utils/_align.scss
Normal file
16
scss/utils/_align.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
.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;}
|
||||
}
|
||||
|
||||
.icon-fw {
|
||||
width: 1em;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
8
scss/utils/_borders.scss
Normal file
8
scss/utils/_borders.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
.round, .pill {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.no-borders {
|
||||
border-width:0px;
|
||||
border-style:none;
|
||||
}
|
||||
93
scss/utils/_colorize.scss
Normal file
93
scss/utils/_colorize.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
@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 {
|
||||
@include bg-color(get-color("dark"));
|
||||
}
|
||||
|
||||
// .bg {
|
||||
|
||||
// @each $name,
|
||||
// $color in list-colors() {
|
||||
// &-#{$name} {
|
||||
// @include bg-color(get-color($name));
|
||||
// &:hover {
|
||||
// @include bg-color(get-color($name));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .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));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.c, .btn, .head, .text {
|
||||
@each $name,
|
||||
$color in list-colors() {
|
||||
&-#{$name} {
|
||||
@include accent-color(get-color($name));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .head {
|
||||
|
||||
// @each $name,
|
||||
// $color in list-colors() {
|
||||
// &-#{$name} {
|
||||
// @include heading-color(get-color($name));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.fg-light {
|
||||
--text-color:#{$color-font-light};
|
||||
--link-color-hover:#{transparentize($color-font-light, 0.7)};
|
||||
}
|
||||
|
||||
.fg-dark {
|
||||
color: $color-font;
|
||||
--text-color:#{$color-font};
|
||||
--link-color-hover:#{transparentize($color-font, 0.85)};
|
||||
}
|
||||
17
scss/utils/_display.scss
Normal file
17
scss/utils/_display.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.d-none {
|
||||
@include responsive() {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-block {
|
||||
@include responsive() {
|
||||
display: block!important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
@include responsive() {
|
||||
display: flex!important;
|
||||
}
|
||||
}
|
||||
35
scss/utils/_flex.scss
Normal file
35
scss/utils/_flex.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
.f-column {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
&.reverse {
|
||||
flex-direction:column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.f-row {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
&.reverse {
|
||||
flex-direction:row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.f-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.f-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.f-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.f-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.f-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
3
scss/utils/_lists.scss
Normal file
3
scss/utils/_lists.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.no-pills {
|
||||
list-style:none;
|
||||
}
|
||||
67
scss/utils/_sizing.scss
Normal file
67
scss/utils/_sizing.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
@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)
|
||||
}
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
flex: 1;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
padding-right: 6px;
|
||||
}
|
||||
Loading…
Reference in a new issue