abdullahtarawneh.com/assets/scss/content/work/mastodon.scss

350 lines
5.3 KiB
SCSS
Raw Normal View History

2021-12-15 01:04:16 +00:00
#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;
}
2021-12-15 03:23:54 +00:00
p {
2021-12-15 01:04:16 +00:00
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 {
2021-12-16 02:14:57 +00:00
content: 'about';
2021-12-15 01:04:16 +00:00
position: absolute;
top: -0.6em;
2021-12-16 02:14:57 +00:00
left: -0.55em;
font-size: 3em;
2021-12-15 01:04:16 +00:00
font-weight: 900;
opacity: 0.15;
}
}
}
#overview {
.title {
position: relative;
&::before {
2021-12-16 02:14:57 +00:00
content: 'overview';
2021-12-15 01:04:16 +00:00
position: absolute;
top: -0.6em;
left: -0.5em;
2021-12-16 02:14:57 +00:00
font-size: 3em;
2021-12-15 01:04:16 +00:00
font-weight: 900;
opacity: 0.15;
}
}
}
#process {
.title {
position: relative;
&::before {
2021-12-16 02:14:57 +00:00
content: 'process';
2021-12-15 01:04:16 +00:00
position: absolute;
top: -0.6em;
left: -0.5em;
2021-12-16 02:14:57 +00:00
font-size: 3em;
2021-12-15 01:04:16 +00:00
font-weight: 900;
opacity: 0.15;
}
}
.subtitle {
2021-12-16 02:14:57 +00:00
margin-top: 8em;
2021-12-15 01:04:16 +00:00
margin-bottom: 2em;
position: relative;
2021-12-16 02:14:57 +00:00
&:before {
2021-12-15 01:04:16 +00:00
position: absolute;
2021-12-16 02:14:57 +00:00
top: -1em;
2021-12-15 01:04:16 +00:00
right: 0em;
font-size: 4em;
font-weight: 900;
2021-12-16 02:14:57 +00:00
color: #3088D4;
}
}
}
#user {
.subtitle {
&::before {
content: '01';
2021-12-15 01:04:16 +00:00
}
}
.structure {
grid-template-columns: 1fr;
}
}
#admin {
.subtitle {
&::before {
content: '02';
}
}
}
2021-12-15 03:23:54 +00:00
#dev {
.subtitle {
&::before {
content: '03';
}
}
.old {grid-column: span 2}
}
#api {
.subtitle {
&::before {
content: '4+5';
}
}
}
2021-12-15 01:04:16 +00:00
.structure {
font-size: 1.2em;
line-height: 1.4;
margin-bottom: 2em;
display: grid;
2021-12-15 03:23:54 +00:00
@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;
}
}
2021-12-15 01:04:16 +00:00
gap: 1em;
ul {
list-style-type: number;
}
2021-12-15 03:23:54 +00:00
ul > ul {
margin-left: 1.25em;
}
2021-12-15 01:04:16 +00:00
li {
margin-left: 1em;
&::marker {
font-weight: 700;
padding-right: 0.5em;
}
}
2021-12-16 02:14:57 +00:00
.card {
margin-top: 1em;
2021-12-15 01:04:16 +00:00
}
2021-12-16 02:14:57 +00:00
.card__head {
position: relative;
&:before {
position: absolute;
2021-12-16 02:18:35 +00:00
top: -1.675em;
2021-12-16 02:14:57 +00:00
right: -1em;
font-size: 2em;
font-weight: 900;
background: #16191f;
border-radius: 100em;
padding: 0 0.5em;
border: 0.25em solid #303643;
background: #16191f;
2021-12-15 01:04:16 +00:00
}
}
2021-12-16 02:14:57 +00:00
.old .card__head:before {
content: 'OLD';
2021-12-16 09:10:31 +00:00
color: #c89bae;
2021-12-16 02:14:57 +00:00
}
.new .card__head:before {
content: 'NEW';
2021-12-16 09:10:31 +00:00
color: #aec89b;
2021-12-16 02:14:57 +00:00
}
2021-12-15 03:23:54 +00:00
.methods ul, .entities ul {
list-style-type: disc;
}
2021-12-15 01:04:16 +00:00
}
.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;
}
}
2021-12-15 03:23:54 +00:00
#outcomes {
.title {
margin-bottom: 3em;
position: relative;
&::before {
2021-12-16 02:14:57 +00:00
content: 'outcomes';
2021-12-15 03:23:54 +00:00
position: absolute;
top: -0.6em;
left: -0.5em;
2021-12-16 02:14:57 +00:00
font-size: 3em;
2021-12-15 03:23:54 +00:00
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;
2021-12-16 02:14:57 +00:00
top: -0.4em;
2021-12-15 03:23:54 +00:00
left: -0.2em;
}
&:after {
content: '';
font-family: serif;
font-size: 2em;
position: absolute;
2021-12-16 02:14:57 +00:00
bottom: -0.8em;
2021-12-15 03:23:54 +00:00
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;
}
2021-12-20 11:27:10 +00:00
.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';
}
}
2021-12-15 03:23:54 +00:00
}
.separator {
width: 10em;
height: 0.5em;
border-radius: 100em;
border: none;
background: white;
}
#cta {
.container {
2021-12-16 02:14:57 +00:00
display: flex;
flex-flow: column;
2021-12-15 03:23:54 +00:00
}
.title {
2021-12-16 02:14:57 +00:00
text-align: center;
max-width: 41rem;
margin: 0 auto;
margin-bottom: 1em;
2021-12-15 03:23:54 +00:00
}
img {
2021-12-16 02:14:57 +00:00
width: 41em;
margin: 0 auto;
2021-12-15 03:23:54 +00:00
max-width: 100%;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin-top: 1em;
gap: 1em;
}
.button {
width: 100%;
2021-12-15 03:25:16 +00:00
flex-basis: 20em;
2021-12-15 03:23:54 +00:00
i {
margin-right: 1em;
}
&.demo {
background: transparent;
border: 2px solid white;
color: white;
2021-12-15 03:23:54 +00:00
}
&.email {
}
}
}
2021-12-15 01:04:16 +00:00
}