ymnj
11/2/2017 - 5:48 PM
D6 Banner Resizing
Resizing banners for mobile responsiveness on D6 themes
//
// Variables
// --------------------------------------------------
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
// @brand-primary: #0d79b7;
// @brand-secondary: #25292c;
/****************************
background Images
Uncomment and change the following for your first three images.
*****************************/
// @banner-img-1: '/sites/default/files/users/shiftnew/banners/shift-bg2.jpg';
// @banner-img-2: '/sites/default/files/users/shiftnew/banners/shift-bg3.jpg';
// @banner-img-3: '/sites/default/files/users/shiftnew/banners/shift-bg4.jpg';
// .responsive-slider {
// .head-caption {
// .text-center();
// }
// .slide {
// .add-psych (@color, @fade, @dark, @light);
// to have more photos create more banner variables and
// add uncomment/add the list below
// &:nth-of-type(4) {
// background-image: url(@banner-img-4);
// }
// &:nth-of-type(5) {
// background-image: url(@banner-img-5);
// }
// &:nth-of-type(6) {
// background-image: url(@banner-img-6);
// }
// }
// }
//Uncomment the following if you want to change the cta background
//@cta-section-bg: '/sites/default/files/users/shiftnew/banners/shift-bg1.jpg';
/****************************
The following are default colours from bootsrap
Uncomment if you want to change them.
*****************************/
// @gray-base: #000;
// @gray-darker: #25292c; //
// @gray-dark: lighten(@gray-base, 20%); // #333
// @gray: lighten(@gray-base, 33.5%); // #555
// @gray-light: lighten(@gray-base, 46.7%); // #777
// @gray-lighter: lighten(@gray-base, 93.5%); // #eee
// @white: white;
// @black: black;
// @white-haze: #F7F7F7;
/**************************
This is how they set the background colour based on the primary colour
Uncomment and change if you want to have a different background colour
***************************/
// @body-bg: contrast(@brand-primary, @gray-darker, @white-haze);
// @text-color: contrast(@body-bg, @gray-dark, @white);
/***************************
Default link Colours
****************************/
// @link-color: @brand-primary;
// @link-hover-color: darken(@link-color, 15%);
// @link-hover-decoration: underline;
/***************************
Typography - font Variables
****************************/
// @font-family-sans-serif: 'Lato', sans-serif;
// @font-family-serif: Georgia, "Times New Roman", Times, serif;
// @font-family-base: @font-family-sans-serif;
// @font-weight-base: 300;
// @font-size-base: 14px;
// @font-size-large: ceil((@font-size-base * 1.25)); // ~18px
// @font-size-small: ceil((@font-size-base * 0.85)); // ~12px
// @font-size-h1: floor((@font-size-base * 2.6)); // ~36px
// @font-size-h2: floor((@font-size-base * 2.15)); // ~30px
// @font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
// @font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
// @font-size-h5: @font-size-base;
// @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
/***************************
General Settings
****************************/
// images
.img-responsive {
display: inline-block;
height: auto!important;
}
.img-left, .img-right {
margin-bottom: 10px;
display: block;
float: none;
}
@media (min-width: @screen-sm-min) {
.img-left {
float:left;
margin-right: 15px;
margin-bottom: 0;
}
.img-right {
float:right;
margin-left: 15px;
margin-bottom: 0;
}
}
.content-middle{
& > .content{
img{
padding:0;
}
}
}
.section-title{
@media screen and (max-width:@screen-xs){
padding-top: 20px;
}
}
#copyright p,
.btn-powered-by-aw{
@media screen and (max-width:@screen-sm-max){
float: none!important;
.text-center!important;
}
}
.btn-powered-by-aw{
margin:10px 0!important;
}
span.ext{
display: none;
}
// iframe responsive
.iframeWrapper {
position:relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
}
/****************************
Carousel Caption fonts
****************************/
// @font-size-base-slider: 80px;
// @font-size-h1-slider: @font-size-base-slider;
// @font-size-h2-slider: ceil((@font-size-base-slider * 0.90));
// @font-size-h3-slider: ceil((@font-size-base-slider * 0.60));
// @font-size-h4-slider: ceil((@font-size-base-slider * 0.50));
// @font-size-h5-slider: ceil((@font-size-base-slider * 0.40));
// @font-size-h6-slider: ceil((@font-size-base-slider * 0.30));
// @font-weight-slider: 300;
/****************************
Navigation
*****************************/
// @component-active-color: #fff;
// @component-active-bg: @brand-primary;
// Basics of a navbar
// @navbar-height: 80px;
// @navbar-margin-bottom: 0;
// @navbar-border-radius: @border-radius-base;
// @navbar-padding-horizontal: floor((@grid-gutter-width / 2));
// @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
// @navbar-collapse-max-height: 340px;
// @navbar-unstuck-box-shadow-height: 12px;
// @navbar-default-color: contrast(@body-bg, #777, lighten(@gray-light, 15%));
// @navbar-default-bg: contrast(@brand-primary, @gray-darker, #f8f8f8);
// @navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links
// @navbar-default-link-color: contrast(@navbar-default-bg, #777, lighten(@gray-light, 15%));
// @navbar-default-link-hover-color: contrast(@navbar-default-bg, #777, #fff);
// @navbar-default-link-hover-bg: transparent;
// @navbar-default-link-active-color: contrast(@navbar-default-bg, #555, #fff);
// @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
// @navbar-default-link-disabled-color: #ccc;
// @navbar-default-link-disabled-bg: transparent;
// Navbar brand label
// @navbar-default-brand-color: @navbar-default-link-color;
// @navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
// @navbar-default-brand-hover-bg: transparent;
// Navbar toggle
// @navbar-default-toggle-hover-bg: contrast(@navbar-default-bg, #ddd, #333 );
// @navbar-default-toggle-icon-bar-bg: contrast(@navbar-default-bg, #888, #fff);
// @navbar-default-toggle-border-color: contrast(@navbar-default-bg, #ddd, #333);
//Dropdown
// @dropdown-bg: contrast(@brand-primary, #222, #f8f8f8);
// @dropdown-border: rgba(0,0,0,.15);
// @dropdown-fallback-border: #ccc;
// @dropdown-divider-bg: #e5e5e5;
// @dropdown-link-color: contrast(@body-bg, #777, lighten(@gray-light, 15%));
// @dropdown-link-hover-color: contrast(@component-active-bg, #777, #fff);
// @dropdown-link-hover-bg: @component-active-bg;
// @dropdown-link-active-color: @component-active-color;
// @dropdown-link-active-bg: @component-active-bg;
// @dropdown-header-color: @gray-light;
// @dropdown-caret-color: #000;
/********************************
Line-height is not really used properly
this will fix that, if you change the
navbar-height variable now, this will work
********************************/
.user-navbar{
.navbar-nav{
a{
line-height: @navbar-height;
}
}
}
//it uses the same variable
#dashboard-menu{
& > .navbar {
@media screen and (min-width:@screen-sm-max){
min-height:80px;
}
}
}
/********************************
Dropdown list is too tall
********************************/
.dropdown-menu{
padding: 0;
background:transparent;
& > li{
background: @navbar-default-bg;
& > a{
@media screen and (min-width:@screen-sm){
line-height: 50px!important;
}
}
}
}
/****************************
Buttons
*****************************/
// @btn-font-weight: normal;
// @btn-default-color: #333;
// @btn-default-bg: #fff;
// @btn-default-border: #ccc;
// @btn-primary-color: #fff;
// @btn-primary-bg: @brand-primary;
// @btn-primary-border: darken(@btn-primary-bg, 5%);
// @btn-border-radius-base: @border-radius-base;
// @btn-border-radius-large: @border-radius-large;
// @btn-border-radius-small: @border-radius-small;
@backgroundColor: transparent;
.btn-primary {
.button-variant(@brand-primary, @backgroundColor, @brand-primary);
}
/**************************
Change the following variable if you like the 12 column grid
***************************/
// @grid-columns: 24;
/**************************
Change the following variable if don't like to any padding
inside your columns
***************************/
// @grid-gutter-width: 30px;
// Navbar collapse
/**************************
Change the following variable need to have different breakpoint
***************************/
// @grid-float-breakpoint: @screen-sm-min;
/***************************
Calculator Modal
****************************/
.bootstrapcalc {
.panel-default{
& > .panel-heading {
background: @brand-primary;
}
.panel-collapse{
padding: 10px 0;
}
}
.panel-title {
& > a{
display: block;
color: contrast(@brand-primary, @black, @white);
}
}
}
/**************************
You can change Modals colour / padding / size / etc.
***************************/
// @modal-inner-padding: 15px;
// @modal-title-padding: 15px;
// @modal-title-line-height: @line-height-base;
// @modal-content-bg: #fff;
// @modal-content-border-color: rgba(0,0,0,.2);
// //** Modal content border color **for IE8**
// @modal-content-fallback-border-color: #999;
// @modal-backdrop-bg: #000;
// @modal-backdrop-opacity: .5;
// @modal-header-border-color: #e5e5e5;
// @modal-footer-border-color: @modal-header-border-color;
// @modal-lg: 900px;
// @modal-md: 600px;
// @modal-sm: 300px;
/**************************
Some MISC variables for breadcrumb, team and blog
***************************/
// @breadcrumb-padding-vertical: 8px;
// @breadcrumb-padding-horizontal: 15px;
// @breadcrumb-bg: contrast(@brand-primary, @brand-secondary, @white);
// @breadcrumb-color: contrast(@body-bg);
// @breadcrumb-active-color: @gray-light;
//** Textual separator for between breadcrumb elements
// @breadcrumb-separator: "/";
// @breadcrumb-border: solid 2px @navbar-default-border;
// @team-member-border: solid 2px @navbar-default-border;
// @team-member-background: contrast(@brand-primary, @brand-secondary, @white);
// @blog-item-border: @team-member-border;
// @blog-item-background: @team-member-background;
// Mixings / classes you could use
// .centered;
// .bg(@background);
/**************************
@color - Color to use as the overlay.
@fade - In %, how much the overlay will be faded. try 50%.
@dark - This automatically uses the contrast function. This is the dark color.
@light - This is the light color of the contrast function.
eg: add-psych(@brand-primary; 50%; @brand-primary; @white);
**************************/
// .add-psych (@color, @fade, @dark, @light);
// .dark-psych;
// .main-color
// .img-single; //img with:100%;
// .btn-default;
// .btn-primary;
// .button-variant(@color1, transparent, @color3);
/***************************
fix for team nav for in a 4 used in an inside page instead of front
****************************/
.not-front {
#block-views-ind_team_member-block_1 {
.field-field-team-member-photo, .views-field-field-team-member-photo-fid {
float: none!important;
margin: 0!important;
}
}
}
// captcha
@media (max-width: @screen-xs-max) {
.g-recaptcha {
transform:scale(0.80);
-webkit-transform:scale(0.80);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
}// @brand-primary: #d5aa6d;
// @brand-secondary: #282828;
// @white: #fff;
// @black: #000;
// @off-white: darken(@white, 2%);
// @grey: lighten(@black, 59%);
// @light-grey: lighten(@black, 70%);
// @lighter-grey: lighten(@black, 95%);
// @logo-minheight:125px;
// @social-icon-size: 24px;
// Static Banner
// @static-banner:'/sites/default/files/shared/banners/sand-stones.jpg';
// @static-banner-position: no-repeat center center fixed;
// @static-banner-height: 150px;
// Banner Slides
// @slideOverlay: fade(@black,40%);
// @banner1: url('/sites/all/themes/aw_responsive/frameworks/acadia/banners/banner1.jpg') no-repeat center center;
// @banner2: url('/sites/all/themes/aw_responsive/frameworks/acadia/banners/banner2.jpg') no-repeat center center;
// @banner3: url('/sites/all/themes/aw_responsive/frameworks/acadia/banners/banner3.jpg') no-repeat center center;
// arrow icon
// @read-more-icon: '\2192';
// margin-top for view all .btn
// @view-all-btn-offset: 60px;
/***************************
Calculator Modal
****************************/
.bootstrapcalc {
.panel-default{
& > .panel-heading {
/*background: @brand-primary;*/
}
.panel-collapse{
padding: 10px 0;
}
}
.panel-title {
& > a{
display: block;
/*color: contrast(@brand-primary, @black, @white);*/
}
}
}
/* ===============
Fonts
=============== */
// @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700);
// @import url(https://fonts.googleapis.com/css?family=Lora:400,700,400italic);
// @import url(https://fonts.googleapis.com/css?family=Raleway:400,600,700);
//@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
// @text-color: @grey;
// @font-family-base: 'Open Sans', sans-serif;
// @headings-font-family: @font-family-base;
// @headings-color: @black;
// @headings-font-weight: 500;
// @secondary-font: 'Lora', serif;
// @tertiary-font: 'Raleway', sans-serif;
// @font-size-base: 15px;
// @slide-timer-speed: 9.50s;
// @carousel-background-color: @black;
/* ===============
General
=============== */
// images
.img-responsive {
display: inline-block;
height: auto!important;
}
.img-left, .img-right {
margin-bottom: 10px;
display: block;
float: none;
}
@media (min-width: @screen-sm-min) {
.img-left {
float:left;
margin-right: 15px;
margin-bottom: 0;
}
.img-right {
float:right;
margin-left: 15px;
margin-bottom: 0;
}
}
a, a:visited{
// fix ios
cursor: pointer;
&:hover, &.active{
}
}
.btn{
border:0;
&.btn-primary{
font-weight: normal;
&:hover,
&:focus,
&:active,
&.active{
}
}
}
span.ext{
display: none;
}
// iframe responsive
.iframeWrapper {
position:relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
}
/* ===============
Navigation
=============== */
.pre-header-wrapper{
position: relative;
z-index: 99;
.logo-block{
}
.acadia-top-links-block{
}
}
#block-aw_custom-0{
.navbar{
.navbar-collapse{
.navbar-nav{
li{
a, a:visited{
font-weight: normal;
text-transform: none;
}
}
& > li{
&.dropdown, &.has-dropdown{
&.open{
& > a, & > a:hover{
//fixing the background white issue
background: @brand-primary;
color:@white;
}
}
}
}
}
}
}
}
/* ===============
Home - Metrics
=============== */
.acadia-metrics-block{
.metric-item-wrapper{
.metric-info{
.num-counter{
}
}
}
}
/* ===============
Home - About
=============== */
.acadia-about-block{
.about-item{
h3{
&:after{
}
}
}
}
/* ===============
Home - Services
=============== */
.acadia-services-block{
.service-item{
.icon-title-wrap{
h2{
&:after{
}
}
}
&:hover{
a{
}
}
}
}
/* ===============
Footer
=============== */
// .footer-wrapper{
// .acadia-footer-contact,
// .footer-links{
// .make-sm-column(12);
// }
// }
.footer-wrapper{
background:@brand-primary;
.footer-links{
ul{
li{
&:before, a, a:visited{
}
}
}
}
}
// captcha
@media (max-width: @screen-xs-max) {
.g-recaptcha {
transform:scale(0.80);
-webkit-transform:scale(0.80);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
}
#carousel-frontpage.carousel {
.item {
height: 300px; //300px height on mobile
}
.carousel-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 10px;
width: 100%;
font-size: 16px;
//Base font size
h1 {
color: @white;
font-size: 2em;
}
h2 {
color: @white;
font-size: 1.5em;
}
}
@media (min-width: @screen-md-min){
.item {
height: 450px; //450px height on tablet
}
.carousel-caption {
font-size: 24px;
}
}
@media (min-width: @screen-lg-min){
.item {
height: 600px; //600px height on desktop
}
.carousel-caption {
font-size: 28px;
}
}
}//BANNER
#carousel-frontpage.carousel {
//Captions
.carousel-caption {
transition: all 300ms ease;
top: 0%;
text-align: center;
h2.slide-heading {
color: @white;
}
h2.slide-heading-sub {
font-size: 34px;
margin-bottom: 20px;
color: @white;
}
a.btn.btn-primary {
font-size: 14px;
}
}
//Arrow Controls
@media (max-width: @screen-sm-max){
.carousel-control .glyphicon {
background: none;
color: @brand-primary;
&:hover {
background: none;
}
}
.carousel-bottom-caption {
display: none;
}
}
//Banner Size
.item {
transition: height 300ms ease;
height: 300px;
}
//Mobile <
@media (min-width: @screen-sm-min){
.carousel-caption {
text-align: left;
a.btn.btn-primary {
font-size: 18px;
}
}
.item {
height: 400px;
}
}
//Tablet >
@media (min-width: @screen-md-min){
.carousel-caption {
top: 15%;
h2.slide-heading-sub {
font-size: 50px;
}
}
.item {
height: 500px;
}
}
//Desktop >
@media (min-width: @screen-lg-min){
.carousel-caption {
h2.slide-heading-sub {
font-size: 56px;
}
}
.item {
height: 600px;
}
}
}