quitsocialmedia.club/styles/style.scss

@use 'parts/nav';
@use 'parts/inter';
@use 'parts/ubuntu-mono';

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

: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;

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

	--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: $trans;
}

/* DARK THEME */
@media screen and (prefers-color-scheme: dark) {
	html {
		--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: $trans;
	}
}

body {
	font: $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: $trans, transform $quicktrans;
}

#menutoggle,
#langtoggle {
	display: none;
}

*,
::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: $radius-s
}

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

.tool {
	position: fixed;
	bottom: 3vw;
	right: 4vw;
	z-index: 2;
	.button {
		padding: .3rem;
	}
}

#scrollbutton[href='#0'] {
	.button {
		transform: rotate(180deg);
		box-shadow: inset -2px -2px 4px #FFF8, inset 2px 2px 4px #0008;
		&:hover {
			box-shadow: none;
		}
		&:active {
			box-shadow: var(--button-shadow);
		}
	}
}

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: $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,
label {
	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: $small;
	line-height: $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: $regular-less;
	width: $regular;
	height: $regular;
}

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

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

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

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

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

.toc {
	margin: 0 10% $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: $bigger 0;
	padding: $regular-more;
	border-radius: $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: $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: $small $regular-less;
	
	/* making the header sticky */
	position: sticky;
	top: 0;
	background: var(--background);
}

td {
	font-size: .8em;
	padding: $tiny $small;
}

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

table {
	border-collapse: collapse;
}

.landing {
	height: 100vh;
	background: var(--primary);
	h1 {
		color: var(--background);
		font-weight: 800;
		margin-bottom: 0;
		position: relative;
		bottom: $regular;
	}
	.button {
		color: var(--primary);
		background: var(--background);
		margin: $tiny $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: $radius-l;
}

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

figcaption {
	font: $regular 'EB Garamond', Garamond, 'Simoncini Garamond', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	line-height: $regular;
	margin-top: $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: $regular-more;
	padding: $twice 10% $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: $twice;
	color: transparent;
	margin: $regular auto;
	text-shadow: var(--title-text-shadow);
	text-align: center;
	transition: $quicktrans;
}

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

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

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

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

.box,
.stuff {
	p {
		margin: $regular 10%;
	}
}

.stuff {
	padding: 4vw 2vw;
	margin: $height 2vw;
	border-radius: $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 $twice;
	font-size: $regular-less;
	opacity: .8;
	text-align: center;
}

footer {
	margin: 2vw;
	overflow: hidden;
	width: 96%;
	padding: 2vw;
	border-radius: $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: $height;
	}
	.box {
		margin: $bigger 3%;
	}
	.stuff-logo {
		margin-top: $bigger
	}
	.margin {
		margin: 0 10%;
	}
	article {
		padding: $twice 7% $mastodon;
	}
	.tool {
		bottom: 3vh
	}
}

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

.controlBar {
	background: none !important;
}

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

button,
.button {
	display: inline-block;
	padding: $small $regular;
	font-size: $bigger;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: $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: $big;
}

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

.sharing {
	.button {
		margin-right: $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);
}