@ -15,6 +15,276 @@ $small-breakpoint: 960px;
}
}
. rich-formatting {
font-family : ' mastodon-font-sans-serif ' , sans-serif ;
font-size : 16 px ;
font-weight : 400 ;
font-size : 16 px ;
line-height : 30 px ;
color : $darker-text-color ;
padding-right : 10 px ;
a {
color : $highlight-text-color ;
text-decoration : underline ;
}
p ,
li {
font-family : ' mastodon-font-sans-serif ' , sans-serif ;
font-size : 16 px ;
font-weight : 400 ;
font-size : 16 px ;
line-height : 30 px ;
margin-bottom : 12 px ;
color : $darker-text-color ;
a {
color : $highlight-text-color ;
text-decoration : underline ;
}
& : last-child {
margin-bottom : 0 ;
}
}
em {
display : inline ;
margin : 0 ;
padding : 0 ;
font-weight : 700 ;
background : transparent ;
font-family : inherit ;
font-size : inherit ;
line-height : inherit ;
color : lighten ( $darker-text-color , 10 % ) ;
}
h1 {
font-family : ' mastodon-font-display ' , sans-serif ;
font-size : 26 px ;
line-height : 30 px ;
font-weight : 500 ;
margin-bottom : 20 px ;
color : $secondary-text-color ;
small {
font-family : ' mastodon-font-sans-serif ' , sans-serif ;
display : block ;
font-size : 18 px ;
font-weight : 400 ;
color : lighten ( $darker-text-color , 10 % ) ;
}
}
h2 {
font-family : ' mastodon-font-display ' , sans-serif ;
font-size : 22 px ;
line-height : 26 px ;
font-weight : 500 ;
margin-bottom : 20 px ;
color : $secondary-text-color ;
}
h3 {
font-family : ' mastodon-font-display ' , sans-serif ;
font-size : 18 px ;
line-height : 24 px ;
font-weight : 500 ;
margin-bottom : 20 px ;
color : $secondary-text-color ;
}
h4 {
font-family : ' mastodon-font-display ' , sans-serif ;
font-size : 16 px ;
line-height : 24 px ;
font-weight : 500 ;
margin-bottom : 20 px ;
color : $secondary-text-color ;
}
h5 {
font-family : ' mastodon-font-display ' , sans-serif ;
font-size : 14 px ;
line-height : 24 px ;
font-weight : 500 ;
margin-bottom : 20 px ;
color : $secondary-text-color ;
}
h6 {
font-family : ' mastodon-font-display ' , sans-serif ;
font-size : 12 px ;
line-height : 24 px ;
font-weight : 500 ;
margin-bottom : 20 px ;
color : $secondary-text-color ;
}
ul ,
ol {
margin-left : 20 px ;
& [ type = ' a ' ] {
list-style-type : lower-alpha ;
}
& [ type = ' i ' ] {
list-style-type : lower-roman ;
}
}
ul {
list-style : disc ;
}
ol {
list-style : decimal ;
}
li > ol ,
li > ul {
margin-top : 6 px ;
}
hr {
width : 100 % ;
height : 0 ;
border : 0 ;
border-bottom : 1 px solid rgba ( $ui-base-lighter-color , .6 ) ;
margin : 20 px 0 ;
& . spacer {
height : 1 px ;
border : 0 ;
}
}
}
. information-board {
background : darken ( $ui-base-color , 4 % ) ;
padding : 20 px 0 ;
. container-alt {
position : relative ;
padding-right : 280 px + 15 px ;
}
& __sections {
display : flex ;
justify-content : space-between ;
flex-wrap : wrap ;
}
& __section {
flex : 1 0 0 ;
font-family : ' mastodon-font-sans-serif ' , sans-serif ;
font-size : 16 px ;
line-height : 28 px ;
color : $primary-text-color ;
text-align : right ;
padding : 10 px 15 px ;
span ,
strong {
display : block ;
}
span {
& : last-child {
color : $secondary-text-color ;
}
}
strong {
font-weight : 500 ;
font-size : 32 px ;
line-height : 48 px ;
}
@media screen and ( max-width : $column-breakpoint ) {
text-align : center ;
}
}
. panel {
position : absolute ;
width : 280 px ;
box-sizing : border-box ;
background : darken ( $ui-base-color , 8 % ) ;
padding : 20 px ;
padding-top : 10 px ;
border-radius : 4 px 4 px 0 0 ;
right : 0 ;
bottom : - 40 px ;
. panel-header {
font-family : ' mastodon-font-display ' , sans-serif ;
font-size : 14 px ;
line-height : 24 px ;
font-weight : 500 ;
color : $darker-text-color ;
padding-bottom : 5 px ;
margin-bottom : 15 px ;
border-bottom : 1 px solid lighten ( $ui-base-color , 4 % ) ;
text-overflow : ellipsis ;
white-space : nowrap ;
overflow : hidden ;
a ,
span {
font-weight : 400 ;
color : darken ( $darker-text-color , 10 % ) ;
}
a {
text-decoration : none ;
}
}
}
. owner {
text-align : center ;
. avatar {
width : 80 px ;
height : 80 px ;
margin : 0 auto ;
margin-bottom : 15 px ;
img {
display : block ;
width : 80 px ;
height : 80 px ;
border-radius : 48 px ;
}
}
. name {
font-size : 14 px ;
a {
display : block ;
color : $primary-text-color ;
text-decoration : none ;
& : hover {
. display_name {
text-decoration : underline ;
}
}
}
. username {
display : block ;
color : $darker-text-color ;
}
}
}
}
. landing-page {
. grid {
display : grid ;
@ -486,128 +756,6 @@ $small-breakpoint: 960px;
}
}
. information-board {
background : darken ( $ui-base-color , 4 % ) ;
padding : 20 px 0 ;
. container-alt {
position : relative ;
padding-right : 280 px + 15 px ;
}
& __sections {
display : flex ;
justify-content : space-between ;
flex-wrap : wrap ;
}
& __section {
flex : 1 0 0 ;
font-family : ' mastodon-font-sans-serif ' , sans-serif ;
font-size : 16 px ;
line-height : 28 px ;
color : $primary-text-color ;
text-align : right ;
padding : 10 px 15 px ;
span ,
strong {
display : block ;
}
span {
& : last-child {
color : $secondary-text-color ;
}
}
strong {
font-weight : 500 ;
font-size : 32 px ;
line-height : 48 px ;
}
@media screen and ( max-width : $column-breakpoint ) {
text-align : center ;
}
}
. panel {
position : absolute ;
width : 280 px ;
box-sizing : border-box ;
background : darken ( $ui-base-color , 8 % ) ;
padding : 20 px ;
padding-top : 10 px ;
border-radius : 4 px 4 px 0 0 ;
right : 0 ;
bottom : - 40 px ;
. panel-header {
font-family : ' mastodon-font-display ' , sans-serif ;
font-size : 14 px ;
line-height : 24 px ;
font-weight : 500 ;
color : $darker-text-color ;
padding-bottom : 5 px ;
margin-bottom : 15 px ;
border-bottom : 1 px solid lighten ( $ui-base-color , 4 % ) ;
text-overflow : ellipsis ;
white-space : nowrap ;
overflow : hidden ;
a ,
span {
font-weight : 400 ;
color : darken ( $darker-text-color , 10 % ) ;
}
a {
text-decoration : none ;
}
}
}
. owner {
text-align : center ;
. avatar {
width : 80 px ;
height : 80 px ;
margin : 0 auto ;
margin-bottom : 15 px ;
img {
display : block ;
width : 80 px ;
height : 80 px ;
border-radius : 48 px ;
}
}
. name {
font-size : 14 px ;
a {
display : block ;
color : $primary-text-color ;
text-decoration : none ;
& : hover {
. display_name {
text-decoration : underline ;
}
}
}
. username {
display : block ;
color : $darker-text-color ;
}
}
}
}
& . alternative {
padding : 10 px 0 ;
@ -983,21 +1131,6 @@ $small-breakpoint: 960px;
}
}
. extended-description {
padding : 50 px 0 ;
font-family : ' mastodon-font-sans-serif ' , sans-serif ;
font-size : 16 px ;
font-weight : 400 ;
font-size : 16 px ;
line-height : 30 px ;
color : $darker-text-color ;
a {
color : $highlight-text-color ;
text-decoration : underline ;
}
}
. footer-links {
padding-bottom : 50 px ;
text-align : right ;