colors and content refinement

README.md

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

_includes/head.html

@@ -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">
 		algoliasearchNetlify({
-			appId: 'UNJ7U6R9NG',
+			appId: 'RGL65NK0OK',
 			apiKey: '2496a32ec63dd08b35a329a1e0738524',
-			siteId: 'c7f3a969-424a-450b-8636-2d477af82e76',
+			siteId: 'c5a2f8f0-e22a-4ae4-82e4-bcdea06adf7c',
 			branch: 'main',
 			selector: 'input#search',
 			sitemap: 'https://quitsocialmedia.club/sitemap.xml',

_includes/nav.html

@@ -1,6 +1,6 @@
 <section id="nav" class="nav">
 	<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>
 	<nav>
 		<a class="nav-mobile" href="javascript:void(0);" onclick="navtoggle()"><span></span></a>

_includes/theme-toggle.html

@@ -1,20 +1,20 @@
 <script type="text/javascript">
 	const currentTheme = localStorage.getItem("theme");
-	if (currentTheme == "light") {
+	if (currentTheme == "dark") {
-		document.body.classList.add("light");
+		document.body.classList.add("dark");
 	}
 
 	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 {
-			theme = "dark"
+			theme = "light"
 		}
 
 		localStorage.setItem("theme", theme);
 	};
 </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>

_layouts/wrapper.html

@@ -9,7 +9,7 @@ layout: compress
 	<body>
 		{% include theme-toggle.html %}
 		<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>
 		<input id="search" rel="search" type="search" class="tool" />
 		{% include nav.html %}

_sass/_nav.scss

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

_sass/_root.scss

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

_sass/_search.scss

@@ -23,7 +23,7 @@
 	background: var(--background);
 	font-size: var(--big);
 	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-position: center;
 	&:active,
@@ -35,8 +35,8 @@
 		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 {
 	color: var(--light-grey);

pages/Path.html

@@ -11,8 +11,8 @@ anchor: 0
 	Before you get there, if you do, there's an awareness path to follow.
 </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>
 
 <br>

pages/Solution.md

@@ -4,6 +4,7 @@ permalink: /solution
 ref: sol
 toc: true
 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.
 

pages/about.md

@@ -8,14 +8,14 @@ redirect_from:
   - /purpose
 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:
 
 - 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 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?
@@ -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. **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 there’s 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 can’t 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 there’s 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 can’t 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 don’t want to force anyone to quit social media, and I definitely don’t want to convince you it’s the best thing to do. I want everybody who lands here to **carefully go through the website’s 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 don’t want to force anyone to quit social media, and I definitely don’t want to convince you it’s the best thing to do. I want everybody who lands here to **carefully go through the website’s 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 what’s 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 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 (I’m 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 don’t expect for this website to become viral, but, deep inside me, I strongly hope so. Please help me by [sharing this]()!
+- I don’t expect for this website to become viral, but, deep inside me, I strongly hope so. Please help me by [sharing this](/share)!

style.scss

@@ -17,47 +17,46 @@ html {
 }
 
 /* DARK THEME */
-body {
+.dark {
-	--background: var(--dark);
+	--background: var(--blue);
 	--text: var(--white-ish);
-	--deep: #111;
+	--deep: #102040;
 	--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);
 	--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);
 }
 
 /* LIGHT THEME */
-.light {
+body {
 	--background: var(--white-ish);
-	--text: var(--black-ish);
+	--text: var(--blue);
 	--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);
 	--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);
 }
@@ -150,7 +149,7 @@ li,
 article li,
 .toc {
 	a {
-		font-weight: 600;
+		font-weight: 500;
 		transition: var(--quicktrans);
 		&:hover,
 		&:focus {