quitsocialmedia.club/styles/style.scss

@use 'parts/normalize';
@use 'parts/root';
@use 'parts/nav';
@use 'parts/links-emojis';
@use 'parts/search';

html {
	box-sizing: border-box;
	cursor: url(/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 #FFF;
	--little-shadow: 2px 2px 3px #10204055, -2px -2px 3px #FFF6;
	--button-shadow: inset 2px 2px 4px #FFFC, inset -2px -2px 4px #0006;
	--inner-shadow: inset 3px 3px 5px #0003, inset -3px -3px 5px #FFF2;
	--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: root.$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 #0007, -5px -5px 20px #FFF2;
		--little-shadow: 2px 2px 3px #102040EF, -2px -2px 3px #FFFFFF22;
		--button-shadow: inset 2px 2px 4px #FFF8, inset -2px -2px 4px #0008;
		--header-shadow: 5px 5px 15px #102040DD, -5px -5px 15px #FFF2;

		transition: root.$trans;
	}
}

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

#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: root.$radius-s
}

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

.tool {
	position: fixed;
	bottom: 3vw;
	right: 4vw;
	z-index: 2;
	display: flex;
	.button {
		width: root.$height;
		height: root.$height;
		line-height: root.$height;
		padding: 0 root.$small;
		margin: root.$tiny;
		color: var(--text);
		fill: var(--text);
		background: var(--background) !important;
	}
}

#nav-toggle-button {
	&:active,
	&:hover,
	&:focus {
		box-shadow: var(--inner-shadow);
	}
}

.lang-list {
	display: none;
	bottom: root.$height + 2*root.$tiny;
	right: root.$height + 2*root.$tiny;
	position: absolute;
	flex-direction: column;
	#langtoggle:checked + & {
		display: flex;
	}
}

#menutoggle,
#langtoggle {
	display: none;
}

.scrollToBottom {
	.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);
		}
	}
}



.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(/cursor-hover.svg) 16 16, pointer;
}


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

li {
	li {
		margin-bottom: 0;
		list-style-type: '–   ';
		li {
			list-style-type: '+  ';
		}
	}
}

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

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

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

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

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

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

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

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

.table {
	max-height: 90vh;
	overflow: scroll;
	margin: root.$height 2vw;
	border: 3px solid var(--grey);
	border-radius: root.$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: root.$regular;
	}
	.button {
		color: var(--primary);
		background: var(--background);
		margin: root.$tiny root.$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: root.$radius-l;
}

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

figcaption {
	font: root.$regular 'EB Garamond', Garamond, 'Simoncini Garamond', Georgia, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	line-height: root.$regular;
	margin-top: root.$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: root.$regular-more;
	padding: root.$twice 10% root.$mega;
}

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: root.$twice;
	color: transparent;
	margin: root.$regular auto;
	text-shadow: var(--title-text-shadow);
	text-align: center;
	transition: root.$trans-quick;
}

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

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

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

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

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

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

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

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

.controlBar {
	background: none !important;
}

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

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

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

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