portfoligor/assets/scss/_medias.scss

95 lines
1.3 KiB
SCSS
Raw Normal View History

///////////////////
// //
// MEDIAS //
// //
///////////////////
@use "@picocss/pico/scss/colors/index" as *;
/* To remove the rounded corner of the webkit audio player */
audio::-webkit-media-controls-enclosure {
border-radius: 0;
}
.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;
}
}