Commit 8c9a91e2 authored by Cristiano Silva's avatar Cristiano Silva
Browse files

Inicio page views & initial header, footer & general sass setup

parent bbbadf6a
Pipeline #1704 failed with stages
in 2 minutes and 53 seconds
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -12,7 +12,7 @@
// typography
@import "typography";
// mixins
@import "mixins";
@import "mixins-placeholders";
......@@ -20,14 +20,15 @@
// ---------- IMPORT MY SASS FILES ---------- //
@import "theme-styles/header";
@import "theme-styles/footer";
@import "theme-styles/globals";
// ADMIN TABS styles
// Admin Tabs
@import "theme-styles/admin-tabs";
// Website Pages styles
// Website Pages
@import "theme-styles/pages/inicio";
// Ripple effect for buttons
......
/*
*
--- --- --- MIXINS & PLACEHOLDERS --- --- ---
*
*/
// --- --- MIXINS --- --- //
// --- --- PLACEHOLDERS --- --- //
%main-gradient-bg {
background-image: linear-gradient(120deg, #eaee44, #33d0ff);
}
%header-is-absolute {
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: 1;
}
\ No newline at end of file
/* MIXINS */
//
// Alternate buttons
//
@each $color,
$value in $theme-colors {
.btn-#{$color} a {
@include button-variant($value, $value);
}
}
@each $color,
$value in $theme-colors {
.btn-outline-#{$color} a {
@include button-outline-variant($value);
}
}
\ No newline at end of file
......@@ -15,43 +15,3 @@ body {
}
/* COLORS
--------------------------------------------------*/
a {
color: $accent-shade;
}
.bg-inverse {
background: $primary-shade !important;
}
.menu--main li a {
color: $primary-shade;
}
.menu--account li a {
color: $primary-shade;
}
.site-name-slogan a {
text-decoration: none;
}
.card-group img {
margin: 0;
width: 100%;
height: auto;
}
.card-group .field--type-image {
margin: 0
}
.slick {
width: 100%;
}
.slick>div {
margin: 0 15px;
}
\ No newline at end of file
......@@ -8,7 +8,7 @@
%fixed-admin-edit-navs {
position: fixed;
background: white;
border: 1px solid aquamarine;
border: 2px solid #000;
border-radius: 0;
z-index: 100;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.20);
......@@ -26,20 +26,21 @@
.active {
font-weight: bold;
background-color: aquamarine;
border: none;
background: #00F0F365;
}
.nav-item {
margin: 0;
.nav-link {
color: #222222;
border-radius: 0;
border: none;
&:hover {
background-color: aquamarine;
background: #00F0F365;
}
}
}
......
......@@ -13,7 +13,8 @@
// Fix first & last '+ Add Section' on Layout Builder being display under the header or footer
// Fix to container width, giving it padding to better display the '+ Add Section' buttons
#layout-builder {
padding: 25px 15px 25px 15px;
padding: 143px 15px 25px 15px;
background: #e6e6e6;
.layout-section {
margin-left: -15px;
......@@ -31,29 +32,13 @@
color: #000;
}
}
}
}
.show {
display: block !important;
}
.form-control, .btn-primary {
&:focus {
box-shadow: none !important;
.new-block {
background-color: #f7f7f7;
padding: 10px 20px;
color: #787878;
outline: 2px dashed #979797;
}
}
}
.btn-primary {
&:hover {
border: 1px solid #007fc8 !important;;
}
}
@media (min-width: 992px) {
.navbar-expand-md .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
}
......@@ -4,6 +4,50 @@
*
*/
// Default colors for header
#header {
#navbar-top, #navbar-main {
@extend %main-gradient-bg;
}
}
// Page has landing section w/ gradient-bg? Header goes absolute & transparent.
/*
* Pages with gradient-bg:
* --- Inicio: .page-node-682
* --- Recursos: .page-node-683
* --- Empresas: .page-node-684
* --- Comunidade: .page-node-713
* --- Contactos: .page-node-714
*/
.page-node-682,
.page-node-683,
.page-node-684,
.page-node-713,
.page-node-714 {
#page-wrapper {
position: relative;
}
#header {
@extend %header-is-absolute;
#navbar-top, #navbar-main {
background: transparent !important;
}
}
// Remove content top margin
#main #block-drupalpt-content .node__content{
margin: 0;
}
}
#navbar-top {
> .container {
justify-content: flex-end;
......@@ -16,8 +60,22 @@
}
}
// Menu Defaults
.block-menu {
// normal menu link
.nav-link {
color: #FFF;
}
// active menu link
.is-active {
color: #000;
}
}
// Header elements positioning & order
// Header styles
#navbar-main {
position: relative;
z-index: 2;
......@@ -38,7 +96,7 @@
}
}
.is-active {
color: #000;
//color: #000;
}
}
}
......
......@@ -4,35 +4,23 @@
*
*/
.landing {
height: 942px;
padding-top: 250px;
// PÁGINA INICIO :: page-node-682
.page-node-682 {
@extend %main-gradient-bg;
}
#page-wrapper {
position: relative;
}
// PÁGINA INICIO :: page-node-682
.page-node-682 {
#main {
#block-drupalpt-content {
.node__content {
margin: 0;
}
#layout-builder {
padding-top: 25px;
}
// --- --- SECTIONS --- --- //
.landing {
height: 942px;
padding-top: 250px;
background-image: linear-gradient(120deg, #eaee44, #33d0ff);
.block {
.content {
//padding-top: 250px;
}
}
}
.landing-lower {
......@@ -48,7 +36,8 @@
}
.benefits {
background-image: linear-gradient(120deg, #eaee44, #33d0ff);
@extend %main-gradient-bg;
.view-header {
......@@ -63,46 +52,9 @@
}
}
// Adjust column width between md and lg screen sizes
// Adjust .landing-lower column width between md and lg screen sizes
@include media-breakpoint-between(md, lg) {
.landing-lower.container {
max-width: 100%;
}
}
/* --- --- >> FIX TO HEADER BG ON frontpage & admin manage layout >> --- --- */
// Not fontpage? Header is not absolute (preventing Layout Builder bug w/ sections position).
// Simulating actual landing background in order to see logo & menus.
body:not(.path-frontpage) #header {
#navbar-top {
background-image: linear-gradient(120deg, #eaee44, #33d0ff);
}
#navbar-main {
background-image: linear-gradient(120deg, #eaee44, #33d0ff);
}
}
// Is frontpage? Header goes absolute.
.path-frontpage {
#header {
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: 1;
#navbar-top {
background-color: transparent !important;
}
#navbar-main {
background-color: transparent !important;
}
}
}
/* --- --- << FIX TO HEADER BG ON frontpage & admin manage layout << --- --- */
\ No newline at end of file
}
\ No newline at end of file
......@@ -2,9 +2,9 @@
/* Google Fonts */
//@import url("https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900,900italic");
//@import url("https://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,800,900");
// font families
$font-lato: 'Lato',
Arial,
......@@ -14,6 +14,7 @@ $font-raleway: 'Raleway',
Arial,
Verdana,
sans-serif;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
......@@ -25,6 +26,7 @@ Roboto,
"Helvetica Neue",
Arial,
sans-serif !default;
$font-family-serif: Georgia,
"Times New Roman",
Times,
......@@ -35,15 +37,20 @@ Consolas,
"Liberation Mono",
"Courier New",
monospace;
$font-family-base: $font-family-sans-serif;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-lg: 1.25rem;
$font-size-sm: .875rem;
$font-size-xs: .75rem;
$font-weight-normal: normal;
$font-weight-bold: bold;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;
$font-size-h1: 2.5rem;
$font-size-h2: 2rem;
$font-size-h3: 1.75rem;
......
......@@ -7,6 +7,7 @@ $primary-dark: darken($primary-shade, 12%);
$accent-shade: #0079C0;
$accent-light: lighten($accent-shade, 37%);
$accent-dark: darken($accent-shade, 12%);
// Reassign color vars to semantic color scheme
$red: #dc3545;
$yellow: #ffc107;
......@@ -21,6 +22,7 @@ $brand-primary: $accent-shade;
//$brand-warning: $orange;
//$brand-danger: $red;
$brand-inverse: $primary-shade;
// Body
//
// Settings for the `<body>` element.
......@@ -28,6 +30,7 @@ $brand-inverse: $primary-shade;
//$body-color: $gray-dark;
$inverse-bg: $primary-shade;
//$inverse-color: $gray-lighter;
// Links
//
// Style anchor elements.
......@@ -35,9 +38,11 @@ $link-color: $accent-shade;
$link-decoration: none;
$link-hover-color: $accent-dark;
$link-hover-decoration: underline;
// Comments
$comment-spacer-x: 1.25em;
$comment-spacer-y: 1.25em;
// Responsive font sizes
$enable-responsive-font-sizes: true;
{#
/**
* @file
* Default theme implementation to display a block.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - content: The content of this block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - content_attributes: Same as attributes, except applied to the main content
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_block()
*
* @ingroup themeable
*/
#}
{%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
<div{{ content_attributes.addClass('content') }}>
{{ content }}
</div>
{% endblock %}
</div>
{#
/**
* @file
* Theme override to display a view of unformatted rows.
*
* Available variables:
* - title: The title of this group of rows. May be empty.
* - rows: A list of the view's row items.
* - attributes: The row's HTML attributes.
* - content: The row's content.
* - view: The view object.
* - default_row_class: A flag indicating whether default classes should be
* used on rows.
*
* @see template_preprocess_views_view_unformatted()
*/
#}
{% if title %}
<h3>{{ title }}</h3>
{% endif %}
{% for row in rows %}
{%
set row_classes = [
default_row_class ? 'views-row col-md-4',
]
%}
<div{{ row.attributes.addClass(row_classes) }}>
{{ row.content }}
</div>
{% endfor %}
{#
/**
* @file
* Theme override to display a view of unformatted rows.
*
* Available variables:
* - title: The title of this group of rows. May be empty.
* - rows: A list of the view's row items.
* - attributes: The row's HTML attributes.
* - content: The row's content.
* - view: The view object.
* - default_row_class: A flag indicating whether default classes should be
* used on rows.
*
* @see template_preprocess_views_view_unformatted()
*/
#}
{% if title %}
<h3>{{ title }}</h3>
{% endif %}
{% for row in rows %}
{%
set row_classes = [
default_row_class ? 'views-row col-12',
]
%}
<div{{ row.attributes.addClass(row_classes) }}>
{{ row.content }}
</div>
{% endfor %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment