You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
3.3 KiB
CSS
196 lines
3.3 KiB
CSS
@font-face {
|
|
font-family: 'Rubik';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: local(''),
|
|
url('/static/fonts/rubik-v20-latin-300.woff2') format('woff2'),
|
|
url('/static/fonts/rubik-v20-latin-300.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Rubik';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: local(''),
|
|
url('/static/fonts/rubik-v20-latin-700.woff2') format('woff2'),
|
|
url('/static/fonts/rubik-v20-latin-700.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Rubik';
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
src: local(''),
|
|
url('/static/fonts/rubik-v20-latin-800.woff2') format('woff2'),
|
|
url('/static/fonts/rubik-v20-latin-800.woff') format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Rubik';
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
src: local(''),
|
|
url('/static/fonts/rubik-v20-latin-300italic.woff2') format('woff2'),
|
|
url('/static/fonts/rubik-v20-latin-300italic.woff') format('woff');
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"header"
|
|
"main"
|
|
"footer";
|
|
grid-template-columns: 100%;
|
|
grid-template-rows: auto 1fr auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
/* font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif; */
|
|
font-family: Rubik, sans-serif;
|
|
font-size: 1.1rem;
|
|
font-weight: 300;
|
|
background-color: #94BFBE;
|
|
color: white;
|
|
}
|
|
|
|
#page_header {
|
|
background-color: #94BFBE;
|
|
color: white;
|
|
}
|
|
|
|
#page_nav {
|
|
/* background-color: #F7B801; */
|
|
/* background-color: #7678ED; */
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 1rem 1rem;
|
|
margin: 0 auto;
|
|
max-width: 60rem;
|
|
/* box-shadow: 0px 2px 10px #B8B8B8; */
|
|
}
|
|
|
|
#page_nav #title_box {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
#page_nav #right_nav_box {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
}
|
|
|
|
#page_nav ul {
|
|
list-style-type: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(5, auto);
|
|
grid-template-rows: 100%;
|
|
column-gap: 1.5rem;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
#page_nav li {
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#page_nav a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
#page_main {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
#page_footer {
|
|
background-color: #94BFBE;
|
|
color: white;
|
|
}
|
|
|
|
#page_footer_content {
|
|
padding: 1rem 1rem;
|
|
margin: 0 auto;
|
|
max-width: 60rem;
|
|
color: white;
|
|
}
|
|
|
|
.sticky_header {
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.offwhite {
|
|
background-color: white;
|
|
padding: 2rem 8rem;
|
|
}
|
|
|
|
.textsection {
|
|
background-color: #F5F5F0;
|
|
padding: 1rem 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
#content {
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem 4rem 1rem;
|
|
max-width: 60rem;
|
|
}
|
|
|
|
.content_section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.quiet {
|
|
color: #898989;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
h1, h2 {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
figure {
|
|
/* display: flex;
|
|
flex-direction: column; */
|
|
width: fit-content;
|
|
margin: 0;
|
|
}
|
|
|
|
figcaption {
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
figcaption a {
|
|
color: inherit;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: circle;
|
|
}
|
|
|
|
li {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/*
|
|
Palette
|
|
#94BFBE
|
|
#F5F5F0
|
|
#FFFFFF
|
|
*/ |