Skip to content

Commit

Permalink
prepare site for bannes rection
Browse files Browse the repository at this point in the history
  • Loading branch information
ondrejch committed Sep 2, 2020
1 parent 3b82fc5 commit 698f9d8
Show file tree
Hide file tree
Showing 9 changed files with 2,092 additions and 1,959 deletions.
3,825 changes: 1,889 additions & 1,936 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"build": "gatsby build && cpx -v \".github/**/*\" public/.github && cpx CODE_OF_CONDUCT.md public && cpx CONTRIBUTING.md public && cpx README.md public && cpx LICENSE public",
"build-prefixed": "gatsby build --prefix-paths && cpx -v \".github/**/*\" public/.github && cpx CODE_OF_CONDUCT.md public && cpx CONTRIBUTING.md public && cpx README.md public && cpx LICENSE public",
"develop": "gatsby develop",
"develop:preview": "cross-env ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop",
"deploy": "gh-pages -d public -b master"
},
"dependencies": {
Expand All @@ -23,7 +24,7 @@
"github-api": "^3.3.0",
"html-to-react": "^1.3.3",
"loaders.css": "^0.1.2",
"lodash": "^4.17.15",
"lodash": "^4.17.20",
"node-sass": "^4.14.1",
"qs": "^6.7.0",
"query-string": "^6.2.0",
Expand Down
58 changes: 58 additions & 0 deletions src/components/bannerSection.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from 'react';
import PropTypes from 'prop-types';

const BannerSection = (props) => {

const sectionStyles = {
background: `
${props.data.elements.section_info__background_color.value}
url(${props.data.elements.section_info__background_image.value[0].url})
bottom
left
no-repeat`,
};

const elements = props.data.elements;
return (
<section className="banner-section" id={props.data.system.codename} style={sectionStyles} >
<div className="row-flex">
<div className="box-100 header">
<h2 dangerouslySetInnerHTML={{ __html: elements.section_info__title.value.replace("a ", "a&nbsp;") }}></h2>
<h3 dangerouslySetInnerHTML={{ __html: elements.section_info__subtitle.value.replace("a ", "a&nbsp;") }}></h3>
</div>
</div>
<div className="row-flex content">
<div className="box-100">
<div dangerouslySetInnerHTML={{ __html: elements.main_text.value }} className="main-text" />
{elements.side_text.value &&
<div dangerouslySetInnerHTML={{ __html: elements.side_text.value }} className="side-text" />
}
</div>
<div className="box-100">
<a href={elements.url_link.value} className="btn">{elements.url_text.value}</a>
</div>
</div>
</section>
);

}

BannerSection.propTypes = {
data: PropTypes.shape({
system: PropTypes.shape({
codename: PropTypes.string
}),
elements: PropTypes.shape({
section_info__title: PropTypes.object,
section_info__subtitle: PropTypes.object,
section_info__background_image: PropTypes.object,
section_info__background_color: PropTypes.object,
url_text: PropTypes.object,
url_link: PropTypes.object,
main_text: PropTypes.object,
side_text: PropTypes.object
})
}),
};

export default BannerSection;
37 changes: 36 additions & 1 deletion src/components/landingPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const landingPage = () => (
node {
elements {
top_menu {
value{
value {
... on kontent_item_text_link {
elements {
text {
Expand Down Expand Up @@ -186,6 +186,41 @@ const landingPage = () => (
}
}
}
... on kontent_item_banner_section {
system {
id
codename
type
}
elements {
section_info__title {
value
}
section_info__subtitle {
value
}
section_info__background_image {
value {
url
}
}
section_info__background_color {
value
}
url_text {
value
}
url_link {
value
}
main_text {
value
}
side_text {
value
}
}
}
}
}
backgrounds {
Expand Down
3 changes: 3 additions & 0 deletions src/components/section.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';

import BannerSection from './bannerSection';
import IconsSection from './iconsSection';
import ProjectsAndContributorsSection from './projectsAndContributorsSection';
import GithubIssuesListSection from './githubIssuesListSection';

const Section = (props) => {
switch (get(props, 'data.system.type')) {
case 'banner_section':
return <BannerSection {...props} />;
case 'icons_section':
return <IconsSection {...props} />;
case 'projects_and_contributors_section':
Expand Down
91 changes: 74 additions & 17 deletions src/pages/selector/_class_selector.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Google Fonts
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700');
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700");
@import "../styles/mixins.scss";
@import 'loaders.css/src/animations/ball-scale-ripple-multiple.scss';
@import "loaders.css/src/animations/ball-scale-ripple-multiple.scss";

// This will contain all of the section class selectors.
section.heading-section {
Expand Down Expand Up @@ -45,7 +45,7 @@ section.heading-section {
}

.btn {
@include button(#FFFFFF);
@include button(#ffffff);
margin: auto;
margin-bottom: 150px;
}
Expand Down Expand Up @@ -84,7 +84,7 @@ section.icons-section {

label {
@include button(#fff);
background: #343E61;
background: #343e61;
font-weight: 300;
width: 150px;

Expand All @@ -93,7 +93,7 @@ section.icons-section {
}
}

input:checked+label {
input:checked + label {
@include button(#fff);
}

Expand All @@ -102,7 +102,7 @@ section.icons-section {
font-size: 18px;
line-height: 26px;

.box-33>div {
.box-33 > div {
max-width: 260px;
margin: auto;

Expand Down Expand Up @@ -132,7 +132,7 @@ section.task-list {
padding: 0 0 30px 0;

a {
color: #FFFFFF;
color: #ffffff;
text-decoration: none;

&:hover {
Expand All @@ -157,7 +157,7 @@ section.task-list {
padding: 80px 0 50px 0;

select {
background: #343E61;
background: #343e61;
width: 270px;
padding: 10px 25px;
line-height: 30px;
Expand All @@ -178,7 +178,8 @@ section.task-list {
outline: none !important;
outline-color: $color-orange !important;

option {}
option {
}
}
}
}
Expand Down Expand Up @@ -233,7 +234,7 @@ section.task-list {
}

a {
color: #FFFFFF;
color: #ffffff;
text-decoration: none;

&:hover {
Expand All @@ -253,7 +254,7 @@ section.task-list {
}
}

.loader-active>div {
.loader-active > div {
width: 100%;
margin: 2em auto;
}
Expand Down Expand Up @@ -283,7 +284,7 @@ section.task-list {
padding: 0 0 0 80px;

a {
color: #FFFFFF;
color: #ffffff;
text-decoration: none;
font-weight: bold;

Expand Down Expand Up @@ -371,6 +372,63 @@ section.projects-and-contributions {
}
}

section.banner-section {
padding-bottom: 3em;
.header {
padding: 2em 0 3em 0;
margin: 1em 0;
h2 {
font-size: 60px;
line-height: 70px;
font-weight: bold;
text-align: center;
display: block;
}

h3 {
color: $color-grey;
font-weight: 300;
font-size: 46px;
line-height: 60px;
}
}

.content {
font-size: 22px;
line-height: 30px;
font-weight: 300;
min-height: 12em;
max-width: 720px;

.main-text,
.side-text {
font-size: 1.1em;
line-height: 1.3em;
padding: .5em;
margin-bottom: 1em;
}

.side-text {
color: $color-grey;
}

.btn {
@include button(#ffffff);
font-size: 1em;
line-height: 1.8em;
}
}

a {
color: #ffffff;
text-decoration: dotted;
&:hover {
color: $color-orange;
text-decoration: none;
}
}
}

section.footer {
padding: 390px 0 230px 0;

Expand All @@ -379,9 +437,8 @@ section.footer {
font-size: 24px;
line-height: 32px;
font-weight: 300;

a {
display: block;
color: $color-text;
font-style: normal;

Expand Down Expand Up @@ -410,11 +467,11 @@ section.footer {
//This last selector is the selection selector for highllighting words on the project.

::selection {
background: rgba(0, 0, 0, .3);
background: rgba(0, 0, 0, 0.3);
/* Safari */
}

::-moz-selection {
background: rgba(0, 0, 0, .3);
background: rgba(0, 0, 0, 0.3);
/* Firefox */
}
}
1 change: 1 addition & 0 deletions src/pages/styles/_global.scss
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ acronym {

a {
text-decoration: none;
border-bottom: 1px dotted;
}
a img {
border: none;
Expand Down
3 changes: 3 additions & 0 deletions src/pages/styles/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
line-height: 30px;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
border-bottom: none;
&:hover {
color: $color-black;
}
Expand All @@ -33,6 +35,7 @@
@mixin menuButton($color) {
@include button($color);
display: block;
text-transform: none;
}

@mixin navigationSetup() {
Expand Down
Loading

0 comments on commit 698f9d8

Please sign in to comment.