abdullahtarawneh.com/assets/scss/content/work/mastodon.scss
2021-12-30 02:50:22 -06:00

359 lines
5.5 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: 2em;
justify-items: center;
align-items: center;
svg {width: 6em;height:auto;}
}
.title {
line-height: 1;
margin: 0;
}
}
.title {
font-size: 2em;
line-height: 1.4;
font-weight: 700;
margin-bottom: 1em;
margin-top: 1em;
}
p {
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.55em;
font-size: 3em;
font-weight: 900;
opacity: 0.15;
}
}
}
#overview {
.title {
position: relative;
&::before {
content: 'overview';
position: absolute;
top: -0.6em;
left: -0.5em;
font-size: 3em;
font-weight: 900;
opacity: 0.15;
}
}
}
#process {
.title {
position: relative;
&::before {
content: 'process';
position: absolute;
top: -0.6em;
left: -0.5em;
font-size: 3em;
font-weight: 900;
opacity: 0.15;
}
}
.subtitle {
margin-top: 8em;
margin-bottom: 2em;
position: relative;
&:before {
position: absolute;
top: -1em;
right: 0em;
font-size: 4em;
font-weight: 900;
color: #3088D4;
}
}
}
#user {
.subtitle {
&::before {
content: '01';
}
}
.structure {
grid-template-columns: 1fr;
}
}
#admin {
.subtitle {
&::before {
content: '02';
}
}
}
#dev {
.subtitle {
&::before {
content: '03';
}
}
.old {grid-column: span 2}
}
#api {
.subtitle {
&::before {
content: '4+5';
}
}
}
.structure {
font-size: 1.2em;
line-height: 1.4;
margin-bottom: 2em;
display: grid;
@media (min-width: 40em) {
grid-template-columns: 1fr 1fr;
&.new {
grid-auto-flow: column;
grid-template-rows: auto auto 1fr;
}
.methods {
grid-row: span 3;
grid-column: 2;
}
}
gap: 1em;
ul {
list-style-type: number;
}
ul > ul {
margin-left: 1.25em;
}
li {
margin-left: 1em;
&::marker {
font-weight: 700;
padding-right: 0.5em;
}
}
.card {
margin-top: 1em;
}
.card__head {
position: relative;
&:before {
position: absolute;
top: -1.675em;
right: -1em;
font-size: 2em;
font-weight: 900;
background: #16191f;
border-radius: 100em;
padding: 0 0.5em;
border: 0.25em solid #303643;
background: #16191f;
}
}
.old .card__head:before {
content: 'OLD';
color: #c89bae;
}
.new .card__head:before {
content: 'NEW';
color: #aec89b;
}
.methods ul, .entities ul {
list-style-type: disc;
}
}
.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;
}
}
#outcomes {
.title {
margin-bottom: 3em;
position: relative;
&::before {
content: 'outcomes';
position: absolute;
top: -0.6em;
left: -0.5em;
font-size: 3em;
font-weight: 900;
opacity: 0.15;
}
}
.praise {
background: #303643;
color: #d9e1e8;
font-size: 1.8em;
line-height: 1.2;
text-align: center;
padding: 1em;
font-family: monospace;
position: relative;
&:before{
content: '';
font-family: serif;
font-size: 2em;
position: absolute;
top: -0.4em;
left: -0.2em;
}
&:after {
content: '';
font-family: serif;
font-size: 2em;
position: absolute;
bottom: -0.8em;
right: -0.2em;
}
}
cite {
margin-top: 1em;
text-align: right;
em {
font-weight: 700;
}
}
.attribution {
margin-bottom: 5em;
display: flex;
justify-content: end;
align-items: end;
img {
width: auto;
height: 3em;
margin-right: 1em;
border-radius: 100em;
}
}
ul {
line-height: 1.4;
font-size: 1.2em;
list-style-type: disc;
margin-bottom: 1em;
}
li {
margin-left: 1em;
margin-bottom: 1em;
}
.benefit {
position: relative;
margin-top: 8em;
&:before {
position: absolute;
font-size: 4em;
font-weight: 700;
top: -1.25em;
color: #3088d4;
}
&.one:before {
content: '01';
}
&.two:before {
content: '02';
}
&.three:before {
content: '03';
}
}
}
.separator {
width: 10em;
height: 0.5em;
border-radius: 100em;
border: none;
background: white;
}
#cta {
.container {
display: flex;
flex-flow: column;
}
.title {
text-align: center;
max-width: 41rem;
margin: 0 auto;
margin-bottom: 1em;
}
img {
width: 100%;
height: 100%;
margin: 0 auto;
max-width: 100%;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin-top: 1em;
gap: 1em;
}
.button {
width: 100%;
flex-basis: 20em;
i {
margin-right: 1em;
}
&.demo {
background: transparent;
border: 2px solid white;
color: white;
&:hover {
background: rgba(255,255,255,0.2);
}
}
&.email {
}
}
}
}