massive refactor

This commit is contained in:
Tommi 2023-04-12 21:58:52 +02:00
parent 44fddf9548
commit 5ae99dd478
Signed by: tommi
GPG Key ID: B045212E435C7A80
50 changed files with 2932 additions and 11001 deletions

View File

@ -1,37 +1,47 @@
const fs = require('fs');
const miniHtml = require('html-minifier');
const _ = require('lodash');
const pluginRss = require('@11ty/eleventy-plugin-rss');
const { EleventyRenderPlugin } = require('@11ty/eleventy');
// Markdown //
function wikilinkSlugifier(pageName) {
pageName = pageName.replace(/\s+/, '-');
pageName = slugify(pageName, {
remove: /'/g,
lower: true
});
return pageName
}
const markdownIt = require('markdown-it');
const md = markdownIt({
html: true,
fence: false
})
.disable('code')
.use(require('markdown-it-attrs'))
.use(require('markdown-it-anchor'))
.use(require('markdown-it-footnote'))
.use(require('markdown-it-sup'))
.use(require('markdown-it-sub'))
.use(require('markdown-it-ins'))
.use(require('markdown-it-mark'))
.use(require('markdown-it-task-lists'))
.use(require('markdown-it-container'), 'box')
.use(require('markdown-it-collapsible'))
.use(require('markdown-it-abbr'))
.use(require('markdown-it-mathjax3'));
html: true,
typographer: true
})
.use(require('markdown-it-wikilinks')({
uriSuffix: '',
makeAllLinksAbsolute: true,
class: 'wikilink',
postProcessPageName: wikilinkSlugifier
}))
.use(require('markdown-it-anchor'), {
permalink: require('markdown-it-anchor').permalink.headerLink(),
})
.use(require('markdown-it-footnote'))
.use(require('markdown-it-mark'))
.use(require('markdown-it-task-lists'))
.use(require('markdown-it-mathjax3'));
const { default: slugify } = require('slugify');
module.exports = function(eleventyConfig) {
// General //
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.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
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('index.js');
// 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('@aloskutov/eleventy-plugin-external-links'), {
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('@sardine/eleventy-plugin-tinysvg'), {
baseUrl: 'svg/'
@ -127,35 +143,30 @@ module.exports = function(eleventyConfig) {
eleventyConfig.addFilter('absoluteUrl', pluginRss.absoluteUrl);
eleventyConfig.addFilter('convertHtmlToAbsoluteUrls', pluginRss.convertHtmlToAbsoluteUrls);
// Minify output //
/*eleventyConfig.addTransform('miniHtml', function(content, outputPath) {
if( this.outputPath && this.outputPath.endsWith('.html') ) {
let minified = miniHtml.minify(content, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
minifyURLs: true
});
return minified;
}
return content;
});*/
// 404 //
eleventyConfig.setBrowserSyncConfig({
callbacks: {
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();
// Production-only //
if (process.env.ELEVENTY_ENV == 'production') {
// Minify output //
eleventyConfig.addTransform(require('html-minifier'), function(content, outputPath) {
if( this.outputPath && this.outputPath.endsWith('.html') ) {
let minified = require('html-minifier').minify(content, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
minifyURLs: true
});
return minified;
}
}
});
return content;
});
eleventyConfig.addPlugin(require('eleventy-plugin-purgecss'));
}
eleventyConfig.on('eleventy.after', () => {
const execSync = require('child_process').execSync;
execSync(`npx pagefind`, { encoding: 'utf-8' });
})
return {
dir: {

View File

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

6
.gitignore vendored
View File

@ -1,10 +1,4 @@
# Eleventy stuff
node_modules
dist
.env
cache
.cache
www
# Local Netlify folder
.netlify

View File

@ -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).
## 👾 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.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 602 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 576 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 524 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 642 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -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>, lautore 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 dinformations devrient être mis à jour. <a href='https://tommi.space'>Tommi</a>, lauteur 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>

View File

@ -1,7 +1,7 @@
<div class='one column row'>
<div class='banner red box'>
<h3>🚧 {% case lang %}{% when 'it' %}Lavori in corso{% when 'fr' %}Travail en cours{% else %}Work in progress{% endcase %} 🏗</h3>
{% case lang %}
<h3>🚧 {% case lang %}{% when 'it' %}Lavori in corso{% when 'fr' %}Travail en cours{% else %}Work in progress{% endcase %} 🏗</h3>
<p class='center'>{% case lang %}
{% when 'it' %}
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>!
@ -11,6 +11,6 @@
{% else %}
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>!
{% endcase %}
{% endcase %}</p>
</div>
</div>

View File

@ -10,7 +10,6 @@
<!-- Assets -->
<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'>
<!-- Favicon -->

View File

@ -1,13 +1,13 @@
<div class='one column row'>
<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>
{% case page.lang %}
<h3>🚧 {% case page.lang%}{% when 'it' %}Traduzione in corso{% when 'fr' %}Traduction en cours{% else %}Translation in progress{% endcase %} 🏗</h3>
<p class='center'>{% case page.lang %}
{% 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>
{% when 'fr' %}
Cette page-ci na 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 %}
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>

View File

@ -1,10 +1,7 @@
<header class='nav'>
<div id='home'>
<a href='{% case lang %}{% when 'it' %}/it/home{% when 'fr' %}/fr/home{% else %}/home{% endcase %}' title='home'>{{ site.title }}</a>
</div>
<header>
<a id='home' href='{% case lang %}{% when 'it' %}/it/home{% when 'fr' %}/fr/home{% else %}/home{% endcase %}' title='home'>Quit Social Media</a>
<nav id='nav'>
<input aria-hidden='true' type='checkbox' id='menutoggle'>
<label class='nav-mobile' for='menutoggle'><span></span></label>
<input type='checkbox' id='menutoggle'>
<menu>
<li><a href='/{{ lang }}/about' title='
{% case lang %}
@ -42,17 +39,6 @@
{% endcase %}
</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>
</header>

View File

@ -1,42 +1,8 @@
<section class='flex box'>
<h2 style='margin-right:1rem'>{% if lang == 'it' %}Condividi{% else %}Share{% endif %}</h2>
<div id='share' class='flex'>
<!-- Copy URL -->
<script>
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 instances 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>
<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>
<!-- 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>
<!-- 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>
</a>
@ -45,4 +11,4 @@
<!-- WhatsApp --><a href='whatsapp://send?text={{ encoded_absolute_url }}'><svg class='button' width='24' height='24' version='1.1' viewBox='-23 -21 18 18' ><path d='m-8.84-17.3c-1.37-1.37-3.19-2.13-5.13-2.13-4 0-7.26 3.25-7.26 7.26-5.45e-4 1.28 0.333 2.53 0.973 3.63l-1.03 3.76 3.85-1.01c1.06 0.578 2.25 0.883 3.47 0.883h0.0031c4 0 7.26-3.26 7.26-7.26 7.92e-4 -1.94-0.754-3.76-2.13-5.13zm-5.13 11.2h-0.0025c-1.28-0.104-1.95-0.0736-3.29-0.973l-2.29 0.599 0.61-2.22c-0.91-1.72-1.05-2.38-1.06-3.44 0.0012-3.32 2.71-6.03 6.03-6.03 1.61 5.47e-4 3.13 0.629 4.27 1.77 1.13 1.14 1.77 2.66 1.77 4.27-0.00144 3.32-2.71 6.03-6.03 6.03zm1.75-5.24c-0.692 0.209-0.44 0.964-0.772 1.06-0.181-0.091-1.04-0.366-1.74-0.982-0.616-0.49-1.14-0.836-1.3-1.6 0.336-0.356 1.17-0.611 1.01-1.23-0.259-0.561-0.656-0.988-0.977-1.17-1.24-0.846-1.66 0.897-1.66 1.52-0.0747 2.33 3.11 5.06 5.84 4.98 1.01-0.124 1.55-1.19 1.31-1.69-0.472-0.603-0.982-1.04-1.72-0.878z' fill='var(--background)'/></svg></a>
<!-- Telegram --><a href='https://t.me/share/url?url={{ encoded_absolute_url }}'><svg class='button' width='128' height='128' version='1.1' viewBox='0 0 128 128' ><path d='m20.1 54.1c26.3-11.5 43.9-19 52.7-22.7 25.1-10.4 30.3-12.3 33.7-12.3 0.748-0.0126 2.42 0.173 3.5 1.05 0.914 0.742 1.17 1.74 1.29 2.45 0.12 0.703 0.27 2.31 0.151 3.56-1.36 14.3-7.25 49-10.2 65-1.27 6.77-3.76 9.04-6.18 9.27-5.25 0.483-9.23-3.47-14.3-6.8-7.95-5.21-12.4-8.46-20.2-13.5-8.92-5.88-3.14-9.11 1.95-14.4 1.33-1.38 24.5-22.4 24.9-24.3 0.056-0.239 0.108-1.13-0.421-1.6-0.528-0.47-1.31-0.309-1.87-0.181-0.798 0.181-13.5 8.58-38.1 25.2-3.61 2.48-6.87 3.68-9.8 3.62-3.23-0.0697-9.43-1.82-14-3.32-5.66-1.84-10.2-2.81-9.77-5.94 0.204-1.63 2.45-3.29 6.72-4.99z' fill='var(--background)'/></svg></a>
</div>
</section>
</section>

18
includes/toolbar.liquid Normal file
View File

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

82
index.js Normal file
View File

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

View File

@ -9,14 +9,11 @@
{% endfor %}
{% 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 %}
{% capture source %}{{ site.source }}/src/branch/main{{ page.inputPath | replace: './', '/' }}{% endcapture %}
{% 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 %}
<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>
</a>
{% render 'nav.html', lang: lang, alternates: alternates, site: site %}
{% render 'nav.liquid', lang: lang, site.title: site.title %}
{% if tags contains 'draft' or tags contains 'wip' %}
{% render 'draft.html', lang: lang, title: title, source: source %}
@ -27,22 +24,13 @@
{% endif %}
{{ content }}
{% render 'footer.html', lang: lang %}
<script type='text/javascript'>
scrollbutton = document.getElementById('scrollbutton');
window.onscroll = function() {scroll()};
function scroll() {
if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
scrollbutton.href='#';
scrollbutton.title='scroll to top';
scrollbutton.setAttribute('aria-label', 'scroll to top');
} else {
scrollbutton.href='#0';
scrollbutton.title='scroll to bottom';
scrollbutton.setAttribute('aria-label', 'scroll to bottom');
};
}
</script>
<div class='row'>
{% render 'footer.html', lang: lang %}
</div>
{% render 'toolbar.liquid', lang: lang, alternates: alternates, url: page.url %}
<script src='/index.js' type='text/javascript'></script>
</body>
</html>

12424
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -3,30 +3,25 @@
"version": "1.0.0",
"description": "Quit Social Media",
"scripts": {
"watch:sass": "sass --watch --style=compressed styles:www",
"build:sass": "sass --style=compressed styles/:www",
"watch:eleventy": "ELEVENTY_ENV=development eleventy --serve --watch",
"build:eleventy": "ELEVENTY_ENV=production eleventy",
"start": "npm-run-all build:sass --parallel watch:*",
"build": "npm-run-all build:*",
"debug": "DEBUG=Eleventy* npm start",
"start": "ELEVENTY_ENV=development eleventy --serve --watch --incremental",
"build": "ELEVENTY_ENV=production eleventy",
"debug": "DEBUG=Eleventy* npm start --dry-run",
"clean": "del-cli dist"
},
"repository": {
"type": "git",
"url": "git+https://codeberg.org/tommi/quitsocialmedia.club.git"
"url": "git+https://gitmi.dev/tommi/quitsocialmedia.club.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://codeberg.org/tommi/quitsocialmedia.club/issues"
"url": "https://github.com/xplosionmind/quitsocialmedia.club/issues"
},
"homepage": "https://quitsocialmedia.club",
"devDependencies": {
"@11ty/eleventy": "^1.0.1",
"@11ty/eleventy": "^2.0.1",
"@11ty/eleventy-img": "^2.0.0",
"@11ty/eleventy-plugin-directory-output": "^1.0.1",
"@11ty/eleventy-plugin-rss": "^1.1.2",
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
"@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
@ -53,7 +48,6 @@
"markdown-it-task-lists": "^2.1.1",
"markdown-it-wikilinks": "^1.2.0",
"node-fetch": "^3.2.3",
"npm-run-all": "^4.1.5",
"relateurl": "^0.2.7",
"run-all": "^1.0.1",
"sass": "^1.49.9",
@ -61,7 +55,6 @@
},
"dependencies": {
"@aloskutov/eleventy-plugin-external-links": "^1.4.0",
"@quasibit/eleventy-plugin-schema": "^1.9.1",
"@quasibit/eleventy-plugin-sitemap": "^2.1.5",
"a-sync-waterfall": "^1.0.1",
"abbrev": "^1.1.1",
@ -136,7 +129,9 @@
"eleventy-plugin-embed-everything": "^1.14.0",
"eleventy-plugin-embed-instagram": "^1.2.3",
"eleventy-plugin-find": "^1.0.0",
"eleventy-plugin-purgecss": "^0.4.0",
"eleventy-plugin-toc": "^1.1.5",
"eleventy-sass": "^2.2.1",
"emoji-regex": "^10.0.1",
"encodeurl": "^1.0.2",
"engine.io": "^6.1.3",
@ -160,7 +155,6 @@
"fresh": "^0.5.2",
"fs-extra": "^10.0.1",
"fs.realpath": "^1.0.0",
"fsevents": "^2.3.2",
"function-bind": "^1.1.1",
"get-caller-file": "^2.0.5",
"get-intrinsic": "^1.1.1",
@ -219,7 +213,7 @@
"kind-of": "^6.0.3",
"limiter": "^2.1.0",
"linkify-it": "^3.0.3",
"liquidjs": "^9.36.0",
"liquidjs": "^10.7.0",
"localtunnel": "^2.0.2",
"locate-path": "^7.1.0",
"lodash.isfinite": "^3.3.2",
@ -255,6 +249,7 @@
"p-limit": "^4.0.0",
"p-locate": "^6.0.0",
"p-try": "^3.0.0",
"pagefind": "^0.12.0",
"parse-filepath": "^1.0.2",
"parse-ms": "^3.0.0",
"parseqs": "^0.0.6",

2
pagefind.yml Normal file
View File

@ -0,0 +1,2 @@
source: www
force_language: en

View File

@ -14,7 +14,11 @@ toc: false
</div>
<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>
<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.

View File

@ -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://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)
- [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/ 'Its 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 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').
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
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.

View File

@ -15,7 +15,11 @@ toc: false
</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'>Quest ce que ce site!?</h2>
<p>
<b>Version courte</b>: un lieu listant les problémes liés aux réseaux sociaux ainsi que des alternatives possibles.

View File

@ -13,9 +13,9 @@ lang: en
<div class='vertical flex'>
<h1>Quit Social Media</h1>
<div class='flex'>
<a class='written blue 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='written blue button' href='/home' title='English homepage'>English</a>
<a class='button' hreflang='it' lang='it' href='/it/home' title='Homepage in italiano'>Italiano</a>
<a class='button' hreflang='fr' lang='fr' href='/fr/home' title='Homepage en Français'>Français</a>
<a class='button' href='/home' title='English homepage'>English</a>
</div>
</div>
</body>

View File

@ -1,5 +1,6 @@
---
title: Guarda
permalink: /guarda/
description: Invece di leggere, potresti preferire alcuni documentari o conferenze sui Social Media.
ref: watch
---

View File

@ -14,7 +14,11 @@ description: Tutte le ragioni per cui i <em>Social Media</em>, per come li conos
</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>
<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.

View File

@ -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/]
layout: page
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').

View File

@ -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>.
<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 Tommis 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>
- **Livello 0**: scopri più [informazioni](/info 'Info - quitsocialmedia.club') su questo sito e, soprattutto, il suo [il suo fine](/info#fine 'Fine - quitsocialmedia.club')

View File

@ -1,6 +1,6 @@
---
title: '“Veloce riassunto„'
permalink: /veloce
permalink: /veloce/
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.
layout: page

View File

@ -1,5 +1,4 @@
module.exports = {
permalink: '/{{ page.fileSlug | replace: " ", "-" }}/',
lang: 'en',
layout: 'page',
image: '/logo/qsm.png',
@ -32,4 +31,4 @@ module.exports = {
return updated;
}
}
};
};

17
pages/search.html Normal file
View File

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

4
purgecss.config.js Normal file
View File

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

View File

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

View File

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

View File

@ -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: '🤨 ';
}
}
}
}

