miom.space/styles.css

230 lines
3.2 KiB
CSS
Raw Normal View History

2021-10-22 11:13:16 +00:00
* {
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
2021-10-22 16:05:00 +00:00
font-size: 7.3vw;
line-height: 150%;
2021-10-22 22:09:23 +00:00
background: white;
}
body {
background: white;
2021-10-22 16:05:00 +00:00
}
2021-10-22 21:42:44 +00:00
a,
a:visited {
2021-10-22 16:05:00 +00:00
color: #ff006c;
2021-10-22 21:42:44 +00:00
text-decoration: none;
}
a:hover {
text-decoration: underline;
2021-10-22 11:13:16 +00:00
}
2021-10-23 10:14:09 +00:00
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
2021-10-22 16:05:00 +00:00
.mi-page {
2021-10-22 11:13:16 +00:00
margin: 0;
2021-10-22 16:05:00 +00:00
column-gap: 0.666rem;
2021-10-22 11:13:16 +00:00
padding: 0;
2021-10-22 16:05:00 +00:00
padding-left: 0.666rem;
2021-10-22 11:13:16 +00:00
display: grid;
2021-10-22 16:05:00 +00:00
grid-template-columns: 14vw 1fr;
grid-template-rows: auto auto auto auto;
}
.mi-page--title {
font-weight: 100;
}
.mi-logo {
font-weight: 100;
}
.mi-page--title_side {
position: sticky;
margin-top: 2rem;
top: 2rem;
font-size: 0.7rem;
line-height: 120%;
align-self: start;
}
.mi-page--we-are {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 2;
}
.mi-content {
grid-column-start: 2;
grid-column-end: 3;
background: black;
color: white;
padding: 0.666rem;
margin: 0;
}
.mi-things-we-are {
padding: 1rem 0;
grid-row-start: 1;
grid-row-end: 2;
display: flex;
font-size: 0.7rem;
flex-direction: column;
font-weight: 100;
position: relative;
}
.mi-things-we-are::before {
display: flex;
justify-content: right;
content: 'space';
position: sticky;
top: 1.5rem;
left: 0;
right: 0;
padding: 0.5em 0.666rem;
2021-10-22 16:46:49 +00:00
padding-right: 3.75rem;
2021-10-22 16:05:00 +00:00
background: white;
color: black;
z-index: 0;
}
.mi-things-we-are--space {
opacity: 0;
}
.mi-things-we-are--thing {
padding: 0.5em 0.666rem;
white-space: nowrap;
mix-blend-mode: difference;
z-index: 1;
transition-property: background, color;
transition-duration: 0.2s;
transition-timing-function: ease;
}
.mi-things-we-are--thing:first-child {
margin-top: -1.7rem;
}
.mi-main {
grid-row-start: 2;
grid-row-end: 3;
2021-10-23 10:14:09 +00:00
font-size: 3vw;
line-height: 150%;
2021-10-22 16:05:00 +00:00
}
.mi-footer {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 3;
}
.mi-people {
list-style: none;
padding: 0;
2021-10-23 10:14:09 +00:00
margin: 1rem 0;
2021-10-22 16:05:00 +00:00
font-size: 0.6rem;
line-height: 120%;
}
.mi-person {
margin-top: 1em;
2021-10-22 11:13:16 +00:00
}
2021-10-22 16:05:00 +00:00
.mi-person--name {
margin: 0;
font-size: 0.8em;
}
2021-10-22 11:13:16 +00:00
2021-10-22 17:27:57 +00:00
.mi-person--pronoun {
font-weight: 400;
}
2021-10-22 16:05:00 +00:00
.mi-person--role {
2021-10-22 16:46:49 +00:00
font-size: 0.4rem;
2021-10-22 16:05:00 +00:00
margin: 0;
}
.mi-person--contact-toggle {
font-size: 0.4rem;
2021-10-22 16:46:49 +00:00
font-weight: 400;
2021-10-22 16:05:00 +00:00
color: #ff006c;
cursor: pointer;
}
.mi-person--contact-options {
margin: 0;
padding: 0;
2021-10-22 17:31:45 +00:00
font-size: 0.4rem;
2021-10-22 16:05:00 +00:00
}
.mi-person--contact-option-name {
2021-10-22 21:42:44 +00:00
padding-right: 0.5em;
2021-10-22 16:05:00 +00:00
}
.mi-footer {
font-size: 0.5rem;
}
.mi-footer--links {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
line-height: 140%;
}
@media screen and (min-width: 1400px) {
html {
font-size: 5vw;
}
.mi-page {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto auto;
}
.mi-page--title {
white-space: nowrap;
line-height: 200%;
}
.mi-things-we-are {
2021-10-22 17:25:53 +00:00
padding: 1.15rem 0;
2021-10-22 16:05:00 +00:00
}
2021-10-22 16:46:49 +00:00
.mi-things-we-are::before {
padding-right: 8.05rem;
2021-10-22 17:25:53 +00:00
top: 1.65rem;
2021-10-22 16:46:49 +00:00
}
2021-10-22 16:05:00 +00:00
.mi-things-we-are--thing:first-child {
margin-top: -1.6rem;
}
2021-10-22 17:31:45 +00:00
.mi-person--contact-options {
font-size: 0.3rem;
}
2021-10-22 16:05:00 +00:00
.mi-footer--links {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}