c4697e47c8
Add brochures section to frontpage Add grid view template Add article about medical cannabis study for patient organizations Add brochure for doctors Add brochure for patient organizations Add brochure for politicians Update styles to support new sections Update news article date
148 lines
3.2 KiB
CSS
148 lines
3.2 KiB
CSS
/* MINIMAL CSS RESET*/
|
|
* { margin-bottom: 0; }
|
|
|
|
/* VARIABLES */
|
|
:root {
|
|
--font-body: Roboto, sans-serif;
|
|
--font-heading: "PT serif", Georgia, "Nimbus Roman", serif;
|
|
--color-blue: #6391b5;
|
|
--color-blue: oklch(0.6376 0.0739 242.84);
|
|
--color-green: #009c80;
|
|
--color-green: oklch(0.618 0.1176 173.93);
|
|
--color-green-light: #f2fbf8;
|
|
--color-green-light: oklch(0.9811 0.01 173.93);
|
|
--color-grey: #404040;
|
|
--color-grey: oklch(0.3715 0 0);
|
|
}
|
|
|
|
/* GLOBAL */
|
|
html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth; }
|
|
body { margin: 0; color: var(--color-grey) }
|
|
p, ul { line-height: 1.5em; hyphens: auto }
|
|
img { max-width: 100%; height: auto; }
|
|
h1 { color: var(--color-green); font-size: 2.3rem }
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-heading);
|
|
font-weight: 400;
|
|
line-height: 1.3em;
|
|
margin-top: 1.3em;
|
|
text-wrap: pretty;
|
|
}
|
|
a {
|
|
color: var(--color-green);
|
|
text-decoration: none;
|
|
&:hover { color: var(--color-blue) }
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas: "header" "main" "footer";
|
|
height: 100%;
|
|
width: 100%;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.contain, :where(main>article, main>aside, main>section) {
|
|
display: grid;
|
|
grid-template-columns: minmax(.4rem, 1fr) minmax(0, 42rem) minmax(.3rem, 1fr);
|
|
> * {
|
|
grid-column: 2;
|
|
}
|
|
}
|
|
|
|
.escape {
|
|
grid-column: 1 / -1 !important;
|
|
}
|
|
|
|
/* HEADER */
|
|
header {
|
|
border-bottom: 3px #00000022 solid;
|
|
grid-area: header;
|
|
> div {
|
|
padding-bottom: .2rem;
|
|
display: flex;
|
|
.logo {
|
|
margin-right: .3rem;
|
|
svg {
|
|
width: 7rem;
|
|
height: 100%;
|
|
#symbol {
|
|
fill: var(--color-blue);
|
|
}
|
|
#tekst {
|
|
fill: var(--color-green);
|
|
}
|
|
}
|
|
}
|
|
|
|
nav {
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content:flex-end;
|
|
flex: 1;
|
|
ul {
|
|
display: flex;
|
|
list-style: none;
|
|
flex-wrap: wrap;
|
|
margin-top: .4rem;
|
|
padding: 0;
|
|
justify-content: flex-end;
|
|
/* align-self: end; */
|
|
a {
|
|
text-decoration: none;
|
|
color: white;
|
|
border-radius: 1rem;
|
|
background-color: var(--color-grey);
|
|
padding: 0.35rem 1rem;
|
|
margin-left:0.4rem;
|
|
margin-top:0.4rem;
|
|
&:hover, &.active {
|
|
background-color: var(--color-green);
|
|
color: white;
|
|
}
|
|
&:focus {
|
|
outline: .1rem var(--color-green) solid;
|
|
color: var(--color-grey);
|
|
background-color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* MAIN */
|
|
main {
|
|
grid-area: main;
|
|
background-color: var(--color-green-light);
|
|
padding-bottom: 2rem;
|
|
|
|
article, aside { margin-top: 1.3em }
|
|
article {
|
|
.intro {
|
|
font-size: 1.2rem;
|
|
line-height: 1.35em;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* FOOTER */
|
|
|
|
footer {
|
|
color: var(--color-green-light);
|
|
a {
|
|
color: var(--color-green-light);
|
|
&:hover { color: white; text-decoration: underline }
|
|
}
|
|
background-color: var(--color-green);
|
|
grid-area: footer;
|
|
> div {
|
|
margin: 1rem 0;
|
|
text-align: center;
|
|
.generated { font-size: .6rem }
|
|
}
|
|
}
|