355 lines
5.4 KiB
SCSS
355 lines
5.4 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 {
|
|
.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-block: 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: 2em 1em;
|
|
ul {
|
|
|
|
}
|
|
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.75em;
|
|
right: calc(50% - 3.25ch);
|
|
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 {
|
|
border: 0;
|
|
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 {
|
|
}
|
|
}
|
|
}
|
|
} |