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

Realign the share button

This commit is contained in:
Fabiano Alencar 2018-08-13 14:33:50 -03:00
parent 746ddc4097
commit a9921db7e6
2 changed files with 45 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/assets/scss/_home-collection.scss
View File

@ -1,23 +1,49 @@
/* .t-collection--background-title{
position: absolute;
width: 100%;
transform: translate3d(0, -100%, 0);
height: 172px !important;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.51) 51%, rgba(0,0,0,0.71) 71%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(51%, rgba(0,0,0,0.51)), color-stop(71%, rgba(0,0,0,0.71)), color-stop(100%, rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.51) 51%, rgba(0,0,0,0.71) 71%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.51) 51%, rgba(0,0,0,0.71) 71%, rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.51) 51%, rgba(0,0,0,0.71) 71%, rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.51) 51%, rgba(0,0,0,0.71) 71%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
} */
.collection-header {
@media only screen and (min-width: 1400px) {
overflow: inherit;
}
}
.t-bg-collection{
min-height: 150px;
@media only screen and (max-width: 768px){
min-height: 130px;
}
@media only screen and (max-width: 576px){
min-height: 65px;
}
z-index: 1;
.t-collection--info-img, .image-placeholder {
width: 205px;
height: 205px;
max-width: 205px;
bottom: -6rem;
border-width: 4px !important;
@media only screen and (max-width: 1024px){
width: 165px;
height: 165px;
max-width: 165px;
bottom: -4rem;
}
@media only screen and (max-width: 992px){
bottom: -4rem;
width: 123px;
height: 123px;
max-width: 123px;
}
@media only screen and (max-width: 576px){
width: 95px;
height: 95px;
max-width: 95px;
bottom: -3rem;
}
@media only screen and (max-width: 360px){
width: 95px;
height: 95px;
max-width: 95px;
bottom: -3rem;
}
}
.t-collection--info {
padding-top: 6px;
.t-collection--col-3{
@ -40,37 +66,6 @@
text-overflow: ellipsis;
}
}
.t-collection--info-img, .image-placeholder {
width: 205px;
height: 205px;
max-width: 205px;
bottom: 2rem;
border-width: 4px !important;
@media only screen and (max-width: 1024px){
width: 165px;
height: 165px;
max-width: 165px;
bottom: 4rem;
}
@media only screen and (max-width: 992px){
bottom: 7rem;
width: 123px;
height: 123px;
max-width: 123px;
}
@media only screen and (max-width: 576px){
width: 95px;
height: 95px;
max-width: 95px;
bottom: 4rem;
}
@media only screen and (max-width: 360px){
width: 95px;
height: 95px;
max-width: 95px;
bottom: 8rem;
}
}
.t-collection--info-title {
font: {
size: 24px;
@ -207,6 +202,7 @@
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 3;
}
.collection-header--share {
@extend .absolute-center;
@ -231,6 +227,7 @@
@extend .absolute-center;
font-size: 24px;
transition: color 0.3s;
color: #2c2d2d;
}
&.trigger {
opacity: 1;

6
src/template-parts/headerCollection.php
View File

@ -1,11 +1,11 @@
<div <?php if ( get_header_image() ) : ?>class="page-header header-filter page-height" style="background-image: url('<?php header_image(); ?>')"<?php else: ?>class="page-header header-filter page-collection" style="background-image: url('<?php echo get_template_directory_uri() ?>/assets/images/capa.png')"<?php endif; ?>>
<div class="container-fluid px-0 t-bg-collection" style="<!-- z-index: 0; -->">
<div class="collection-header position-relative" style="">
<div class="collection-header position-relative max-large" style="">
<?php if(has_post_thumbnail(tainacan_get_collection_id())) : ?>
<img src="<?php echo get_the_post_thumbnail_url(tainacan_get_collection_id()); ?>" class="t-collection--info-img rounded-circle img-fluid border border-white position-absolute text-left" style="bottom: -6rem; margin-left: 4.16666666667%;">
<img src="<?php echo get_the_post_thumbnail_url(tainacan_get_collection_id()); ?>" class="t-collection--info-img rounded-circle img-fluid border border-white position-absolute text-left" style="margin-left: 4.16666666667%;">
<?php else : ?>
<div class="image-placeholder rounded-circle border border-white position-absolute">
<h4 class="text-center" style="bottom: -6rem; margin-left: 4.16666666667%;">
<h4 class="text-center" style="margin-left: 4.16666666667%;">
<?php
echo tainacan_get_initials(tainacan_get_the_collection_name());
?>