tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Several adjustments to new embeds responsiveness strategy.

This commit is contained in:
mateuswetah 2021-05-13 10:29:24 -03:00
parent cf1f503b08
commit 66d2f9cb50
4 changed files with 57 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/assets/scss/_post.scss
View File

@ -598,26 +598,27 @@
}
.single-item-collection--document {
position: relative;
color: black;
text-align: center;
font-size: 0.875rem;
font-weight: 400;
display: block;
min-height: 10vh;
img {
width: auto;
}
&:hover {
.tainacan-item-file-download {
opacity: 1;
transform: scale(1);
}
}
color: black;
font : {
size: 0.875rem;
weight: 400;
> iframe {
display: block;
margin: 0 auto;
border: none;
}
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 10vh;
img {
width: auto;
}
> iframe, img.attachment-large {
img.attachment-large {
display: block;
height: auto;
margin: 0 auto;
@ -627,27 +628,51 @@
width: 95%;
}
> iframe {
@media only screen and (min-width: 768px){
min-height: 600px;
min-height: 10vh;
}
@media only screen and (max-width: 576px){
min-height: 429px;
>.twitter-tweet {
margin-left: auto;
margin-right: auto;
}
}
.tainacan-embed-container{
.tainacan-content-embed {
width: 100%;
height: auto;
iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
&.tainacan-has-aspect-ratio {
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 2) / 1); /* Default to 2:1 aspect ratio. */
margin-left: auto;
margin-right: auto;
}
&.tainacan-embed-aspect-21-9 {
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 21) / 9);
}
&.tainacan-embed-aspect-18-9 {
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 18) / 9);
}
&.tainacan-embed-aspect-16-9 {
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 16) / 9);
}
&.tainacan-embed-aspect-4-3 {
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 4) / 3);
}
&.tainacan-embed-aspect-1-1 {
max-width: var(--tainacan-media-main-carousel-height, 60vh);
}
&.tainacan-embed-aspect-3-4 {
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 3) / 4);
}
&.tainacan-embed-aspect-9-16 {
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 9) / 16);
}
&.tainacan-embed-aspect-1-2 {
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 1) / 2);
}
}
.document-metadata {
text-align: center;
width: 100%;
display: block;
&.hide-name .document-metadata__name {
display: none;

1
src/assets/scss/style.scss
View File

@ -299,6 +299,7 @@ nav {
padding: 0;
left: inherit;
overflow: hidden;
z-index: 9999;
.input-group {
background: white;

2
src/functions.php
View File

@ -23,6 +23,8 @@ if ( ! function_exists( 'tainacan_setup' ) ) {
add_theme_support( 'html5', array( 'navigation-widgets', 'comment-list', 'comment-form' ) );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'responsive-embeds' );
/**
* Custom header to change the banner image
*/

5
src/functions/customizer.php
View File

@ -2774,14 +2774,13 @@ function tainacan_single_item_document_max_height_output() {
$css = '
/* Custom Settings for Single Item Page Document Height */
.tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document img,
.tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document video,
.tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document audio,
.tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document iframe {
.tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document audio {
max-height: ' . $max_document_height . '%;
max-height: ' . $max_document_height . 'vh;
}
.tainacan-single-post .tainacan-content.single-item-collection .single-item-collection--document,
.tainacan-single-post .tainacan-content.single-item-collection .tainacan-media-component {
--tainacan-media-main-carousel-height: ' . $max_document_height . '%;
--tainacan-media-main-carousel-height: ' . $max_document_height . 'vh;