AstrolabeCAE/SiteWebAstrolabe
AstrolabeCAE/SiteWebAstrolabe
2
2
Fork 4
Code Issues 2 Pull Requests 2 Packages Projects Releases 3 Activity

Removed unnecessary files

This commit is contained in:
Yves Gatesoupe 2020-07-16 17:34:10 +02:00
parent da18a85719
commit 90cd7873dd
17 changed files with 1 additions and 574 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/_includes/icons/arrow.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 310 B

16
src/_includes/layouts/archive.njk
View File

@ -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 %}

1
src/_includes/layouts/base.njk
View File

@ -4,7 +4,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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" />
{% include "partials/global/meta-info.njk" %}
<script>document.documentElement.classList.remove('no-js');</script>

23
src/_includes/partials/components/pagination.njk
View File

@ -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 %}

2
src/_includes/partials/global/site-head.njk
View File

@ -4,7 +4,7 @@
<div class="[ site-head__inner ] [ md:box-flex space-between align-center ]">
<a href="/" class="[ site-head__site-name ] [ leading-tight ]">
<span class="visually-hidden">{{ site.name }} - Home</span>
{% include "icons/astrolabe_logo.svg" %}
{% include "../../../images/astrolabe_logo.svg" %}
</a>
{% set ariaLabel = 'navigation' %}
{% include "partials/components/nav.njk" %}

7
src/_includes/partials/global/third-party-comments.njk
View File

@ -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>
-->

4
src/archive.md
View File

@ -1,4 +0,0 @@
---
title: 'Posts Archive'
layout: 'layouts/archive.njk'
---

30
src/feed.njk
View File

@ -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>

0
src/_includes/icons/astrolabe_logo.svg → src/images/astrolabe_logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

98
src/js/components/theme-toggle.js
View File

@ -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;

9
src/pages/nous-rejoindre.md
View File

@ -8,7 +8,6 @@ permalink: '/nous-rejoindre/index.html'
<section class="process-cae">
<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;">
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 class="process-cae__block">
<!-- ![flèche bas](/images/arrow.svg) -->
<img src="/images/arrow.svg" alt="flèche bas">
<div class="highlight secondary">
@ -34,7 +32,6 @@ permalink: '/nous-rejoindre/index.html'
</article>
<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;">
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">
<article class="process-cae__block">
<!-- ![flèche gauche](/images/arrow-left.svg) -->
<img src="/images/arrow-left.svg" alt="flèche gauche">
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]()
</div>
<!-- ![Equipage Astrolabe](/images/crew.svg) -->
<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">
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;">
</article>
<article class="process-cae__block">
<!-- ![flèche droite](/images/arrow-right.svg) -->
<img src="/images/arrow-right.svg" alt="flèche droite">
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;">
</article>
</section>

16
src/scss/_theme.scss
View File

@ -25,22 +25,6 @@
--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 {
color: var(--color-text);
background-color: var(--color-bg);

146
src/scss/components/_syntax-highlighting.scss
View File

@ -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;
}
}

5
src/scss/global.scss
View File

@ -3,9 +3,6 @@
// Pull in the stalfos lib
@import '../../node_modules/stalfos/stalfos';
// Local mixins
@import 'mixins/dark-mode';
@import 'theme';
// Local dependencies
@ -67,7 +64,6 @@ img {
@import 'components/heading-permalink';
@import 'components/intro';
@import 'components/nav';
@import 'components/pagination';
@import 'components/posts';
@import 'components/post';
@import 'components/post-list';
@ -79,5 +75,4 @@ img {
@import 'components/site-foot';
@import 'components/sponsor';
@import 'components/skip-link';
@import 'components/syntax-highlighting';
@import 'components/video-player';

21
src/scss/mixins/_dark-mode.scss
View File

@ -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;
}
}

149
src/styleguide.njk
View File

@ -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
View File

@ -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 %}