dc-website/themes/datacoop2020/assets/static/css/style.scss

489 lines
10 KiB
SCSS
Raw Normal View History

/* 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;
}
*, *::before, *::after {
box-sizing : border-box;
}
* {
margin : 0;
}
/* Variables */
:root {
--base-grid : 40px;
--base-font-size : 20px;
--text-color : #4b3aba;
--bg-color : #fff;
--alt-bg-color : #a8f3f4;
--bar-color : #f0dcac;
2022-11-09 11:16:43 +00:00
--burger_size : 45px;
}
html {
scroll-behavior: smooth;
}
body {
display : flex;
flex-direction : row;
margin : 0;
padding : 0;
background : var(--bg-color);
color : var(--text-color);
2022-11-10 13:48:26 +00:00
font-family : "Space Grotesk";
font-size : var(--base-font-size);
line-height : 2.3rem;
text-align : left;
border-right : var(--base-grid) solid var(--bar-color);
}
a {
color : var(--text-color);
}
h1, h2, h3, h4, h5, h6 {
font-weight : 700;
line-height : 3.2rem;
}
main h1 {
font-size : 3rem;
margin : 0 0 2rem 0;
line-height : 4rem;
}
main h2 {
font-size : 2rem;
margin : 3rem 0 1rem 0;
}
main h3 {
font-size : 1.5rem;
margin : 2rem 0 1.5rem 0;
}
main p, main code {
margin : 1.5rem 0;
}
main ol, main ul {
margin : 1.5rem;
2021-05-04 20:21:50 +00:00
}
main ol li, main ul li {
margin : 0;
}
aside {
background : var(--alt-bg-color);
width : 420px;
border-right : var(--base-grid) solid var(--bar-color);
}
aside header, aside nav, aside footer {
margin : var(--base-grid);
}
main {
width : 100vw;
max-width : 900px;
}
main, aside {
min-height : 100vh;
}
main header, main article {
margin : var(--base-grid);
}
main article {
padding : calc(var(--base-grid) / 2) 0 0 0;
}
aside nav {
position : sticky;
top : var(--base-grid);
2022-11-10 13:48:26 +00:00
display : block;
min-width : 200px;
}
aside nav ol {
list-style-type : none;
padding : 0;
margin : 0;
}
aside nav ol li a {
display : block;
font-size : 2rem;
margin : 1.2rem 0;
text-decoration : none;
@media (max-height: 700px) {
font-size : 1.5rem;
margin : 0.5rem 0;
}
}
aside nav ol li a:hover {
text-decoration : underline;
}
aside nav ol li a.active {
font-weight : bold;
}
aside #menu-toggle {
display : none;
font-size : 2em;
color : var(--text-color);
background : transparent;
border : 0;
}
aside nav footer {
margin : var(--base-grid) 0 0 0;
@media (max-height: 700px) {
margin : (var(--base-grid) / 1.5) 0 0 0;
}
}
aside nav footer ol li a {
font-size : 1.65rem;
margin : 1.2rem 0;
@media (max-height: 700px) {
font-size : 1.2rem;
margin : 0.1rem 0;
}
}
2022-11-09 11:16:43 +00:00
aside header a img {
display : block;
width : auto;
2022-11-09 11:16:43 +00:00
height : 140px;
}
aside > footer {
position : fixed;
bottom : 0;
}
aside > footer img {
margin-right : 5px;
opacity : 0.5;
}
aside > footer img:hover {
opacity : 1;
}
.badge-icon {
2023-03-06 08:43:17 +00:00
width: 75px;
height: auto;
2023-03-06 08:43:17 +00:00
svg{
fill:#4b3aba;
width: 100%;
height: auto;
}
}
.principles-list {
padding: 0;
margin: 0;
display: grid;
grid-template-columns: max-content 1fr;
2023-04-02 22:06:38 +00:00
@media(max-width: 700px) {
grid-template-columns: 100%;
}
align-items: center;
gap: 20px;
dt {
vertical-align: top;
align-self: start;
font-weight: bold;
img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
}
dd {
line-height: 130%;
}
}
2023-03-06 08:43:17 +00:00
dl.dl-services,
{
display : grid;
column-gap : 2rem;
row-gap: 2rem;
2023-03-06 08:43:17 +00:00
dt {
grid-column-start : 1;
grid-column-end : 2;
font-weight : bold;
}
dd {
grid-column-start : 2;
grid-column-end : 3;
}
}
.badge-definitions,
.status-definitions,
2023-03-06 08:43:17 +00:00
{
display : grid;
column-gap : 2rem;
.badge-icon {
grid-column-start : 1;
grid-column-end : 2;
}
.badge-name {
grid-column-start : 2;
grid-column-end : 3;
font-weight : bold;
margin-top: 20px;
}
.badge-description {
grid-column-start : 3;
grid-column-end : 4;
p {
margin-top: 20px;
}
}
.badge-status {
margin-bottom: 40px;
}
2023-04-02 22:06:38 +00:00
@media(max-width: 700px) {
grid-template-columns: min-content auto;
.badge-icon {
grid-column-start : 1;
grid-column-end : 2;
}
.badge-name {
grid-column-start : 2;
grid-column-end : 3;
}
.badge-description {
grid-column-start : 1;
grid-column-end : 3;
}
}
}
.service-badges {
display : grid;
column-gap : 2rem;
grid-template-columns: 1fr 1.5fr auto;
.badge-icon {
grid-column-start : 1;
grid-column-end : 2;
}
.badge-name {
grid-column-start : 2;
grid-column-end : 3;
font-weight : bold;
margin-top: 20px;
}
.badge-description {
grid-column-start : 3;
grid-column-end : 4;
p {
margin-top: 20px;
}
}
2023-04-02 22:06:38 +00:00
@media(max-width: 700px) {
grid-template-columns: min-content auto;
.badge-icon {
grid-column-start : 1;
grid-column-end : 2;
}
.badge-name {
grid-column-start : 2;
grid-column-end : 3;
}
.badge-description {
grid-column-start : 1;
grid-column-end : 3;
}
}
}
.badge-status {
width: 75px;
height: 75px;
border-radius: 75px;
}
.badge-status-positive {
@extend .badge-status;
border: 5px solid #4c4;
}
.badge-status-negative {
@extend .badge-status;
border: 5px solid #c44;
}
.badge-status-partial {
@extend .badge-status;
border: 5px solid #cc4;
}
.badge-status-none {
@extend .badge-status;
border: 5px solid #888;
}
@media(max-width:1000px) {
:root {
--base-grid : 40px;
2022-11-10 13:48:26 +00:00
--base-font-size : 20px;
}
body {
flex-direction : column;
border : 0;
2022-11-15 17:17:19 +00:00
line-height : 2rem;
}
aside {
min-height : auto;
width : 100%;
border-right : 0;
border-bottom : var(--base-grid) solid var(--bar-color);
}
aside header {
display : flex;
justify-content : space-between;
2022-11-10 13:48:26 +00:00
align-items : center;
margin : var(--base-grid) calc(var(--base-grid) / 2);
}
aside header a img {
height : 80px;
}
aside nav {
display : none;
}
aside.display nav {
display : inherit;
}
aside > footer {
display : none;
}
aside.display > footer {
2022-11-10 13:48:26 +00:00
display : inherit;
}
aside #menu-toggle {
display : initial;
font-size : 3em;
font-weight : bold;
}
aside nav ol li a {
display : block;
margin : 3rem 0;
font-size : 3rem;
}
2022-11-09 11:16:43 +00:00
aside > footer {
position : relative;
bottom : 0;
}
2022-11-09 11:16:43 +00:00
header .nav-toggle {
cursor : pointer;
display : block;
height : var(--burger_size);
margin-top : 10px;
2022-11-09 11:16:43 +00:00
}
header .nav-toggle span {
display : block;
height : calc( ( var(--burger_size) / 4 ) / 2 );
width : var(--burger_size);
background : var(--text-color);
margin-bottom : calc( ( var(--burger_size) / 3 ) / 2 );
2022-11-09 11:16:43 +00:00
}
header .nav-toggle span {
position : relative;
top : 0;
transition : all 0.3s;
2022-11-09 11:16:43 +00:00
}
header .nav-toggle.display span#nav-toggle-b {
2022-11-10 13:48:26 +00:00
opacity : 0;
2022-11-09 11:16:43 +00:00
}
header .nav-toggle.display span#nav-toggle-a {
2022-11-10 13:48:26 +00:00
transform : rotate(45deg);
top : calc( var(--burger_size) / 4 );
2022-11-09 11:16:43 +00:00
}
header .nav-toggle.display span#nav-toggle-c {
2022-11-10 13:48:26 +00:00
transform : rotate(-45deg);
top : calc( ( var(--burger_size) / 3 ) * -1 );
2022-11-09 11:16:43 +00:00
}
main article {
margin : calc(var(--base-grid) / 2);
}
}