quitsocialmedia.club/styles/style.scss

784 lines
12 KiB
SCSS
Raw Permalink 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.

@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);
}