massive refactor
101
.eleventy.js
|
@ -1,37 +1,47 @@
|
||||||
const fs = require('fs');
|
|
||||||
const miniHtml = require('html-minifier');
|
|
||||||
const _ = require('lodash');
|
|
||||||
const pluginRss = require('@11ty/eleventy-plugin-rss');
|
const pluginRss = require('@11ty/eleventy-plugin-rss');
|
||||||
|
const { EleventyRenderPlugin } = require('@11ty/eleventy');
|
||||||
|
|
||||||
// Markdown //
|
// Markdown //
|
||||||
|
function wikilinkSlugifier(pageName) {
|
||||||
|
pageName = pageName.replace(/\s+/, '-');
|
||||||
|
pageName = slugify(pageName, {
|
||||||
|
remove: /'/g,
|
||||||
|
lower: true
|
||||||
|
});
|
||||||
|
return pageName
|
||||||
|
}
|
||||||
const markdownIt = require('markdown-it');
|
const markdownIt = require('markdown-it');
|
||||||
const md = markdownIt({
|
const md = markdownIt({
|
||||||
html: true,
|
html: true,
|
||||||
fence: false
|
typographer: true
|
||||||
})
|
})
|
||||||
.disable('code')
|
.use(require('markdown-it-wikilinks')({
|
||||||
.use(require('markdown-it-attrs'))
|
uriSuffix: '',
|
||||||
.use(require('markdown-it-anchor'))
|
makeAllLinksAbsolute: true,
|
||||||
.use(require('markdown-it-footnote'))
|
class: 'wikilink',
|
||||||
.use(require('markdown-it-sup'))
|
postProcessPageName: wikilinkSlugifier
|
||||||
.use(require('markdown-it-sub'))
|
}))
|
||||||
.use(require('markdown-it-ins'))
|
.use(require('markdown-it-anchor'), {
|
||||||
.use(require('markdown-it-mark'))
|
permalink: require('markdown-it-anchor').permalink.headerLink(),
|
||||||
.use(require('markdown-it-task-lists'))
|
})
|
||||||
.use(require('markdown-it-container'), 'box')
|
.use(require('markdown-it-footnote'))
|
||||||
.use(require('markdown-it-collapsible'))
|
.use(require('markdown-it-mark'))
|
||||||
.use(require('markdown-it-abbr'))
|
.use(require('markdown-it-task-lists'))
|
||||||
.use(require('markdown-it-mathjax3'));
|
.use(require('markdown-it-mathjax3'));
|
||||||
|
|
||||||
|
const { default: slugify } = require('slugify');
|
||||||
|
|
||||||
module.exports = function(eleventyConfig) {
|
module.exports = function(eleventyConfig) {
|
||||||
// General //
|
// General //
|
||||||
eleventyConfig.setLibrary('md', md);
|
eleventyConfig.setLibrary('md', md);
|
||||||
eleventyConfig.setFrontMatterParsingOptions({
|
|
||||||
permalink: '/{{ page.fileSlug }}/',
|
|
||||||
});
|
|
||||||
eleventyConfig.addDataExtension('csv', contents => require('csv-parse/sync').parse(contents, {columns: true, skip_empty_lines: true}));
|
eleventyConfig.addDataExtension('csv', contents => require('csv-parse/sync').parse(contents, {columns: true, skip_empty_lines: true}));
|
||||||
eleventyConfig.setFrontMatterParsingOptions({ excerpt: true, excerpt_separator: '<!--excerpt-->'});
|
|
||||||
eleventyConfig.setQuietMode(true);
|
eleventyConfig.addGlobalData('permalink', () => {
|
||||||
|
return (data) => slugify(`${data.page.fileSlug}`, {
|
||||||
|
remove: /'/g,
|
||||||
|
lower: true
|
||||||
|
}).concat('/');
|
||||||
|
});
|
||||||
|
|
||||||
// Multilingual sitemap collection. See https://github.com/quasibit/eleventy-plugin-sitemap#create-a-multilingual-sitemap
|
// Multilingual sitemap collection. See https://github.com/quasibit/eleventy-plugin-sitemap#create-a-multilingual-sitemap
|
||||||
eleventyConfig.addCollection('sitemap', function(collectionApi) {
|
eleventyConfig.addCollection('sitemap', function(collectionApi) {
|
||||||
|
@ -61,15 +71,10 @@ module.exports = function(eleventyConfig) {
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// Scss //
|
|
||||||
eleventyConfig.addWatchTarget('styles');
|
|
||||||
eleventyConfig.addPassthroughCopy({'styles': '/'});
|
|
||||||
eleventyConfig.addPassthroughCopy({'svg': '/'});
|
eleventyConfig.addPassthroughCopy({'svg': '/'});
|
||||||
|
eleventyConfig.addPassthroughCopy('index.js');
|
||||||
|
|
||||||
// Plugins //
|
// Plugins //
|
||||||
eleventyConfig.addPlugin(require('@11ty/eleventy-plugin-directory-output'));
|
|
||||||
eleventyConfig.addPlugin(require('eleventy-plugin-find'));
|
|
||||||
eleventyConfig.addPlugin(require('@quasibit/eleventy-plugin-schema'));
|
|
||||||
eleventyConfig.addPlugin(require('@11ty/eleventy-plugin-syntaxhighlight'));
|
eleventyConfig.addPlugin(require('@11ty/eleventy-plugin-syntaxhighlight'));
|
||||||
eleventyConfig.addPlugin(require('@aloskutov/eleventy-plugin-external-links'), {
|
eleventyConfig.addPlugin(require('@aloskutov/eleventy-plugin-external-links'), {
|
||||||
url: 'https://quitsocialmedia.club',
|
url: 'https://quitsocialmedia.club',
|
||||||
|
@ -99,6 +104,17 @@ module.exports = function(eleventyConfig) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
eleventyConfig.addPlugin(EleventyRenderPlugin);
|
||||||
|
eleventyConfig.addPlugin(require('eleventy-sass'), {
|
||||||
|
compileOptions: {
|
||||||
|
permalink: function(contents, inputPath) {
|
||||||
|
return (data) => data.page.filePathStem.replace(/^\/styles\//, '/') + '.css';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
sass: {
|
||||||
|
style: 'compressed'
|
||||||
|
}
|
||||||
|
});
|
||||||
eleventyConfig.addPlugin(require('eleventy-plugin-svg-contents'));
|
eleventyConfig.addPlugin(require('eleventy-plugin-svg-contents'));
|
||||||
eleventyConfig.addPlugin(require('@sardine/eleventy-plugin-tinysvg'), {
|
eleventyConfig.addPlugin(require('@sardine/eleventy-plugin-tinysvg'), {
|
||||||
baseUrl: 'svg/'
|
baseUrl: 'svg/'
|
||||||
|
@ -127,10 +143,12 @@ module.exports = function(eleventyConfig) {
|
||||||
eleventyConfig.addFilter('absoluteUrl', pluginRss.absoluteUrl);
|
eleventyConfig.addFilter('absoluteUrl', pluginRss.absoluteUrl);
|
||||||
eleventyConfig.addFilter('convertHtmlToAbsoluteUrls', pluginRss.convertHtmlToAbsoluteUrls);
|
eleventyConfig.addFilter('convertHtmlToAbsoluteUrls', pluginRss.convertHtmlToAbsoluteUrls);
|
||||||
|
|
||||||
|
// Production-only //
|
||||||
|
if (process.env.ELEVENTY_ENV == 'production') {
|
||||||
// Minify output //
|
// Minify output //
|
||||||
/*eleventyConfig.addTransform('miniHtml', function(content, outputPath) {
|
eleventyConfig.addTransform(require('html-minifier'), function(content, outputPath) {
|
||||||
if( this.outputPath && this.outputPath.endsWith('.html') ) {
|
if( this.outputPath && this.outputPath.endsWith('.html') ) {
|
||||||
let minified = miniHtml.minify(content, {
|
let minified = require('html-minifier').minify(content, {
|
||||||
useShortDoctype: true,
|
useShortDoctype: true,
|
||||||
removeComments: true,
|
removeComments: true,
|
||||||
collapseWhitespace: true,
|
collapseWhitespace: true,
|
||||||
|
@ -141,21 +159,14 @@ module.exports = function(eleventyConfig) {
|
||||||
return minified;
|
return minified;
|
||||||
}
|
}
|
||||||
return content;
|
return content;
|
||||||
});*/
|
});
|
||||||
|
eleventyConfig.addPlugin(require('eleventy-plugin-purgecss'));
|
||||||
|
}
|
||||||
|
|
||||||
// 404 //
|
eleventyConfig.on('eleventy.after', () => {
|
||||||
eleventyConfig.setBrowserSyncConfig({
|
const execSync = require('child_process').execSync;
|
||||||
callbacks: {
|
execSync(`npx pagefind`, { encoding: 'utf-8' });
|
||||||
ready: function(err, bs) {
|
})
|
||||||
bs.addMiddleware('*', (req, res) => {
|
|
||||||
const content_404 = fs.readFileSync('www/404.html');
|
|
||||||
res.writeHead(404, { 'Content-Type': 'text/html; charset=UTF-8' });
|
|
||||||
res.write(content_404);
|
|
||||||
res.end();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
dir: {
|
dir: {
|
||||||
|
|
|
@ -1,8 +1 @@
|
||||||
riordinare/
|
|
||||||
content/notes/templates/
|
|
||||||
content/notes/.obsidian
|
|
||||||
content/notes/.trash
|
|
||||||
content/notes/PISE
|
|
||||||
content/notes/obsidian.css
|
|
||||||
content/notes/.*
|
|
||||||
README.md
|
README.md
|
|
@ -1,10 +1,4 @@
|
||||||
# Eleventy stuff
|
|
||||||
node_modules
|
node_modules
|
||||||
dist
|
dist
|
||||||
.env
|
.env
|
||||||
cache
|
|
||||||
.cache
|
|
||||||
www
|
www
|
||||||
|
|
||||||
# Local Netlify folder
|
|
||||||
.netlify
|
|
29
README.md
|
@ -1,9 +1,30 @@
|
||||||
[![Netlify Status](https://api.netlify.com/api/v1/badges/c5a2f8f0-e22a-4ae4-82e4-bcdea06adf7c/deploy-status)](https://app.netlify.com/sites/quit-social-media/deploys) [![LiberaPay Patrons](https://img.shields.io/liberapay/patrons/tommi.svg?logo=liberapay")](https://liberapay.com/tommi/) [![Awesome Humane Tech](https://raw.githubusercontent.com/humanetech-community/awesome-humane-tech/main/humane-tech-badge.svg?sanitize=true)](https://github.com/humanetech-community/awesome-humane-tech)
|
[![LiberaPay Patrons](https://img.shields.io/liberapay/patrons/tommi.svg?logo=liberapay)](https://liberapay.com/tommi) [![Awesome Humane Tech](https://raw.githubusercontent.com/humanetech-community/awesome-humane-tech/main/humane-tech-badge.svg?sanitize=true)](https://github.com/humanetech-community/awesome-humane-tech)
|
||||||
|
|
||||||
# Quit Social Media
|
# 🚀 Quit Social Media
|
||||||
|
|
||||||
Everithing about this website is written in its [about page](https://quitsocialmedia.club/about), WIP notes are [here](https://tommi.space/qsm), the development roadmap is [here](./pages/development-roadmap.md)
|
Everithing about this website is written in its [about page](https://quitsocialmedia.club/about), WIP notes are [here](https://quitsocialmedia.club/qsm), the development roadmap is [here](./pages/development-roadmap.md)
|
||||||
|
|
||||||
## Contribution
|
## 🫴🏼 Contribute
|
||||||
|
|
||||||
This project warmly welcomes any contributor or supporter. Please visit the [contribution page](https://quitsocialmedia.club/contribute).
|
This project warmly welcomes any contributor or supporter. Please visit the [contribution page](https://quitsocialmedia.club/contribute).
|
||||||
|
|
||||||
|
## 👾 Source
|
||||||
|
|
||||||
|
The main repository is hosted on [*giTMI*](https://gitmi.dev/tommi/quitsocialmedia.club 'quitsocialmedia.club repo on giTMI').
|
||||||
|
|
||||||
|
### 🪩 Mirrors
|
||||||
|
|
||||||
|
- [GitHub](https://github.com/xplosionmind/quitsocialmedia.club 'quitsocialmedia.club on GitHub')
|
||||||
|
- [Codeberg](https://codeberg.org/tommi/quitsocialmedia.club 'quitsocialmedia.club on Codeberg')
|
||||||
|
|
||||||
|
## 📟 Software
|
||||||
|
|
||||||
|
This website is built using [Eleventy](https://11ty.dev 'Eleventy official website')
|
||||||
|
|
||||||
|
## 🏠 Hosting
|
||||||
|
|
||||||
|
Quit Social Media is self-hosted on [*Xplosion Server*](https://tommi.space/server 'Xplosion Server info on tommi.space')
|
||||||
|
|
||||||
|
## ℹ️ Info
|
||||||
|
|
||||||
|
Go to the [website development page](https://quitsocialmedia.club/development 'Website development - quitsocialmedia.club') to know more.
|
||||||
|
|
Before Width: | Height: | Size: 602 KiB |
Before Width: | Height: | Size: 576 KiB |
Before Width: | Height: | Size: 524 KiB |
Before Width: | Height: | Size: 642 KiB |
|
@ -0,0 +1,11 @@
|
||||||
|
<div class='red box'>
|
||||||
|
<h2 class='title'>{% case lang %}{% when 'it' %}Nota{% when 'fr' %}À savoir{% else %}Disclaimer{% endcase %}</h2>
|
||||||
|
<p>{% case lang %}
|
||||||
|
{% when 'it' %}
|
||||||
|
Quasi tutti i contenuti di questo sito sono stati creati e aggiunti più di due anni fa. Seppur molte argomentazioni rimangano valide, molte informazioni sarebbero da aggiornare. <a href='https://tommi.space'>Tommi</a>, l’autore originale, purtroppo non riesce a mantenere questo progetto con la frequenza che meriterebbe, ma chiunque può comunque <a href='/contribuisci'>contribuire</a>.
|
||||||
|
{% when 'fr' %}
|
||||||
|
Presque tous les contenus presents sur ce site ont été creés et ajoutés il y a plus de deux ans. La majorité des arguments reste valide, toutefois beaucoup d’informations devrient être mis à jour. <a href='https://tommi.space'>Tommi</a>, l’auteur originel, malheureusement ne peut pas maintenir ce projet comment il mérite. Toute le monde est libre de <a href='/contribute' hreflang='en'>contribuer</a> quand même.
|
||||||
|
{% else %}
|
||||||
|
Almost everything in this website is more than two years old. The majority of the arguments sustained stays absolutely valid, but many information probably are out of date. <a href='https://tommi.space'>Tommi</a>, the original author, unfortunately cannot maintain this project as frequently and comprehensively as it deserves. Nevertheless, everyone is welcome to <a href='/contribute'>contribute</a> anyway.
|
||||||
|
{% endcase %}</p>
|
||||||
|
</div>
|
|
@ -1,7 +1,7 @@
|
||||||
<div class='one column row'>
|
<div class='one column row'>
|
||||||
<div class='banner red box'>
|
<div class='banner red box'>
|
||||||
<h3>🚧 {% case lang %}{% when 'it' %}Lavori in corso{% when 'fr' %}Travail en cours{% else %}Work in progress{% endcase %} 🏗</h3>
|
<h3>🚧 {% case lang %}{% when 'it' %}Lavori in corso{% when 'fr' %}Travail en cours{% else %}Work in progress{% endcase %} 🏗️</h3>
|
||||||
{% case lang %}
|
<p class='center'>{% case lang %}
|
||||||
{% when 'it' %}
|
{% when 'it' %}
|
||||||
Questa pagina è ancora <u>in fase di scrittura</u>. Perdona eventuali errori o imprecisioni.<br />
|
Questa pagina è ancora <u>in fase di scrittura</u>. Perdona eventuali errori o imprecisioni.<br />
|
||||||
Se hai parti da aggiungere o da correggere, <a href='{{ source }}' target='_blank' title='Modifica “{{ title }}” su GitHub'>puoi completarla tu</a>!
|
Se hai parti da aggiungere o da correggere, <a href='{{ source }}' target='_blank' title='Modifica “{{ title }}” su GitHub'>puoi completarla tu</a>!
|
||||||
|
@ -11,6 +11,6 @@
|
||||||
{% else %}
|
{% else %}
|
||||||
This page is still being written or edited. Please pardon possible errors or imperfections.<br />
|
This page is still being written or edited. Please pardon possible errors or imperfections.<br />
|
||||||
If you have something to add or to adjust yourself, <a href='{{ source }}' target='_blank' title='Edit “{{ title }} on GitHub”'>feel free to do it</a>!
|
If you have something to add or to adjust yourself, <a href='{{ source }}' target='_blank' title='Edit “{{ title }} on GitHub”'>feel free to do it</a>!
|
||||||
{% endcase %}
|
{% endcase %}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -10,7 +10,6 @@
|
||||||
|
|
||||||
<!-- Assets -->
|
<!-- Assets -->
|
||||||
<link rel='preload' href='/style.css' type='text/css' as='style'>
|
<link rel='preload' href='/style.css' type='text/css' as='style'>
|
||||||
<link rel='preload' href='/inter.woff2' as='font' type='font/woff2'>
|
|
||||||
<link rel='stylesheet' href='/style.css' type='text/css'>
|
<link rel='stylesheet' href='/style.css' type='text/css'>
|
||||||
|
|
||||||
<!-- Favicon -->
|
<!-- Favicon -->
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
<div class='one column row'>
|
<div class='one column row'>
|
||||||
<div class='banner red box'>
|
<div class='banner red box'>
|
||||||
<h3>🚧 {% case page.lang%}{% when 'it' %}Traduzione in corso{% when 'fr' %}Traduction en cours{% else %}Translation in progress{% endcase %} 🏗</h3>
|
<h3>🚧 {% case page.lang%}{% when 'it' %}Traduzione in corso{% when 'fr' %}Traduction en cours{% else %}Translation in progress{% endcase %} 🏗️</h3>
|
||||||
{% case page.lang %}
|
<p class='center'>{% case page.lang %}
|
||||||
{% when 'it' %}
|
{% when 'it' %}
|
||||||
Questa pagina non è stato completamente tradotta; tutti gli articoli e le note con traduzione in sospeso sono contraddistinte dal tag <a href='/development#l10n' title='tutte le traduzioni in corso'><code>l10n</code></a>.<br />Per visualizzare il contenuto aggiornato, <a {% for p in collections.all %}{% if p.data.ref == ref and p.data.lang == 'en' %}href='{{ p.url }}' hreflang='en' title='{{ p.data.title }}'{% endif %}{% endfor %}>visualizza questa pagina in inglese</a>
|
Questa pagina non è stato completamente tradotta; tutti gli articoli e le note con traduzione in sospeso sono contraddistinte dal tag <a href='/development#l10n' title='tutte le traduzioni in corso'><code>l10n</code></a>.<br />Per visualizzare il contenuto aggiornato, <a {% for p in collections.all %}{% if p.data.ref == ref and p.data.lang == 'en' %}href='{{ p.url }}' hreflang='en' title='{{ p.data.title }}'{% endif %}{% endfor %}>visualizza questa pagina in inglese</a>
|
||||||
{% when 'fr' %}
|
{% when 'fr' %}
|
||||||
Cette page-ci n’a pas été complètement traduite; tous les pages dont traductions sont incomplètes sont marquées avec l’étiquette <a href='/development#l10n' title='Tous les traductions incomplètes'><code>l10n</code></a>.<br />Pour visualiser la version à jour de la page, <a {% for p in collections.all %}{% if p.data.ref == ref and p.data.lang == 'en' %}href='{{ p.url }}' hreflang='en' title='{{ p.data.title }}'{% endif %}{% endfor %}>visualisez-la en anglais</a>
|
Cette page-ci n’a pas été complètement traduite; tous les pages dont traductions sont incomplètes sont marquées avec l’étiquette <a href='/development#l10n' title='Tous les traductions incomplètes'><code>l10n</code></a>.<br />Pour visualiser la version à jour de la page, <a {% for p in collections.all %}{% if p.data.ref == ref and p.data.lang == 'en' %}href='{{ p.url }}' hreflang='en' title='{{ p.data.title }}'{% endif %}{% endfor %}>visualisez-la en anglais</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
This page has not been completely translated from the language it was originally written in. You may seen chunks of it in other languages. Please, consider <a href='{{ source }}' target='_blank' title='Edit “{{ title }} on GitHub”'>helping out</a> in translating it!
|
This page has not been completely translated from the language it was originally written in. You may seen chunks of it in other languages. Please, consider <a href='{{ source }}' target='_blank' title='Edit “{{ title }} on GitHub”'>helping out</a> in translating it!
|
||||||
{% endcase %}
|
{% endcase %}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,10 +1,7 @@
|
||||||
<header class='nav'>
|
<header>
|
||||||
<div id='home'>
|
<a id='home' href='{% case lang %}{% when 'it' %}/it/home{% when 'fr' %}/fr/home{% else %}/home{% endcase %}' title='home'>Quit Social Media</a>
|
||||||
<a href='{% case lang %}{% when 'it' %}/it/home{% when 'fr' %}/fr/home{% else %}/home{% endcase %}' title='home'>{{ site.title }}</a>
|
|
||||||
</div>
|
|
||||||
<nav id='nav'>
|
<nav id='nav'>
|
||||||
<input aria-hidden='true' type='checkbox' id='menutoggle'>
|
<input type='checkbox' id='menutoggle'>
|
||||||
<label class='nav-mobile' for='menutoggle'><span></span></label>
|
|
||||||
<menu>
|
<menu>
|
||||||
<li><a href='/{{ lang }}/about' title='
|
<li><a href='/{{ lang }}/about' title='
|
||||||
{% case lang %}
|
{% case lang %}
|
||||||
|
@ -42,17 +39,6 @@
|
||||||
{% endcase %}
|
{% endcase %}
|
||||||
</a></li>
|
</a></li>
|
||||||
<li><a href='/{{ lang }}/faq' title='FAQ'>FAQ</a></li>
|
<li><a href='/{{ lang }}/faq' title='FAQ'>FAQ</a></li>
|
||||||
{% if alternates %}
|
|
||||||
<li class='dropdown'>
|
|
||||||
<label for='langtoggle' title='language selector'>🌍</label>
|
|
||||||
<input aria-hidden='true' type='checkbox' id='langtoggle'>
|
|
||||||
<ul class='lang-list'>
|
|
||||||
{% for alternate in alternates %}
|
|
||||||
<li><a rel='alternate' href='{{ alternate.url }}' title='{{ alternate.data.title }}' hreflang='{{ alternate.data.lang }}'>{% case alternate.data.lang %}{% when 'it' %}🇮🇹{% when 'fr' %}🇫🇷{% else %}🇬🇧</a>{% endcase %}</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</menu>
|
</menu>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
|
@ -1,42 +1,8 @@
|
||||||
<section class='flex box'>
|
<section class='flex box'>
|
||||||
<h2 style='margin-right:1rem'>{% if lang == 'it' %}Condividi{% else %}Share{% endif %}</h2>
|
<h2 style='margin-right:1rem'>{% if lang == 'it' %}Condividi{% else %}Share{% endif %}</h2>
|
||||||
<div id='share' class='flex'>
|
<div id='share' class='flex'>
|
||||||
<!-- Copy URL -->
|
<svg id='copyUrl' title='{% if lang == 'it' %}Copia URL{% else %}Copy URL{% endif %}' type='button' class='button' viewBox='0 0 24 24' ><path d='M13.29 9.29l-4 4a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4-4a1 1 0 0 0-1.42-1.42z' fill='var(--background)'/><path d='M12.28 17.4L11 18.67a4.2 4.2 0 0 1-5.58.4 4 4 0 0 1-.27-5.93l1.42-1.43a1 1 0 0 0 0-1.42 1 1 0 0 0-1.42 0l-1.27 1.28a6.15 6.15 0 0 0-.67 8.07 6.06 6.06 0 0 0 9.07.6l1.42-1.42a1 1 0 0 0-1.42-1.42z' fill='var(--background)'/><path d='M19.66 3.22a6.18 6.18 0 0 0-8.13.68L10.45 5a1.09 1.09 0 0 0-.17 1.61 1 1 0 0 0 1.42 0L13 5.3a4.17 4.17 0 0 1 5.57-.4 4 4 0 0 1 .27 5.95l-1.42 1.43a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l1.42-1.42a6.06 6.06 0 0 0-.6-9.06z' fill='var(--background)'/></svg>
|
||||||
<script>
|
<!-- Mastodon --><svg id='shareViaMastodon' title='Share via Mastodon' type='button' class='button' width='300' height='300' version='1.1' viewBox='0 0 281.2 281.2' ><rect width='281.2' height='281.2' style='fill:var(--primary);'/><path d='m244.2 161.9c-3.181 16.37-28.49 34.28-57.56 37.75-15.16 1.809-30.08 3.471-46 2.741-26.03-1.192-46.56-6.212-46.56-6.212 0 2.534 0.1562 4.946 0.4688 7.202 3.384 25.69 25.47 27.22 46.39 27.94 21.12 0.7225 39.92-5.206 39.92-5.206l0.8675 19.09s-14.77 7.931-41.08 9.39c-14.51 0.7975-32.52-0.365-53.51-5.919-45.51-12.04-53.33-60.55-54.53-109.8-0.365-14.61-0.14-28.39-0.14-39.92 0-50.33 32.98-65.08 32.98-65.08 16.63-7.636 45.16-10.85 74.82-11.09h0.7288c29.66 0.2425 58.21 3.454 74.84 11.09 0 0 32.98 14.75 32.98 65.08 0 0 0.4138 37.13-4.599 62.92' fill='var(--background)'/><path d='m209.9 102.9v60.94h-24.14v-59.15c0-12.47-5.246-18.8-15.74-18.8-11.6 0-17.42 7.508-17.42 22.35v32.38h-24v-32.38c0-14.85-5.816-22.35-17.42-22.35-10.49 0-15.74 6.329-15.74 18.8v59.15h-24.14v-60.94c0-12.46 3.171-22.35 9.541-29.68 6.569-7.322 15.17-11.08 25.85-11.08 12.36 0 21.71 4.749 27.9 14.25l6.014 10.08 6.015-10.08c6.185-9.499 15.54-14.25 27.9-14.25 10.68 0 19.28 3.754 25.85 11.08 6.369 7.322 9.54 17.22 9.54 29.68' fill='var(--primary)'/></svg>
|
||||||
function Copy(text) {
|
|
||||||
var inputc = document.body.appendChild(document.createElement('input'));
|
|
||||||
inputc.value = window.location.href;
|
|
||||||
inputc.focus();
|
|
||||||
inputc.select();
|
|
||||||
document.execCommand('copy');
|
|
||||||
inputc.parentNode.removeChild(inputc);
|
|
||||||
alert('{% if lang == 'it' %}URL copiato{% else %}URL has been copied{% endif %}');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<svg title='{% if lang == 'it' %}Copia URL{% else %}Copy URL{% endif %}' onclick='Copy()' class='button' viewBox='0 0 24 24' ><path d='M13.29 9.29l-4 4a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4-4a1 1 0 0 0-1.42-1.42z' fill='var(--background)'/><path d='M12.28 17.4L11 18.67a4.2 4.2 0 0 1-5.58.4 4 4 0 0 1-.27-5.93l1.42-1.43a1 1 0 0 0 0-1.42 1 1 0 0 0-1.42 0l-1.27 1.28a6.15 6.15 0 0 0-.67 8.07 6.06 6.06 0 0 0 9.07.6l1.42-1.42a1 1 0 0 0-1.42-1.42z' fill='var(--background)'/><path d='M19.66 3.22a6.18 6.18 0 0 0-8.13.68L10.45 5a1.09 1.09 0 0 0-.17 1.61 1 1 0 0 0 1.42 0L13 5.3a4.17 4.17 0 0 1 5.57-.4 4 4 0 0 1 .27 5.95l-1.42 1.43a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l1.42-1.42a6.06 6.06 0 0 0-.6-9.06z' fill='var(--background)'/></svg>
|
|
||||||
<!-- Mastodon --><svg title='Share on Mastodon' onclick='share_on_mastodon();' class='button' width='300' height='300' version='1.1' viewBox='0 0 281.2 281.2' ><rect width='281.2' height='281.2' style='fill:var(--primary);'/><path d='m244.2 161.9c-3.181 16.37-28.49 34.28-57.56 37.75-15.16 1.809-30.08 3.471-46 2.741-26.03-1.192-46.56-6.212-46.56-6.212 0 2.534 0.1562 4.946 0.4688 7.202 3.384 25.69 25.47 27.22 46.39 27.94 21.12 0.7225 39.92-5.206 39.92-5.206l0.8675 19.09s-14.77 7.931-41.08 9.39c-14.51 0.7975-32.52-0.365-53.51-5.919-45.51-12.04-53.33-60.55-54.53-109.8-0.365-14.61-0.14-28.39-0.14-39.92 0-50.33 32.98-65.08 32.98-65.08 16.63-7.636 45.16-10.85 74.82-11.09h0.7288c29.66 0.2425 58.21 3.454 74.84 11.09 0 0 32.98 14.75 32.98 65.08 0 0 0.4138 37.13-4.599 62.92' fill='var(--background)'/><path d='m209.9 102.9v60.94h-24.14v-59.15c0-12.47-5.246-18.8-15.74-18.8-11.6 0-17.42 7.508-17.42 22.35v32.38h-24v-32.38c0-14.85-5.816-22.35-17.42-22.35-10.49 0-15.74 6.329-15.74 18.8v59.15h-24.14v-60.94c0-12.46 3.171-22.35 9.541-29.68 6.569-7.322 15.17-11.08 25.85-11.08 12.36 0 21.71 4.749 27.9 14.25l6.014 10.08 6.015-10.08c6.185-9.499 15.54-14.25 27.9-14.25 10.68 0 19.28 3.754 25.85 11.08 6.369 7.322 9.54 17.22 9.54 29.68' fill='var(--primary)'/></svg>
|
|
||||||
<script>
|
|
||||||
function share_on_mastodon() {
|
|
||||||
var default_url = localStorage['mastodon_instance'];
|
|
||||||
|
|
||||||
if (!default_url)
|
|
||||||
default_url = 'https://';
|
|
||||||
|
|
||||||
var instance = prompt('Enter your instance’s address: (for example mastodon.uno)', default_url);
|
|
||||||
if (instance) {
|
|
||||||
if ( !instance.startsWith('https://') && !instance.startsWith('http://') )
|
|
||||||
instance = 'https://' + instance;
|
|
||||||
var url = window.location.href;
|
|
||||||
var title = document.getElementsByTagName('title')[0].innerHTML;
|
|
||||||
if ( !instance.endsWith('/') )
|
|
||||||
instance = instance + '/';
|
|
||||||
localStorage['mastodon_instance'] = instance;
|
|
||||||
var author = '@tommi@mastodon.uno';
|
|
||||||
mastodon_url = instance + 'share?text=' + encodeURIComponent(title + '\n\n' + url + '\n\n' + author);
|
|
||||||
window.open(mastodon_url, '_blank');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<!-- Pocket --><a href='https://getpocket.com/save?url={{ encoded_absolute_url }}&title={{ title | url_encode }}'>
|
<!-- Pocket --><a href='https://getpocket.com/save?url={{ encoded_absolute_url }}&title={{ title | url_encode }}'>
|
||||||
<svg class='button' width='24' height='24' viewBox='0 0 24 24'><path fill-rule='evenodd' clip-rule='evenodd' fill='var(--background)' d='M0.9999,10.6312 L0.9999,4.0682 C0.9999,2.9302 1.9309,2.0002 3.0679,2.0002 L20.9329,2.0002 C22.0699,2.0002 22.9999,2.9302 22.9999,4.0682 L22.9999,10.6312 L22.9999,10.6432 C22.9999,16.7182 18.0749,21.6432 11.9999,21.6432 C5.9249,21.6432 0.9999,16.7182 0.9999,10.6432 L0.9999,10.6312 Z M12.0151,12.0203514 L7.86472144,8.02991037 C7.26754166,7.4557433 6.31797743,7.47439879 5.74381037,8.07157856 C5.1696433,8.66875834 5.18829879,9.61832257 5.78547856,10.1924896 L10.9754786,15.1824896 C11.556135,15.7407701 12.474065,15.7407701 13.0547214,15.1824896 L18.2447214,10.1924896 C18.8419012,9.61832257 18.8605567,8.66875834 18.2863896,8.07157856 C17.7122226,7.47439879 16.7626583,7.4557433 16.1654786,8.02991037 L12.0151,12.0203514 Z'></path></svg>
|
<svg class='button' width='24' height='24' viewBox='0 0 24 24'><path fill-rule='evenodd' clip-rule='evenodd' fill='var(--background)' d='M0.9999,10.6312 L0.9999,4.0682 C0.9999,2.9302 1.9309,2.0002 3.0679,2.0002 L20.9329,2.0002 C22.0699,2.0002 22.9999,2.9302 22.9999,4.0682 L22.9999,10.6312 L22.9999,10.6432 C22.9999,16.7182 18.0749,21.6432 11.9999,21.6432 C5.9249,21.6432 0.9999,16.7182 0.9999,10.6432 L0.9999,10.6312 Z M12.0151,12.0203514 L7.86472144,8.02991037 C7.26754166,7.4557433 6.31797743,7.47439879 5.74381037,8.07157856 C5.1696433,8.66875834 5.18829879,9.61832257 5.78547856,10.1924896 L10.9754786,15.1824896 C11.556135,15.7407701 12.474065,15.7407701 13.0547214,15.1824896 L18.2447214,10.1924896 C18.8419012,9.61832257 18.8605567,8.66875834 18.2863896,8.07157856 C17.7122226,7.47439879 16.7626583,7.4557433 16.1654786,8.02991037 L12.0151,12.0203514 Z'></path></svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
<div class='tool'>
|
||||||
|
<a id='scrollButton' href='#' aria-label='scroll to top' title='scroll to top'>
|
||||||
|
<svg class='button' width='32' height='32' version='1.1' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<path d='m10 27v-11c-10 0-10-5-5-10 4.2-4.2 8.5-6 11-6 2.5-0.046 6.8 1.8 11 6 5 5 5 10-5 10v11c0 6.7-12 6.7-12 0z'/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
{% if alternates %}
|
||||||
|
<label for='langtoggle' title='language selector' class='button'>🌍</label>
|
||||||
|
<input type='checkbox' id='langtoggle'>
|
||||||
|
<div class='lang-list'>
|
||||||
|
{% for alternate in alternates %}
|
||||||
|
<a class='button' rel='alternate' href='{{ alternate.url }}' hreflang='{{ alternate.data.lang }}' title='{{ alternate.data.title }}'>{% case alternate.data.lang %}{% when 'it' %}🇮🇹{% when 'fr' %}🇫🇷{% when 'en' %}🇬🇧{% else %}{{ alternate.data.lang }}{% endcase %}</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<a class='button' href='/search' title='search'>🔎</a>
|
||||||
|
<label id='nav-toggle-button' for='menutoggle' aria-label='toggle-menu' class='button'><span></span></label>
|
||||||
|
</div>
|
|
@ -0,0 +1,82 @@
|
||||||
|
let i = 0;
|
||||||
|
let pageUrl = window.location.href;
|
||||||
|
let show = 'block';
|
||||||
|
let hide = 'none';
|
||||||
|
scrollButton = document.getElementById('scrollButton');
|
||||||
|
copyUrlButton = document.getElementById('copyUrl');
|
||||||
|
let pageHeight = document.body.scrollHeight;
|
||||||
|
|
||||||
|
function scrollButtonBehavior() {
|
||||||
|
scrollButton.href = 'javascript:void(0);';
|
||||||
|
if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
|
||||||
|
scrollButton.title='scroll to top';
|
||||||
|
scrollButton.setAttribute('aria-label', 'scroll to top');
|
||||||
|
scrollButton.classList.remove('scrollToBottom');
|
||||||
|
} else {
|
||||||
|
scrollButton.title='scroll to bottom';
|
||||||
|
scrollButton.setAttribute('aria-label', 'scroll to bottom');
|
||||||
|
scrollButton.classList.add('scrollToBottom');
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function nowScroll() {
|
||||||
|
if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
} else {
|
||||||
|
window.scrollTo(0, pageHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function tocBehavior() {
|
||||||
|
let toc = document.getElementById('toc');
|
||||||
|
if (toc) {
|
||||||
|
let footer = document.getElementsByTagName('footer')[0];
|
||||||
|
let footerHeight = footer.offsetHeight;
|
||||||
|
let tocHeight = pageHeight - footerHeight - 100; // adding some random pixels to consider margins etc.
|
||||||
|
if (document.body.scrollTop > tocHeight || document.documentElement.scrollTop > tocHeight) {
|
||||||
|
toc.style.left = '-19vw';
|
||||||
|
} else {
|
||||||
|
toc.style.left = '4vw';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
scrollButtonBehavior();
|
||||||
|
window.onscroll = function() {
|
||||||
|
tocBehavior();
|
||||||
|
scrollButtonBehavior();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function copyUrl() {
|
||||||
|
navigator.clipboard.writeText(pageUrl);
|
||||||
|
console.log('copied %s to clipboard', pageUrl);
|
||||||
|
copyUrlButton.style.background = 'var(--green)';
|
||||||
|
}
|
||||||
|
|
||||||
|
function shareViaMastodon() {
|
||||||
|
let defaultUrl = localStorage['instanceUrl'];
|
||||||
|
console.log(defaultUrl);
|
||||||
|
let instanceUrl= prompt('Enter the address of your server:', defaultUrl);
|
||||||
|
localStorage['instanceUrl'] = instanceUrl;
|
||||||
|
if ( !instanceUrl.startsWith('https://') && !instanceUrl.startsWith('http://') ) {
|
||||||
|
instanceUrl = 'https://' + instanceUrl;
|
||||||
|
}
|
||||||
|
if ( !instanceUrl.endsWith('/') ) {
|
||||||
|
instanceUrl += '/';
|
||||||
|
}
|
||||||
|
let author = '@tommi@pan.rent';
|
||||||
|
let shareUrl = instanceUrl + 'share?text=' + encodeURIComponent(pageUrl + '\n\nby ' + author);
|
||||||
|
window.open(shareUrl, '_blank');
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
if (copyUrlButton) {
|
||||||
|
copyUrlButton.addEventListener('click', copyUrl);
|
||||||
|
};
|
||||||
|
if (document.getElementById('shareViaMastodon')) {
|
||||||
|
document.getElementById('shareViaMastodon').addEventListener('click', shareViaMastodon);
|
||||||
|
};
|
||||||
|
scrollButton.addEventListener('click', nowScroll);
|
||||||
|
});
|
|
@ -9,14 +9,11 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% render 'head.html', date: date, updated: updated, title: title, description: description, primary: primary, lang: lang, alternates: alternates, site: site, url: page.url, layout: layout, image: image %}
|
{% render 'head.html', runMode: eleventy.env.runMode, latex: latex, date: date, updated: updated, title: title, description: description, primary: primary, lang: lang, alternates: alternates, accounts: accounts, site: site, url: page.url, layout: layout, isNote: isNote, isPost: isPost, tommi: tommi, image: image %}
|
||||||
{% capture source %}{{ site.source }}/src/branch/main{{ page.inputPath | replace: './', '/' }}{% endcapture %}
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<a id='scrollbutton' class='tool' href='#' aria-label='scroll to top' title='scroll to top'>
|
|
||||||
<svg class='button' viewBox='0 0 24 24' style='background:var(--background)' aria-hidden='true'><path d='M18 15a1 1 0 0 1-.64-.23L12 10.29l-5.37 4.32a1 1 0 0 1-1.41-.15 1 1 0 0 1 .15-1.41l6-4.83a1 1 0 0 1 1.27 0l6 5a1 1 0 0 1 .13 1.41A1 1 0 0 1 18 15z' fill='var(--text)'/></svg>
|
{% render 'nav.liquid', lang: lang, site.title: site.title %}
|
||||||
</a>
|
|
||||||
{% render 'nav.html', lang: lang, alternates: alternates, site: site %}
|
|
||||||
|
|
||||||
{% if tags contains 'draft' or tags contains 'wip' %}
|
{% if tags contains 'draft' or tags contains 'wip' %}
|
||||||
{% render 'draft.html', lang: lang, title: title, source: source %}
|
{% render 'draft.html', lang: lang, title: title, source: source %}
|
||||||
|
@ -27,22 +24,13 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
{% render 'footer.html', lang: lang %}
|
|
||||||
|
|
||||||
<script type='text/javascript'>
|
<div class='row'>
|
||||||
scrollbutton = document.getElementById('scrollbutton');
|
{% render 'footer.html', lang: lang %}
|
||||||
window.onscroll = function() {scroll()};
|
</div>
|
||||||
function scroll() {
|
|
||||||
if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
|
{% render 'toolbar.liquid', lang: lang, alternates: alternates, url: page.url %}
|
||||||
scrollbutton.href='#';
|
|
||||||
scrollbutton.title='scroll to top';
|
<script src='/index.js' type='text/javascript'></script>
|
||||||
scrollbutton.setAttribute('aria-label', 'scroll to top');
|
|
||||||
} else {
|
|
||||||
scrollbutton.href='#0';
|
|
||||||
scrollbutton.title='scroll to bottom';
|
|
||||||
scrollbutton.setAttribute('aria-label', 'scroll to bottom');
|
|
||||||
};
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
25
package.json
|
@ -3,30 +3,25 @@
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Quit Social Media",
|
"description": "Quit Social Media",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"watch:sass": "sass --watch --style=compressed styles:www",
|
"start": "ELEVENTY_ENV=development eleventy --serve --watch --incremental",
|
||||||
"build:sass": "sass --style=compressed styles/:www",
|
"build": "ELEVENTY_ENV=production eleventy",
|
||||||
"watch:eleventy": "ELEVENTY_ENV=development eleventy --serve --watch",
|
"debug": "DEBUG=Eleventy* npm start --dry-run",
|
||||||
"build:eleventy": "ELEVENTY_ENV=production eleventy",
|
|
||||||
"start": "npm-run-all build:sass --parallel watch:*",
|
|
||||||
"build": "npm-run-all build:*",
|
|
||||||
"debug": "DEBUG=Eleventy* npm start",
|
|
||||||
"clean": "del-cli dist"
|
"clean": "del-cli dist"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://codeberg.org/tommi/quitsocialmedia.club.git"
|
"url": "git+https://gitmi.dev/tommi/quitsocialmedia.club.git"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://codeberg.org/tommi/quitsocialmedia.club/issues"
|
"url": "https://github.com/xplosionmind/quitsocialmedia.club/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://quitsocialmedia.club",
|
"homepage": "https://quitsocialmedia.club",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@11ty/eleventy": "^1.0.1",
|
"@11ty/eleventy": "^2.0.1",
|
||||||
"@11ty/eleventy-img": "^2.0.0",
|
"@11ty/eleventy-img": "^2.0.0",
|
||||||
"@11ty/eleventy-plugin-directory-output": "^1.0.1",
|
|
||||||
"@11ty/eleventy-plugin-rss": "^1.1.2",
|
"@11ty/eleventy-plugin-rss": "^1.1.2",
|
||||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
|
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
|
||||||
"@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
|
"@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
|
||||||
|
@ -53,7 +48,6 @@
|
||||||
"markdown-it-task-lists": "^2.1.1",
|
"markdown-it-task-lists": "^2.1.1",
|
||||||
"markdown-it-wikilinks": "^1.2.0",
|
"markdown-it-wikilinks": "^1.2.0",
|
||||||
"node-fetch": "^3.2.3",
|
"node-fetch": "^3.2.3",
|
||||||
"npm-run-all": "^4.1.5",
|
|
||||||
"relateurl": "^0.2.7",
|
"relateurl": "^0.2.7",
|
||||||
"run-all": "^1.0.1",
|
"run-all": "^1.0.1",
|
||||||
"sass": "^1.49.9",
|
"sass": "^1.49.9",
|
||||||
|
@ -61,7 +55,6 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@aloskutov/eleventy-plugin-external-links": "^1.4.0",
|
"@aloskutov/eleventy-plugin-external-links": "^1.4.0",
|
||||||
"@quasibit/eleventy-plugin-schema": "^1.9.1",
|
|
||||||
"@quasibit/eleventy-plugin-sitemap": "^2.1.5",
|
"@quasibit/eleventy-plugin-sitemap": "^2.1.5",
|
||||||
"a-sync-waterfall": "^1.0.1",
|
"a-sync-waterfall": "^1.0.1",
|
||||||
"abbrev": "^1.1.1",
|
"abbrev": "^1.1.1",
|
||||||
|
@ -136,7 +129,9 @@
|
||||||
"eleventy-plugin-embed-everything": "^1.14.0",
|
"eleventy-plugin-embed-everything": "^1.14.0",
|
||||||
"eleventy-plugin-embed-instagram": "^1.2.3",
|
"eleventy-plugin-embed-instagram": "^1.2.3",
|
||||||
"eleventy-plugin-find": "^1.0.0",
|
"eleventy-plugin-find": "^1.0.0",
|
||||||
|
"eleventy-plugin-purgecss": "^0.4.0",
|
||||||
"eleventy-plugin-toc": "^1.1.5",
|
"eleventy-plugin-toc": "^1.1.5",
|
||||||
|
"eleventy-sass": "^2.2.1",
|
||||||
"emoji-regex": "^10.0.1",
|
"emoji-regex": "^10.0.1",
|
||||||
"encodeurl": "^1.0.2",
|
"encodeurl": "^1.0.2",
|
||||||
"engine.io": "^6.1.3",
|
"engine.io": "^6.1.3",
|
||||||
|
@ -160,7 +155,6 @@
|
||||||
"fresh": "^0.5.2",
|
"fresh": "^0.5.2",
|
||||||
"fs-extra": "^10.0.1",
|
"fs-extra": "^10.0.1",
|
||||||
"fs.realpath": "^1.0.0",
|
"fs.realpath": "^1.0.0",
|
||||||
"fsevents": "^2.3.2",
|
|
||||||
"function-bind": "^1.1.1",
|
"function-bind": "^1.1.1",
|
||||||
"get-caller-file": "^2.0.5",
|
"get-caller-file": "^2.0.5",
|
||||||
"get-intrinsic": "^1.1.1",
|
"get-intrinsic": "^1.1.1",
|
||||||
|
@ -219,7 +213,7 @@
|
||||||
"kind-of": "^6.0.3",
|
"kind-of": "^6.0.3",
|
||||||
"limiter": "^2.1.0",
|
"limiter": "^2.1.0",
|
||||||
"linkify-it": "^3.0.3",
|
"linkify-it": "^3.0.3",
|
||||||
"liquidjs": "^9.36.0",
|
"liquidjs": "^10.7.0",
|
||||||
"localtunnel": "^2.0.2",
|
"localtunnel": "^2.0.2",
|
||||||
"locate-path": "^7.1.0",
|
"locate-path": "^7.1.0",
|
||||||
"lodash.isfinite": "^3.3.2",
|
"lodash.isfinite": "^3.3.2",
|
||||||
|
@ -255,6 +249,7 @@
|
||||||
"p-limit": "^4.0.0",
|
"p-limit": "^4.0.0",
|
||||||
"p-locate": "^6.0.0",
|
"p-locate": "^6.0.0",
|
||||||
"p-try": "^3.0.0",
|
"p-try": "^3.0.0",
|
||||||
|
"pagefind": "^0.12.0",
|
||||||
"parse-filepath": "^1.0.2",
|
"parse-filepath": "^1.0.2",
|
||||||
"parse-ms": "^3.0.0",
|
"parse-ms": "^3.0.0",
|
||||||
"parseqs": "^0.0.6",
|
"parseqs": "^0.0.6",
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
source: www
|
||||||
|
force_language: en
|
|
@ -14,7 +14,11 @@ toc: false
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='row'>
|
<div class='row'>
|
||||||
<section class='red box'>
|
{% render 'disclaimer-old.html', lang: lang %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='row'>
|
||||||
|
<section class='blue box'>
|
||||||
<h2 class='title'>WTF is this website?</h2>
|
<h2 class='title'>WTF is this website?</h2>
|
||||||
<p>
|
<p>
|
||||||
<b>Short answer</b>: a place where all the reasons why social media are harmful are listed and several resources to deepen knowledge on the topic are provided, together with valid solutions and alternatives.
|
<b>Short answer</b>: a place where all the reasons why social media are harmful are listed and several resources to deepen knowledge on the topic are provided, together with valid solutions and alternatives.
|
||||||
|
|
|
@ -23,7 +23,7 @@ As pointed out in the [about](/about) page, this website isn't meant to explain
|
||||||
- [What is RSS?](https://yewtu.be/6HNUqDL-pI8?quality=dash&dark_mode=true&player_style=youtube&subtitles=en%2Cit 'What is RSS?'), a YouTube <mark class='red'>video</mark>
|
- [What is RSS?](https://yewtu.be/6HNUqDL-pI8?quality=dash&dark_mode=true&player_style=youtube&subtitles=en%2Cit 'What is RSS?'), a YouTube <mark class='red'>video</mark>
|
||||||
- [What is RSS](https://www.digitaltrends.com/computing/what-is-an-rss-feed/ 'What is an RSS feed'), an article
|
- [What is RSS](https://www.digitaltrends.com/computing/what-is-an-rss-feed/ 'What is an RSS feed'), an article
|
||||||
- [RSS on Wikipedia](https://en.wikipedia.org/wiki/RSS 'RSS on Wikipedia') (or, even better, [Web feed](https://en.wikipedia.org/wiki/Web_feed 'Web feed on Wikipedia') on Wikipedia)
|
- [RSS on Wikipedia](https://en.wikipedia.org/wiki/RSS 'RSS on Wikipedia') (or, even better, [Web feed](https://en.wikipedia.org/wiki/Web_feed 'Web feed on Wikipedia') on Wikipedia)
|
||||||
- [It's Time for an RSS Revival](https://www.wired.com/story/rss-readers-feedly-inoreader-old-reader/ 'It's Time for an RSS Revival'), an article by [Brian Barrett](https://www.wired.com/author/brian-barrett/ 'Brian Barrett author page') on [WIRED](https://wired.com 'WIRED')
|
- [It's Time for an RSS Revival](https://www.wired.com/story/rss-readers-feedly-inoreader-old-reader/ 'It’s Time for an RSS Revival'), an article by [Brian Barrett](https://www.wired.com/author/brian-barrett/ 'Brian Barrett author page') on [WIRED](https://wired.com 'WIRED')
|
||||||
- [RSS before Social Media](https://yewtu.be/watch?v=0klgLsSxGsU&quality=dash&dark_mode=true&player_style=youtube&subtitles=en), a very interesting YouTube video to watch: it shows how before the diffusion of Social Media RSS really was the best way to stay updated.
|
- [RSS before Social Media](https://yewtu.be/watch?v=0klgLsSxGsU&quality=dash&dark_mode=true&player_style=youtube&subtitles=en), a very interesting YouTube video to watch: it shows how before the diffusion of Social Media RSS really was the best way to stay updated.
|
||||||
- RSS is fundamental in one field in particular: **podcasting**. Anyone who has a podcast publishes it in one place (a podcasting platform or a website) and all of the other podcasting platforms [get new episodes through its RSS feed](https://yewtu.be/TU5zc-u6dhY?t=159).
|
- RSS is fundamental in one field in particular: **podcasting**. Anyone who has a podcast publishes it in one place (a podcasting platform or a website) and all of the other podcasting platforms [get new episodes through its RSS feed](https://yewtu.be/TU5zc-u6dhY?t=159).
|
||||||
|
|
||||||
|
@ -33,8 +33,6 @@ It can happen that you end up sad and you miss how much Social Media allowed you
|
||||||
|
|
||||||
Tools like that are actually more than one, but the most famous and developed one is [RSS-Bridge](https://github.com/RSS-Bridge/rss-bridge 'RSS-Bridge on GitHub').
|
Tools like that are actually more than one, but the most famous and developed one is [RSS-Bridge](https://github.com/RSS-Bridge/rss-bridge 'RSS-Bridge on GitHub').
|
||||||
|
|
||||||
You are welcome to test and use the RSS-Bridge instance I host on my server by visiting <https://rss-bridge.tommi.space>. (mantaining and renting a server is no cheap matter. I am happy of offering my RSS-Bridge, nonetheless, if you started using it a lot, [a symbolic contribution](https://it.liberapay.com/tommi/donate 'Dona a Tommi su Liberapay') would mean a lot).
|
|
||||||
|
|
||||||
### Proxies
|
### Proxies
|
||||||
|
|
||||||
Most of the time, if you do not need to follow someone or something and you do not care about missing about her/his/its posts, you can use websites which allow you to view the main Social Media from a different interface, without needing to log in nor to be tracked by the original websites’ cookies.
|
Most of the time, if you do not need to follow someone or something and you do not care about missing about her/his/its posts, you can use websites which allow you to view the main Social Media from a different interface, without needing to log in nor to be tracked by the original websites’ cookies.
|
||||||
|
|
|
@ -15,7 +15,11 @@ toc: false
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='red box row'>
|
<div class='row'>
|
||||||
|
{% render 'disclaimer-old.html', lang: lang %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='blue box row'>
|
||||||
<h2 class='title'>Qu’est ce que ce site!?</h2>
|
<h2 class='title'>Qu’est ce que ce site!?</h2>
|
||||||
<p>
|
<p>
|
||||||
<b>Version courte</b>: un lieu listant les problémes liés aux réseaux sociaux ainsi que des alternatives possibles.
|
<b>Version courte</b>: un lieu listant les problémes liés aux réseaux sociaux ainsi que des alternatives possibles.
|
||||||
|
|
|
@ -13,9 +13,9 @@ lang: en
|
||||||
<div class='vertical flex'>
|
<div class='vertical flex'>
|
||||||
<h1>Quit Social Media</h1>
|
<h1>Quit Social Media</h1>
|
||||||
<div class='flex'>
|
<div class='flex'>
|
||||||
<a class='written blue button' hreflang='it' lang='it' href='/it/home' title='Homepage in italiano'>Italiano</a>
|
<a class='button' hreflang='it' lang='it' href='/it/home' title='Homepage in italiano'>Italiano</a>
|
||||||
<a class='written blue button' hreflang='fr' lang='fr' href='/fr/home' title='Homepage en Français'>Français</a>
|
<a class='button' hreflang='fr' lang='fr' href='/fr/home' title='Homepage en Français'>Français</a>
|
||||||
<a class='written blue button' href='/home' title='English homepage'>English</a>
|
<a class='button' href='/home' title='English homepage'>English</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
---
|
---
|
||||||
title: Guarda
|
title: Guarda
|
||||||
|
permalink: /guarda/
|
||||||
description: Invece di leggere, potresti preferire alcuni documentari o conferenze sui Social Media.
|
description: Invece di leggere, potresti preferire alcuni documentari o conferenze sui Social Media.
|
||||||
ref: watch
|
ref: watch
|
||||||
---
|
---
|
||||||
|
|
|
@ -14,7 +14,11 @@ description: Tutte le ragioni per cui i <em>Social Media</em>, per come li conos
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='red box row'>
|
<div class='row'>
|
||||||
|
{% render 'disclaimer-old.html', lang: lang %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='blue box row'>
|
||||||
<h2 class='title'>Cosa cavolo è questo sito?</h2>
|
<h2 class='title'>Cosa cavolo è questo sito?</h2>
|
||||||
<p>
|
<p>
|
||||||
<b>Risposta breve</b>: un luogo in cui sono esposte tutte le ragioni per cui i Social Media sono un gran problema, con diverse risorse che ne spiegano il perché, insieme a valide soluzioni e alternative.
|
<b>Risposta breve</b>: un luogo in cui sono esposte tutte le ragioni per cui i Social Media sono un gran problema, con diverse risorse che ne spiegano il perché, insieme a valide soluzioni e alternative.
|
||||||
|
|
|
@ -4,6 +4,7 @@ permalink: /info/
|
||||||
redirect_from: [/about-it/,/it/about/,/informazioni/,/it/l00/,/it/l0/,/it/level-0/,/it/level0/,/it/l-0/,/it/l-00/,/it/level00/,/it/level-00/]
|
redirect_from: [/about-it/,/it/about/,/informazioni/,/it/l00/,/it/l0/,/it/level-0/,/it/level0/,/it/l-0/,/it/l-00/,/it/level00/,/it/level-00/]
|
||||||
layout: page
|
layout: page
|
||||||
description: 'Cos’è <cite>quitsocialmedia.club</cite>, come e perché è nato ed il suo fine'
|
description: 'Cos’è <cite>quitsocialmedia.club</cite>, come e perché è nato ed il suo fine'
|
||||||
|
ref: about
|
||||||
---
|
---
|
||||||
Sono Tommi, ho creato questo sito. Saltiamo la parte su di me, che si può leggere sul mio [sito web](https://tommi.space/about-it 'Tommi').
|
Sono Tommi, ho creato questo sito. Saltiamo la parte su di me, che si può leggere sul mio [sito web](https://tommi.space/about-it 'Tommi').
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,7 @@ Non dovresti fare di corsa (anche perché probabilmente nemmeno vuoi): non elimi
|
||||||
Prima di arrivarci, se ci arriverai, è importante seguire <u>un percorso di <strong>consapevolezza</strong></u>.
|
Prima di arrivarci, se ci arriverai, è importante seguire <u>un percorso di <strong>consapevolezza</strong></u>.
|
||||||
|
|
||||||
<div class='blue box'>
|
<div class='blue box'>
|
||||||
Poiché si può agire a diversi livelli, in un anelito verso l'<a href='https://tommi.space/internet-freedom' target='_blank' title='“Internet Freedom” in Tommi's notes'><cite>Internet Freedom</cite></a>, ho trasformato questo percorso in un giochino: dal <a href='/it/l00'>Livello 0</a> al <a href='/it/l1000'>Livello 1000</a>.
|
Poiché si può agire a diversi livelli, in un anelito verso l'<a href='https://tommi.space/internet-freedom' target='_blank' title='“Internet Freedom” in Tommi’s notes'><cite>Internet Freedom</cite></a>, ho trasformato questo percorso in un giochino: dal <a href='/it/l00'>Livello 0</a> al <a href='/it/l1000'>Livello 1000</a>.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
- **Livello 0**: scopri più [informazioni](/info 'Info - quitsocialmedia.club') su questo sito e, soprattutto, il suo [il suo fine](/info#fine 'Fine - quitsocialmedia.club')
|
- **Livello 0**: scopri più [informazioni](/info 'Info - quitsocialmedia.club') su questo sito e, soprattutto, il suo [il suo fine](/info#fine 'Fine - quitsocialmedia.club')
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
title: '“Veloce riassunto„'
|
title: '“Veloce riassunto„'
|
||||||
permalink: /veloce
|
permalink: /veloce/
|
||||||
ref: quick
|
ref: quick
|
||||||
description: Non hai né il tempo né la voglia di leggere tutto ciò che è scritto qui e vuoi solo conoscerne i punti fondamentali? Questa è la pagina giusta per te.
|
description: Non hai né il tempo né la voglia di leggere tutto ciò che è scritto qui e vuoi solo conoscerne i punti fondamentali? Questa è la pagina giusta per te.
|
||||||
layout: page
|
layout: page
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
permalink: '/{{ page.fileSlug | replace: " ", "-" }}/',
|
|
||||||
lang: 'en',
|
lang: 'en',
|
||||||
layout: 'page',
|
layout: 'page',
|
||||||
image: '/logo/qsm.png',
|
image: '/logo/qsm.png',
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
---
|
||||||
|
title: Search
|
||||||
|
description: look for anything in quitsocialmedia.club
|
||||||
|
type: SearchResultsPage
|
||||||
|
sitemap:
|
||||||
|
changefreq: never
|
||||||
|
priority: 0.4
|
||||||
|
eleventyExcludeFromCollections: true
|
||||||
|
---
|
||||||
|
<link href='/_pagefind/pagefind-ui.css' rel='stylesheet'>
|
||||||
|
<script src='/_pagefind/pagefind-ui.js' type='text/javascript'></script>
|
||||||
|
<div id='search'></div>
|
||||||
|
<script>
|
||||||
|
window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
|
new PagefindUI({ element: '#search' });
|
||||||
|
});
|
||||||
|
</script>
|
|
@ -0,0 +1,4 @@
|
||||||
|
module.exports = {
|
||||||
|
content: ['./www/**/*.html'], // Content files referencing CSS classes
|
||||||
|
css: ['./www/style.css'] // CSS files to be purged in-place
|
||||||
|
};
|
|
@ -1,13 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'EB Garamond';
|
|
||||||
font-weight: 100 900;
|
|
||||||
font-display: swap;
|
|
||||||
src: url('/fonts/eb-garamond.woff2') format('woff2');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'EB Garamond';
|
|
||||||
font-weight: 100 900;
|
|
||||||
font-display: swap;
|
|
||||||
font-style: italic;
|
|
||||||
src: url('/fonts/eb-garamond-italic.woff2') format('woff2');
|
|
||||||
}
|
|
|
@ -1,7 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'Inter';
|
|
||||||
font-weight: 100 900;
|
|
||||||
font-display: swap;
|
|
||||||
font-style: oblique 0deg 10deg;
|
|
||||||
src: url('/fonts/inter.woff2') format('woff2');
|
|
||||||
}
|
|
|
@ -0,0 +1,139 @@
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
text-shadow: var(--text-shadow);
|
||||||
|
color: transparent !important;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
text-shadow: none;
|
||||||
|
color: var(--link) !important;
|
||||||
|
}
|
||||||
|
&[href*='mailto' i] {
|
||||||
|
&::before {
|
||||||
|
content: ' ✉️ ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href^='/stampa' i],
|
||||||
|
&[href^='/press' i] {
|
||||||
|
&::before {
|
||||||
|
content: '📰 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href$='/about' i],
|
||||||
|
&[href*='tommi.space' i] {
|
||||||
|
&::before {
|
||||||
|
content: '🙋🏻♂️ ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='development' i] {
|
||||||
|
&::before {
|
||||||
|
content: '💻 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='link' i],
|
||||||
|
&[href*='resources' i] {
|
||||||
|
&::before {
|
||||||
|
content: '📚 ';
|
||||||
|
/* content: '🔗 '; */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='/path' i],
|
||||||
|
&[href*='/percorso' i] {
|
||||||
|
&::before {
|
||||||
|
content: '🧭 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='/why' i],
|
||||||
|
&[href*='/perch%C3%A9' i],
|
||||||
|
&[href*='/perche' i] {
|
||||||
|
&::after {
|
||||||
|
content: '❓';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='l10n' i] {
|
||||||
|
&::before {
|
||||||
|
content: '🌎 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='learn' i] {
|
||||||
|
&::before {
|
||||||
|
content: '📖 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='/solution' i],
|
||||||
|
&[href*='/soluz' i] {
|
||||||
|
&::before {
|
||||||
|
content: '💡 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='/quick' i],
|
||||||
|
&[href*='/veloce' i] {
|
||||||
|
&::before {
|
||||||
|
content: '⏰ ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='/watch' i],
|
||||||
|
&[href*='/guarda' i] {
|
||||||
|
&::before {
|
||||||
|
content: '🍿 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='/note' i],
|
||||||
|
&[href='/roadmap' i] {
|
||||||
|
&::before {
|
||||||
|
content: '📝 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='/listen' i],
|
||||||
|
&[href*='/ascolta' i] {
|
||||||
|
&::before {
|
||||||
|
content: '🎧 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href='/delete' i],
|
||||||
|
&[href='/quit' i] {
|
||||||
|
&::before {
|
||||||
|
content: '❌ ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href^='/contributors' i],
|
||||||
|
&[href^='/it/cont' i],
|
||||||
|
&[href='/partecipanti' i] {
|
||||||
|
&::before {
|
||||||
|
content: '🧑🏽💻 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='liberapay' i],
|
||||||
|
&[href*='/contribute' i],
|
||||||
|
&[href*='/contribuisci' i] {
|
||||||
|
&::before {
|
||||||
|
content: '🎁 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href*='keys.openpgp.org' i] {
|
||||||
|
&::before {
|
||||||
|
content: '🔑 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href='/share' i],
|
||||||
|
&[href='/condividi' i] {
|
||||||
|
&::before {
|
||||||
|
content: '📢 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href^='/ob' i],
|
||||||
|
&[href*='/faq' i] {
|
||||||
|
&::before {
|
||||||
|
content: '🤔 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[href='/ma' i],
|
||||||
|
&[href='/but' i] {
|
||||||
|
&::before {
|
||||||
|
content: '🤨 ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,25 +1,10 @@
|
||||||
$tiny: .2rem;
|
@use 'parts/root';
|
||||||
$small: .5rem;
|
|
||||||
$regular-less: .9rem;
|
|
||||||
$regular: 1.1rem;
|
|
||||||
$regular-more: 1.3rem;
|
|
||||||
$regular-more-em: 1.3em;
|
|
||||||
$big: 1.6rem;
|
|
||||||
$bigger: 1.8rem;
|
|
||||||
$twice: 2.2rem;
|
|
||||||
$height: 3.1rem;
|
|
||||||
$mastodon: 4rem;
|
|
||||||
$radius-s: .4rem;
|
|
||||||
$radius-m: .6rem;
|
|
||||||
$radius-l: 1rem;
|
|
||||||
$trans: .5s ease-out;
|
|
||||||
$quicktrans: .1s ease-in-out;
|
|
||||||
|
|
||||||
header {
|
header {
|
||||||
height: $mastodon;
|
height: root.$mega;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
* {
|
* {
|
||||||
border-radius: $radius-m;
|
border-radius: root.$radius-m;
|
||||||
list-style-type: none !important;
|
list-style-type: none !important;
|
||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
|
@ -30,22 +15,18 @@ header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 1.5vw;
|
top: 1.5vw;
|
||||||
left: 5vw;
|
left: 5vw;
|
||||||
a {
|
padding: 0 root.$regular-less;
|
||||||
display: inline-block;
|
line-height: root.$height;
|
||||||
padding: 0 $regular-less;
|
font-size: root.$bigger;
|
||||||
line-height: $height;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
color: var(--background);
|
|
||||||
background: var(--primary);
|
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
margin: auto;
|
color: #FFF;
|
||||||
|
background: var(--red);
|
||||||
|
border: 3px solid #FFF;
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: none !important;
|
color: var(--primary);
|
||||||
}
|
background: var(--background);
|
||||||
&:active {
|
border-color: var(--primary);
|
||||||
box-shadow: var(--inner-shadow);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -54,7 +35,7 @@ header {
|
||||||
top: 1.5vw;
|
top: 1.5vw;
|
||||||
right: 6vw;
|
right: 6vw;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding: 0 .8rem;
|
padding: 0 root.$small;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
* {
|
* {
|
||||||
|
@ -69,10 +50,10 @@ header {
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
color: var(--text) !important;
|
color: var(--text) !important;
|
||||||
line-height: $height;
|
line-height: root.$height;
|
||||||
height: $height;
|
height: root.$height;
|
||||||
padding: 0 .8rem;
|
padding: 0 root.$small;
|
||||||
font-size: $regular-more;
|
font-size: root.$regular-more;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
&::after {
|
&::after {
|
||||||
content: none;
|
content: none;
|
||||||
|
@ -94,84 +75,63 @@ header {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lang-list {
|
#nav-toggle-button {
|
||||||
top: 3.7rem;
|
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
|
||||||
background: var(--background);
|
|
||||||
#langtoggle:checked + & {
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-mobile {
|
|
||||||
display: none;
|
|
||||||
height: $height;
|
|
||||||
width: $height;
|
|
||||||
position: fixed;
|
|
||||||
bottom: calc(3vh + .5rem);
|
|
||||||
right: calc(6vw + 3.5rem);
|
|
||||||
box-shadow: var(--button-shadow);
|
|
||||||
background: var(--background);
|
|
||||||
z-index: 6;
|
|
||||||
span {
|
span {
|
||||||
top: 1.4rem;
|
top: 1.4rem;
|
||||||
left: .7rem;
|
left: root.$tiny;
|
||||||
}
|
}
|
||||||
span,
|
span,
|
||||||
span::before,
|
span::before,
|
||||||
span::after {
|
span::after {
|
||||||
height: 4px;
|
height: root.$tiny;
|
||||||
width: 1.7rem;
|
width: 1.7rem;
|
||||||
background: var(--text);
|
background: var(--text);
|
||||||
position: absolute;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
content: '';
|
content: '';
|
||||||
box-shadow: var(--little-shadow);
|
box-shadow: var(--little-shadow);
|
||||||
border-radius: $radius-s !important;
|
border-radius: root.$radius-s !important;
|
||||||
transition: $quicktrans;
|
|
||||||
}
|
}
|
||||||
span::before {
|
span::before {
|
||||||
top: .65rem;
|
bottom: .6rem;
|
||||||
}
|
}
|
||||||
span::after {
|
span::after {
|
||||||
bottom: .65rem;
|
top: .6rem - root.$tiny;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown {
|
|
||||||
height: $height;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 950px) {
|
@media only screen and (max-width: 950px) {
|
||||||
#home {
|
#home {
|
||||||
right: 0;
|
right: 5vw;
|
||||||
left: 0;
|
|
||||||
top: 2vh;
|
top: 2vh;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.nav {
|
header {
|
||||||
margin: 3vh;
|
margin: 3vh;
|
||||||
}
|
}
|
||||||
.nav-mobile {
|
#nav-toggle-button {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
#nav menu {
|
menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 11rem;
|
width: 13rem;
|
||||||
bottom: calc(3vh + 4.5rem);
|
bottom: calc(3vh + 4.5rem);
|
||||||
right: -14rem;
|
right: -14rem;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
|
border: 3px solid var(--text);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
li {
|
|
||||||
clear: both;
|
|
||||||
a {
|
|
||||||
line-height: 2.5rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
}
|
}
|
||||||
|
#nav menu li,
|
||||||
|
#nav ul li {
|
||||||
|
float: none;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
a,
|
||||||
|
label {
|
||||||
|
padding: 0 root.$regular-more;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -180,22 +140,4 @@ header {
|
||||||
& ~ menu {
|
& ~ menu {
|
||||||
right: calc(4vw + .3rem);
|
right: calc(4vw + .3rem);
|
||||||
}
|
}
|
||||||
& ~ .nav-mobile {
|
|
||||||
box-shadow: var(--inner-little-shadow);
|
|
||||||
span {
|
|
||||||
background: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
top: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
&::before {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
|
@ -0,0 +1,303 @@
|
||||||
|
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
||||||
|
|
||||||
|
/*
|
||||||
|
Document
|
||||||
|
========
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
Use a better box model (opinionated).
|
||||||
|
*/
|
||||||
|
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Use a more readable tab size (opinionated).
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
tab-size: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
1. Correct the line height in all browsers.
|
||||||
|
2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Sections
|
||||||
|
========
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
Remove the margin in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ******* ALREADY MODIFIED IN _root ******
|
||||||
|
body {
|
||||||
|
font-family:
|
||||||
|
system-ui,
|
||||||
|
-apple-system,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
Helvetica,
|
||||||
|
Arial,
|
||||||
|
sans-serif,
|
||||||
|
'Apple Color Emoji',
|
||||||
|
'Segoe UI Emoji';
|
||||||
|
}
|
||||||
|
******* ****** */
|
||||||
|
|
||||||
|
/*
|
||||||
|
Grouping content
|
||||||
|
================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
1. Add the correct height in Firefox.
|
||||||
|
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
height: 0; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Text-level semantics
|
||||||
|
====================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Add the correct font weight in Edge and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ******* ALREADY ADDED IN style.scss *******
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
******* ******* */
|
||||||
|
|
||||||
|
/**
|
||||||
|
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
||||||
|
2. Correct the odd 'em' font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ******* ALREADY MODIFIED IN style.scss *******
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp,
|
||||||
|
pre {
|
||||||
|
font-family:
|
||||||
|
ui-monospace,
|
||||||
|
SFMono-Regular,
|
||||||
|
Consolas,
|
||||||
|
'Liberation Mono',
|
||||||
|
Menlo,
|
||||||
|
monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
******* ******* */
|
||||||
|
|
||||||
|
/**
|
||||||
|
Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Tabular data
|
||||||
|
============
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||||
|
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
text-indent: 0; /* 1 */
|
||||||
|
/*border-color: inherit; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Forms
|
||||||
|
=====
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
1. Change the font styles in all browsers.
|
||||||
|
2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Remove the inheritance of text transform in Edge and Firefox.
|
||||||
|
1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type='button'],
|
||||||
|
[type='reset'],
|
||||||
|
[type='submit'] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Remove the additional ':invalid' styles in Firefox.
|
||||||
|
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
|
||||||
|
*/
|
||||||
|
|
||||||
|
:-moz-ui-invalid {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Add the correct vertical alignment in Chrome and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Correct the cursor style of increment and decrement buttons in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-inner-spin-button,
|
||||||
|
::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
2. Correct the outline style in Safari. (it is styled wrongly in Firefox)
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type='search'] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
2. Change font properties to 'inherit' in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Interactive
|
||||||
|
===========
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
Add the correct display in Chrome and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
|
@ -0,0 +1,43 @@
|
||||||
|
:root {
|
||||||
|
color-scheme: light dark;
|
||||||
|
|
||||||
|
--black-ish: #222;
|
||||||
|
--white-ish: #F1FAEE;
|
||||||
|
--dark-grey: #555;
|
||||||
|
--light-grey: #AAA;
|
||||||
|
--yellow: #FCC920;
|
||||||
|
--dark-yellow: #D0A00E;
|
||||||
|
--light-blue: #A8DADC;
|
||||||
|
--blue: #1D3557;
|
||||||
|
--red: #E63946;
|
||||||
|
--green: #20CE88;
|
||||||
|
--razzmatazz: #EC0868;
|
||||||
|
--purple: #592176;
|
||||||
|
|
||||||
|
--invert: grayscale(.5) invert(.9) brightness(.95) hue-rotate(180deg);
|
||||||
|
--invert-dark: grayscale(.1) invert(1) brightness(1.1) hue-rotate(180deg);
|
||||||
|
|
||||||
|
--font-sans: Inter, -apple-system, 'Helvetica Neue', 'Nimbus Sans', Arial, system-ui, sans-serif;
|
||||||
|
--font-serif: 'EB Garamond', Garamond, 'Simoncini Garamond', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
|
||||||
|
--font-mono: 'Ubuntu Mono', ui-monospace, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
$tiny: .2rem;
|
||||||
|
$small: .5rem;
|
||||||
|
$regular-less: 1rem;
|
||||||
|
$regular: 1.1rem;
|
||||||
|
$regular-more: 1.3rem;
|
||||||
|
$big: 1.6rem;
|
||||||
|
$bigger: 1.8rem;
|
||||||
|
$twice: 2.2rem;
|
||||||
|
$height: 3.1rem;
|
||||||
|
$mega: 4rem;
|
||||||
|
|
||||||
|
$radius-s: .4rem;
|
||||||
|
$radius-m: .6rem;
|
||||||
|
$radius-l: 1rem;
|
||||||
|
|
||||||
|
$border: 5px;
|
||||||
|
|
||||||
|
$trans: .5s ease-out;
|
||||||
|
$trans-quick: .1s ease-in-out;
|
|
@ -0,0 +1,7 @@
|
||||||
|
.pagefind-ui {
|
||||||
|
--pagefind-ui-primary: var(--primary);
|
||||||
|
--pagefind-ui-text: var(--text);
|
||||||
|
--pagefind-ui-background: var(--background);
|
||||||
|
--pagefind-ui-border: var(--text);
|
||||||
|
--pagefind-ui-tag: var(--secondary);
|
||||||
|
}
|
|
@ -1,7 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'Ubuntu Mono';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-display: swap;
|
|
||||||
src: url('/fonts/ubuntu-mono.woff2') format('woff2');
|
|
||||||
}
|
|
|
@ -1,46 +1,12 @@
|
||||||
|
@use 'parts/normalize';
|
||||||
|
@use 'parts/root';
|
||||||
@use 'parts/nav';
|
@use 'parts/nav';
|
||||||
@use 'parts/inter';
|
@use 'parts/links-emojis';
|
||||||
@use 'parts/ubuntu-mono';
|
@use 'parts/search';
|
||||||
|
|
||||||
$tiny: .2rem;
|
|
||||||
$small: .5rem;
|
|
||||||
$regular-less: .9rem;
|
|
||||||
$regular: 1.1rem;
|
|
||||||
$regular-more: 1.3rem;
|
|
||||||
$regular-more-em: 1.3em;
|
|
||||||
$big: 1.6rem;
|
|
||||||
$bigger: 1.8rem;
|
|
||||||
$twice: 2.2rem;
|
|
||||||
$height: 3.1rem;
|
|
||||||
$mastodon: 4.4rem;
|
|
||||||
$radius-s: .4rem;
|
|
||||||
$radius-m: .6rem;
|
|
||||||
$radius-l: 1rem;
|
|
||||||
$trans: .5s;
|
|
||||||
$quicktrans: .2s;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--black-ish: #222;
|
|
||||||
--white-ish: #F1FAEE;
|
|
||||||
--dark-grey: #555;
|
|
||||||
--light-grey: #AAA;
|
|
||||||
--yellow: #FCC920;
|
|
||||||
--dark-yellow: #D0A00E;
|
|
||||||
--light-blue: #A8DADC;
|
|
||||||
--blue: #1D3557;
|
|
||||||
--red: #E63946;
|
|
||||||
--green: #20CE88;
|
|
||||||
--razzmatazz: #EC0868;
|
|
||||||
--purple: #592176;
|
|
||||||
|
|
||||||
color-scheme: dark light;
|
|
||||||
|
|
||||||
--title-text-shadow-hover: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
cursor: url(/red-cursor.svg) 16 16, crosshair;
|
cursor: url(/cursor.svg) 16 16, crosshair;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
|
@ -53,17 +19,17 @@ html {
|
||||||
--internal-link: var(--primary);
|
--internal-link: var(--primary);
|
||||||
--grey: var(--light-grey);
|
--grey: var(--light-grey);
|
||||||
--other-grey: var(--dark-grey);
|
--other-grey: var(--dark-grey);
|
||||||
--shadow: 5px 5px 20px #10204055, -5px -5px 20px #FFFFFFEF;
|
--shadow: 5px 5px 20px #10204055, -5px -5px 20px #FFF;
|
||||||
--little-shadow: 2px 2px 3px #10204055, -2px -2px 3px #FFF6;
|
--little-shadow: 2px 2px 3px #10204055, -2px -2px 3px #FFF6;
|
||||||
--button-shadow: 3px 3px 8px #10204055, -3px -3px 8px #FFF6;
|
--button-shadow: inset 2px 2px 4px #FFFC, inset -2px -2px 4px #0006;
|
||||||
--inner-shadow: inset 3px 3px 5px #10204055, inset -3px -3px 5px #FFF3;
|
--inner-shadow: inset 3px 3px 5px #0003, inset -3px -3px 5px #FFF2;
|
||||||
--inner-little-shadow: inset 2px 2px 3px #10204022, inset -2px -2px 3px #FFF3;
|
--inner-little-shadow: inset 2px 2px 3px #10204022, inset -2px -2px 3px #FFF3;
|
||||||
--header-shadow: 5px 5px 15px #10204033, -5px -5px 15px #FFFF;
|
--header-shadow: 5px 5px 15px #10204033, -5px -5px 15px #FFFF;
|
||||||
|
|
||||||
--text-shadow: 0px 0px 0px var(--link), 1px 1px 1px var(--grey);
|
--text-shadow: 0px 0px 0px var(--link), 1px 1px 1px var(--grey);
|
||||||
--title-text-shadow: -3px -3px 0px var(--text), -3px -2px 1px var(--grey), -2px -3px 1px var(--grey), -2px -2px 0px var(--grey), -1px -1px 0px var(--grey), 0px 0px 0px var(--grey);
|
--title-text-shadow: -3px -3px 0px var(--text), -3px -2px 1px var(--grey), -2px -3px 1px var(--grey), -2px -2px 0px var(--grey), -1px -1px 0px var(--grey), 0px 0px 0px var(--grey);
|
||||||
|
|
||||||
transition: $trans;
|
transition: root.$trans;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* DARK THEME */
|
/* DARK THEME */
|
||||||
|
@ -78,26 +44,24 @@ html {
|
||||||
--internal-link: var(--primary);
|
--internal-link: var(--primary);
|
||||||
--grey: var(--dark-grey);
|
--grey: var(--dark-grey);
|
||||||
--other-grey: var(--light-grey);
|
--other-grey: var(--light-grey);
|
||||||
--shadow: 5px 5px 20px #102040BB, -5px -5px 20px #FFFFFF11;
|
--shadow: 5px 5px 20px #0007, -5px -5px 20px #FFF2;
|
||||||
--little-shadow: 2px 2px 3px #102040EF, -2px -2px 3px #FFFFFF22;
|
--little-shadow: 2px 2px 3px #102040EF, -2px -2px 3px #FFFFFF22;
|
||||||
--button-shadow: 3px 3px 8px #102040AA, -3px -3px 8px #FFFFFF11;
|
--button-shadow: inset 2px 2px 4px #FFF8, inset -2px -2px 4px #0008;
|
||||||
--inner-shadow: inset 3px 3px 5px #10204088, inset -3px -3px 5px #FFF2;
|
|
||||||
--inner-little-shadow: inset 2px 2px 3px #102040AA, inset -2px -2px 3px #FFF1;
|
|
||||||
--header-shadow: 5px 5px 15px #102040DD, -5px -5px 15px #FFF2;
|
--header-shadow: 5px 5px 15px #102040DD, -5px -5px 15px #FFF2;
|
||||||
|
|
||||||
transition: $trans;
|
transition: root.$trans;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font: $regular Inter, -apple-system, Helvetica, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
font: root.$regular Inter, -apple-system, Helvetica, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||||
margin: 0;
|
margin: 0;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
transition: $trans, transform $quicktrans;
|
transition: root.$trans, transform root.$trans-quick;
|
||||||
}
|
}
|
||||||
|
|
||||||
#menutoggle,
|
#menutoggle,
|
||||||
|
@ -134,7 +98,7 @@ mark {
|
||||||
color: var(--background);
|
color: var(--background);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
border-radius: $radius-s
|
border-radius: root.$radius-s
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
|
@ -147,12 +111,44 @@ mark {
|
||||||
bottom: 3vw;
|
bottom: 3vw;
|
||||||
right: 4vw;
|
right: 4vw;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
.button {
|
.button {
|
||||||
padding: .3rem;
|
width: root.$height;
|
||||||
|
height: root.$height;
|
||||||
|
line-height: root.$height;
|
||||||
|
padding: 0 root.$small;
|
||||||
|
margin: root.$tiny;
|
||||||
|
color: var(--text);
|
||||||
|
fill: var(--text);
|
||||||
|
background: var(--background) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#scrollbutton[href='#0'] {
|
#nav-toggle-button {
|
||||||
|
&:active,
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
box-shadow: var(--inner-shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lang-list {
|
||||||
|
display: none;
|
||||||
|
bottom: root.$height + 2*root.$tiny;
|
||||||
|
right: root.$height + 2*root.$tiny;
|
||||||
|
position: absolute;
|
||||||
|
flex-direction: column;
|
||||||
|
#langtoggle:checked + & {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#menutoggle,
|
||||||
|
#langtoggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollToBottom {
|
||||||
.button {
|
.button {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
box-shadow: inset -2px -2px 4px #FFF8, inset 2px 2px 4px #0008;
|
box-shadow: inset -2px -2px 4px #FFF8, inset 2px 2px 4px #0008;
|
||||||
|
@ -183,149 +179,7 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p,
|
|
||||||
li,
|
|
||||||
article li,
|
|
||||||
.toc {
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
transition: $quicktrans;
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
text-shadow: var(--text-shadow);
|
|
||||||
color: transparent !important;
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
text-shadow: none;
|
|
||||||
color: var(--link) !important;
|
|
||||||
}
|
|
||||||
&[href*='mailto' i] {
|
|
||||||
&::before {
|
|
||||||
content: ' ✉️ ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href^='/stampa' i],
|
|
||||||
&[href^='/press' i] {
|
|
||||||
&::before {
|
|
||||||
content: '📰 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href$='/about' i],
|
|
||||||
&[href*='tommi.space' i] {
|
|
||||||
&::before {
|
|
||||||
content: '🙋🏻♂️ ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='development' i] {
|
|
||||||
&::before {
|
|
||||||
content: '💻 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='link' i],
|
|
||||||
&[href*='resources' i] {
|
|
||||||
&::before {
|
|
||||||
content: '📚 ';
|
|
||||||
/* content: '🔗 '; */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='/path' i],
|
|
||||||
&[href*='/percorso' i] {
|
|
||||||
&::before {
|
|
||||||
content: '🧭 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='/why' i],
|
|
||||||
&[href*='/perch%C3%A9' i],
|
|
||||||
&[href*='/perche' i] {
|
|
||||||
&::after {
|
|
||||||
content: '❓';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='l10n' i] {
|
|
||||||
&::before {
|
|
||||||
content: '🌎 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='learn' i] {
|
|
||||||
&::before {
|
|
||||||
content: '📖 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='/solution' i],
|
|
||||||
&[href*='/soluz' i] {
|
|
||||||
&::before {
|
|
||||||
content: '💡 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='/quick' i],
|
|
||||||
&[href*='/veloce' i] {
|
|
||||||
&::before {
|
|
||||||
content: '⏰ ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='/watch' i],
|
|
||||||
&[href*='/guarda' i] {
|
|
||||||
&::before {
|
|
||||||
content: '🍿 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='/note' i],
|
|
||||||
&[href='/roadmap' i] {
|
|
||||||
&::before {
|
|
||||||
content: '📝 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='/listen' i],
|
|
||||||
&[href*='/ascolta' i] {
|
|
||||||
&::before {
|
|
||||||
content: '🎧 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href='/delete' i],
|
|
||||||
&[href='/quit' i] {
|
|
||||||
&::before {
|
|
||||||
content: '❌ ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href^='/contributors' i],
|
|
||||||
&[href^='/it/cont' i],
|
|
||||||
&[href='/partecipanti' i] {
|
|
||||||
&::before {
|
|
||||||
content: '🧑🏽💻 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='liberapay' i],
|
|
||||||
&[href*='/contribute' i],
|
|
||||||
&[href*='/contribuisci' i] {
|
|
||||||
&::before {
|
|
||||||
content: '🎁 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href*='keys.openpgp.org' i] {
|
|
||||||
&::before {
|
|
||||||
content: '🔑 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href='/share' i],
|
|
||||||
&[href='/condividi' i] {
|
|
||||||
&::before {
|
|
||||||
content: '📢 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href^='/ob' i],
|
|
||||||
&[href*='/faq' i] {
|
|
||||||
&::before {
|
|
||||||
content: '🤔 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&[href='/ma' i],
|
|
||||||
&[href='/but' i] {
|
|
||||||
&::before {
|
|
||||||
content: '🤨 ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -345,7 +199,7 @@ button,
|
||||||
.aa-suggestion,
|
.aa-suggestion,
|
||||||
.embed-container,
|
.embed-container,
|
||||||
label {
|
label {
|
||||||
cursor: url(/red-cursor-hover.svg) 16 16, pointer;
|
cursor: url(/cursor-hover.svg) 16 16, pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -359,8 +213,6 @@ label {
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin-bottom: $small;
|
|
||||||
line-height: $regular-more-em;
|
|
||||||
li {
|
li {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
list-style-type: '– ';
|
list-style-type: '– ';
|
||||||
|
@ -374,20 +226,13 @@ li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.task-list-item-checkbox {
|
|
||||||
position: relative;
|
|
||||||
right: $regular-less;
|
|
||||||
width: $regular;
|
|
||||||
height: $regular;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post {
|
.post {
|
||||||
& > p:first-of-type::first-letter {
|
& > p:first-of-type::first-letter {
|
||||||
initial-letter: 4;
|
initial-letter: 4;
|
||||||
-webkit-initial-letter: 4;
|
-webkit-initial-letter: 4;
|
||||||
}
|
}
|
||||||
.embed-container {
|
.embed-container {
|
||||||
border-radius: $radius-l;
|
border-radius: root.$radius-l;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -399,9 +244,9 @@ hr {
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
height: $small;
|
height: root.$small;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
border-radius: $radius-s;
|
border-radius: root.$radius-s;
|
||||||
box-shadow: var(--little-shadow);
|
box-shadow: var(--little-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -412,8 +257,9 @@ hr {
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
h1 {
|
h1 {
|
||||||
font-size: $mastodon;
|
font-size: root.$mega;
|
||||||
margin: $regular-less;
|
margin: root.$regular-less;
|
||||||
|
margin-top: root.$height;
|
||||||
text-shadow: var(--header-shadow);
|
text-shadow: var(--header-shadow);
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
|
@ -423,7 +269,7 @@ hr {
|
||||||
}
|
}
|
||||||
|
|
||||||
.toc {
|
.toc {
|
||||||
margin: 0 10% $regular;
|
margin: 0 10% root.$regular;
|
||||||
li {
|
li {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
li {
|
li {
|
||||||
|
@ -445,9 +291,9 @@ code {
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
margin: $bigger 0;
|
margin: root.$bigger 0;
|
||||||
padding: $regular-more;
|
padding: root.$regular-more;
|
||||||
border-radius: $radius-m;
|
border-radius: root.$radius-m;
|
||||||
box-shadow: var(--inner-shadow);
|
box-shadow: var(--inner-shadow);
|
||||||
background: var(--black-ish);
|
background: var(--black-ish);
|
||||||
code {
|
code {
|
||||||
|
@ -458,7 +304,7 @@ pre {
|
||||||
code {
|
code {
|
||||||
padding: 2px 9px;
|
padding: 2px 9px;
|
||||||
box-shadow: var(--inner-little-shadow);
|
box-shadow: var(--inner-little-shadow);
|
||||||
border-radius: $radius-s;
|
border-radius: root.$radius-s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cite {
|
.cite {
|
||||||
|
@ -484,7 +330,7 @@ tr {
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
padding: $small $regular-less;
|
padding: root.$small root.$regular-less;
|
||||||
|
|
||||||
/* making the header sticky */
|
/* making the header sticky */
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
@ -494,15 +340,15 @@ th {
|
||||||
|
|
||||||
td {
|
td {
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
padding: $tiny $small;
|
padding: root.$tiny root.$small;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
max-height: 90vh;
|
max-height: 90vh;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
margin: $height 2vw;
|
margin: root.$height 2vw;
|
||||||
border: 3px solid var(--grey);
|
border: 3px solid var(--grey);
|
||||||
border-radius: $radius-l;
|
border-radius: root.$radius-l;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -518,12 +364,12 @@ table {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: $regular;
|
bottom: root.$regular;
|
||||||
}
|
}
|
||||||
.button {
|
.button {
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
margin: $tiny $regular-less;
|
margin: root.$tiny root.$regular-less;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -581,11 +427,11 @@ img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: $radius-l;
|
border-radius: root.$radius-l;
|
||||||
}
|
}
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
margin: $height auto;
|
margin: root.$height auto;
|
||||||
img {
|
img {
|
||||||
max-height: 90vh;
|
max-height: 90vh;
|
||||||
border: solid 1px black;
|
border: solid 1px black;
|
||||||
|
@ -595,9 +441,9 @@ figure {
|
||||||
}
|
}
|
||||||
|
|
||||||
figcaption {
|
figcaption {
|
||||||
font: $regular 'EB Garamond', Garamond, 'Simoncini Garamond', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
font: root.$regular 'EB Garamond', Garamond, 'Simoncini Garamond', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||||
line-height: $regular;
|
line-height: root.$regular;
|
||||||
margin-top: $regular-less;
|
margin-top: root.$regular-less;
|
||||||
color: var(--other-grey);
|
color: var(--other-grey);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -627,8 +473,8 @@ b {
|
||||||
} */
|
} */
|
||||||
|
|
||||||
article {
|
article {
|
||||||
font-size: $regular-more;
|
font-size: root.$regular-more;
|
||||||
padding: $twice 10% $mastodon;
|
padding: root.$twice 10% root.$mega;
|
||||||
}
|
}
|
||||||
|
|
||||||
time {
|
time {
|
||||||
|
@ -650,23 +496,23 @@ h1, h2, h3, h4, h5 {
|
||||||
.title {
|
.title {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: .1em;
|
letter-spacing: .1em;
|
||||||
font-size: $twice;
|
font-size: root.$twice;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
margin: $regular auto;
|
margin: root.$regular auto;
|
||||||
text-shadow: var(--title-text-shadow);
|
text-shadow: var(--title-text-shadow);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: $quicktrans;
|
transition: root.$trans-quick;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: $height;
|
font-size: root.$height;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: $bigger;
|
font-size: root.$bigger;
|
||||||
.anchor {
|
.anchor {
|
||||||
&::after {
|
&::after {
|
||||||
content: '#';
|
content: '#';
|
||||||
|
@ -685,19 +531,19 @@ h3 {
|
||||||
.box {
|
.box {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
padding: $big;
|
padding: root.$big;
|
||||||
margin-top: $bigger;
|
margin-top: root.$bigger;
|
||||||
margin-bottom: $bigger;
|
margin-bottom: root.$bigger;
|
||||||
border-radius: $radius-l;
|
border-radius: root.$radius-l;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
&.post-preview {
|
&.post-preview {
|
||||||
margin-top: $regular-less;
|
margin-top: root.$regular-less;
|
||||||
margin-bottom: $regular-less;
|
margin-bottom: root.$regular-less;
|
||||||
max-height: unset;
|
max-height: unset;
|
||||||
padding: $small;
|
padding: root.$small;
|
||||||
.date {
|
.date {
|
||||||
margin: 0 $regular;
|
margin: 0 root.$regular;
|
||||||
}
|
}
|
||||||
.button {
|
.button {
|
||||||
transform: scale(.7);
|
transform: scale(.7);
|
||||||
|
@ -716,14 +562,14 @@ h3 {
|
||||||
.box,
|
.box,
|
||||||
.stuff {
|
.stuff {
|
||||||
p {
|
p {
|
||||||
margin: $regular 10%;
|
margin: root.$regular 10%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.stuff {
|
.stuff {
|
||||||
padding: 4vw 2vw;
|
padding: 4vw 2vw;
|
||||||
margin: $height 2vw;
|
margin: root.$height 2vw;
|
||||||
border-radius: $radius-l;
|
border-radius: root.$radius-l;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
.column {
|
.column {
|
||||||
padding: 0 2vw;
|
padding: 0 2vw;
|
||||||
|
@ -739,8 +585,8 @@ h3 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.last-modified {
|
.last-modified {
|
||||||
margin: 0 auto $twice;
|
margin: 0 auto root.$twice;
|
||||||
font-size: $regular-less;
|
font-size: root.$regular-less;
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -750,7 +596,7 @@ footer {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 96%;
|
width: 96%;
|
||||||
padding: 2vw;
|
padding: 2vw;
|
||||||
border-radius: $radius-l;
|
border-radius: root.$radius-l;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
* {
|
* {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -772,19 +618,19 @@ footer {
|
||||||
|
|
||||||
@media only screen and (max-width: 950px) {
|
@media only screen and (max-width: 950px) {
|
||||||
.page-header h1 {
|
.page-header h1 {
|
||||||
font-size: $height;
|
font-size: root.$height;
|
||||||
}
|
}
|
||||||
.box {
|
.box {
|
||||||
margin: $bigger 3%;
|
margin: root.$bigger 3%;
|
||||||
}
|
}
|
||||||
.stuff-logo {
|
.stuff-logo {
|
||||||
margin-top: $bigger
|
margin-top: root.$bigger
|
||||||
}
|
}
|
||||||
.margin {
|
.margin {
|
||||||
margin: 0 10%;
|
margin: 0 10%;
|
||||||
}
|
}
|
||||||
article {
|
article {
|
||||||
padding: $twice 7% $mastodon;
|
padding: root.$twice 7% root.$mega;
|
||||||
}
|
}
|
||||||
.tool {
|
.tool {
|
||||||
bottom: 3vh
|
bottom: 3vh
|
||||||
|
@ -794,7 +640,7 @@ footer {
|
||||||
audio {
|
audio {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
border-radius: $radius-m;
|
border-radius: root.$radius-m;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controlBar {
|
.controlBar {
|
||||||
|
@ -803,21 +649,21 @@ audio {
|
||||||
|
|
||||||
svg.button,
|
svg.button,
|
||||||
img.button {
|
img.button {
|
||||||
height: $height;
|
height: root.$height;
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: $tiny;
|
margin: root.$tiny;
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
button,
|
|
||||||
.button {
|
.button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: $small $regular;
|
background: var(--background);
|
||||||
font-size: $bigger;
|
padding: root.$small root.$regular;
|
||||||
|
font-size: root.$bigger;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
border-radius: $radius-m;
|
border-radius: root.$radius-m;
|
||||||
box-shadow: var(--button-shadow);
|
box-shadow: var(--button-shadow);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
hyphens: none;
|
hyphens: none;
|
||||||
|
@ -833,19 +679,19 @@ button,
|
||||||
.written {
|
.written {
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
color: var(--background);
|
color: var(--background);
|
||||||
margin: $big;
|
margin: root.$big;
|
||||||
}
|
}
|
||||||
|
|
||||||
.smaller {
|
.smaller {
|
||||||
padding: $tiny $regular-less;
|
padding: root.$tiny root.$regular-less;
|
||||||
margin: $small;
|
margin: root.$small;
|
||||||
font-size: $big;
|
font-size: root.$big;
|
||||||
border-radius: $radius-s;
|
border-radius: root.$radius-s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sharing {
|
.sharing {
|
||||||
.button {
|
.button {
|
||||||
margin-right: $small;
|
margin-right: root.$small;
|
||||||
padding: .4rem;
|
padding: .4rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Before Width: | Height: | Size: 295 B After Width: | Height: | Size: 295 B |
Before Width: | Height: | Size: 295 B After Width: | Height: | Size: 295 B |