90 lines
1.2 KiB
SCSS
90 lines
1.2 KiB
SCSS
///////////////////
|
|
// //
|
|
// MEDIAS //
|
|
// //
|
|
///////////////////
|
|
|
|
|
|
@use "@picocss/pico/scss/colors/index" as *;
|
|
|
|
.audio,
|
|
.stream {
|
|
border: var(--pico-border-width) solid $purple-200 ;
|
|
|
|
audio {
|
|
border-radius: var(--pico-border-radius);
|
|
width: 100%;
|
|
}
|
|
|
|
figcaption p {
|
|
font-size: smaller;
|
|
padding-left: .5em;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.audio-with-image {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@media (min-width: 768px) {
|
|
flex-direction: row;
|
|
|
|
img {
|
|
width: 8em;
|
|
}
|
|
|
|
div {
|
|
align-content: space-between;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@media (min-width: 1024px) {
|
|
|
|
div {
|
|
flex-grow: 4;
|
|
}
|
|
}
|
|
|
|
audio {
|
|
border-radius: 0;
|
|
}
|
|
|
|
}
|
|
|
|
figure {
|
|
border-radius: var(--pico-border-radius);
|
|
margin: var(--pico-spacing) auto;
|
|
padding: .4em;
|
|
border: var(--pico-border-width) solid $purple-200 ;
|
|
width: 80%;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
figcaption {
|
|
font-size: smaller;
|
|
|
|
p {
|
|
margin: .2em 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-image {
|
|
border: none;
|
|
width: 100%;
|
|
padding-left: 0;
|
|
|
|
@media (min-width: 768px) {
|
|
max-width: 97%;
|
|
padding-right: 0;
|
|
}
|
|
}
|