colors and content refinement

This commit is contained in:
Tommi 2021-01-01 01:48:06 +01:00
parent 689b1ad4e5
commit df099e4740
12 changed files with 72 additions and 68 deletions

View File

@ -1,9 +1,11 @@
[![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 badge](https://raw.githubusercontent.com/humanetech-community/awesome-humane-tech/main/humane-tech-badge.svg?sanitize=true)](https://www.humanetech.com/) [![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 badge](https://raw.githubusercontent.com/humanetech-community/awesome-humane-tech/main/humane-tech-badge.svg?sanitize=true)](https://www.humanetech.com/)
# Quit Social Media # Quit Social Media
Notes are [here](https://tommi.space/qsm), roadmap is [here](./pages/roadmap) 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)
<br>
## Contribution ## Contribution
This project warmly welcomes any contributor or supporter. Please visit the [contribution page](/contribute). This project warmly welcomes any contributor or supporter. Please visit the [contribution page](https://quitsocialmedia.club/contribute).

View File

@ -24,9 +24,9 @@
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@0/dist/algoliasearchNetlify.js" crossorigin="anonymous"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@0/dist/algoliasearchNetlify.js" crossorigin="anonymous"></script>
<script type="text/javascript"> <script type="text/javascript">
algoliasearchNetlify({ algoliasearchNetlify({
appId: 'UNJ7U6R9NG', appId: 'RGL65NK0OK',
apiKey: '2496a32ec63dd08b35a329a1e0738524', apiKey: '2496a32ec63dd08b35a329a1e0738524',
siteId: 'c7f3a969-424a-450b-8636-2d477af82e76', siteId: 'c5a2f8f0-e22a-4ae4-82e4-bcdea06adf7c',
branch: 'main', branch: 'main',
selector: 'input#search', selector: 'input#search',
sitemap: 'https://quitsocialmedia.club/sitemap.xml', sitemap: 'https://quitsocialmedia.club/sitemap.xml',

View File

@ -1,6 +1,6 @@
<section id="nav" class="nav"> <section id="nav" class="nav">
<div id="home"> <div id="home">
<a href="{% if page.lang == 'it' %}/tuffo{% else %}/home{% endif %}" title="home">Quit Social Media</a> <a href="{% if page.lang == 'it' %}/it/home{% else %}/{% endif %}" title="home">Quit Social Media</a>
</div> </div>
<nav> <nav>
<a class="nav-mobile" href="javascript:void(0);" onclick="navtoggle()"><span></span></a> <a class="nav-mobile" href="javascript:void(0);" onclick="navtoggle()"><span></span></a>

View File

@ -1,20 +1,20 @@
<script type="text/javascript"> <script type="text/javascript">
const currentTheme = localStorage.getItem("theme"); const currentTheme = localStorage.getItem("theme");
if (currentTheme == "light") { if (currentTheme == "dark") {
document.body.classList.add("light"); document.body.classList.add("dark");
} }
function themetoggle() { function themetoggle() {
document.body.classList.toggle("light"); document.body.classList.toggle("dark");
if (document.body.classList.contains("light")) { if (document.body.classList.contains("dark")) {
theme = "light"; theme = "dark";
} else { } else {
theme = "dark" theme = "light"
} }
localStorage.setItem("theme", theme); localStorage.setItem("theme", theme);
}; };
</script> </script>
<svg onclick="themetoggle()" class="theme-toggle button tool" title="Toggle theme" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="background:var(--background)"><path d="M12 7a5 5 0 0 0-3 9v4a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4a5 5 0 0 0-3-9z" fill="var(--primary)"/><path d="M12 6a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1z" fill="var(--primary)"/><path d="M21 11h-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2z" fill="var(--primary)"/><path d="M5 11H3a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2z" fill="var(--primary)"/><path d="M7.66 6.42L6.22 5a1 1 0 0 0-1.39 1.47l1.44 1.39a1 1 0 0 0 .73.28 1 1 0 0 0 .72-.31 1 1 0 0 0-.06-1.41z" fill="var(--primary)"/><path d="M19.19 5.05a1 1 0 0 0-1.41 0l-1.44 1.37a1 1 0 0 0 0 1.41 1 1 0 0 0 .72.31 1 1 0 0 0 .69-.28l1.44-1.39a1 1 0 0 0 0-1.42z" fill="var(--primary)"/></svg> <svg onclick="themetoggle()" class="theme-toggle button tool" title="Toggle theme" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="background:var(--background)"><path d="M12 7a5 5 0 0 0-3 9v4a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4a5 5 0 0 0-3-9z" fill="var(--text)"/><path d="M12 6a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1z" fill="var(--text)"/><path d="M21 11h-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2z" fill="var(--text)"/><path d="M5 11H3a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2z" fill="var(--text)"/><path d="M7.66 6.42L6.22 5a1 1 0 0 0-1.39 1.47l1.44 1.39a1 1 0 0 0 .73.28 1 1 0 0 0 .72-.31 1 1 0 0 0-.06-1.41z" fill="var(--text)"/><path d="M19.19 5.05a1 1 0 0 0-1.41 0l-1.44 1.37a1 1 0 0 0 0 1.41 1 1 0 0 0 .72.31 1 1 0 0 0 .69-.28l1.44-1.39a1 1 0 0 0 0-1.42z" fill="var(--text)"/></svg>

View File

@ -9,7 +9,7 @@ layout: compress
<body> <body>
{% include theme-toggle.html %} {% include theme-toggle.html %}
<a href="#"> <a href="#">
<svg class="top button tool" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="background:var(--background)"><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(--primary)"/></svg> <svg class="top button tool" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="background:var(--background)"><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> </a>
<input id="search" rel="search" type="search" class="tool" /> <input id="search" rel="search" type="search" class="tool" />
{% include nav.html %} {% include nav.html %}

View File

@ -1,5 +1,5 @@
.nav { .nav {
height: var(--height); height: 2.8rem;
margin: 2vw; margin: 2vw;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
@ -18,8 +18,8 @@
#home { #home {
padding: 0 var(--regular); padding: 0 var(--regular);
float: left; float: left;
line-height: var(--height); line-height: 2.8rem;
font-size: var(--bigger); font-size: var(--big);
background: var(--primary); background: var(--primary);
box-shadow: var(--shadow); box-shadow: var(--shadow);
a { a {
@ -31,7 +31,7 @@
} }
&:hover, &:hover,
&:focus { &:focus {
background: var(--razzmatazz); background: var(--secondary);
border-bottom: none; border-bottom: none;
} }
} }
@ -55,8 +55,9 @@ nav {
a { a {
display: block; display: block;
color: var(--text) !important; color: var(--text) !important;
line-height: var(--height); font-weight: 700;
height: var(--height); line-height: 2.8rem;
height: 2.8rem;
padding: 0 var(--small); padding: 0 var(--small);
font-size: var(--regular-more); font-size: var(--regular-more);
&:hover, &:hover,
@ -89,16 +90,16 @@ nav {
/* Mobile nav */ /* Mobile nav */
.nav-mobile { .nav-mobile {
display: none; display: none;
height: var(--height); height: 2.8rem;
width: var(--height); width: 2.8rem;
position: absolute; position: absolute;
top: 2vw; top: 2vw;
right: 2vw; right: 2vw;
background: var(--background); background: var(--background);
box-shadow: var(--shadow); box-shadow: var(--shadow);
span { span {
top: 1.4rem; top: 1.25rem;
left: .7rem; left: .6rem;
} }
span, span,
span::before, span::before,

View File

@ -1,12 +1,13 @@
:root { :root {
--black-ish: #222; --black-ish: #222;
--white-ish: #E3E3E3; --white-ish: #F1FAEE;
--dark-grey: #555; --dark-grey: #555;
--light-grey: #AAA; --light-grey: #AAA;
--yellow: #FCC920; --yellow: #FCC920;
--dark-yellow: #D0A00E; --dark-yellow: #D0A00E;
--blue: #3185FC; --light-blue: #A8DADC;
--red: #D00; --blue: #1D3557;
--red: #E63946;
--green: #20CE88; --green: #20CE88;
--razzmatazz: #EC0868; --razzmatazz: #EC0868;
--purple: #884EE1; --purple: #884EE1;

View File

@ -23,7 +23,7 @@
background: var(--background); background: var(--background);
font-size: var(--big); font-size: var(--big);
z-index: 100; z-index: 100;
background-image: url('https://assets.tommi.space/logos/search.svg'); background-image: url('https://assets.tommi.space/logos/darkblue-search.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
&:active, &:active,
@ -35,8 +35,8 @@
right: 3%; right: 3%;
} }
} }
.light .aa-input { .dark .aa-input {
background-image: url('https://assets.tommi.space/logos/search-light.svg') background-image: url('https://assets.tommi.space/logos/lightblue-search.svg')
} }
::placeholder { ::placeholder {
color: var(--light-grey); color: var(--light-grey);

View File

@ -11,8 +11,8 @@ anchor: 0
Before you get there, if you do, there's an awareness path to follow. Before you get there, if you do, there's an awareness path to follow.
</p> </p>
<div class="razzmatazz box"> <div class="red box">
Since you can take action at different levels, actions below are ordered as levels: from level <a href="/l00">Level 0</a> to <a href="l1000">Level 1000</a> Since you can take action at different levels, actions which get you closer to <a href="https://tommi.space/internet-freedom" target="_blank" title="“Internet Freedom” in Tommi's notes">Internet Freedom</a> are gameified and displayed as levels, from level <a href="/l00">Level 0</a> to <a href="l1000">Level 1000</a>.
</div> </div>
<br> <br>

View File

@ -4,6 +4,7 @@ permalink: /solution
ref: sol ref: sol
toc: true toc: true
layout: page layout: page
redirect_from: ["/sol", "/solutions"]
--- ---
Being “social” without “Social Media” seems impossible. Nevertheless, it's a whole new life, full of surprises, excitement and authenticity, but, above all, **freeedom**. There are a few solutions which make life without Social Media connected and interactive anyway. Being “social” without “Social Media” seems impossible. Nevertheless, it's a whole new life, full of surprises, excitement and authenticity, but, above all, **freeedom**. There are a few solutions which make life without Social Media connected and interactive anyway.

View File

@ -8,14 +8,14 @@ redirect_from:
- /purpose - /purpose
layout: page layout: page
--- ---
I'm Tommi, and I created this website. Let's skip the part [about me](https://tommi.space/home#about), you can read it [on my website](https://tommi.space/). I'm Tommi, and I created this website. Let's skip the part [about me](https://tommi.space/about "About Tommi"), you can read it [on my website](https://tommi.space/ "Tommi Space").
I spent several tormented months tinkering about the ups and downs of social media. I got very stressed and particularly obsessed with their [ethical issues](/why). Eventually, I realized [**quitting**](/quit) is the best (and probably the only) way to actually [feel better](). I spent several tormented months tinkering about the ups and downs of social media. I got very stressed and particularly obsessed with their [ethical issues](/why). Eventually, I realized [**quitting**](/quit "Quit") is the best (and probably the only) way to actually [feel better](/solutions).
Nevertheless, I concluded that just quitting and doing nothing else is useless. Yes I could feel better, yes I could start enjoying and experimenting new ways of communicating, but nobody else would benefit of my choice. So I asked myself: Nevertheless, I concluded that just quitting and doing nothing else is useless. Yes I could feel better, yes I could start enjoying and experimenting new ways of communicating, but nobody else would benefit of my choice. So I asked myself:
- How is it possible that the situation is so bad and most of my friends literally ignore the problem, even feeling something's wrong? - How is it possible that the situation is so bad and most of my friends literally ignore the problem, even feeling something's wrong?
- Why don't people get that it's in our best interest to [become aware](), inform ourselves and [act]() to make our online and offline relationships better? - Why don't people get that it's in our best interest to [become aware](/why), inform ourselves and [act](/path) to make our online and offline relationships better?
- How can I share the crucial importance of doubting about the way the most common social media platforms work? - How can I share the crucial importance of doubting about the way the most common social media platforms work?
- How to foster **curiosity**, need for knowledge and **concern** about the way most of our online relations happen these days? - How to foster **curiosity**, need for knowledge and **concern** about the way most of our online relations happen these days?
- How can I let people realize that it's not about geeky or technical stuff? - How can I let people realize that it's not about geeky or technical stuff?
@ -29,10 +29,10 @@ This website has three main purposes:
1. Allowing skeptical, indifferent and unaware social media users to understand that individual and **personal choices are fundamental** to improve online experience, making the internet a better place. 1. Allowing skeptical, indifferent and unaware social media users to understand that individual and **personal choices are fundamental** to improve online experience, making the internet a better place.
1. **Being a reference point** for all social media quitters (who become more and more everyday), to provide them a reliable and complete yet simple and clear way to share their arguments. 1. **Being a reference point** for all social media quitters (who become more and more everyday), to provide them a reliable and complete yet simple and clear way to share their arguments.
I know there are many other [great communities](/communities) which promote **internet freedom** and **independence** from big ugly social media corporations, but I feel that theres an important point which isn't stressed out enough: **individual choices and actions are the key to global change**. **We shouldn't wait** for policies and laws to be rolled out; similarly, we cant expect someone else will make everything better, someday. We need to understand ([if possible]()) what's going on and steer towards [healthy solutions](). I know there are many other [great communities](/communities) which promote **internet freedom** and **independence** from big ugly social media corporations, but I feel that theres an important point which isn't stressed out enough: **individual choices and actions are the key to global change**. **We shouldn't wait** for policies and laws to be rolled out; similarly, we cant expect someone else will make everything better, someday. We need to understand (if possible) what's going on and steer towards [healthy solutions](/solutions).
**!!** I absolutely dont want to force anyone to quit social media, and I definitely dont want to convince you its the best thing to do. I want everybody who lands here to **carefully go through the websites content** and the referenced material, <u>to acquire enough knowledge to decide by him/herself what's the best thing to do</u>. <b>!!</b> I absolutely dont want to force anyone to quit social media, and I definitely dont want to convince you its the best thing to do. I want everybody who lands here to **carefully go through the websites content** and the referenced material, <u>to acquire enough knowledge to decide by him/herself what's the best thing to do</u>.
{:.razzmatazz .box} {:.red .box}
We need to understand whats happening and look for a way to make our internet experience better. We need to understand whats happening and look for a way to make our internet experience better.
@ -46,4 +46,4 @@ Quitting Social Media might be a great start.
- I chose the `.club` domain because it was among the cheapest and, in the end, it makes sense. - I chose the `.club` domain because it was among the cheapest and, in the end, it makes sense.
- I want to point out I have absolutely **no personal gain** in creating this website and in spamming it everywhere. On the contrary, I invested so much time in writhing these words and building this virtual place (Im not a developer) I became so tired and stressed I came close to giving up several times. (Once, I was so sleepy that by mistake I deleted the working directory of this website, irremediably losing months of hard work) I'm motivated only by my - I want to point out I have absolutely **no personal gain** in creating this website and in spamming it everywhere. On the contrary, I invested so much time in writhing these words and building this virtual place (Im not a developer) I became so tired and stressed I came close to giving up several times. (Once, I was so sleepy that by mistake I deleted the working directory of this website, irremediably losing months of hard work) I'm motivated only by my
- I dont expect for this website to become viral, but, deep inside me, I strongly hope so. Please help me by [sharing this]()! - I dont expect for this website to become viral, but, deep inside me, I strongly hope so. Please help me by [sharing this](/share)!

View File

@ -17,47 +17,46 @@ html {
} }
/* DARK THEME */ /* DARK THEME */
body { .dark {
--background: var(--dark); --background: var(--blue);
--text: var(--white-ish); --text: var(--white-ish);
--deep: #111; --deep: #102040;
--link: var(--primary); --link: var(--primary);
--primary: var(--yellow); --primary: var(--light-blue);
--primary-dark: var(--dark-yellow); --secondary: var(--red);
--secondary: var(--blue); --internal-link: var(--primary);
--internal-link: var(--blue);
--grey: var(--dark-grey); --grey: var(--dark-grey);
--other-grey: var(--light-grey); --other-grey: var(--light-grey);
--shadow: 5px 5px 20px #000000BB, -5px -5px 20px #FFFFFF11; --shadow: 5px 5px 20px #102040BB, -5px -5px 20px #FFFFFF11;
--little-shadow: 2px 2px 3px #000000EF, -2px -2px 3px #FFFFFF22; --little-shadow: 2px 2px 3px #102040EF, -2px -2px 3px #FFFFFF22;
--button-shadow: 3px 3px 8px #000A, -3px -3px 8px #FFFFFF11; --button-shadow: 3px 3px 8px #102040AA, -3px -3px 8px #FFFFFF11;
--inner-shadow: inset 3px 3px 5px #0008, inset -3px -3px 5px #FFF2; --inner-shadow: inset 3px 3px 5px #10204088, inset -3px -3px 5px #FFF2;
--inner-little-shadow: inset 2px 2px 3px #000A, inset -2px -2px 3px #FFF1; --inner-little-shadow: inset 2px 2px 3px #102040AA, inset -2px -2px 3px #FFF1;
--header-shadow: 5px 5px 15px #000D, -5px -5px 15px #FFF2; --header-shadow: 5px 5px 15px #102040DD, -5px -5px 15px #FFF2;
--text-shadow: -1px -1px 0px var(--link), 0px 0px 0px var(--grey), 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: var(--trans); transition: var(--trans);
} }
/* LIGHT THEME */ /* LIGHT THEME */
.light { body {
--background: var(--white-ish); --background: var(--white-ish);
--text: var(--black-ish); --text: var(--blue);
--deep: white; --deep: white;
--link: var(--secondary); --link: var(--primary);
--primary: var(--blue); --primary: var(--red);
--secondary: var(--razzmatazz); --secondary: #457B9D;
--internal-link: var(--blue); --internal-link: var(--primary);
--grey: var(--light-grey); --grey: var(--light-grey);
--other-grey: var(--dark-grey); --other-grey: var(--dark-grey);
--shadow: 5px 5px 20px #0005, -5px -5px 20px #FFFFFFEF; --shadow: 5px 5px 20px #10204055, -5px -5px 20px #FFFFFFEF;
--little-shadow: 2px 2px 3px #0005, -2px -2px 3px #FFF6; --little-shadow: 2px 2px 3px #10204055, -2px -2px 3px #FFF6;
--button-shadow: 3px 3px 8px #0005, -3px -3px 8px #FFF6; --button-shadow: 3px 3px 8px #10204055, -3px -3px 8px #FFF6;
--inner-shadow: inset 3px 3px 5px #0005, inset -3px -3px 5px #FFF3; --inner-shadow: inset 3px 3px 5px #10204055, inset -3px -3px 5px #FFF3;
--inner-little-shadow: inset 2px 2px 3px #0002, inset -2px -2px 3px #FFF3; --inner-little-shadow: inset 2px 2px 3px #10204022, inset -2px -2px 3px #FFF3;
--header-shadow: 5px 5px 15px #0003, -5px -5px 15px #FFFF; --header-shadow: 5px 5px 15px #10204033, -5px -5px 15px #FFFF;
--text-shadow: 0px 0px 0px var(--link), 1px 1px 1px var(--grey);
--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: var(--trans); transition: var(--trans);
} }
@ -150,7 +149,7 @@ li,
article li, article li,
.toc { .toc {
a { a {
font-weight: 600; font-weight: 500;
transition: var(--quicktrans); transition: var(--quicktrans);
&:hover, &:hover,
&:focus { &:focus {