View File

@ -1,25 +1,10 @@
$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: 4rem;
$radius-s: .4rem;
$radius-m: .6rem;
$radius-l: 1rem;
$trans: .5s ease-out;
$quicktrans: .1s ease-in-out;
@use 'parts/root';
header {
height: $mastodon;
height: root.$mega;
text-transform: uppercase;
* {
border-radius: $radius-m;
border-radius: root.$radius-m;
list-style-type: none !important;
font-weight: 700 !important;
z-index: 9;
@ -30,22 +15,18 @@ header {
position: fixed;
top: 1.5vw;
left: 5vw;
a {
display: inline-block;
padding: 0 $regular-less;
line-height: $height;
font-size: 1.8rem;
color: var(--background);
background: var(--primary);
box-shadow: var(--shadow);
margin: auto;
&:hover,
&:focus {
box-shadow: none !important;
}
&:active {
box-shadow: var(--inner-shadow);
}
padding: 0 root.$regular-less;
line-height: root.$height;
font-size: root.$bigger;
box-shadow: var(--shadow);
color: #FFF;
background: var(--red);
border: 3px solid #FFF;
&:hover,
&:focus {
color: var(--primary);
background: var(--background);
border-color: var(--primary);
}
}
@ -54,7 +35,7 @@ header {
top: 1.5vw;
right: 6vw;
text-align: right;
padding: 0 .8rem;
padding: 0 root.$small;
box-shadow: var(--shadow);
background: var(--background);
* {
@ -69,10 +50,10 @@ header {
label {
display: block;
color: var(--text) !important;
line-height: $height;
height: $height;
padding: 0 .8rem;
font-size: $regular-more;
line-height: root.$height;
height: root.$height;
padding: 0 root.$small;
font-size: root.$regular-more;
font-weight: 700;
&::after {
content: none;
@ -94,84 +75,63 @@ header {
}
}
.lang-list {
top: 3.7rem;
#nav-toggle-button {
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 {
top: 1.4rem;
left: .7rem;
left: root.$tiny;
}
span,
span::before,
span::after {
height: 4px;
height: root.$tiny;
width: 1.7rem;
background: var(--text);
position: absolute;
position: relative;
display: block;
content: '';
box-shadow: var(--little-shadow);
border-radius: $radius-s !important;
transition: $quicktrans;
border-radius: root.$radius-s !important;
}
span::before {
top: .65rem;
bottom: .6rem;
}
span::after {
bottom: .65rem;
top: .6rem - root.$tiny;
}
}
.dropdown {
height: $height;
}
@media only screen and (max-width: 950px) {
#home {
right: 0;
left: 0;
right: 5vw;
top: 2vh;
text-align: center;
}
.nav {
header {
margin: 3vh;
}
.nav-mobile {
#nav-toggle-button {
display: block;
}
#nav menu {
menu {
position: fixed;
width: 11rem;
width: 13rem;
bottom: calc(3vh + 4.5rem);
right: -14rem;
background: var(--background);
box-shadow: var(--shadow);
z-index: 9;
border: 3px solid var(--text);
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 {
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);
}
}
}
}
}

View File

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