Removed unnecessary files
This commit is contained in:
parent
da18a85719
commit
90cd7873dd
@ -1,13 +0,0 @@
|
|||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="1em"
|
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
focusable="false"
|
|
||||||
aria-hidden="true"
|
|
||||||
fill="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M9.707 18.707l6-6a.999.999 0 0 0 0-1.414l-6-6a.999.999 0 1 0-1.414 1.414L13.586 12l-5.293 5.293a.999.999 0 1 0 1.414 1.414z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 310 B |
@ -1,16 +0,0 @@
|
|||||||
{% extends 'layouts/base.njk' %}
|
|
||||||
|
|
||||||
{# Intro content #}
|
|
||||||
{% set introHeading = title %}
|
|
||||||
{% set introSummary %}{{ content | safe }}{% endset %}
|
|
||||||
|
|
||||||
{# Post list content #}
|
|
||||||
{% set postListHeading = 'All posts' %}
|
|
||||||
{% set postListItems = collections.posts %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<main id="main-content" tabindex="-1">
|
|
||||||
{% include "partials/components/intro.njk" %}
|
|
||||||
{% include "partials/components/post-list.njk" %}
|
|
||||||
</main>
|
|
||||||
{% endblock %}
|
|
@ -4,7 +4,6 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}/feed.xml" />
|
|
||||||
<link rel="icon" href="{{ site.faviconPath }}" type="image/png" />
|
<link rel="icon" href="{{ site.faviconPath }}" type="image/png" />
|
||||||
{% include "partials/global/meta-info.njk" %}
|
{% include "partials/global/meta-info.njk" %}
|
||||||
<script>document.documentElement.classList.remove('no-js');</script>
|
<script>document.documentElement.classList.remove('no-js');</script>
|
||||||
|
@ -1,23 +0,0 @@
|
|||||||
{% set paginationLinkTokens = 'leading-tight text-500 weight-mid box-inline-flex align-center pad-bottom-300' %}
|
|
||||||
|
|
||||||
{% if paginationNextUrl or paginationPrevUrl %}
|
|
||||||
<hr />
|
|
||||||
<div class="inner-wrapper">
|
|
||||||
<footer class="[ pagination ] [ pad-bottom-900 ]">
|
|
||||||
<nav class="[ pagination__nav ] [ box-flex space-between align-center ]">
|
|
||||||
{% if paginationPrevUrl %}
|
|
||||||
<a href="{{ paginationPrevUrl }}" class="{{ paginationLinkTokens }}" data-direction="backwards">
|
|
||||||
<span>{{ paginationPrevText if paginationPrevText else 'Previous' }}</span>
|
|
||||||
{% include "icons/arrow.svg" %}
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
{% if paginationNextUrl %}
|
|
||||||
<a href="{{ paginationNextUrl }}" class="{{ paginationLinkTokens }}" data-direction="forwards">
|
|
||||||
<span>{{ paginationNextText if paginationNextText else 'Next' }}</span>
|
|
||||||
{% include "icons/arrow.svg" %}
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
@ -4,7 +4,7 @@
|
|||||||
<div class="[ site-head__inner ] [ md:box-flex space-between align-center ]">
|
<div class="[ site-head__inner ] [ md:box-flex space-between align-center ]">
|
||||||
<a href="/" class="[ site-head__site-name ] [ leading-tight ]">
|
<a href="/" class="[ site-head__site-name ] [ leading-tight ]">
|
||||||
<span class="visually-hidden">{{ site.name }} - Home</span>
|
<span class="visually-hidden">{{ site.name }} - Home</span>
|
||||||
{% include "icons/astrolabe_logo.svg" %}
|
{% include "../../../images/astrolabe_logo.svg" %}
|
||||||
</a>
|
</a>
|
||||||
{% set ariaLabel = 'navigation' %}
|
{% set ariaLabel = 'navigation' %}
|
||||||
{% include "partials/components/nav.njk" %}
|
{% include "partials/components/nav.njk" %}
|
||||||
|
@ -1,7 +0,0 @@
|
|||||||
<!-- ADD YOUR THIRD PARTY COMMENTS CODE HERE -->
|
|
||||||
<!-- COMMENTO EXAMPLE
|
|
||||||
<div id="commento"></div>
|
|
||||||
<script defer
|
|
||||||
src="https://cdn.commento.io/js/commento.js">
|
|
||||||
</script>
|
|
||||||
-->
|
|
@ -1,4 +0,0 @@
|
|||||||
---
|
|
||||||
title: 'Posts Archive'
|
|
||||||
layout: 'layouts/archive.njk'
|
|
||||||
---
|
|
30
src/feed.njk
30
src/feed.njk
@ -1,30 +0,0 @@
|
|||||||
---
|
|
||||||
permalink: '/feed.xml'
|
|
||||||
---
|
|
||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
|
||||||
<title>{{ site.name }}</title>
|
|
||||||
<subtitle></subtitle>
|
|
||||||
<link href="{{ site.url }}{{ permalink }}" rel="self"/>
|
|
||||||
<link href="{{ site.url }}/"/>
|
|
||||||
{% if collections.posts|length %}
|
|
||||||
<updated>{{ collections.posts | rssLastUpdatedDate }}</updated>
|
|
||||||
{% endif %}
|
|
||||||
<id>{{ site.url }}</id>
|
|
||||||
<author>
|
|
||||||
<name>{{ site.authorName }}</name>
|
|
||||||
<email>{{ site.authorEmail }}</email>
|
|
||||||
</author>
|
|
||||||
{% for post in collections.posts %}
|
|
||||||
{% set absolutePostUrl %}{{ site.url }}{{ post.url | url }}{% endset %}
|
|
||||||
<entry>
|
|
||||||
<title>{{ post.data.title }}</title>
|
|
||||||
<link href="{{ absolutePostUrl }}"/>
|
|
||||||
<updated>{{ post.date | rssDate }}</updated>
|
|
||||||
<id>{{ absolutePostUrl }}</id>
|
|
||||||
<content type="html"><![CDATA[
|
|
||||||
{{ post.templateContent | safe }}
|
|
||||||
]]></content>
|
|
||||||
</entry>
|
|
||||||
{% endfor %}
|
|
||||||
</feed>
|
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 7.4 KiB |
@ -1,98 +0,0 @@
|
|||||||
// For syntax highlighting only
|
|
||||||
const html = String.raw;
|
|
||||||
|
|
||||||
class ThemeToggle extends HTMLElement {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
this.STORAGE_KEY = 'user-color-scheme';
|
|
||||||
this.COLOR_MODE_KEY = '--color-mode';
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback() {
|
|
||||||
this.render();
|
|
||||||
}
|
|
||||||
|
|
||||||
getCSSCustomProp(propKey) {
|
|
||||||
let response = getComputedStyle(document.documentElement).getPropertyValue(propKey);
|
|
||||||
|
|
||||||
// Tidy up the string if there’s something to work with
|
|
||||||
if (response.length) {
|
|
||||||
response = response.replace(/\'|"/g, '').trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Return the string response by default
|
|
||||||
return response;
|
|
||||||
}
|
|
||||||
|
|
||||||
applySetting(passedSetting) {
|
|
||||||
let currentSetting = passedSetting || localStorage.getItem(this.STORAGE_KEY);
|
|
||||||
|
|
||||||
if (currentSetting) {
|
|
||||||
document.documentElement.setAttribute('data-user-color-scheme', currentSetting);
|
|
||||||
this.setButtonLabelAndStatus(currentSetting);
|
|
||||||
} else {
|
|
||||||
this.setButtonLabelAndStatus(this.getCSSCustomProp(this.COLOR_MODE_KEY));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
toggleSetting() {
|
|
||||||
let currentSetting = localStorage.getItem(this.STORAGE_KEY);
|
|
||||||
|
|
||||||
switch (currentSetting) {
|
|
||||||
case null:
|
|
||||||
currentSetting =
|
|
||||||
this.getCSSCustomProp(this.COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark';
|
|
||||||
break;
|
|
||||||
case 'light':
|
|
||||||
currentSetting = 'dark';
|
|
||||||
break;
|
|
||||||
case 'dark':
|
|
||||||
currentSetting = 'light';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
localStorage.setItem(this.STORAGE_KEY, currentSetting);
|
|
||||||
|
|
||||||
return currentSetting;
|
|
||||||
}
|
|
||||||
|
|
||||||
setButtonLabelAndStatus(currentSetting) {
|
|
||||||
this.modeToggleButton.innerText = `${
|
|
||||||
currentSetting === 'dark' ? 'Light' : 'Dark'
|
|
||||||
} theme`;
|
|
||||||
this.modeStatusElement.innerText = `Color mode is now "${currentSetting}"`;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
this.innerHTML = html`
|
|
||||||
<div class="[ theme-toggle ] [ md:ta-right gap-top-500 ]">
|
|
||||||
<div role="status" class="[ visually-hidden ][ js-mode-status ]"></div>
|
|
||||||
<button class="[ button ] [ font-base text-base weight-bold ] [ js-mode-toggle ]">
|
|
||||||
Dark theme
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
this.afterRender();
|
|
||||||
}
|
|
||||||
|
|
||||||
afterRender() {
|
|
||||||
this.modeToggleButton = document.querySelector('.js-mode-toggle');
|
|
||||||
this.modeStatusElement = document.querySelector('.js-mode-status');
|
|
||||||
|
|
||||||
this.modeToggleButton.addEventListener('click', evt => {
|
|
||||||
evt.preventDefault();
|
|
||||||
|
|
||||||
this.applySetting(this.toggleSetting());
|
|
||||||
});
|
|
||||||
|
|
||||||
this.applySetting();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ('customElements' in window) {
|
|
||||||
customElements.define('theme-toggle', ThemeToggle);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ThemeToggle;
|
|
@ -8,7 +8,6 @@ permalink: '/nous-rejoindre/index.html'
|
|||||||
<section class="process-cae">
|
<section class="process-cae">
|
||||||
<article class="process-cae__block">
|
<article class="process-cae__block">
|
||||||
|
|
||||||
<!-- ![Entrepreneur candidat CAE](/images/sailor-thinking.svg) -->
|
|
||||||
<img src="/images/sailor-thinking.svg" alt="Entrepreneur candidat CAE" style="width: 18rem;">
|
<img src="/images/sailor-thinking.svg" alt="Entrepreneur candidat CAE" style="width: 18rem;">
|
||||||
|
|
||||||
Vous avez un projet d’entrepreneuriat en lien avec la prestation de service dans le domaine des nouvelles technologies et du numérique.
|
Vous avez un projet d’entrepreneuriat en lien avec la prestation de service dans le domaine des nouvelles technologies et du numérique.
|
||||||
@ -17,7 +16,6 @@ permalink: '/nous-rejoindre/index.html'
|
|||||||
</article>
|
</article>
|
||||||
<article class="process-cae__block">
|
<article class="process-cae__block">
|
||||||
|
|
||||||
<!-- ![flèche bas](/images/arrow.svg) -->
|
|
||||||
<img src="/images/arrow.svg" alt="flèche bas">
|
<img src="/images/arrow.svg" alt="flèche bas">
|
||||||
<div class="highlight secondary">
|
<div class="highlight secondary">
|
||||||
|
|
||||||
@ -34,7 +32,6 @@ permalink: '/nous-rejoindre/index.html'
|
|||||||
</article>
|
</article>
|
||||||
<article class="process-cae__block">
|
<article class="process-cae__block">
|
||||||
|
|
||||||
<!-- ![Entrepreneur en contrat CAPE](/images/sailor-accomp.svg) -->
|
|
||||||
<img src="/images/sailor-accomp.svg" alt="Entrepreneur en contrat CAPE" style="width: 9rem;">
|
<img src="/images/sailor-accomp.svg" alt="Entrepreneur en contrat CAPE" style="width: 9rem;">
|
||||||
|
|
||||||
Au bout d’un certain temps votre activité devient prérenne.
|
Au bout d’un certain temps votre activité devient prérenne.
|
||||||
@ -43,7 +40,6 @@ permalink: '/nous-rejoindre/index.html'
|
|||||||
<section class="process-cae split">
|
<section class="process-cae split">
|
||||||
<article class="process-cae__block">
|
<article class="process-cae__block">
|
||||||
|
|
||||||
<!-- ![flèche gauche](/images/arrow-left.svg) -->
|
|
||||||
<img src="/images/arrow-left.svg" alt="flèche gauche">
|
<img src="/images/arrow-left.svg" alt="flèche gauche">
|
||||||
|
|
||||||
Vous intégrez la coopérative en tant qu'Entrepreneur salarié, bienvenue parmi nous !
|
Vous intégrez la coopérative en tant qu'Entrepreneur salarié, bienvenue parmi nous !
|
||||||
@ -60,25 +56,20 @@ permalink: '/nous-rejoindre/index.html'
|
|||||||
[Voir le contrat CESA en détail]()
|
[Voir le contrat CESA en détail]()
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ![Equipage Astrolabe](/images/crew.svg) -->
|
|
||||||
<img src="/images/crew.svg" alt="Equipage Astrolabe" style="width: 32rem; margin-bottom: 2rem;">
|
<img src="/images/crew.svg" alt="Equipage Astrolabe" style="width: 32rem; margin-bottom: 2rem;">
|
||||||
|
|
||||||
<!-- ![flèche bas](/images/arrow.svg) -->
|
|
||||||
<img src="/images/arrow.svg" alt="flèche bas">
|
<img src="/images/arrow.svg" alt="flèche bas">
|
||||||
|
|
||||||
Vous devenez associé d’Astrolabe et partagez la barre avec le reste de l’équipage.
|
Vous devenez associé d’Astrolabe et partagez la barre avec le reste de l’équipage.
|
||||||
|
|
||||||
<!-- ![Grand bateau de face](/images/big-boat.svg) -->
|
|
||||||
<img src="/images/big-boat.svg" alt="Grand bateau de face" style="width: 8rem; margin-top: 2rem;">
|
<img src="/images/big-boat.svg" alt="Grand bateau de face" style="width: 8rem; margin-top: 2rem;">
|
||||||
</article>
|
</article>
|
||||||
<article class="process-cae__block">
|
<article class="process-cae__block">
|
||||||
|
|
||||||
<!-- ![flèche droite](/images/arrow-right.svg) -->
|
|
||||||
<img src="/images/arrow-right.svg" alt="flèche droite">
|
<img src="/images/arrow-right.svg" alt="flèche droite">
|
||||||
|
|
||||||
Vous créez votre propre entreprise, félicitations !
|
Vous créez votre propre entreprise, félicitations !
|
||||||
|
|
||||||
<!-- ![Petit bateau à voile](/images/small-boat.svg) -->
|
|
||||||
<img src="/images/small-boat.svg" alt="Petit bateau à voile" style="width: 8rem; margin-top: 4rem; margin-left: 18rem;">
|
<img src="/images/small-boat.svg" alt="Petit bateau à voile" style="width: 8rem; margin-top: 4rem; margin-left: 18rem;">
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
@ -25,22 +25,6 @@
|
|||||||
--color-white: #{get-color('light')};
|
--color-white: #{get-color('light')};
|
||||||
}
|
}
|
||||||
|
|
||||||
@include dark-mode() {
|
|
||||||
--color-bg: #{get-color('dark')};
|
|
||||||
--color-bg-glare: #{get-color('slate')};
|
|
||||||
--color-text: #{get-color('light')};
|
|
||||||
--color-selection-text: #{get-color('dark')};
|
|
||||||
--color-selection-bg: #{get-color('light')};
|
|
||||||
--color-stroke: #{get-color('slate')};
|
|
||||||
--color-theme-primary: #{lighten(get-color('primary'), 50%)};
|
|
||||||
--color-theme-primary-glare: #{lighten(get-color('primary-glare'), 50%)};
|
|
||||||
--color-action-bg: var(--color-theme-primary-glare);
|
|
||||||
--color-action-text: #{get-color('dark')};
|
|
||||||
--color-theme-highlight: #{get-color('highlight')};
|
|
||||||
--color-theme-highlight-block: #{get-color('slate')};
|
|
||||||
--color-theme-feature-text: #{get-color('highlight')};
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background-color: var(--color-bg);
|
background-color: var(--color-bg);
|
||||||
|
@ -1,146 +0,0 @@
|
|||||||
/**
|
|
||||||
* a11y-dark theme for JavaScript, CSS, and HTML
|
|
||||||
* Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
|
|
||||||
* @author ericwbailey
|
|
||||||
*/
|
|
||||||
|
|
||||||
code[class*='language-'],
|
|
||||||
pre[class*='language-'] {
|
|
||||||
color: #f8f8f2;
|
|
||||||
background: none;
|
|
||||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
||||||
text-align: left;
|
|
||||||
word-spacing: normal;
|
|
||||||
word-break: normal;
|
|
||||||
word-wrap: normal;
|
|
||||||
|
|
||||||
-moz-tab-size: 2;
|
|
||||||
-o-tab-size: 2;
|
|
||||||
tab-size: 2;
|
|
||||||
|
|
||||||
-webkit-hyphens: none;
|
|
||||||
-moz-hyphens: none;
|
|
||||||
-ms-hyphens: none;
|
|
||||||
hyphens: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inline code */
|
|
||||||
:not(pre) > code[class*='language-'] {
|
|
||||||
padding: .1em;
|
|
||||||
border-radius: .3em;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.comment,
|
|
||||||
.token.prolog,
|
|
||||||
.token.doctype,
|
|
||||||
.token.cdata {
|
|
||||||
color: #d4d0ab;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.punctuation {
|
|
||||||
color: #fefefe;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.property,
|
|
||||||
.token.tag,
|
|
||||||
.token.constant,
|
|
||||||
.token.symbol,
|
|
||||||
.token.deleted {
|
|
||||||
color: #ffa07a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.boolean,
|
|
||||||
.token.number {
|
|
||||||
color: #00e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.selector,
|
|
||||||
.token.attr-name,
|
|
||||||
.token.string,
|
|
||||||
.token.char,
|
|
||||||
.token.builtin,
|
|
||||||
.token.inserted {
|
|
||||||
color: #abe338;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.operator,
|
|
||||||
.token.entity,
|
|
||||||
.token.url,
|
|
||||||
.language-css .token.string,
|
|
||||||
.style .token.string,
|
|
||||||
.token.variable {
|
|
||||||
color: #00e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.atrule,
|
|
||||||
.token.attr-value,
|
|
||||||
.token.function {
|
|
||||||
color: #ffd700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.keyword {
|
|
||||||
color: #00e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.regex,
|
|
||||||
.token.important {
|
|
||||||
color: #ffd700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.important,
|
|
||||||
.token.bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.entity {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (-ms-high-contrast: active) {
|
|
||||||
code[class*='language-'],
|
|
||||||
pre[class*='language-'] {
|
|
||||||
color: windowText;
|
|
||||||
background: window;
|
|
||||||
}
|
|
||||||
|
|
||||||
:not(pre) > code[class*='language-'],
|
|
||||||
pre[class*='language-'] {
|
|
||||||
background: window;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.important {
|
|
||||||
background: highlight;
|
|
||||||
color: window;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.atrule,
|
|
||||||
.token.attr-value,
|
|
||||||
.token.function,
|
|
||||||
.token.keyword,
|
|
||||||
.token.operator,
|
|
||||||
.token.selector {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.attr-value,
|
|
||||||
.token.comment,
|
|
||||||
.token.doctype,
|
|
||||||
.token.function,
|
|
||||||
.token.keyword,
|
|
||||||
.token.operator,
|
|
||||||
.token.property,
|
|
||||||
.token.string {
|
|
||||||
color: highlight;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.attr-value,
|
|
||||||
.token.url {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
}
|
|
@ -3,9 +3,6 @@
|
|||||||
// Pull in the stalfos lib
|
// Pull in the stalfos lib
|
||||||
@import '../../node_modules/stalfos/stalfos';
|
@import '../../node_modules/stalfos/stalfos';
|
||||||
|
|
||||||
// Local mixins
|
|
||||||
@import 'mixins/dark-mode';
|
|
||||||
|
|
||||||
@import 'theme';
|
@import 'theme';
|
||||||
|
|
||||||
// Local dependencies
|
// Local dependencies
|
||||||
@ -67,7 +64,6 @@ img {
|
|||||||
@import 'components/heading-permalink';
|
@import 'components/heading-permalink';
|
||||||
@import 'components/intro';
|
@import 'components/intro';
|
||||||
@import 'components/nav';
|
@import 'components/nav';
|
||||||
@import 'components/pagination';
|
|
||||||
@import 'components/posts';
|
@import 'components/posts';
|
||||||
@import 'components/post';
|
@import 'components/post';
|
||||||
@import 'components/post-list';
|
@import 'components/post-list';
|
||||||
@ -79,5 +75,4 @@ img {
|
|||||||
@import 'components/site-foot';
|
@import 'components/site-foot';
|
||||||
@import 'components/sponsor';
|
@import 'components/sponsor';
|
||||||
@import 'components/skip-link';
|
@import 'components/skip-link';
|
||||||
@import 'components/syntax-highlighting';
|
|
||||||
@import 'components/video-player';
|
@import 'components/video-player';
|
||||||
|
@ -1,21 +0,0 @@
|
|||||||
/**
|
|
||||||
* DARK MODE MIXIN
|
|
||||||
*
|
|
||||||
* A little wrapper that lets you define your dark mode custom
|
|
||||||
* properties in a way that supports the theme toggle web component
|
|
||||||
*/
|
|
||||||
@mixin dark-mode() {
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--color-mode: 'dark';
|
|
||||||
}
|
|
||||||
|
|
||||||
:root:not([data-user-color-scheme]) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-user-color-scheme='dark'] {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,149 +0,0 @@
|
|||||||
---
|
|
||||||
title: 'Styleguide'
|
|
||||||
permalink: /styleguide/
|
|
||||||
---
|
|
||||||
|
|
||||||
{% extends 'layouts/base.njk' %}
|
|
||||||
|
|
||||||
{# Intro content #}
|
|
||||||
{% set introHeading = title %}
|
|
||||||
|
|
||||||
{% block head %}
|
|
||||||
<style>
|
|
||||||
.swatches {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
|
|
||||||
grid-gap: 2.5rem 2rem;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swatches > * {
|
|
||||||
margin-top: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.props dt {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.props dd + dt {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color {
|
|
||||||
border: 1px solid var(--color-mid);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-dark code {
|
|
||||||
color: var(--color-light);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
{% endblock %}
|
|
||||||
{% block content %}
|
|
||||||
<main id="main-content" tabindex="-1">
|
|
||||||
{% include "partials/components/intro.njk" %}
|
|
||||||
<article class="[ inner-wrapper ] [ post ]">
|
|
||||||
<section class="[ post__body ] [ sf-flow ] [ pad-top-900 pad-bottom-900 ]">
|
|
||||||
<h2>Colours</h2>
|
|
||||||
<p class="visually-hidden">Colour swatches with various values that you can copy.</p>
|
|
||||||
<ul class="swatches">
|
|
||||||
{% for color in styleguide.colors() %}
|
|
||||||
<li class="sf-flow">
|
|
||||||
<div class="[ color ] [ pad-top-900 pad-bottom-900 ]" style="background: {{ color.value }}"></div>
|
|
||||||
<h3 class="font-base text-500">{{ color.key }}</h3>
|
|
||||||
<dl class="props">
|
|
||||||
<dt>Value</dt>
|
|
||||||
<dd><code>{{ color.value }}</code></dd>
|
|
||||||
<dt>Sass function</dt>
|
|
||||||
<dd><code>get-color('{{ color.key }}')</code></dd>
|
|
||||||
<dt>Custom Property</dt>
|
|
||||||
<dd><code>var(--color-{{ color.key }})</code></dd>
|
|
||||||
<dt>Text util class</dt>
|
|
||||||
<dd><code>color-{{ color.key }}</code></dd>
|
|
||||||
<dt>Background util class</dt>
|
|
||||||
<dd><code>bg-{{ color.key }}</code></dd>
|
|
||||||
</dl>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
<h2>Fonts</h2>
|
|
||||||
<h3>Base — System stack</h3>
|
|
||||||
<p class="sf-flow">
|
|
||||||
<span aria-hidden="true" role="presentation" class="font-base text-600 md:text-800 box-block leading-tight">The quick brown fox jumps over the lazy fox</span>
|
|
||||||
<code>.font-base</code>
|
|
||||||
</p>
|
|
||||||
<h3>Serif — Lora</h3>
|
|
||||||
<p class="sf-flow">
|
|
||||||
<span aria-hidden="true" role="presentation" class="font-serif text-600 md:text-800 box-block leading-tight">The quick brown fox jumps over the lazy fox</span>
|
|
||||||
<code>.font-serif</code>
|
|
||||||
</p>
|
|
||||||
<h2>Text sizes</h2>
|
|
||||||
<p>Text sizes are available as standard classes or media query prefixed, such as <code>lg:text-500</code>.</p>
|
|
||||||
{% for size in styleguide.sizes() %}
|
|
||||||
<p class="text-{{ size.key }}" style="--flow-space: 1.5rem">{{ size.value }} - <code>text-{{ size.key }}</code></p>
|
|
||||||
{% endfor %}
|
|
||||||
<h2>Spacing</h2>
|
|
||||||
<p>There’s size ratio utilities that give you margin (<code>gap-top, gap-bottom</code>) and padding (<code>pad-top, pad-left, pad-bottom</code>).
|
|
||||||
<h3>Margin</h3>
|
|
||||||
<p class="visually-hidden">Margin token classes that you can copy</p>
|
|
||||||
<div>
|
|
||||||
{% for size in styleguide.sizes() %}
|
|
||||||
<div class="[ bg-dark color-light pad-top-base pad-bottom-base pad-left-base md:width-half ] [ gap-top-{{ size.key }} ]">
|
|
||||||
<code>gap-top-{{ size.key }}</code>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
<h3>Padding</h3>
|
|
||||||
<p class="visually-hidden">Padding token classes that you can copy</p>
|
|
||||||
{% for size in styleguide.sizes() %}
|
|
||||||
<div class="[ bg-dark pad-left-base color-light md:width-half ] [ pad-top-{{ size.key }} ]">
|
|
||||||
<code>pad-top-{{ size.key }}</code>
|
|
||||||
</div>
|
|
||||||
<div class="[ bg-dark pad-left-base color-light md:width-half ] [ pad-bottom-{{ size.key }} ]">
|
|
||||||
<code>pad-bottom-{{ size.key }}</code>
|
|
||||||
</div>
|
|
||||||
<div class="[ bg-dark color-light md:width-half ] [ pad-left-{{ size.key }} ]">
|
|
||||||
<code>pad-left-{{ size.key }}</code>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
<h2>Forms</h2>
|
|
||||||
{% from "macros/form.njk" import label, field, textarea, confirm, select, radios, checkboxes, hidden_field, button %}
|
|
||||||
<form>
|
|
||||||
<ol class="[ field-list ]">
|
|
||||||
<li class="[ field-list__field-group ]">
|
|
||||||
{{ label("Text Label", "field-text-name") }}
|
|
||||||
{{ field( "text", "field-text-name", { required: true, placeholder: "Katherine Johnson", autocomplete: "name", autocorrect: "off", autocapitalize: "off", description: "Optional description. Note: This field type can take any valid input type." } ) }}
|
|
||||||
</li>
|
|
||||||
<li class="[ field-list__field-group ]">
|
|
||||||
{{ label("Email Label", "field-email-name") }}
|
|
||||||
{{ field( "email", "field-email-name", { required: true, placeholder: "katherine@johnson.tld", autocomplete: "email" } ) }}
|
|
||||||
</li>
|
|
||||||
<li class="[ field-list__field-group ]">
|
|
||||||
{{ label("Textarea Label", "field-textarea-name") }}
|
|
||||||
{{ textarea( "field-textarea-name", { required: true, autocapitalize: "sentences", spellcheck: "true" } ) }}
|
|
||||||
</li>
|
|
||||||
<li class="[ field-list__field-group ]">
|
|
||||||
{{ label("Select Label", "field-select-name") }}
|
|
||||||
{{ select( "select", [ "option 1", {label: "Option II", value: "option 2"} ], { required: true, options_before: ["prepended option"], options_after: ["appended option"], description: "Optional description." } ) }}
|
|
||||||
</li>
|
|
||||||
<li class="[ field-list__field-group field-list__field-group--confirm ]">
|
|
||||||
{{ confirm("Confirm this statement", "confirm") }}
|
|
||||||
</li>
|
|
||||||
<li class="[ field-list__field-group ]">
|
|
||||||
{{ radios("Radio Legend", "field-radio-name", [ "Yes", { label: "Not really", value: "No", note: "Note about choice." } ], { description: "Optional description." } ) }}
|
|
||||||
</li>
|
|
||||||
<li class="[ field-list__field-group ]">
|
|
||||||
{{ checkboxes("Checkbox Legend", "field-checkbox-name", [ "Choice 1", { label: "Choice 2", value: "Choice 2", note: "Note about choice." }, "Choice 3" ], { description: "Optional description." } ) }}
|
|
||||||
</li>
|
|
||||||
<li class="[ field-list__field-group ]">
|
|
||||||
There is a hidden field here…
|
|
||||||
{{ hidden_field("hidden-name", "hidden-value") }}
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
{{ button("Button Text") }}
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
{% endblock %}
|
|
35
src/tags.njk
35
src/tags.njk
@ -1,35 +0,0 @@
|
|||||||
---
|
|
||||||
title: Tag Archive
|
|
||||||
pagination:
|
|
||||||
data: collections
|
|
||||||
size: 1
|
|
||||||
alias: tag
|
|
||||||
filter:
|
|
||||||
- all
|
|
||||||
- nav
|
|
||||||
- post
|
|
||||||
- posts
|
|
||||||
- tagList
|
|
||||||
- postFeed
|
|
||||||
addAllPagesToCollections: true
|
|
||||||
permalink: /tags/{{ tag }}/
|
|
||||||
---
|
|
||||||
|
|
||||||
{% extends 'layouts/base.njk' %}
|
|
||||||
|
|
||||||
{# Intro content #}
|
|
||||||
{% set introHeading %}Posts filed under “{{ tag }}”{% endset %}
|
|
||||||
{% set introHeadingLevel = '2' %}
|
|
||||||
|
|
||||||
{# Post list content #}
|
|
||||||
{% set postListHeadingLevel = '2' %}
|
|
||||||
{% set postListHeading = 'Posts' %}
|
|
||||||
{% set postListItems = collections[tag] %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<main id="main-content" tabindex="-1">
|
|
||||||
{% include "partials/components/intro.njk" %}
|
|
||||||
{% include "partials/components/post-list.njk" %}
|
|
||||||
{% include "partials/components/pagination.njk" %}
|
|
||||||
</main>
|
|
||||||
{% endblock %}
|
|
Loading…
Reference in New Issue
Block a user