quitsocialmedia.club/style.scss

---
---

/*@import "../_sass/search";*/
@import "../_sass/highlight";
@import "../_sass/nav";
@import "../_sass/inter";
@import "../_sass/ubuntu-mono";

:root {
	--black-ish: #222;
	--white-ish: #F1FAEE;
	--dark-grey: #555;
	--light-grey: #AAA;
	--yellow: #FCC920;
	--dark-yellow: #D0A00E;
	--light-blue: #A8DADC;
	--blue: #1D3557;
	--red: #E63946;
	--green: #20CE88;
	--razzmatazz: #EC0868;
	--purple: #592176;
	
	color-scheme: dark light;

	--yellow-gradient: linear-gradient(145deg, #DAAE1B, #FFD23E);
	--blue-gradient: linear-gradient(145deg, #4c96ff, #226dd7);

	--tiny: .2rem;
	--tinyem: .2em;
	--small: .5rem;
	--smallem: .5em;
	--regular-less: .9rem;
	--regular: 1.1rem;
	--regular-em: 1.1em;
	--regular-more: 1.3rem;
	--regular-more-em: 1.3em;
	--big: 1.6rem;
	--bigger: 1.8rem;
	--twice: 2.2rem;
	--height: 3.1rem;
	--mastodon: 4.4rem;
	--margin: 6.5rem;
	--trans: .5s;
	--quicktrans: .2s;
	--radius-s: 5px;
	--radius-m: .6rem;
	--radius-l: 1rem;

	--title-text-shadow-hover: none;
}

html {
	box-sizing: border-box;
	cursor: url(/logos/red-cursor.svg) 16 16, crosshair;
	background: var(--background);
	scroll-behavior: smooth;
}

/* DARK THEME */
@media screen and (prefers-color-scheme: dark) {
	--background: var(--blue);
	--text: var(--white-ish);
	--deep: #102040;
	--link: var(--primary);
	--primary: var(--light-blue);
	--secondary: var(--red);
	--internal-link: var(--primary);
	--grey: var(--dark-grey);
	--other-grey: var(--light-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);
}

.dark {
	--background: var(--blue);
	--text: var(--white-ish);
	--deep: #102040;
	--link: var(--primary);
	--primary: var(--light-blue);
	--secondary: var(--red);
	--internal-link: var(--primary);
	--grey: var(--dark-grey);
	--other-grey: var(--light-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 */
body {
	--background: var(--white-ish);
	--text: var(--blue);
	--deep: white;
	--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 #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);
}

body {
	background: var(--background);
	color: var(--text);
	font: var(--regular) Inter, -apple-system, Helvetica, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	margin: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}

* {
	transition: var(--trans), transform var(--quicktrans);
}

*,
::before,
::after {
	box-sizing: inherit;
}

.row::before,
.row::after {
	display: table;
	content: " ";
	clear: both;
}

.one,
.one-third,
.two-thirds,
.one-fourth,
.half,
.two-fifths,
.four-fifths,
.one-fifth {
	width: 100%;
}

mark {
	background: var(--primary);
	color: var(--background);
	font-weight: 500;
	padding: 0 4px;
	border-radius: var(--radius-s)
}

::selection {
	color: var(--background);
	background: var(--primary);
}

.top,
.bottom {
	right: 3vw;
}

.bottom {
	transform: rotate(.5turn);
	box-shadow: none !important;
}

.theme-toggle {
	right: calc(3% + 4rem);
}

.tool {
	position: fixed;
	bottom: var(--bigger);
	z-index: 9;
	&.button {
		padding: .3rem;
	}
}

a {
	text-decoration: none;
	color: var(--link);
	&:hover,
	&:focus,
	&:active {
		.title {
			text-shadow: var(--title-text-shadow-hover);
			color: var(--text);
		}
	}
	.box {
		&:hover {
			box-shadow: var(--inner-shadow);
		}
	}
}

p,
li,
article li,
.toc {
	a {
		font-weight: 500;
		transition: var(--quicktrans);
		&:hover,
		&:focus {
			text-shadow: var(--text-shadow);
			color: transparent !important;
		}
		&:active {
			text-shadow: none;
			color: var(--link) !important;
		}
		&[href*="mailto" i] {
		&::before {
			content: "  ✉️ ";
			}
		}
		&[href^="/stampa" i],
		&[href^="/press" i] {
			&::before {
				content: "📰 ";
			}
		}
		&[href$="/about" i],
		&[href*="tommi.space" i] {
			&::before {
				content: "🙋🏻‍♂️ ";
			}
		}
		&[href*="development" i] {
			&::before {
				content: "💻 ";
			}
		}
		&[href*="link" i],
		&[href*="resources" i] {
			&::before {
				content: "📚 ";
				/* content: "🔗 "; */
			}
		}
		&[href*="/path" i],
		&[href*="/percorso" i] {
			&::before {
				content: "🧭 ";
			}
		}
		&[href*="/why" i],
		&[href*="/perch%C3%A9" i],
		&[href*="/perche" i] {
			&::after {
				content: "❓";
			}
		}
		&[href*="l10n" i] {
			&::before {
				content: "🌎 ";
			}
		}
		&[href*="learn" i] {
			&::before {
				content: "📖 ";
			}
		}
		&[href*="/solution" i],
		&[href*="/soluz" i] {
			&::before {
				content: "💡 ";
			}
		}
		&[href*="/quick" i],
		&[href*="/veloce" i] {
			&::before {
				content: "⏰ ";
			}
		}
		&[href*="/watch" i],
		&[href*="/guarda" i] {
			&::before {
				content: "🍿 ";
			}
		}
		&[href*="/note" i],
		&[href="/roadmap" i] {
			&::before {
				content: "📝 ";
			}
		}
		&[href*="/listen" i],
		&[href*="/ascolta" i] {
			&::before {
				content: "🎧 ";
			}
		}
		&[href="/delete" i],
		&[href="/quit" i] {
			&::before {
				content: "❌ ";
			}
		}
		&[href^="/contributors" i],
		&[href^="/it/cont" i],
		&[href="/partecipanti" i] {
			&::before {
				content: "🧑🏽‍💻 ";
			}
		}
		&[href*="liberapay" i],
		&[href*="/contribute" i],
		&[href*="/contribuisci" i] {
			&::before {
				content: "🎁 ";
			}
		}
		&[href*="keys.openpgp.org" i] {
			&::before {
				content: "🔑 ";
			}
		}
		&[href="/share" i],
		&[href="/condividi" i] {
			&::before {
				content: "📢 ";
			}
		}
		&[href^="/ob" i],
		&[href*="/faq" i] {
			&::before {
				content: "🤔 ";
			}
		}
		&[href="/ma" i],
		&[href="/but" i] {
			&::before {
				content: "🤨 ";
			}
		}
	}
}

.flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.vertical {
	flex-direction: column;
	height: 100%;
}

a,
button,
.button,
.aa-suggestion,
.embed-container {
	cursor: url(/logos/red-cursor-hover.svg) 16 16, pointer;
}


/* private or invalid links */
.invalid-link {
	opacity: .5;
	cursor: not-allowed;
	.invalid-link-brackets {
		opacity: .3;
	}
}

li {
	margin-bottom: var(--small);
	line-height: var(--regular-more-em);
	li {
		margin-bottom: 0;
		list-style-type: "–   ";
		li {
			list-style-type: "+  ";
		}
	}
}

.task-list-item {
	list-style: none;
}

.task-list-item-checkbox {
	position: relative;
	right: var(--regular-less);
	width: var(--regular);
	height: var(--regular);
}

.post {
	& > p:first-of-type::first-letter {
		initial-letter: 4;
		-webkit-initial-letter: 4;
	}
	.embed-container {
		border-radius: var(--radius-l);
		box-shadow: var(--shadow);
	}
}

hr {
	color: transparent;
	border-top: 7px dotted var(--grey);
}

.line {
	width: 20%;
	height: var(--small);
	margin: 0 auto;
	border-radius: var(--radius-s);
	box-shadow: var(--little-shadow);
}

.background {
	background: var(--background) !important;
	color: var(--text) !important;
}

.page-header {
	h1 {
		font-size: var(--mastodon);
		margin: var(--regular-less);
		text-shadow: var(--header-shadow);
	}
	p {
		text-align: center;
		padding: 0 10%;
	}
}

.toc {
	margin: 0 10% var(--regular);
	li {
		margin: 0;
		li {
			a {
				opacity: .8;
			}
			li a {
				opacity: .8;
			}
		}
	}
}

pre,
code {
	font: 400 1.1em 'Ubuntu Mono', 'Roboto Mono', 'Fira Code', mono, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	line-height: 1.2em;
}

pre {
	overflow-x: scroll;
	margin: var(--bigger) 0;
	padding: var(--regular-more);
	border-radius: var(--radius-m);
	box-shadow: var(--inner-shadow);
	background: var(--black-ish);
	code {
		box-shadow: unset;
	}
}

code {
	padding: 2px 9px;
	box-shadow: var(--inner-little-shadow);
	border-radius: var(--radius-s);
}

.cite {
	text-align: right;
	&::before {
		content: '~ ';
	}
}

blockquote {
	margin: 1vw 4vw;
	padding: 0;
	p {
		font-size: .8em;
		line-height: 1.5em
	}
}

td,
th,
tr {
	border: solid 1px var(--grey);
}

th {
	padding: var(--small) var(--regular-less);
	
	/* making the header sticky */
	position: sticky;
	top: 0;
	background: var(--background);
}

td {
	font-size: .8em;
	padding: var(--tiny) var(--small);
}

.table {
	max-height: 90vh;
	overflow: scroll;
	margin: var(--height) 2vw;
	border: 3px solid var(--grey);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow);
}

table {
	border-collapse: collapse;
}

.landing {
	background: var(--primary);
	h1 {
		color: var(--background);
		font-weight: 800;
		margin-bottom: 0;
		position: relative;
		bottom: var(--regular);
	}
	.button {
		color: var(--primary);
		background: var(--background);
		margin: var(--tiny) var(--regular-less);
	}
}

.menu {
	display: flex;
}

@media only screen and (min-width: 950px) {
	.one {
		width: 70%;
		margin-left: 15%;
	}
	.half {
		width: 50%;
	}
	.one-third {
		width: calc(100% / 3);
	}
	.one-fourth {
		width: 25%;
	}
	.two-thirds {
		width: calc(100% / 3 * 2);
	}
	.one-fifth {
		width: 20%;
	}
	.two-fifths {
		width: 40%;
	}
	.four-fifths {
		width: 80%;
		text-align: left;
	}
	.three-fourths {
		width: 75%;
	}
	.column {
		float: left;
	}
	.line {
		margin: auto;
		width: 50%;
	}
	.mobile {
		display: none;
	}
	.box.post-preview img {
		max-height: 24vh;
		width: auto;
	}
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-l);
}

figure {
	margin: var(--height) auto;
	img {
		max-height: 90vh;
		border: solid 1px black;
		box-shadow: var(--shadow);
		margin: 0 auto;
	}
}

figcaption {
	font: var(--regular) "EB Garamond", Garamond, "Simoncini Garamond", Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	line-height: var(--regular);
	margin-top: var(--regular-less);
	color: var(--other-grey);
	text-align: center;
}

.center {
	text-align: center;
}

.right,
.date {
	text-align: right;
}

p {
	line-height: 1.75em;
}

strong,
b {
	font-weight: 800;
}

/* make underline text dashed instead of solid */
/*u {
	text-decoration: none;
	border-bottom: dashed 2px var(--text); 
} */

article {
	font-size: var(--regular-more);
	padding: var(--twice) 10% var(--mastodon);
}

time {
	font-weight: 300;
}

h1, h2, h3, h4, h5 {
	text-transform: uppercase;
	&:hover {
		.anchor {
			opacity: 1;
		}
	}
	.anchor {
		opacity: 0;
	}
}

.title {
	font-weight: 800;
	letter-spacing: .1em;
	font-size: var(--twice);
	color: transparent;
	margin: var(--regular) auto;
	text-shadow: var(--title-text-shadow);
	text-align: center;
	transition: var(--quicktrans);
}

h1 {
	color: var(--text);
	text-align: center;
	font-size: var(--height);
	text-decoration: none;
}

h2 {
	font-size: var(--bigger);
	.anchor {
		&::after {
			content: '#';
		}
	}
}

h3 {
	.anchor {
		&::after {
			content: '##';
		}
	}
}

.box {
	max-width: 100%;
	color: var(--text);
	padding: var(--big);
	margin-top: var(--bigger);
	margin-bottom: var(--bigger);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow);
	overflow: scroll;
	&.post-preview {
		margin-top: var(--regular-less);
		margin-bottom: var(--regular-less);
		max-height: unset;
		padding: var(--small);
		.date {
			margin: 0 var(--regular);
		}
		.button {
			transform: scale(.7);
		}
	}
	h2,
	h3 {
		text-align: center;
	}
	h3,
	h4 {
		margin: 0;
	}
}

.box,
.stuff {
	p {
		margin: var(--regular) 10%;
	}
}

.stuff {
	padding: 4vw 2vw;
	margin: var(--height) 2vw;
	border-radius: var(--radius-l);
	box-shadow: var(--shadow);
	.column {
		padding: 0 2vw;
	}
}

.stuff-logo {
	width: auto;
	min-width: 50%;
	max-width: 100%;
	max-height: 10rem;
	border-radius: 0;
}

.last-modified {
	margin: 0 auto var(--twice);
	font-size: var(--regular-less);
	opacity: .8;
	text-align: center;
}

footer {
	margin: 2vw;
	overflow: hidden;
	width: 96%;
	padding: 2vw;
	border-radius: var(--radius-l);
	box-shadow: var(--shadow);
	* {
		text-align: center;
	}
	img {
		border-radius: 0;
		margin: auto;
	}
	& > .row {
		justify-content: space-between;
	}
	time {
		font-family: 'Ubuntu Mono', 'Roboto Mono', 'Fira Code', mono, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}
	.time {
		line-height: 1.1em;
	}
}

@media only screen and (max-width: 950px) {
	.page-header h1 {
		font-size: var(--height);
	}
	.box {
		margin: var(--bigger) 3%;
	}
	.stuff-logo {
		margin-top: var(--bigger)
	}
	.margin {
		margin: 0 10%;
	}
	article {
		padding: var(--twice) 7% var(--mastodon);
	}
}

audio {
	width: 100%;
	box-shadow: var(--shadow);
	border-radius: var(--radius-m);
}

.controlBar {
	background: none !important;
}

svg.button,
img.button {
	height: var(--height);
	width: auto;
	padding: 0;
	margin: var(--tiny);
	background: var(--primary);
}

button,
.button {
	display: inline-block;
	padding: var(--small) var(--regular);
	font-size: var(--bigger);
	font-weight: 700;
	text-transform: uppercase;
	border-radius: var(--radius-m);
	box-shadow: var(--button-shadow);
	text-align: center;
	hyphens: none;
	&:hover,
	&:focus {
		box-shadow: none;
	}
	&:active {
		box-shadow: var(--inner-shadow);
	}
}

.written {
	background: var(--primary);
	color: var(--background);
	margin: var(--big);
}

.smaller {
	padding: var(--tiny) var(--regular-less);
	margin: var(--small);
	font-size: var(--big);
	border-radius: var(--radius-s);
}

.sharing {
	.button {
		margin-right: var(--small);
		padding: .4rem;
	}
}

/* FOOTER */
#license {
	font-size: .8em;
	font-weight: 200;
}

