love/source/pages/scss/style.scss

459 lines
7.3 KiB
SCSS

@import '../../../node_modules/modern-normalize/modern-normalize';
@import '../../../node_modules/hsluv-sass/src/hsluv';
@import 'fonts';
/* :root-insert */
@import 'syntax-highlighting';
$small-breakpoint: 600px;
$medium-breakpoint: 900px;
$large-breakpoint: 1200px;
$extra-large-breakpoint: 1800px;
html {
font-size: 62.5%;
}
body {
background-color: var(--background-1);
color: var(--foreground-1);
font-family: Inter, sans-serif;
font-size: 2rem;
}
a,
a:visited {
color: var(--dark-accent-7);
&:hover {
color: var(--dark-accent-4);
}
&[href^='http']:not(.hide-external),
&.fake-external {
margin-right: 12px;
&::after {
content: '';
font-size: 1.5rem;
position: absolute;
}
}
}
code {
padding: 0 4px;
}
pre {
padding: 16px;
overflow: auto;
}
h1 {
padding: 16px;
}
h1,
h2,
h3,
p,
pre {
margin: 0;
}
li {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
ol,
ul {
margin: 0;
margin-bottom: 8px;
padding-left: 32px;
&:last-child {
margin-bottom: 0;
}
> li {
> ol,
> ul {
margin-top: 8px;
}
}
}
section {
background-color: var(--background-1);
}
ul {
list-style-type: symbols(cyclic '' '');
}
#wrapper {
margin: 0 16px;
}
@media (min-width: $medium-breakpoint) {
#wrapper {
margin: 0 auto;
width: $medium-breakpoint;
}
}
.light {
background-color: var(--foreground-1);
color: var(--background-1);
a,
a:visited {
color: var(--light-accent-8);
&:hover {
color: var(--light-accent-10);
}
}
}
.border {
border: 2px solid var(--foreground-1);
}
.divider {
border-top: 2px solid var(--foreground-1);
margin: 32px 0;
}
.monospace {
font-family: Hasklig, monospace;
}
.spacer {
margin-bottom: 32px;
}
.goals {
border: 2px solid;
h2 {
padding: 16px;
}
}
.goal {
padding: 16px;
&:nth-child(even) {
background-color: var(--background-1);
color: var(--foreground-1);
}
&:nth-child(odd) {
background-color: var(--foreground-1);
color: var(--background-1);
}
}
.goal-title {
display: block;
padding-bottom: 8px;
}
.cupcake-ipsum {
h2 {
background-color: var(--foreground-1);
color: var(--background-1);
padding: 16px;
}
p {
padding: 16px;
}
}
.dark-labels,
.light-labels,
.dark-outline-labels,
.light-outline-labels {
display: flex;
justify-content: space-between;
padding: 16px;
overflow-x: auto;
span {
font-family: Hasklig, monospace;
font-weight: bold;
margin-right: 8px;
padding: 8px;
text-align: center;
width: 100px;
&:last-child {
margin-right: 0;
}
}
}
.dark-labels {
border: 2px solid var(--foreground-1);
color: var(--background-1);
@for $index from 1 through 10 {
span:nth-child(#{$index}) {
background-color: var(--dark-accent-#{$index});
}
}
}
.light-labels {
background-color: var(--foreground-1);
@for $index from 1 through 10 {
span:nth-child(#{$index}) {
background-color: var(--light-accent-#{$index});
}
}
}
.dark-outline-labels {
border: 2px solid;
@for $index from 1 through 10 {
span:nth-child(#{$index}) {
$color: var(--dark-accent-#{$index});
border: 2px solid $color;
box-shadow: 0 0 2px $color, inset 0 0 2px $color;
color: $color;
text-shadow: 0 0 2px $color;
}
}
}
.light-outline-labels {
background-color: var(--foreground-1);
@for $index from 1 through 10 {
span:nth-child(#{$index}) {
$color: var(--light-accent-#{$index});
border: 2px solid $color;
box-shadow: 0 0 2px $color, inset 0 0 2px $color;
color: $color;
text-shadow: 0 0 2px $color;
}
}
}
.color {
font-family: Hasklig, monospace;
font-weight: bold;
}
.dark-rainbow,
.light-rainbow {
padding: 16px;
text-align: center;
p {
padding: 16px 0;
}
}
.dark-rainbow p {
background: linear-gradient(to right, var(--dark-accent-1), var(--dark-accent-2), var(--dark-accent-3), var(--dark-accent-4), var(--dark-accent-5), var(--dark-accent-6), var(--dark-accent-7), var(--dark-accent-8), var(--dark-accent-9), var(--dark-accent-10));
color: var(--background-1);
}
.light-rainbow p {
background: linear-gradient(to right, var(--light-accent-1), var(--light-accent-2), var(--light-accent-3), var(--light-accent-4), var(--light-accent-5), var(--light-accent-6), var(--light-accent-7), var(--light-accent-8), var(--light-accent-9), var(--light-accent-10));
color: var(--foreground-1);
}
#variants {
h2 {
padding: 16px;
}
}
#dark,
#light {
padding: 16px;
h3 {
margin-bottom: 16px;
}
p {
display: flex;
margin-bottom: 2px;
padding: 8px;
&:last-child {
margin-bottom: 0;
}
.color {
margin-left: auto;
}
}
}
#dark {
border: 2px solid var(--foreground-1);
.foreground-primary {
background-color: var(--foreground-1);
color: var(--background-1);
}
.foreground-secondary {
background-color: var(--foreground-2);
color: var(--background-1);
}
.background-primary {
background-color: var(--background-1);
color: var(--foreground-1);
}
.background-secondary {
background-color: var(--background-2);
color: var(--foreground-1);
}
@for $index from 1 through 10 {
.accent-#{$index} {
background-color: var(--dark-accent-#{$index});
color: var(--background-1);
}
}
@for $index from 1 through 3 {
.gray-#{$index} {
background-color: var(--dark-gray-#{$index});
color: var(--background-1);
}
}
}
#light {
background-color: var(--foreground-1);
color: var(--background-1);
.foreground-primary {
background-color: var(--background-1);
color: var(--foreground-1);
}
.foreground-secondary {
background-color: var(--background-2);
color: var(--foreground-1);
}
.background-primary {
background-color: var(--foreground-1);
color: var(--background-1);
}
.background-secondary {
background-color: var(--foreground-2);
color: var(--background-1);
}
@for $index from 1 through 10 {
.accent-#{$index} {
background-color: var(--light-accent-#{$index});
color: var(--foreground-1);
}
}
@for $index from 1 through 4 {
.gray-#{$index} {
background-color: var(--light-gray-#{$index});
color: var(--foreground-1);
}
}
}
footer {
display: flex;
flex-direction: column;
margin-bottom: 32px;
> div {
display: flex;
justify-content: center;
&:first-of-type {
align-items: center;
margin-bottom: 8px;
a {
align-items: center;
color: var(--foreground-1);
display: flex;
text-decoration: none;
&:hover {
color: var(--foreground-1);
}
}
img {
height: 29px;
}
}
}
}
#get {
h2 {
padding: 16px;
}
h3 {
margin-bottom: 16px;
}
> div {
padding: 16px;
}
ul {
display: grid;
grid-template-columns: repeat(1, 1fr);
@media (min-width: $small-breakpoint) {
grid-template-columns: repeat(2, 1fr);
list-style-type: symbols(cyclic '' '' '' '');
}
}
}
#attributions {
h2 {
padding: 16px;
}
h3 {
margin-bottom: 8px;
}
> div {
padding: 16px;
}
}
#liberapay-button {
display: flex;
line-height: 0;
}
@import 'get';