Commit 3b242c6d authored by Otto Zaiser's avatar Otto Zaiser

Estilos para Landing

parent 5d61a790
......@@ -6,7 +6,7 @@
function checkNav(){
var currentScroll = $(this).scrollTop();
if(currentScroll > 110) {
if(currentScroll > 50) {
$('#navbar').addClass('navbar-fondo');
if(isIE()) $(".path-frontpage #logo").attr("src", "/themes/bfa/logo.svg");
} else {
......
......@@ -15,10 +15,12 @@
img{
border-radius: 10px;
transition: opacity 0.5s ease;
transition: all 0.2s ease;
}
img:hover{
opacity: .85;
transform: scale(1.05);
transition: all 0.2s ease;
}
margin-bottom: 20px;
......
......@@ -20,6 +20,13 @@ body.toolbar-fixed .toolbar-oriented .toolbar-bar {
}
}
}
@media (max-width: 620px){
img {
height: 75px !important;
margin-top: 0px;
}
}
}
.navbar-default{
background-color: transparent;
......@@ -258,7 +265,7 @@ body.toolbar-fixed .toolbar-oriented .toolbar-bar {
}
.navbar-nav li ul.dropdown-menu li:last-child>a:hover, .navbar-nav li ul.dropdown-menu li:last-child>a:focus, {
.navbar-nav li ul.dropdown-menu li:last-child>a:hover, .navbar-nav li ul.dropdown-menu li:last-child>a:focus {
background-color: transparent;
color: $primaryColor;
}
......@@ -385,7 +392,7 @@ body.toolbar-fixed .toolbar-oriented .toolbar-bar {
border: none;
}
.navbar-nav li ul.dropdown-menu li:last-child>a:hover, .navbar-nav li ul.dropdown-menu li:last-child>a:focus, {
.navbar-nav li ul.dropdown-menu li:last-child>a:hover, .navbar-nav li ul.dropdown-menu li:last-child>a:focus {
background-color: transparent;
color: $primaryColor;
}
......
......@@ -72,12 +72,12 @@
.hero_bg {
position: absolute;
z-index: -100;
top: -45px;
top: -130px;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
height: 120%;
background: url('../images/pattern.png'), $hero-gradient-init; /* Old browsers */
background: url('../images/pattern.png'), linear-gradient(to right, $hero-gradient-init 0%,$hero-gradient-end 100%);
transform: skewY(-10deg);
......@@ -217,10 +217,12 @@
img{
border-radius: 15px;
margin: 0 auto;
transition: opacity 0.5s ease;
transition: all 0.2s ease;
}
img:hover{
opacity: .85;
transform: scale(1.05);
transition: all 0.2s ease;
}
h3 {
font-size: 1.1em;
......
$landingPrimary: #0000ff;
$landingHighlight: #fcffdd;
nav.navbar-landing{
.logo img{
filter: contrast(0) sepia(100%) hue-rotate(200deg) brightness(0.6) saturate(10);
&:hover{
filter: none;
transition: all 0.2s ease;
}
}
.navbar-nav li > a{
color: $landingPrimary;
&:hover{
color: $landingPrimary;
border-bottom-color: $landingPrimary;
}
}
.navbar-nav li:last-child > a{
color: $landingPrimary;
border-color: $landingPrimary;
&:hover{
background-color: $landingPrimary;
}
}
.navbar-toggle {
border-color: $landingPrimary;
}
.navbar-toggle:hover, .navbar-toggle:focus, .navbar-toggle .icon-bar{
background-color: $landingPrimary;
}
}
main.landing{
margin-top: 0;
padding: 0;
padding-right: 15px;
padding-left: 15px;
.field{
position: relative;
}
.btn-primary, .btn-default {
color: $landingPrimary;
background-color: $blanco;
border-color: $landingPrimary;
border-radius: 50px;
&:hover, &:focus {
color: $blanco;
background-color: $landingPrimary;
border-color: $landingPrimary;
}
}
h3 {
color: $negro;
}
h2:after {
background-color: $landingPrimary;
}
.paragraph {
.anchor{
// width: 20px;
// height: 20px;
// background: red;
position: absolute;
margin-top: -200px;
}
}
.jumbotron{
color: $blanco;
background: url('../images/pattern.png'), $landingPrimary; /* Old browsers */
$hardColor: lighten($landingPrimary, 5);
background: url('../images/pattern.png'), linear-gradient(to bottom, $landingPrimary 0%, $hardColor 100%);
padding-bottom: 50px;
padding-top: 150px;
position: relative;
box-shadow: inset 0 -10px 10px -10px $negro;
border-radius: 0;
h1 {
font-size: 2.5em;
}
p{
max-width: 800px;
margin-bottom: 1.3em;
}
.logo-evento{
padding-top: 50px;
svg{
height: 400px;
@media (max-width: 992px) {
height: 250px;
}
}
@media (max-width: 992px) {
margin-bottom: 20px ;
}
}
.bajada{
padding-top: 100px;
@media (max-width: 992px) {
padding-top: 0px;
}
}
.btn-primary {
color: $landingPrimary;
background-color: $blanco;
border-color: $blanco;
border-radius: 50px;
&:hover, &:focus {
color: $blanco;
background-color: transparent;
border-color: $blanco;
}
}
h2{
margin-bottom: 1em;
}
h2:after{
content: none;
}
@media (max-width: 768px) {
padding-top: 140px;
}
}
.cta{
margin-bottom: 0;
margin: 0 auto;
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
p{
margin: 0 auto;
margin-bottom: 1.3em;
}
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
section{
padding: 0;
margin: 0;
}
table.table.agenda{
thead th{
font-size: 1.2em;
}
th,td{
padding: 20px;
}
tr.break{
background-color: $muyClaro;
}
tbody tr > th{
// background-color: $secondaryColor;
border-left: 5px solid $blanco;
// color: $blanco;
transition: all 0.2s ease;
}
tbody tr:hover {
background-color: $landingHighlight;
}
tbody tr:hover > th{
// background-color: $secondaryColor;
border-left: 5px solid $landingPrimary;
// color: $blanco;
}
tbody td p:last-child{
margin-bottom: 0px;
}
}
.field--name-field-grilla.row {
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
.field--name-field-grilla > .field--item{
// border: 1px solid red;
.paragraph--type--grilla{
border-radius: 5px;
padding: 20px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid $claro;
h3{
background-image: none;
padding-left: 0;
margin-top: 10px;
font-size: 1.2em;
}
img{
margin: 0;
padding: 0;
width: 100%;
}
.field--name-field-body{
font-size: 0.8em;
}
@media (min-width: 768px) {
&:hover{
border: 1px solid $landingPrimary;
// margin-top: 0px;
transform: scale(1.05);
transition: all 0.2s ease;
}
}
}
}
.mapOver{
position: absolute;
background: $blanco;
padding: 40px;
max-width: 30%;
top: 80px;
left: 100px;
z-index: 100;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
h3{
background-image: none;
padding-left: 0;
margin-top: 10px;
font-size: 1.2em;
}
}
.map{
filter: grayscale(100%);
margin-bottom: -10px;
transition: all 0.2s ease;
&:hover, &:focus{
filter: grayscale(0);
}
}
}
footer.footerArea-landing ul li a:hover{
background-color: $landingPrimary;
}
\ No newline at end of file
.topnav{
position: relative;
z-index: 1035;
padding-top: 15px;
z-index: 1035;
font-size: 0.65em;
nav, .links{
float: right;
margin-left: 20px;
padding-top: 10px;
}
@media (max-width: 768px) {
margin-right: 60px;
font-size: 0.85em;
margin-right: 70px;
font-size: 0.75em;
}
.menu, .links{
float: right;
@media (max-width: 380px) {
.links{
display: none;
}
}
@media (max-width: 320px) {
display: none;
}
&:last-child{
margin-right: 0px;
}
ul > li {
......@@ -37,9 +55,51 @@
margin-right: 0px;
}
a:after{
content: '';
content: none;
margin-right: 0px;
}
}
nav.login{
padding-top: 0;
ul > li > a {
padding: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 1px solid $blanco;
border-top: 0;
color: $blanco;
text-decoration: none;
&:hover, &:focus{
background: $blanco;
color: $primaryColor;
}
&:after{
content: none;
margin-left: 0px;
}
}
}
@media (max-width: 620px) {
margin-top: 8px;
nav.login{
ul > li {
float: none !important;
margin-bottom: 5px;
}
ul > li > a{
border: 1px solid $blanco;
border-radius: 5px;
min-width: 50px;
padding: 8px;
text-align: center;
margin-right: 0px;
}
}
}
}
\ No newline at end of file
......@@ -13,3 +13,4 @@
@import 'general/eventos';
@import 'general/casos';
@import 'general/login';
@import 'general/landing';
......@@ -40,4 +40,22 @@ function bfa_preprocess_paragraph(&$variables) {
}
}
}
}
\ No newline at end of file
}
/**
* Implements hook_theme_suggestions_page_alter().
*/
function bfa_theme_suggestions_page_alter(&$suggestions, $variables) {
$node = \Drupal::routeMatch()->getParameter('node');
if ($node instanceof \Drupal\node\NodeInterface) {
$suggestions[] = 'page__' . $node->bundle();
$suggestions[] = 'page__node_' . $node->bundle();
}
}
/**
* Cambiar English a EN
*/
function bfa_preprocess_links__language_block(&$variables) {
$variables['links']['en']['link']['#title'] = 'EN';
}
\ No newline at end of file
This diff is collapsed.
(function ($, Drupal) {
$('.bt-top').hide();
$(window).scroll(function() {
checkNav();
});
function checkNav(){
var currentScroll = $(this).scrollTop();
if(currentScroll > 110) {
$('#navbar').addClass('navbar-fondo');
if(isIE()) $(".path-frontpage #logo").attr("src", "/themes/bfa/logo.svg");
} else {
$('#navbar').removeClass('navbar-fondo');
if(isIE()) $(".path-frontpage #logo").attr("src", "/themes/bfa/logo-white.svg");
}
}
function isIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
{
//alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
return true;
}
else // If another browser, return 0
{
return false;
}
return false;
}
checkNav();
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox({
alwaysShowClose: false
});
});
})(jQuery, Drupal);
!function(o,t){function a(){o(this).scrollTop()>50?(o("#navbar").addClass("navbar-fondo"),n()&&o(".path-frontpage #logo").attr("src","/themes/bfa/logo.svg")):(o("#navbar").removeClass("navbar-fondo"),n()&&o(".path-frontpage #logo").attr("src","/themes/bfa/logo-white.svg"))}function n(){return!!(window.navigator.userAgent.indexOf("MSIE ")>0||navigator.userAgent.match(/Trident.*rv\:11\./))}o(".bt-top").hide(),o(window).scroll(function(){a()}),a(),o(document).on("click",'[data-toggle="lightbox"]',function(t){t.preventDefault(),o(this).ekkoLightbox({alwaysShowClose:!1})})}(jQuery,Drupal);
\ No newline at end of file
{%
set classes = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
]
%}
{%
set title_classes = [
'field--label',
label_display == 'visually_hidden' ? 'sr-only',
]
%}
{% if label_hidden %}
{% if multiple %}
<div class="container">
<div{{ attributes.addClass(classes, 'field--items row') }}>
{% for item in items %}
<div{{ item.attributes.addClass('field--item col-md-3 col-sm-6 col-xs-12') }}>{{ item.content }}</div>
{% endfor %}
</div>
</div>
{% else %}
{% for item in items %}
<div{{ attributes.addClass(classes, 'field--item col-md-3 col-sm-6 col-xs-12') }}>{{ item.content }}</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes.addClass(classes) }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div class="field__items">
{% endif %}
{% for item in items %}
<div{{ item.attributes.addClass('field--item col-md-3 col-sm-6 col-xs-12') }}>{{ item.content }}</div>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}
{#
/**
* @file
* Theme override for a field.
*
* To override output, copy the "field.html.twig" from the templates directory
* to your theme's directory and customize it, just like customizing other
* Drupal templates such as page.html.twig or node.html.twig.
*
* Instead of overriding the theming for all fields, you can also just override
* theming for a subset of fields using
* @link themeable Theme hook suggestions. @endlink For example,
* here are some theme hook suggestions that can be used for a field_foo field
* on an article node type:
* - field--node--field-foo--article.html.twig
* - field--node--field-foo.html.twig
* - field--node--article.html.twig
* - field--field-foo.html.twig
* - field--text-with-summary.html.twig
* - field.html.twig
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - label_hidden: Whether to show the field label or not.
* - title_attributes: HTML attributes for the title.
* - label: The label for the field.
* - multiple: TRUE if a field can contain multiple items.
* - items: List of all the field items. Each item contains:
* - attributes: List of HTML attributes for each item.
* - content: The field item's content.
* - entity_type: The entity type to which the field belongs.
* - field_name: The name of the field.
* - field_type: The type of the field.
* - label_display: The display settings for the label.
*
* @ingroup templates
*
* @see template_preprocess_field()
*/
#}
{%
set classes = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
]
%}
{%
set title_classes = [
'field--label',
label_display == 'visually_hidden' ? 'sr-only',
]
%}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes.addClass(classes, 'field--items') }}>
{% for item in items %}
<h3>{{ item.content }}</h3>
{% endfor %}
</div>
{% else %}
{% for item in items %}
<div{{ attributes.addClass(classes, 'field--item') }}>
<h3>{{ item.content }}</h3>
</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes.addClass(classes) }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div class="field__items">
{% endif %}
{% for item in items %}
<h3>{{ item.content }}</h3>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}
{#
/**
* @file
* Theme override for a field.
*
* To override output, copy the "field.html.twig" from the templates directory
* to your theme's directory and customize it, just like customizing other
* Drupal templates such as page.html.twig or node.html.twig.
*
* Instead of overriding the theming for all fields, you can also just override
* theming for a subset of fields using
* @link themeable Theme hook suggestions. @endlink For example,
* here are some theme hook suggestions that can be used for a field_foo field
* on an article node type:
* - field--node--field-foo--article.html.twig
* - field--node--field-foo.html.twig
* - field--node--article.html.twig
* - field--field-foo.html.twig
* - field--text-with-summary.html.twig
* - field.html.twig
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - label_hidden: Whether to show the field label or not.
* - title_attributes: HTML attributes for the title.
* - label: The label for the field.
* - multiple: TRUE if a field can contain multiple items.
* - items: List of all the field items. Each item contains:
* - attributes: List of HTML attributes for each item.
* - content: The field item's content.
* - entity_type: The entity type to which the field belongs.
* - field_name: The name of the field.
* - field_type: The type of the field.
* - label_display: The display settings for the label.
*
* @ingroup templates
*
* @see template_preprocess_field()
*/
#}
{%
set classes = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
]
%}
{%
set title_classes = [
'field--label',
label_display == 'visually_hidden' ? 'sr-only',
]