abdullahtarawneh.com/assets/scss/work/mastodon/index.scss
2021-12-14 19:04:16 -06:00

191 lines
2.9 KiB
SCSS

#mastodon {
overflow: hidden;
background: #16191f;
color: #9baec8;
.page-header {
background: #3088D4;
color: white;
.container {
display: grid;
@media (min-width: 51.75em) {
grid-template-columns: auto 1fr;
}
gap: 1em;
justify-items: center;
align-items: center;
}
}
.title {
font-size: 2em;
line-height: 1.4;
font-weight: 700;
margin-bottom: 1em;
margin-top: 1em;
}
.blurb {
line-height: 1.4;
font-size: 1.2em;
margin-bottom: 1.4em;
a {
color: white;
}
}
.subtitle {
font-size: 1.6em;
font-weight: 700;
margin-bottom: 1em;
}
.conversation {
display: flex;
flex-flow: column;
align-items: center;
margin-bottom: 1.4em;
iframe {
width: 80ch
}
}
#about {
.container {
display: flex;
flex-flow: column;
gap: 1em;
}
.title {
position: relative;
&::before {
content: 'About';
position: absolute;
top: -0.6em;
left: -0.5em;
font-size: 4em;
font-weight: 900;
opacity: 0.15;
}
}
}
#overview {
.title {
position: relative;
&::before {
content: 'Overview';
position: absolute;
top: -0.6em;
left: -0.5em;
font-size: 4em;
font-weight: 900;
opacity: 0.15;
}
}
}
#process {
.title {
position: relative;
&::before {
content: 'Process';
position: absolute;
top: -0.6em;
left: -0.5em;
font-size: 4em;
font-weight: 900;
opacity: 0.15;
}
}
}
#user {
.subtitle {
margin-top: 4em;
margin-bottom: 2em;
position: relative;
&::before {
content: '01';
position: absolute;
top: -0.4em;
right: 0em;
font-size: 4em;
font-weight: 900;
opacity: 0.15;
}
}
.structure {
grid-template-columns: 1fr;
}
}
#admin {
.subtitle {
margin-top: 4em;
margin-bottom: 2em;
position: relative;
&::before {
content: '02';
position: absolute;
top: -0.4em;
right: 0em;
font-size: 4em;
font-weight: 900;
opacity: 0.15;
}
}
}
.structure {
font-size: 1.2em;
line-height: 1.4;
margin-bottom: 2em;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
ul {
list-style-type: number;
}
li {
margin-left: 1em;
&::marker {
font-weight: 700;
padding-right: 0.5em;
}
}
.old {
.card__head {
position: relative;
&::before {
content: 'OLD';
position: absolute;
top: -0.6em;
right: -0.25em;
font-size: 4em;
font-weight: 900;
opacity: 0.15;
}
}
}
.new {
.card__head {
position: relative;
&::before {
content: 'NEW';
position: absolute;
top: -0.6em;
right: -0.25em;
font-size: 4em;
font-weight: 900;
opacity: 0.15;
}
}
}
}
p {column-span: 2}
.card {
background: #303643;
color: #d9e1e8;
padding: 2em;
border-radius: 1em;
&__head {
font-weight: 700;
margin-bottom: 1em;
}
&__body {
display: flex;
flex-flow: column;
gap: 0.5em;
}
}
}