quitsocialmedia.club/style.scss

964 lines
16 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
---
/*@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="/info" 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);
}