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

Several fixes on collection header responsiviness. Prevents title overlapping thumbnail. Prevents description larger than 14 columns. Adjusts breakpoint of maximum container from 1800 to 1526, as this matches the design document.

This commit is contained in:
mateuswetah 2019-03-25 15:04:40 -03:00
parent d53d102d85
commit c8c7579edc
6 changed files with 87 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/scss/_gutenberg-support.scss
View File

@ -2,11 +2,16 @@
margin-left: calc(-8.3333333333vw + 15px) !important;
margin-right: calc(-8.3333333333vw + 15px) !important;
@media only screen and (min-width: 1800px) {
// 1400px is the maximum the inner cointainer should get, so we
// use 1526px - 1 column - 1 column;
@media only screen and (min-width: 1526px) {
margin-left: calc(-1*(87.5vw - 1415px)/2) !important !important;
margin-right: calc(-1*(87.5vw - 1415px)/2) !important !important;
}
}
// 1400px is the maximum the inner cointainer should get, so we
// use 1526px - 1 column - 1 column;
.wp-block-image.alignwide>img {
max-width: 1400px !important;
width: calc(100vw - 12.5vw) !important;
@ -14,7 +19,7 @@
left: 0px;
position: relative;
@media only screen and (min-width: 1800px) {
@media only screen and (min-width: 1526px) {
left: 30px;
}
}

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

@ -1,5 +1,7 @@
.collection-header {
@media only screen and (min-width: 1800px) {
// 1400px is the maximum the inner cointainer should get, so we
// use 1526px - 1 column - 1 column;
@media only screen and (min-width: 1526px) {
overflow: inherit;
}
}
@ -14,54 +16,60 @@
}
.t-collection--info-img, .image-placeholder {
width: 205px;
height: 205px;
max-width: 205px;
bottom: -6rem;
width: calc(16.6666666667% - 8px);
width: calc(16.6666666667vw - 8px);
height: calc(16.6666666667% - 8px);
height: calc(16.6666666667vw - 8px);
max-height: 215px;
max-width: 215px;
bottom: -111px; // 215px/2 + 4px
border-width: 4px !important;
margin-left: 4.16666666667%;
@media only screen and (max-width: 1024px){
width: 165px;
height: 165px;
max-width: 165px;
bottom: -4rem;
// Above this point, the container should not be larger
// 1400px is the maximum the inner cointainer should get, so we
// use 1526px - 1 column - 1 column;
@media only screen and (max-width: 1526px) {
margin-left: 4.16666666667%;
margin-left: 4.16666666667vw;
}
@media only screen and (max-width: 992px){
bottom: -4rem;
width: 123px;
height: 123px;
max-width: 123px;
// Above this point, the circle will reach it's maximum size
@media only screen and (max-width: 1290px) {
bottom: calc(-8.33% + 4px);
bottom: calc(-8.33vw + 4px);
}
@media only screen and (max-width: 576px){
width: 95px;
height: 95px;
max-width: 95px;
bottom: -3rem;
// Mobile
@media only screen and (max-width: 767px){
width: calc(25% - 8px);
width: calc(25vw - 8px);
height: calc(25% - 8px);
height: calc(25vw - 8px);
max-width: calc(25% - 8px);
max-width: calc(25vw - 8px);
bottom: calc(-12.5% - 4px);
bottom: calc(-12.5vw - 4px);
}
@media only screen and (max-width: 360px){
width: 95px;
height: 95px;
max-width: 95px;
bottom: -3rem;
h4 {
font-size: 2rem;
}
}
.t-collection--info {
padding-top: 6px;
margin-right: calc(4.16666666667% * 3);
.t-collection--col-3{
flex: 0 0 18% !important;
max-width: 18% !important;
@media only screen and (max-width: 576px){
flex: 0 0 29% !important;
max-width: 29% !important;
justify-content: space-between;
.t-collection--col-9 {
padding-left: calc(4.16666666667% + 15px) !important;
padding-left: calc(4.16666666667vw + 15px) !important;
padding-right: 12.5% !important;
padding-right: 12.5vw !important;
@media only screen and (max-width: 767px){
padding-left: 4.16666666667% !important;
padding-left: 4.16666666667vw !important;
padding-right: 8.33% !important;
padding-right: 8.33vw !important;
}
@media only screen and (min-width: 1400px){
flex: 0 0 16% !important;
max-width: 16% !important;
}
}
.t-collection--col-9{
margin-left: 4.16666666667%;
h2 {
white-space: nowrap;
overflow: hidden;
@ -71,13 +79,13 @@
.t-collection--info-title {
font: {
size: 1.5rem;
weight: 700;
weight: 600;
}
margin-top: 0.4rem;
@media only screen and (max-width: 767px){
@media only screen and (max-width: 768px){
font: {
size: 1.125rem;
weight: 500;
weight: 600;
}
}
}
@ -211,6 +219,14 @@
height: 35px;
left: 94.833333%;
top: -2px;
// 1400px is the maximum the inner cointainer should get, so we
// use 1526px - 1 column - 1 column;
@media only screen and (max-width: 1526px) {
margin-right: 4.16666666667%;
margin-right: 4.16666666667vw;
}
@media only screen and (max-width: 576px) {
left: 90.833333%;
}

4
src/assets/scss/_media_query.scss
View File

@ -349,7 +349,9 @@ footer{
}
}
@media only screen and (min-width: 1800px){
// 1400px is the maximum the inner cointainer should get, so we
// use 1526px - 1 column - 1 column;
@media only screen and (min-width: 1526px){
.max-large{
max-width: 1400px;
margin-left: auto !important;

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

@ -501,6 +501,7 @@ nav{
}
}
&.collection-page{
height: 100%;
height: 100vh;
}
&.page-404{
@ -580,6 +581,8 @@ nav{
padding: 1.5rem;
padding-left: 4.166667%;
padding-right: 4.166667%;
padding-left: 4.166667vw;
padding-right: 4.166667vw;
max-width: 87.5vw;
word-break: break-word;
@media only screen and (min-width: 769px){
@ -588,9 +591,12 @@ nav{
padding: 0rem;
padding-left: 4.166667%;
padding-right: 4.166667%;
padding-left: 4.166667vw;
padding-right: 4.166667vw;
&.singular-title{
padding: 1.5rem;
padding-left: 4.166667%;
padding-left: 4.166667vw;
}
}
@media only screen and (max-width: 768px){
@ -598,6 +604,8 @@ nav{
padding-top: 1.2rem;
padding-left: 4.166667%;
padding-right: 4.166667%;
padding-left: 4.166667vw;
padding-right: 4.166667vw;
max-height: 100px;
}
@media only screen and (max-width: 576px){
@ -629,7 +637,7 @@ nav{
.page-header__image {
width: 100%;
min-height: 250px;
width: 100vw;
margin: 0 auto;
object-fit: cover;
display: block;
@ -637,8 +645,6 @@ nav{
.page-header.page-header--image-full {
height: auto;
display: block;
.page-header__image { max-height: 400px; }
}
.tainacan-title{
@ -674,6 +680,7 @@ nav{
.margin-one-column{
margin: 0 4.16666666667%;
margin: 0 4.16666666667vw;
}
.form-control{
border-color: #e5e5e5;
@ -686,15 +693,19 @@ nav{
@media only screen and (max-width: 768px){
margin-left: 8.33333333334% !important;
margin-right: 8.33333333334% !important;
margin-left: 8.33333333334vw !important;
margin-right: 8.33333333334vw !important;
}
}
.margin-one-column-left{
margin-left: 4.16666666667%;
margin-left: 4.16666666667vw;
}
.margin-two-column{
margin: 0 8.33333333334%;
margin: 0 8.33333333334vw;
}
.margin-three-column{

2
src/template-parts/header-social-share.php
View File

@ -1,5 +1,5 @@
<?php global $wp; ?>
<div class="collection-header--share" style="margin-right: 4.16666666667%;">
<div class="collection-header--share">
<div class="btn trigger">
<span class="mdi mdi-share-variant"></span>
</div>

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

@ -47,7 +47,7 @@ echo '</style>';
</div>
<?php endif;
global $wp; ?>
<div class="collection-header--share" style="margin-right: 4.16666666667%;">
<div class="collection-header--share">
<div class="btn trigger">
<span class="mdi mdi-share-variant"></span>
</div>
@ -74,10 +74,10 @@ echo '</style>';
</div>
</div>
<div class="row t-collection--info max-large margin-one-column" style="overflow-x: inherit;">
<div class="col-4 col-md-3 px-0 t-collection--col-3">
<div class="col-md-2 col-3 px-0">
</div>
<div class="col-8 col-md-9 pl-0 t-collection--col-9 mt-md-3" style="z-index: 2">
<div class="col-md-10 col-9 pl-0 t-collection--col-9" style="z-index: 2">
<h2 class="t-collection--info-title text-white">
<?php tainacan_the_collection_name(); ?>
</h2>