tommi
/
quitsocialmedia.club
mirror of https://github.com/xplosionmind/quitsocialmedia.club.git
1
1
Fork 0
Code Issues Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
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
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).

4
_includes/head.html
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">
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',

2
_includes/nav.html
View File

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

14
_includes/theme-toggle.html
View File

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

2
_layouts/wrapper.html
View File

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

21
_sass/_nav.scss
View File

@ -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);
font-size: var(--bigger);
line-height: 2.8rem;
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);
height: var(--height);
font-weight: 700;
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);
width: var(--height);
height: 2.8rem;
width: 2.8rem;
position: absolute;
top: 2vw;
right: 2vw;
background: var(--background);
box-shadow: var(--shadow);
span {
top: 1.4rem;
left: .7rem;
top: 1.25rem;
left: .6rem;
}
span,
span::before,

7
_sass/_root.scss
View File

@ -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;
--red: #D00;
--light-blue: #A8DADC;
--blue: #1D3557;
--red: #E63946;
--green: #20CE88;
--razzmatazz: #EC0868;
--purple: #884EE1;

6
_sass/_search.scss
View File

@ -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 {
background-image: url('https://assets.tommi.space/logos/search-light.svg')
.dark .aa-input {
background-image: url('https://assets.tommi.space/logos/lightblue-search.svg')
}
::placeholder {
color: var(--light-grey);

4
pages/Path.html
View File

@ -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">
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>
<div class="red box">
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>

1
pages/Solution.md
View File

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

14
pages/about.md
View File

@ -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>.
{:.razzmatazz .box}
<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>.
{:.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)!

57
style.scss
View File

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