.embed-container {
	--video--width: 1920;
	--video--height: 1080;

	position: relative;
	padding-bottom: calc(var(--video--height) / var(--video--width) * 100%);
	overflow: hidden;
	max-width: 100%;
	background: transparent;

	iframe,
	object,
	embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

.green {
	background: var(--green);
	color: var(--black-ish) !important;
	border-color: var(--green) !important;
}

.red {
	background: var(--red);
	color: white !important;
	border-color: var(--red) !important;
	a {
		color: var(--light-blue);
	}
}

.blue {
	background: var(--light-blue);
	color: var(--blue) !important;
	border-color: var(--light-blue) !important;
	a {
		color: var(--red);
	}
}

.purple {
	background: var(--purple);
	color: var(--white-ish) !important;
	border-color: var(--purple) !important;
	a {
		color: var(--light-blue);
	}
}

.yellow {
	background: var(--yellow);
	color: var(--black-ish) !important;
	border-color: var(--yellow) !important;
	a {
		color: var(--red);
	}
}

.razzmatazz {
	background: var(--razzmatazz);
	color: white !important;
	border-color: var(--razzmatazz) !important;
}

.grey {
	background: var(--grey);
	border-color: var(--grey) !important;
}

.border {
	background: transparent;
	color: var(--text);
	border: 3px solid var(--text);
}