Commit 62054f36 authored by Cristiano Silva's avatar Cristiano Silva
Browse files

Resources page styles

parent fe617fad
Pipeline #1723 failed with stages
in 3 minutes and 1 second
......@@ -8915,7 +8915,7 @@ nav.tabs {
--- --- --- MIXINS & PLACEHOLDERS --- --- ---
*
*/
#header #navbar-top, #header #navbar-main, .landing, .page-node-682 #main #block-drupalpt-content .home-benefits {
.page-node-682 #main #block-drupalpt-content .home-community .img-with-border .visit-link, .content-text .content-topic .topic-links a, #header #navbar-top, #header #navbar-main, .landing, .content-text h3, .page-node-682 #main #block-drupalpt-content .home-benefits, .page-node-683 #main #block-drupalpt-content .resources-contribute-intro {
background-image: linear-gradient(120deg, #eaee44, #33d0ff); }
.page-node-682 #header,
......@@ -8929,6 +8929,37 @@ nav.tabs {
top: 0;
z-index: 1; }
.img-with-border, .page-node-683 #main #block-drupalpt-content .resources-learn-intro .img-with-border {
position: relative;
padding: 45px;
border: 2px solid #00F0F3; }
.page-node-682 #main #block-drupalpt-content .home-community .img-with-border .visit-link {
padding: 14px 42px;
font: 600 18px/21px 'Inter', sans-serif;
letter-spacing: -0.5px;
color: #fff;
border: 0;
white-space: nowrap;
text-transform: uppercase;
text-align: center; }
.page-node-682 #main #block-drupalpt-content .home-community .img-with-border .visit-link:hover {
opacity: 0.6; }
.content-text .content-topic .topic-links a {
display: inline-block;
padding: 9px 12px;
font: 600 13px/16px 'Inter', sans-serif;
letter-spacing: -0.5px;
color: #fff;
border: 0;
border-radius: 5px;
white-space: nowrap;
text-transform: uppercase;
text-align: center; }
.content-text .content-topic .topic-links a:hover {
opacity: 0.6; }
/*
*
--- --- --- HEADER --- --- ---
......@@ -9011,7 +9042,8 @@ nav.tabs {
*
*/
footer {
padding: 0;
padding: 0 !important;
margin-top: 225px;
border-top: 3px solid #00F0F3;
background: #222222; }
footer .region-footer-first, footer .region-footer-second, footer .region-footer-third {
......@@ -9098,7 +9130,7 @@ h1 {
letter-spacing: 0; }
h2 {
font: 100 94px/112px 'Inter', sans-serif;
font: 100 84px/101px 'Inter', sans-serif;
letter-spacing: 0; }
h3 {
......@@ -9114,7 +9146,7 @@ h5 {
letter-spacing: -0.5px; }
h6 {
font: 700 18px/21px 'Inter', sans-serif;
font: 600 18px/21px 'Inter', sans-serif;
letter-spacing: -0.5px; }
p {
......@@ -9124,9 +9156,55 @@ p {
margin: 0;
padding: 0; }
b, strong {
font-weight: 700; }
ul {
list-style: none;
padding-left: 0; }
a:hover {
text-decoration: none; }
.landing {
height: 942px;
padding-top: 300px; }
height: 90vh;
padding-top: 270px; }
.view-header-text {
font: 200 20px/30px 'Inter', sans-serif;
font-style: italic;
letter-spacing: 0; }
.img-with-border a {
display: block; }
.img-with-border img {
width: 100%;
height: 100%; }
.content-header h2 {
margin-bottom: 50px; }
.content-header p {
width: 75%;
margin-bottom: 95px; }
.content-text h3 {
color: #fff;
padding: 20px 40px;
margin-bottom: 80px; }
.content-text .content-topic {
margin-bottom: 80px; }
.content-text .content-topic h5 {
text-transform: uppercase;
margin-bottom: 15px; }
.content-text .content-topic p {
margin-bottom: 35px; }
.content-text .content-topic .topic-links {
display: flex;
flex-wrap: wrap;
margin-bottom: -15px; }
.content-text .content-topic .topic-links a {
margin-right: 15px;
margin-bottom: 15px; }
/*
*
......@@ -9228,7 +9306,11 @@ p {
.page-node-682 #main #block-drupalpt-content .home-landing-lower .field--type-text-with-summary > a {
display: block; }
.page-node-682 #main #block-drupalpt-content .home-landing-lower .field--type-text-with-summary > a img {
width: 100%; }
width: 100%;
transition: all .4s ease 0s; }
.page-node-682 #main #block-drupalpt-content .home-landing-lower .field--type-text-with-summary > a img:hover {
cursor: pointer;
transform: scale(1.05); }
.page-node-682 #main #block-drupalpt-content .home-landing-lower .field--type-text-with-summary h4 {
margin-top: 30px; }
.page-node-682 #main #block-drupalpt-content .home-landing-lower .field--type-text-with-summary h4 a {
......@@ -9240,12 +9322,135 @@ p {
.page-node-682 #main #block-drupalpt-content .home-landing-lower .field--type-text-with-summary p {
font: 300 16px/26px 'Inter', sans-serif;
margin-top: 20px; }
.page-node-682 #main #block-drupalpt-content .home-benefits, .page-node-682 #main #block-drupalpt-content .home-solutions, .page-node-682 #main #block-drupalpt-content .home-use-cases, .page-node-682 #main #block-drupalpt-content .home-community {
padding: 180px 0 0 0; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-header, .page-node-682 #main #block-drupalpt-content .home-solutions .view-header, .page-node-682 #main #block-drupalpt-content .home-use-cases .view-header, .page-node-682 #main #block-drupalpt-content .home-community .view-header {
display: flex;
justify-content: space-between;
margin-bottom: 110px; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-header .view-header-titles h2, .page-node-682 #main #block-drupalpt-content .home-solutions .view-header .view-header-titles h2, .page-node-682 #main #block-drupalpt-content .home-use-cases .view-header .view-header-titles h2, .page-node-682 #main #block-drupalpt-content .home-community .view-header .view-header-titles h2 {
margin-left: -5px; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-header .view-header-titles h5, .page-node-682 #main #block-drupalpt-content .home-solutions .view-header .view-header-titles h5, .page-node-682 #main #block-drupalpt-content .home-use-cases .view-header .view-header-titles h5, .page-node-682 #main #block-drupalpt-content .home-community .view-header .view-header-titles h5 {
text-transform: uppercase; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-header p, .page-node-682 #main #block-drupalpt-content .home-solutions .view-header p, .page-node-682 #main #block-drupalpt-content .home-use-cases .view-header p, .page-node-682 #main #block-drupalpt-content .home-community .view-header p {
width: 520px;
align-self: flex-end;
text-align: right; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-content .views-row, .page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row {
margin-bottom: 30px; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-content .views-row:nth-child(even) .views-row-fields, .page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row:nth-child(even) .views-row-fields {
border: 2px solid #fff; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-content .views-row .views-row-fields, .page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row .views-row-fields {
border: 2px solid #00F0F3;
height: 350px; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-content .views-row .views-row-fields:hover, .page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row .views-row-fields:hover {
cursor: crosshair; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-content .views-row .views-row-fields:hover .views-field-field-icon, .page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row .views-row-fields:hover .views-field-field-icon {
opacity: 0; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-content .views-row .views-row-fields:hover .views-field-title, .page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row .views-row-fields:hover .views-field-title {
opacity: 0; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-content .views-row .views-row-fields:hover .views-field-body, .page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row .views-row-fields:hover .views-field-body {
opacity: 1; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-content .views-row .views-row-fields .views-field-field-icon, .page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row .views-row-fields .views-field-field-icon {
position: absolute;
top: 43%;
left: 50%;
transform: translate(-50%, -50%); }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-content .views-row .views-row-fields .views-field-title, .page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row .views-row-fields .views-field-title {
position: absolute;
top: 60%;
left: 0;
text-align: center;
width: 100%; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-content .views-row .views-row-fields .views-field-title h6, .page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row .views-row-fields .views-field-title h6 {
text-transform: uppercase;
color: #fff; }
.page-node-682 #main #block-drupalpt-content .home-benefits .view-content .views-row .views-row-fields .views-field-body, .page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row .views-row-fields .views-field-body {
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #fff;
padding: 25px;
text-align: center;
font: 300 16px/26px 'Inter', sans-serif;
transition: all 250ms ease-in-out; }
.page-node-682 #main #block-drupalpt-content .home-solutions {
background: #F8F9FA; }
.page-node-682 #main #block-drupalpt-content .home-solutions .views-field-title h6 {
color: #424242 !important; }
.page-node-682 #main #block-drupalpt-content .home-solutions .view-content .views-row:nth-child(even) .views-row-fields {
border: 2px solid #757575; }
.page-node-682 #main #block-drupalpt-content .home-use-cases {
background: #00F0F310; }
.page-node-682 #main #block-drupalpt-content .home-use-cases .use-case {
margin-bottom: 240px; }
.page-node-682 #main #block-drupalpt-content .home-use-cases .use-case .views-field-field-media-image a img {
transition: all .4s ease 0s; }
.page-node-682 #main #block-drupalpt-content .home-use-cases .use-case .views-field-field-media-image a img:hover {
cursor: pointer;
transform: scale(1.05); }
.page-node-682 #main #block-drupalpt-content .home-use-cases .use-case .views-field-field-logo .field-content {
position: absolute;
right: 15px;
bottom: 76px;
width: 230px;
border-bottom: 2px solid #00F0F3;
text-align: center;
padding: 25px 0;
background: #FFFFFF25; }
.page-node-682 #main #block-drupalpt-content .home-use-cases .use-case .views-field-body {
position: absolute;
right: 15px;
bottom: -90px;
width: 363px;
padding: 30px;
border: 2px solid #00F0F3;
margin-top: 20px;
background: #fff;
font: 300 18px/28px 'Inter', sans-serif; }
.page-node-682 #main #block-drupalpt-content .home-community .img-with-border span {
font: 200 32px/34px 'Inter', sans-serif;
padding: 0px 40px;
background: #FFF;
position: absolute;
top: -3px;
left: 50%;
transform: translate(-50%, -50%); }
.page-node-682 #main #block-drupalpt-content .home-community .img-with-border .visit-cta {
text-align: center;
padding: 0px 75px;
display: inline-block;
position: absolute;
bottom: -50px;
background: #FFF;
left: 50%;
transform: translate(-50%, -50%); }
@media (min-width: 768px) and (max-width: 1199.98px) {
.landing-lower.container {
max-width: 100%; } }
/*
*
--- --- --- INICIO --- --- ---
*
*/
.page-node-683 #main #block-drupalpt-content .resources-learn-content {
margin-top: 437px;
margin-bottom: 130px; }
.page-node-683 #main #block-drupalpt-content .resources-learn-content .content-topic:last-child, .page-node-683 #main #block-drupalpt-content .resources-learn-content .content-topic:last-child p:last-child {
margin-bottom: 0;
padding-bottom: 0; }
.page-node-683 #main #block-drupalpt-content .resources-contribute-intro {
height: 90vh;
padding-top: 135px; }
.page-node-683 #main #block-drupalpt-content .resources-contribute-content {
margin-top: 300px; }
/*
*
--- --- RIPPLE EFFECT ON BUTTONS
*
*/
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -31,8 +31,11 @@
// Admin Tabs
@import "theme-styles/admin-tabs";
// Website Pages
@import "theme-styles/pages/inicio";
@import "theme-styles/pages/resources";
// Ripple effect for buttons
@import "theme-styles/util/ripple-effect";
\ No newline at end of file
......@@ -37,6 +37,24 @@
text-transform: uppercase;
text-align: center;
&:hover {
opacity: 0.6;
}
}
%mini-link-styles {
display: inline-block;
padding: 9px 12px;
font: 600 13px/16px 'Inter', sans-serif;
letter-spacing: -0.5px;
@extend %main-gradient-bg;
color: #fff;
border: 0;
border-radius: 5px;
white-space: nowrap;
text-transform: uppercase;
text-align: center;
&:hover {
opacity: 0.6;
}
......
......@@ -6,7 +6,7 @@
footer {
padding: 0 !important;
margin-top: 130px;
margin-top: 225px;
border-top: 3px solid $light-blue;
background: $very-dark-grey;
......
......@@ -77,6 +77,11 @@ b, strong {
font-weight: 700;
}
ul {
list-style: none;
padding-left: 0;
}
img {
//width: 100%;
//height: 100%;
......@@ -96,7 +101,7 @@ a:hover {
.landing {
//height: 800px;
//padding-top: 300px;
height: 90vh;
padding-top: 270px;
......@@ -109,4 +114,62 @@ a:hover {
letter-spacing: 0;
}
.img-with-border {
@extend %border-blue-around-img;
a {
display: block;
}
img {
width: 100%;
height: 100%;
}
}
.content-header {
h2 {
margin-bottom: 50px;
}
p {
width: 75%;
margin-bottom: 95px;
}
}
.content-text {
h3 {
color: $white;
padding: 20px 40px;
@extend %main-gradient-bg;
margin-bottom: 80px;
}
.content-topic {
margin-bottom: 80px;
h5 {
text-transform: uppercase;
margin-bottom: 15px;
}
p {
margin-bottom: 35px;
}
.topic-links {
display: flex;
flex-wrap: wrap;
margin-bottom: -15px;
a {
@extend %mini-link-styles;
margin-right: 15px;
margin-bottom: 15px;
}
}
}
}
// --- <<< --- GENERAL STYLES --- <<< --- //
......@@ -70,7 +70,7 @@
.home-benefits, .home-solutions, .home-use-cases, .home-community {
padding: 180px 0 120px 0;
padding: 180px 0 0 0;
.view-header {
display: flex;
......@@ -249,8 +249,6 @@
.img-with-border {
@extend %border-blue-around-img;
span {
font: 200 32px/34px 'Inter', sans-serif;
......@@ -262,15 +260,6 @@
transform: translate(-50%, -50%);
}
a {
display: block;
}
img {
width: 100%;
height: 100%;
}
.visit-cta {
text-align: center;
padding: 0px 75px;
......
/*
*
--- --- --- INICIO --- --- ---
*
*/
// PÁGINA RECURSOS :: page-node-683
.page-node-683 {
#main {
#block-drupalpt-content {
// --- --- SECTIONS --- --- //
.resources-learn-intro {
h2 {
}
p {
}
.img-with-border {
@extend %border-blue-around-img;
}
}
.resources-learn-content {
margin-top: 437px;
margin-bottom: 130px;
.content-topic:last-child, .content-topic:last-child p:last-child{
margin-bottom: 0;
padding-bottom: 0;
}
}
.resources-contribute-intro {
height: 90vh;
padding-top: 135px;
@extend %main-gradient-bg;
}
.resources-contribute-content {
margin-top: 300px;
}
}
}
}
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