website/themes/datacoop2020/assets/static/css/style.scss
2021-12-28 02:22:25 +01:00

283 lines
5.1 KiB
SCSS

/* latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-display: swap;
src: local('Space Grotesk Regular'), local('SpaceGrotesk-Regular'), url(/static/fonts/spacegrotesk/webfont/SpaceGrotesk-Regular.woff2) format('woff2');
}
/* latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Space Grotesk Bold'), local('SpaceGrotesk-Bold'), url(/static/fonts/spacegrotesk/webfont/SpaceGrotesk-Bold.woff2) format('woff2');
}
/* latin */
@font-face {
font-family: 'Space Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Space Mono'), local('SpaceMono-Regular'), url(/static/fonts/spacemono/spacemono-regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Space Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Space Mono Bold'), local('SpaceMono-Bold'), url(/static/fonts/spacemono/spacemono-bold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
$font-family-base: "Space Grotesk";
$font-family-monospace: "Space Mono";
$datacoop-purple: #4B3ABA;
$datacoop-light-blue: #A8F3F4;
$datacoop-curry: #BA8D21;
$datacoop-grey: #BCB8B3;
$datacoop-curry-light: lighten($datacoop-curry, 12%);
$datacoop-curry-lighter: lighten($datacoop-curry, 38%);
$datacoop-grey: #BCB8B3;
$primary: $datacoop-purple;
$secondary: $datacoop-light-blue;
$success: $datacoop-purple;
$info: $datacoop-grey;
$warning: $datacoop-curry;
$danger: $datacoop-curry;
$body-color: $datacoop-purple;
@import "bootstrap/bootstrap";
@import "tables";
html
{
height: 100%;
}
body {
min-width: 300px;
padding: 0;
height: 100%;
}
.everything-container {
// Desktop
@include media-breakpoint-up(md) {
height: 100%;
max-width: 1200px;
}
padding: 0; // Overwrites .container-fluid
margin: 0; // Overwrites .container-fluid
> .row
{
max-width: 1200px;
margin: 0; // Overwrites .row
height: 100%;
}
}
// Mobile
@include media-breakpoint-down(sm) {
display: block;
.datacoop-sidebar {
height: 0;
display: block;
}
}
.datacoop-sidebar {
background-color: $datacoop-light-blue;
}
.datacoop-navbar {
background-color: $datacoop-light-blue;
color: $datacoop-purple;
height: 100%;
padding: 40px;
a {
color: $datacoop-purple;
}
// Mobile
@include media-breakpoint-down(sm) {
display: block;
width: 100%;
}
// Desktop
@include media-breakpoint-up(md) {
height: 100%;
width: 340px;
// Overwrite because of usage of flexbox stuff, we use display: block
.navbar-collapse,
.datacoop-menulists
{
display: block !important;
}
}
.data-coop-sidebar-logo
{
display: block;
width: 100%;
img {
display: block;
width: 100%;
margin-left: 2px;
max-width: 400px;
}
margin-bottom: 30px;
}
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
ul > li
{
list-style-type: none;
display: block;
}
ul > li > a
{
font-size: 30px;
}
ul.datacoop-langchooser
{
display: block !important;
margin-top: 20px;
li {
display: block;
margin-right: 20px;
a {
font-size: 18px;
text-transform: uppercase;
}
}
}
margin-bottom: 1em;
}
.datacoop-sidebar-gutter
{
writing-mode: vertical-lr;
transform: rotate(180deg);
max-width: auto !important; // overwrites col-md
flex: 0 0 0; // overwrites col-md
width: auto;
padding: 20px 10px;
background-color: $datacoop-curry-lighter;
color: $datacoop-purple;
font-family: $font-family-monospace;
font-size: 12px;
}
.datacoop-sidebar-gutter-right
{
writing-mode: horizontal-lr;
transform: rotate(0);
padding: 0;
min-width: 33px;
.sidebar-rotated
{
transform: rotate(180deg);
writing-mode: vertical-lr;
width: 500px;
font-size: 16px;
white-space: nowrap;
img {
width: 100%;
background-color: $datacoop-light-blue;
}
}
}
.datacoop-container-content
{
padding: 30px 50px;
}
article {
padding: 1em 0;
}
img {
max-width: 100%;
}
pre {
display: block;
padding: 9.5px;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
pre code {
padding: 0;
font-size: inherit;
color: inherit;
white-space: pre-wrap;
background-color: transparent;
border: none;
border-radius: 0;
}
code {
padding: 2px 4px;
color: inherit;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
font-size: .9em;
}
blockquote,
.blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 1em;
border-left: 5px solid #6c757d;
}
h1, h2, h3, h4
{
text-align: center;
font-weight: bold;
}