website/_scss/_formatting.scss

147 lines
2.9 KiB
SCSS

// Buttons
.button {
margin-right: 10px;
margin-bottom: 25px;
@media only screen and (max-width: 600px) {
margin: auto;
}
padding: 10px;
padding-left: 15px;
padding-right: 15px;
border-radius: 32px;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.1s ease-in-out;
border-radius: 10px;
background: $background-color;
box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%),
-5px -5px 10px scale-color($background-color, $lightness: +5%);
&:hover {
background: linear-gradient(145deg,
scale-color($background-color, $lightness: -35%),
scale-color($background-color, $lightness: +5%));
box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%),
-5px -5px 10px scale-color($background-color, $lightness: +5%);
}
&:active {
background: linear-gradient(145deg,
scale-color($background-color, $lightness: -35%),
scale-color($background-color, $lightness: +5%));
box-shadow: 5px 5px 10px scale-color($background-color, $lightness: -35%),
-5px -5px 10px scale-color($background-color, $lightness: +5%);
}
}
a {
color: $accent-color;
}
a:visited {
color: $light-color;
}
ul, ol {
color: #C3BAC6;
}
blockquote {
margin-left: 5mm;
padding-left: 2mm;
color: scale-color($foreground-color, $lightness: -10%);
}
blockquote {
border-left: 4px solid #F28FAD;
}
blockquote blockquote {
border-left: 4px solid #F8BD96;
}
blockquote blockquote blockquote {
border-left: 4px solid #FAE3B0;
}
blockquote blockquote blockquote blockquote {
border-left: 4px solid #ABE9B3;
}
blockquote blockquote blockquote blockquote blockquote {
border-left: 4px solid #B5E8E0;
}
blockquote blockquote blockquote blockquote blockquote blockquote {
border-left: 4px solid #96CDFB;
}
blockquote blockquote blockquote blockquote blockquote blockquote blockquote {
border-left: 4px solid #DDB6F2;
}
code, pre {
font-family: "Fira Code", monospace;
overflow: auto;
border-radius: 10px;
padding: 10px;
background: $background-color !important;
box-shadow: inset 5px 5px 10px scale-color($background-color, $lightness: -35%),
inset -5px -5px 10px scale-color($background-color, $lightness: +5%);
@media only screen and (min-width: 600px) {
display: inline-block;
max-width: 18cm;
}
}
code {
display: inline;
font-size: 14px;
}
p code {
border-radius: 5px;
padding: 5px;
}
@media only screen and (max-width: 600px) {
code {
display: inline-block;
max-width: 95%;
}
}
h1 {
font-size: 30px;
font-weight: normal;
border-bottom: 4px solid #F28FAD;
}
h2 {
font-size: 25px;
font-weight: normal;
margin-top: 1cm;
margin-bottom: 0;
border-bottom: 2px solid #F8BD96;
}
h3 {
font-size: 22px;
font-weight: normal;
margin-top: 1cm;
margin-bottom: 0;
}
::selection {
color: $background-color;
background: $foreground-color;
}
.tags {
font-size: 14px;
}