From df099e47404e01157c3fbb6153ae77d44aa4f8c3 Mon Sep 17 00:00:00 2001 From: Tommi Date: Fri, 1 Jan 2021 01:48:06 +0100 Subject: [PATCH] colors and content refinement --- README.md | 8 ++++-- _includes/head.html | 4 +-- _includes/nav.html | 2 +- _includes/theme-toggle.html | 14 ++++----- _layouts/wrapper.html | 2 +- _sass/_nav.scss | 21 +++++++------- _sass/_root.scss | 7 +++-- _sass/_search.scss | 6 ++-- pages/Path.html | 4 +-- pages/Solution.md | 1 + pages/about.md | 14 ++++----- style.scss | 57 ++++++++++++++++++------------------- 12 files changed, 72 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index a6ffe2b..75f097d 100644 --- a/README.md +++ b/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) + +
## 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). diff --git a/_includes/head.html b/_includes/head.html index e19556f..d6b93c7 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -24,9 +24,9 @@ - + diff --git a/_layouts/wrapper.html b/_layouts/wrapper.html index 48d2b94..7f9a905 100644 --- a/_layouts/wrapper.html +++ b/_layouts/wrapper.html @@ -9,7 +9,7 @@ layout: compress {% include theme-toggle.html %} - + {% include nav.html %} diff --git a/_sass/_nav.scss b/_sass/_nav.scss index 8649c9b..a785654 100644 --- a/_sass/_nav.scss +++ b/_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); - 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, diff --git a/_sass/_root.scss b/_sass/_root.scss index 4d96ae5..254b4f0 100644 --- a/_sass/_root.scss +++ b/_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; - --red: #D00; + --light-blue: #A8DADC; + --blue: #1D3557; + --red: #E63946; --green: #20CE88; --razzmatazz: #EC0868; --purple: #884EE1; diff --git a/_sass/_search.scss b/_sass/_search.scss index b2a74b5..018899c 100644 --- a/_sass/_search.scss +++ b/_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 { - 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); diff --git a/pages/Path.html b/pages/Path.html index d03d285..ef296e3 100644 --- a/pages/Path.html +++ b/pages/Path.html @@ -11,8 +11,8 @@ anchor: 0 Before you get there, if you do, there's an awareness path to follow.

-
- Since you can take action at different levels, actions below are ordered as levels: from level Level 0 to Level 1000 +
+ Since you can take action at different levels, actions which get you closer to Internet Freedom are gameified and displayed as levels, from level Level 0 to Level 1000.

diff --git a/pages/Solution.md b/pages/Solution.md index 98b510c..93c540d 100644 --- a/pages/Solution.md +++ b/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. diff --git a/pages/about.md b/pages/about.md index 35f7c3f..189291a 100644 --- a/pages/about.md +++ b/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, to acquire enough knowledge to decide by him/herself what's the best thing to do. -{:.razzmatazz .box} +!! 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, to acquire enough knowledge to decide by him/herself what's the best thing to do. +{:.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)! diff --git a/style.scss b/style.scss index ee0b454..3c2dde5 100644 --- a/style.scss +++ b/style.scss @@ -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 {