Port 1bd00036c2
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
local
parent
5d4d4a69f6
commit
67b4ecdd21
21 changed files with 782 additions and 1288 deletions
@ -0,0 +1,33 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import Blurhash from './blurhash'; |
||||||
|
import classNames from 'classnames'; |
||||||
|
|
||||||
|
export default class Image extends React.PureComponent { |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
src: PropTypes.string, |
||||||
|
srcSet: PropTypes.string, |
||||||
|
blurhash: PropTypes.string, |
||||||
|
className: PropTypes.string, |
||||||
|
}; |
||||||
|
|
||||||
|
state = { |
||||||
|
loaded: false, |
||||||
|
}; |
||||||
|
|
||||||
|
handleLoad = () => this.setState({ loaded: true }); |
||||||
|
|
||||||
|
render () { |
||||||
|
const { src, srcSet, blurhash, className } = this.props; |
||||||
|
const { loaded } = this.state; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={classNames('image', { loaded }, className)} role='presentation'> |
||||||
|
{blurhash && <Blurhash hash={blurhash} className='image__preview' />} |
||||||
|
<img src={src} srcSet={srcSet} alt='' onLoad={this.handleLoad} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -1,34 +0,0 @@ |
|||||||
.compact-header { |
|
||||||
h1 { |
|
||||||
font-size: 24px; |
|
||||||
line-height: 28px; |
|
||||||
color: $darker-text-color; |
|
||||||
font-weight: 500; |
|
||||||
margin-bottom: 20px; |
|
||||||
padding: 0 10px; |
|
||||||
word-wrap: break-word; |
|
||||||
|
|
||||||
@media screen and (max-width: 740px) { |
|
||||||
text-align: center; |
|
||||||
padding: 20px 10px 0; |
|
||||||
} |
|
||||||
|
|
||||||
a { |
|
||||||
color: inherit; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
small { |
|
||||||
font-weight: 400; |
|
||||||
color: $secondary-text-color; |
|
||||||
} |
|
||||||
|
|
||||||
img { |
|
||||||
display: inline-block; |
|
||||||
margin-bottom: -5px; |
|
||||||
margin-right: 15px; |
|
||||||
width: 36px; |
|
||||||
height: 36px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
@ -0,0 +1,238 @@ |
|||||||
|
.image { |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&__preview { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
&.loaded &__preview { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
border: 0; |
||||||
|
background: transparent; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&.loaded img { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.about { |
||||||
|
padding: 20px; |
||||||
|
|
||||||
|
@media screen and (min-width: $no-gap-breakpoint) { |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
&__header { |
||||||
|
margin-bottom: 30px; |
||||||
|
|
||||||
|
&__hero { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
aspect-ratio: 1.9; |
||||||
|
background: lighten($ui-base-color, 4%); |
||||||
|
border-radius: 8px; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
h1, |
||||||
|
p { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
h1 { |
||||||
|
font-size: 24px; |
||||||
|
line-height: 1.5; |
||||||
|
font-weight: 700; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 24px; |
||||||
|
font-weight: 400; |
||||||
|
color: $darker-text-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__meta { |
||||||
|
background: lighten($ui-base-color, 4%); |
||||||
|
border-radius: 4px; |
||||||
|
display: flex; |
||||||
|
margin-bottom: 30px; |
||||||
|
font-size: 15px; |
||||||
|
|
||||||
|
&__column { |
||||||
|
box-sizing: border-box; |
||||||
|
width: 50%; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
&__divider { |
||||||
|
width: 0; |
||||||
|
border: 0; |
||||||
|
border-style: solid; |
||||||
|
border-color: lighten($ui-base-color, 8%); |
||||||
|
border-left-width: 1px; |
||||||
|
min-height: calc(100% - 60px); |
||||||
|
flex: 0 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
h4 { |
||||||
|
font-size: 15px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: $darker-text-color; |
||||||
|
font-weight: 500; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (max-width: 600px) { |
||||||
|
display: block; |
||||||
|
|
||||||
|
h4 { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
&__column { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
&__divider { |
||||||
|
min-height: 0; |
||||||
|
width: 100%; |
||||||
|
border-left-width: 0; |
||||||
|
border-top-width: 1px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.layout-multiple-columns & { |
||||||
|
display: block; |
||||||
|
|
||||||
|
h4 { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
&__column { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
&__divider { |
||||||
|
min-height: 0; |
||||||
|
width: 100%; |
||||||
|
border-left-width: 0; |
||||||
|
border-top-width: 1px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__mail { |
||||||
|
color: $primary-text-color; |
||||||
|
text-decoration: none; |
||||||
|
font-weight: 500; |
||||||
|
|
||||||
|
&:hover, |
||||||
|
&:focus, |
||||||
|
&:active { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.getting-started__footer { |
||||||
|
padding: 0; |
||||||
|
margin-top: 60px; |
||||||
|
text-align: center; |
||||||
|
font-size: 15px; |
||||||
|
line-height: 22px; |
||||||
|
|
||||||
|
@media screen and (min-width: $no-gap-breakpoint) { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.account { |
||||||
|
padding: 0; |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.account__avatar-wrapper { |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.account__relationship { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
&__section { |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
&__title { |
||||||
|
font-size: 17px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 22px; |
||||||
|
padding: 20px; |
||||||
|
border-radius: 4px; |
||||||
|
background: lighten($ui-base-color, 4%); |
||||||
|
color: $highlight-text-color; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
&.active &__title { |
||||||
|
border-radius: 4px 4px 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
&__body { |
||||||
|
border: 1px solid lighten($ui-base-color, 4%); |
||||||
|
border-top: 0; |
||||||
|
padding: 20px; |
||||||
|
font-size: 15px; |
||||||
|
line-height: 22px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__domain-blocks { |
||||||
|
margin-top: 30px; |
||||||
|
width: 100%; |
||||||
|
border-collapse: collapse; |
||||||
|
break-inside: auto; |
||||||
|
|
||||||
|
th { |
||||||
|
text-align: left; |
||||||
|
font-weight: 500; |
||||||
|
color: $darker-text-color; |
||||||
|
} |
||||||
|
|
||||||
|
thead tr, |
||||||
|
tbody tr { |
||||||
|
border-bottom: 1px solid lighten($ui-base-color, 8%); |
||||||
|
} |
||||||
|
|
||||||
|
tbody tr:last-child { |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
th, |
||||||
|
td { |
||||||
|
padding: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue