massive refactor
This commit is contained in:
parent
44fddf9548
commit
5ae99dd478
GPG Key ID:
B045212E435C7A80
125
.eleventy.js
125
.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 { 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: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
dist
|
||||
.env
|
||||
cache
|
||||
.cache
|
||||
www
|
||||
|
||||
# Local Netlify folder
|
||||
.netlify
|
||||
29
README.md
29
README.md
|
|
@ -1,9 +1,30 @@
|
|||
[](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/) [](https://github.com/humanetech-community/awesome-humane-tech)
|
||||
[](https://liberapay.com/tommi) [](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.
Binary file not shown.
Binary file not shown.
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.
|
|
@ -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='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>
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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 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 %}
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
{% 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>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
25
package.json
25
package.json
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
source: www
|
||||
force_language: en
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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/ '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 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.
|
||||
|
|
|
|||
|
|
@ -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'>Qu’est 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.
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Guarda
|
||||
permalink: /guarda/
|
||||
description: Invece di leggere, potresti preferire alcuni documentari o conferenze sui Social Media.
|
||||
ref: watch
|
||||
---
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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').
|
||||
|
||||
|
|
|
|||
|
|
@ -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 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>
|
||||
|
||||
- **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„'
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
$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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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/inter';
|
||||
@use 'parts/ubuntu-mono';
|
||||
|
||||
$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;
|
||||
}
|
||||
@use 'parts/links-emojis';
|
||||
@use 'parts/search';
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
cursor: url(/red-cursor.svg) 16 16, crosshair;
|
||||
cursor: url(/cursor.svg) 16 16, crosshair;
|
||||
background: var(--background);
|
||||
scroll-behavior: smooth;
|
||||
|
||||
|
|
@ -53,17 +19,17 @@ html {
|
|||
--internal-link: var(--primary);
|
||||
--grey: var(--light-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;
|
||||
--button-shadow: 3px 3px 8px #10204055, -3px -3px 8px #FFF6;
|
||||
--inner-shadow: inset 3px 3px 5px #10204055, inset -3px -3px 5px #FFF3;
|
||||
--button-shadow: inset 2px 2px 4px #FFFC, inset -2px -2px 4px #0006;
|
||||
--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;
|
||||
--header-shadow: 5px 5px 15px #10204033, -5px -5px 15px #FFFF;
|
||||
|
||||
--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);
|
||||
|
||||
transition: $trans;
|
||||
transition: root.$trans;
|
||||
}
|
||||
|
||||
/* DARK THEME */
|
||||
|
|
@ -78,26 +44,24 @@ html {
|
|||
--internal-link: var(--primary);
|
||||
--grey: var(--dark-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;
|
||||
--button-shadow: 3px 3px 8px #102040AA, -3px -3px 8px #FFFFFF11;
|
||||
--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;
|
||||
--button-shadow: inset 2px 2px 4px #FFF8, inset -2px -2px 4px #0008;
|
||||
--header-shadow: 5px 5px 15px #102040DD, -5px -5px 15px #FFF2;
|
||||
|
||||
transition: $trans;
|
||||
transition: root.$trans;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
* {
|
||||
transition: $trans, transform $quicktrans;
|
||||
transition: root.$trans, transform root.$trans-quick;
|
||||
}
|
||||
|
||||
#menutoggle,
|
||||
|
|
@ -134,7 +98,7 @@ mark {
|
|||
color: var(--background);
|
||||
font-weight: 500;
|
||||
padding: 0 4px;
|
||||
border-radius: $radius-s
|
||||
border-radius: root.$radius-s
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
|
@ -147,12 +111,44 @@ mark {
|
|||
bottom: 3vw;
|
||||
right: 4vw;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
.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 {
|
||||
transform: rotate(180deg);
|
||||
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 {
|
||||
display: flex;
|
||||
|
|
@ -345,7 +199,7 @@ button,
|
|||
.aa-suggestion,
|
||||
.embed-container,
|
||||
label {
|
||||
cursor: url(/red-cursor-hover.svg) 16 16, pointer;
|
||||
cursor: url(/cursor-hover.svg) 16 16, pointer;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -359,8 +213,6 @@ label {
|
|||
}
|
||||
|
||||
li {
|
||||
margin-bottom: $small;
|
||||
line-height: $regular-more-em;
|
||||
li {
|
||||
margin-bottom: 0;
|
||||
list-style-type: '– ';
|
||||
|
|
@ -374,20 +226,13 @@ li {
|
|||
list-style: none;
|
||||
}
|
||||
|
||||
.task-list-item-checkbox {
|
||||
position: relative;
|
||||
right: $regular-less;
|
||||
width: $regular;
|
||||
height: $regular;
|
||||
}
|
||||
|
||||
.post {
|
||||
& > p:first-of-type::first-letter {
|
||||
initial-letter: 4;
|
||||
-webkit-initial-letter: 4;
|
||||
}
|
||||
.embed-container {
|
||||
border-radius: $radius-l;
|
||||
border-radius: root.$radius-l;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
}
|
||||
|
|
@ -399,9 +244,9 @@ hr {
|
|||
|
||||
.line {
|
||||
width: 20%;
|
||||
height: $small;
|
||||
height: root.$small;
|
||||
margin: 0 auto;
|
||||
border-radius: $radius-s;
|
||||
border-radius: root.$radius-s;
|
||||
box-shadow: var(--little-shadow);
|
||||
}
|
||||
|
||||
|
|
@ -412,8 +257,9 @@ hr {
|
|||
|
||||
.page-header {
|
||||
h1 {
|
||||
font-size: $mastodon;
|
||||
margin: $regular-less;
|
||||
font-size: root.$mega;
|
||||
margin: root.$regular-less;
|
||||
margin-top: root.$height;
|
||||
text-shadow: var(--header-shadow);
|
||||
}
|
||||
p {
|
||||
|
|
@ -423,7 +269,7 @@ hr {
|
|||
}
|
||||
|
||||
.toc {
|
||||
margin: 0 10% $regular;
|
||||
margin: 0 10% root.$regular;
|
||||
li {
|
||||
margin: 0;
|
||||
li {
|
||||
|
|
@ -445,9 +291,9 @@ code {
|
|||
|
||||
pre {
|
||||
overflow-x: scroll;
|
||||
margin: $bigger 0;
|
||||
padding: $regular-more;
|
||||
border-radius: $radius-m;
|
||||
margin: root.$bigger 0;
|
||||
padding: root.$regular-more;
|
||||
border-radius: root.$radius-m;
|
||||
box-shadow: var(--inner-shadow);
|
||||
background: var(--black-ish);
|
||||
code {
|
||||
|
|
@ -458,7 +304,7 @@ pre {
|
|||
code {
|
||||
padding: 2px 9px;
|
||||
box-shadow: var(--inner-little-shadow);
|
||||
border-radius: $radius-s;
|
||||
border-radius: root.$radius-s;
|
||||
}
|
||||
|
||||
.cite {
|
||||
|
|
@ -484,7 +330,7 @@ tr {
|
|||
}
|
||||
|
||||
th {
|
||||
padding: $small $regular-less;
|
||||
padding: root.$small root.$regular-less;
|
||||
|
||||
/* making the header sticky */
|
||||
position: sticky;
|
||||
|
|
@ -494,15 +340,15 @@ th {
|
|||
|
||||
td {
|
||||
font-size: .8em;
|
||||
padding: $tiny $small;
|
||||
padding: root.$tiny root.$small;
|
||||
}
|
||||
|
||||
.table {
|
||||
max-height: 90vh;
|
||||
overflow: scroll;
|
||||
margin: $height 2vw;
|
||||
margin: root.$height 2vw;
|
||||
border: 3px solid var(--grey);
|
||||
border-radius: $radius-l;
|
||||
border-radius: root.$radius-l;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
|
|
@ -518,12 +364,12 @@ table {
|
|||
font-weight: 800;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
bottom: $regular;
|
||||
bottom: root.$regular;
|
||||
}
|
||||
.button {
|
||||
color: var(--primary);
|
||||
background: var(--background);
|
||||
margin: $tiny $regular-less;
|
||||
margin: root.$tiny root.$regular-less;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -581,11 +427,11 @@ img {
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: $radius-l;
|
||||
border-radius: root.$radius-l;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: $height auto;
|
||||
margin: root.$height auto;
|
||||
img {
|
||||
max-height: 90vh;
|
||||
border: solid 1px black;
|
||||
|
|
@ -595,9 +441,9 @@ figure {
|
|||
}
|
||||
|
||||
figcaption {
|
||||
font: $regular 'EB Garamond', Garamond, 'Simoncini Garamond', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
line-height: $regular;
|
||||
margin-top: $regular-less;
|
||||
font: root.$regular 'EB Garamond', Garamond, 'Simoncini Garamond', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
line-height: root.$regular;
|
||||
margin-top: root.$regular-less;
|
||||
color: var(--other-grey);
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -627,8 +473,8 @@ b {
|
|||
} */
|
||||
|
||||
article {
|
||||
font-size: $regular-more;
|
||||
padding: $twice 10% $mastodon;
|
||||
font-size: root.$regular-more;
|
||||
padding: root.$twice 10% root.$mega;
|
||||
}
|
||||
|
||||
time {
|
||||
|
|
@ -650,23 +496,23 @@ h1, h2, h3, h4, h5 {
|
|||
.title {
|
||||
font-weight: 800;
|
||||
letter-spacing: .1em;
|
||||
font-size: $twice;
|
||||
font-size: root.$twice;
|
||||
color: transparent;
|
||||
margin: $regular auto;
|
||||
margin: root.$regular auto;
|
||||
text-shadow: var(--title-text-shadow);
|
||||
text-align: center;
|
||||
transition: $quicktrans;
|
||||
transition: root.$trans-quick;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
font-size: $height;
|
||||
font-size: root.$height;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $bigger;
|
||||
font-size: root.$bigger;
|
||||
.anchor {
|
||||
&::after {
|
||||
content: '#';
|
||||
|
|
@ -685,19 +531,19 @@ h3 {
|
|||
.box {
|
||||
max-width: 100%;
|
||||
color: var(--text);
|
||||
padding: $big;
|
||||
margin-top: $bigger;
|
||||
margin-bottom: $bigger;
|
||||
border-radius: $radius-l;
|
||||
padding: root.$big;
|
||||
margin-top: root.$bigger;
|
||||
margin-bottom: root.$bigger;
|
||||
border-radius: root.$radius-l;
|
||||
box-shadow: var(--shadow);
|
||||
overflow: scroll;
|
||||
&.post-preview {
|
||||
margin-top: $regular-less;
|
||||
margin-bottom: $regular-less;
|
||||
margin-top: root.$regular-less;
|
||||
margin-bottom: root.$regular-less;
|
||||
max-height: unset;
|
||||
padding: $small;
|
||||
padding: root.$small;
|
||||
.date {
|
||||
margin: 0 $regular;
|
||||
margin: 0 root.$regular;
|
||||
}
|
||||
.button {
|
||||
transform: scale(.7);
|
||||
|
|
@ -716,14 +562,14 @@ h3 {
|
|||
.box,
|
||||
.stuff {
|
||||
p {
|
||||
margin: $regular 10%;
|
||||
margin: root.$regular 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.stuff {
|
||||
padding: 4vw 2vw;
|
||||
margin: $height 2vw;
|
||||
border-radius: $radius-l;
|
||||
margin: root.$height 2vw;
|
||||
border-radius: root.$radius-l;
|
||||
box-shadow: var(--shadow);
|
||||
.column {
|
||||
padding: 0 2vw;
|
||||
|
|
@ -739,8 +585,8 @@ h3 {
|
|||
}
|
||||
|
||||
.last-modified {
|
||||
margin: 0 auto $twice;
|
||||
font-size: $regular-less;
|
||||
margin: 0 auto root.$twice;
|
||||
font-size: root.$regular-less;
|
||||
opacity: .8;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -750,7 +596,7 @@ footer {
|
|||
overflow: hidden;
|
||||
width: 96%;
|
||||
padding: 2vw;
|
||||
border-radius: $radius-l;
|
||||
border-radius: root.$radius-l;
|
||||
box-shadow: var(--shadow);
|
||||
* {
|
||||
text-align: center;
|
||||
|
|
@ -772,19 +618,19 @@ footer {
|
|||
|
||||
@media only screen and (max-width: 950px) {
|
||||
.page-header h1 {
|
||||
font-size: $height;
|
||||
font-size: root.$height;
|
||||
}
|
||||
.box {
|
||||
margin: $bigger 3%;
|
||||
margin: root.$bigger 3%;
|
||||
}
|
||||
.stuff-logo {
|
||||
margin-top: $bigger
|
||||
margin-top: root.$bigger
|
||||
}
|
||||
.margin {
|
||||
margin: 0 10%;
|
||||
}
|
||||
article {
|
||||
padding: $twice 7% $mastodon;
|
||||
padding: root.$twice 7% root.$mega;
|
||||
}
|
||||
.tool {
|
||||
bottom: 3vh
|
||||
|
|
@ -794,7 +640,7 @@ footer {
|
|||
audio {
|
||||
width: 100%;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: $radius-m;
|
||||
border-radius: root.$radius-m;
|
||||
}
|
||||
|
||||
.controlBar {
|
||||
|
|
@ -803,21 +649,21 @@ audio {
|
|||
|
||||
svg.button,
|
||||
img.button {
|
||||
height: $height;
|
||||
height: root.$height;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
margin: $tiny;
|
||||
margin: root.$tiny;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: $small $regular;
|
||||
font-size: $bigger;
|
||||
background: var(--background);
|
||||
padding: root.$small root.$regular;
|
||||
font-size: root.$bigger;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
border-radius: $radius-m;
|
||||
border-radius: root.$radius-m;
|
||||
box-shadow: var(--button-shadow);
|
||||
text-align: center;
|
||||
hyphens: none;
|
||||
|
|
@ -833,19 +679,19 @@ button,
|
|||
.written {
|
||||
background: var(--primary);
|
||||
color: var(--background);
|
||||
margin: $big;
|
||||
margin: root.$big;
|
||||
}
|
||||
|
||||
.smaller {
|
||||
padding: $tiny $regular-less;
|
||||
margin: $small;
|
||||
font-size: $big;
|
||||
border-radius: $radius-s;
|
||||
padding: root.$tiny root.$regular-less;
|
||||
margin: root.$small;
|
||||
font-size: root.$big;
|
||||
border-radius: root.$radius-s;
|
||||
}
|
||||
|
||||
.sharing {
|
||||
.button {
|
||||
margin-right: $small;
|
||||
margin-right: root.$small;
|
||||
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 |
Loading…
Reference in New Issue