/*
Theme Name: Jannah Child
Theme URI: http://jannah.tielabs.com/
Description: Jannah Child Theme
Author: TieLabs
Author URI: https://tielabs.com
Template: jannah
Version: 1.0.6
Text Domain: jannah-child
*/
/* =========================
Nastavenia
========================= */
:root{
–three-left: 20%;
–three-right: 20%;
–three-gap: 20px;
–edge-pull: 0px;
–three-top-gap: 30px;
}
/* hlavný content nech zaberá šírku kontajnera */
.page-template-page-three-columns .threecol-page-wrap > .container > .main-content,
.page-template-page-three-columns-php .threecol-page-wrap > .container > .main-content{
width: 100% !important;
float: none !important;
margin: 0 !important;
box-sizing: border-box;
}
@media (min-width: 992px){
.threecol-page-wrap,
.threecol-page-wrap > .container,
.threecol-page-wrap .main-content,
.threecol-page-wrap .threecol-row,
.threecol-page-wrap .sidebar{
overflow: visible;
}
}
/* ===== Desktop layout ===== */
.page-template-page-three-columns .threecol-row,
.page-template-page-three-columns-php .threecol-row{
display: grid !important;
grid-template-columns:
minmax(240px, var(–three-left))
minmax(0, calc(100% – var(–three-left) – var(–three-right) – (2 * var(–three-gap)) + (2 * var(–edge-pull))))
minmax(240px, var(–three-right));
grid-template-areas: „primary content secondary“;
column-gap: var(–three-gap);
align-items: start !important;
margin-left: calc(-1 * var(–edge-pull)) !important;
margin-right: calc(-1 * var(–edge-pull)) !important;
}
.page-template-page-three-columns .threecol-row.no-primary,
.page-template-page-three-columns-php .threecol-row.no-primary{
grid-template-columns:
minmax(0, 1fr)
minmax(240px, var(–three-right));
grid-template-areas: „content secondary“;
}
.page-template-page-three-columns .threecol-row > .sidebar,
.page-template-page-three-columns-php .threecol-row > .sidebar,
.page-template-page-three-columns .threecol-row > .content,
.page-template-page-three-columns-php .threecol-row > .content{
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
}
.page-template-page-three-columns .threecol-row > .sidebar.threecol-primary,
.page-template-page-three-columns-php .threecol-row > .sidebar.threecol-primary{
grid-area: primary;
}
.page-template-page-three-columns .threecol-row > .content,
.page-template-page-three-columns-php .threecol-row > .content{
grid-area: content;
min-width: 0 !important;
}
.page-template-page-three-columns .threecol-row > .sidebar.threecol-secondary,
.page-template-page-three-columns-php .threecol-row > .sidebar.threecol-secondary,
.page-template-page-three-columns .threecol-row > .sidebar.threecol-right,
.page-template-page-three-columns-php .threecol-row > .sidebar.threecol-right,
.page-template-page-three-columns .threecol-row > .sidebar.threecol-left,
.page-template-page-three-columns-php .threecol-row > .sidebar.threecol-left{
grid-area: secondary;
}
/* oba sidebary majú rovnaký horný odskok ako builder/content */
@media (min-width: 992px){
.page-template-page-three-columns .threecol-row > .sidebar,
.page-template-page-three-columns-php .threecol-row > .sidebar{
margin-top: var(–three-top-gap) !important;
padding-top: 0 !important;
height: max-content !important;
–tree-gap:0px !important;
}
}
/* vnútorné obaly sidebarov bez rozdielnych paddingov */
.page-template-page-three-columns .threecol-row > .sidebar .sidebar-inner,
.page-template-page-three-columns-php .threecol-row > .sidebar .sidebar-inner{
padding-top: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box;
}
/* prvý widget nech nezačína vlastným horným marginom */
.page-template-page-three-columns .threecol-row > .sidebar .widget:first-child,
.page-template-page-three-columns-php .threecol-row > .sidebar .widget:first-child{
margin-top: 0 !important;
}
/* jednotné medzery medzi widgetmi v oboch sidebaroch */
.page-template-page-three-columns .threecol-row > .sidebar .widget,
.page-template-page-three-columns-php .threecol-row > .sidebar .widget{
margin-bottom: 30px;
}
.page-template-page-three-columns .threecol-row > .sidebar .widget:last-child,
.page-template-page-three-columns-php .threecol-row > .sidebar .widget:last-child{
margin-bottom: 0;
}
/* nech sa nič opticky nezužuje vpravo */
.page-template-page-three-columns .threecol-row > .sidebar .container-wrapper,
.page-template-page-three-columns-php .threecol-row > .sidebar .container-wrapper{
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* obrázky/tabuľky nech nepretŕčajú zo stĺpcov */
.page-template-page-three-columns .threecol-row img,
.page-template-page-three-columns-php .threecol-row img,
.page-template-page-three-columns .threecol-row iframe,
.page-template-page-three-columns-php .threecol-row iframe,
.page-template-page-three-columns .threecol-row video,
.page-template-page-three-columns-php .threecol-row video,
.page-template-page-three-columns .threecol-row table,
.page-template-page-three-columns-php .threecol-row table{
max-width: 100%;
}
/* ===== Mobile / Tablet ===== */
@media (max-width: 991.98px){
.page-template-page-three-columns .threecol-row,
.page-template-page-three-columns-php .threecol-row{
margin-left: 0 !important;
margin-right: 0 !important;
grid-template-columns: 1fr !important;
grid-template-areas:
„content“
„primary“
„secondary“ !important;
row-gap: 0 !important;
column-gap: 0 !important;
}
.page-template-page-three-columns .threecol-row.no-primary,
.page-template-page-three-columns-php .threecol-row.no-primary{
grid-template-areas:
„content“
„secondary“ !important;
}
.page-template-page-three-columns .threecol-row > .content,
.page-template-page-three-columns-php .threecol-row > .content,
.page-template-page-three-columns .threecol-row > .sidebar,
.page-template-page-three-columns-php .threecol-row > .sidebar{
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: 100% !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.page-template-page-three-columns .threecol-row > .content,
.page-template-page-three-columns-php .threecol-row > .content{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.page-template-page-three-columns .threecol-row > .sidebar,
.page-template-page-three-columns-php .threecol-row > .sidebar{
margin-top: 0 !important;
margin-bottom: 15px !important;
}
.page-template-page-three-columns .threecol-row > .sidebar .sidebar-inner,
.page-template-page-three-columns-php .threecol-row > .sidebar .sidebar-inner{
position: static !important;
top: auto !important;
transform: none !important;
}
}
/* =========================================
Three columns: sticky riadi JS/Theia
========================================= */
@media (min-width: 992px){
.page-template-page-three-columns .threecol-row > .sidebar[data-threecol-sticky=“1″],
.page-template-page-three-columns-php .threecol-row > .sidebar[data-threecol-sticky=“1″],
.page-template-page-three-columns .threecol-row > .sidebar[data-threecol-sticky=“0″],
.page-template-page-three-columns-php .threecol-row > .sidebar[data-threecol-sticky=“0″]{
position: static !important;
top: auto !important;
}
.page-template-page-three-columns .threecol-row > .sidebar > .sidebar-inner,
.page-template-page-three-columns-php .threecol-row > .sidebar > .sidebar-inner,
.page-template-page-three-columns .threecol-row > .sidebar > .theiaStickySidebar,
.page-template-page-three-columns-php .threecol-row > .sidebar > .theiaStickySidebar{
width: 100% !important;
max-width: 100% !important;
left: auto !important;
right: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 991.98px){
.page-template-page-three-columns .threecol-row > .sidebar,
.page-template-page-three-columns-php .threecol-row > .sidebar,
.page-template-page-three-columns .threecol-row > .sidebar > .sidebar-inner,
.page-template-page-three-columns-php .threecol-row > .sidebar > .sidebar-inner,
.page-template-page-three-columns .threecol-row > .sidebar > .theiaStickySidebar,
.page-template-page-three-columns-php .threecol-row > .sidebar > .theiaStickySidebar{
position: static !important;
top: auto !important;
}
}
/* =========================================
Three columns: full width wrapper na mobile/tablete
========================================= */
@media (max-width: 991.98px){
.page-template-page-three-columns .threecol-page-wrap > .container,
.page-template-page-three-columns-php .threecol-page-wrap > .container{
width: 100% !important;
max-width: 100% !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.page-template-page-three-columns .threecol-page-wrap > .container > .main-content,
.page-template-page-three-columns-php .threecol-page-wrap > .container > .main-content{
padding-left: 0 !important;
padding-right: 0 !important;
}
.page-template-page-three-columns .threecol-row,
.page-template-page-three-columns-php .threecol-row{
width: 100% !important;
}
}
@media (max-width: 767px){
.page-template-page-three-columns .threecol-page-wrap > .container,
.page-template-page-three-columns-php .threecol-page-wrap > .container{
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.page-template-page-three-columns .threecol-page-wrap > .container > .main-content,
.page-template-page-three-columns-php .threecol-page-wrap > .container > .main-content{
padding-left: 0 !important;
padding-right: 0 !important;
}
.page-template-page-three-columns .threecol-row,
.page-template-page-three-columns-php .threecol-row{
width: 100% !important;
}
}
