Browse Source

colors and content refinement

pull/2/head
Tommi 4 months ago
parent
commit
df099e4740
12 changed files with 72 additions and 68 deletions
  1. +5
    -3
      README.md
  2. +2
    -2
      _includes/head.html
  3. +1
    -1
      _includes/nav.html
  4. +7
    -7
      _includes/theme-toggle.html
  5. +1
    -1
      _layouts/wrapper.html
  6. +11
    -10
      _sass/_nav.scss
  7. +4
    -3
      _sass/_root.scss
  8. +3
    -3
      _sass/_search.scss
  9. +2
    -2
      pages/Path.html
  10. +1
    -0
      pages/Solution.md
  11. +7
    -7
      pages/about.md
  12. +28
    -29
      style.scss

+ 5
- 3
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).

+ 2
- 2
_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',


+ 1
- 1
_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>


+ 7
- 7
_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>

+ 1
- 1
_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 %}


+ 11
- 10
_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,


+ 4
- 3
_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;


+ 3
- 3
_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);


+ 2
- 2
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
- 0
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.



+ 7
- 7
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)!

+ 28
- 29
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 {


Loading…
Cancel
Save