Commit 469bf2a8 authored by Benthe Kuijpers's avatar Benthe Kuijpers
Browse files

Setup flexible content page builde + adding colour variables and styling element mixins

parent e4387d20
{
"key": "group_603c986dd28a4",
"title": "Page builder",
"fields": [
{
"key": "field_603c98eeac99e",
"label": "Page builder rows",
"name": "page_builder",
"type": "flexible_content",
"instructions": "Start by adding a row and choose a type. Build up the page out of multiple rows and change the order by dragging them up and down.",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"layouts": {
"layout_603c98f63b259": {
"key": "layout_603c98f63b259",
"name": "content",
"label": "Content",
"display": "block",
"sub_fields": [],
"min": "",
"max": ""
},
"layout_603c99b677055": {
"key": "layout_603c99b677055",
"name": "news",
"label": "News",
"display": "block",
"sub_fields": [
{
"key": "field_603c99bf77056",
"label": "Which news items do you want to show?",
"name": "news_selection_type",
"type": "radio",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "30",
"class": "",
"id": ""
},
"choices": {
"latest": "Latest x items",
"manual": "Select specific news items"
},
"allow_null": 0,
"other_choice": 0,
"default_value": "latest : Latest x items",
"layout": "vertical",
"return_format": "value",
"save_other_choice": 0
},
{
"key": "field_603c99f977057",
"label": "Select news items",
"name": "news",
"type": "relationship",
"instructions": "",
"required": 0,
"conditional_logic": [
[
{
"field": "field_603c99bf77056",
"operator": "==",
"value": "manual"
}
]
],
"wrapper": {
"width": "70",
"class": "",
"id": ""
},
"post_type": [
"post"
],
"taxonomy": "",
"filters": [
"search"
],
"elements": [
"featured_image"
],
"min": 2,
"max": 8,
"return_format": "id"
},
{
"key": "field_603c9a681cbd1",
"label": "How many news items do you want to show?",
"name": "amount_news",
"type": "number",
"instructions": "",
"required": 0,
"conditional_logic": [
[
{
"field": "field_603c99bf77056",
"operator": "==",
"value": "latest"
}
]
],
"wrapper": {
"width": "70",
"class": "",
"id": ""
},
"default_value": 4,
"placeholder": "",
"prepend": "",
"append": "",
"min": 2,
"max": 10,
"step": ""
}
],
"min": "",
"max": ""
},
"layout_603c99adc0d18": {
"key": "layout_603c99adc0d18",
"name": "events",
"label": "Events",
"display": "block",
"sub_fields": [],
"min": "",
"max": ""
}
},
"button_label": "+ Add Row",
"min": "",
"max": ""
}
],
"location": [
[
{
"param": "post_type",
"operator": "==",
"value": "page"
}
]
],
"menu_order": 0,
"position": "acf_after_title",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": true,
"description": "",
"modified": 1614584465
}
\ No newline at end of file
@mixin colourBg($bgcolor, $rotation) {
position: relative;
* {
position: relative;
}
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
background-color: $bgcolor;
transform: rotate($rotation);
}
}
@mixin colouredBar($color1, $color2) {
margin-bottom: 50px;
position: relative;
display: inline-block;
&:before, &:after {
content: "";
position: absolute;
width: 100%;
height: 6px;
bottom: -10px;
left: 0;
mix-blend-mode: multiply;
}
&:before {
background: $color1;
}
&:after {
transform: translate(4px,4px);
background: $color2;
}
}
\ No newline at end of file
......@@ -3,6 +3,16 @@ $font-body: 'IBM Plex Sans', sans-serif;
$font-header: 'Space Grotesk', sans-serif;
// Colours
$red: #F30836;
$bg-red: #FF6C8F;
$yellow: #FFC008;
$bg-yellow: #F2E1B6;
$green: #06C770;
$bg-green: #7CE0B0;
$blue: #0F84BD;
$bg-blue: #65C4EA;
$purple: #6217C5;
$bg-purple: #B383FF;
// Breakpoints
$xsmall: 320px;
......@@ -15,6 +25,7 @@ $xlarge: 1200px;
$container-width: 1200px;
$container-width-small: 800px;
$mobile-header-height: 60px;
$desktop-header-height: 75px;
// Z-indexes:
$z-header: 1000;
\ No newline at end of file
$z-header: 1000;
@import "variables";
@import "normalize";
@import "mixins";
@import "typography";
\ No newline at end of file
.news-teaser {
.img-wrapper {
display: block;
@include colourBg($green, 2deg);
}
&:nth-child(odd) .img-wrapper {
@include colourBg($green, -1deg);
}
a {
text-decoration: none;
h2 {
margin: 10px 0;
font-size: 20px;
}
}
}
\ No newline at end of file
body {
margin: 0;
margin: $mobile-header-height 0 0;
color: black;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: $mobile-header-height 0;
min-height: 100vh;
@media only screen and (min-width: $large) {
padding: 0;
}
&.admin-bar {
@media only screen and (min-width: $large) {
padding: 32px 0 0;
}
margin: $desktop-header-height 0 0;
}
}
......
......@@ -9,6 +9,7 @@
flex-wrap: wrap;
align-items: center;
z-index: $z-header;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
@media only screen and (min-width: $large) {
padding: 15px;
......
.content-row {
padding: 25px 0;
border-bottom: 1px solid #EEE;
@media only screen and (min-width: $large) {
padding: 50px 0;
}
.container>h2 {
margin: 0 0 10px;
@include colouredBar($red, $green);
}
}
\ No newline at end of file
.grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin: 0 -10px;
>* {
flex: 1;
margin: 10px;
img {
width: 100%;
}
}
}
\ No newline at end of file
@import "content-row";
@import "grid";
\ No newline at end of file
<?php get_header(); ?>
<main id="primary" class="site-main">
<div class="container">
<?php
if ( have_posts() ) : ?>
if ( have_posts() ) :
<h1><?php the_title(); ?></h1>
if (!is_front_page()) {
echo '<h1>' . get_the_title() . '</h1>';
}
<?php
while ( have_posts() ) : the_post();
the_content();
get_template_part('template-parts/page-builder');
endwhile;
the_posts_navigation();
......@@ -22,8 +24,6 @@
endif;
?>
</div>
</main><!-- #main -->
<?php
......
<article class="news-teaser">
<div class="image-color-bg"></div>
<a href="<?php echo get_the_permalink($news_post); ?>" class="img-wrapper">
<?php if (has_post_thumbnail($news_post)) {
echo get_the_post_thumbnail($news_post, 'medium');
} else {
echo '<img src="' . get_template_directory_uri() . '/assets/img/placeholder.jpg">';
} ?>
</a>
<a href="<?php echo get_the_permalink($news_post); ?>">
<h2><?php echo get_the_title($news_post); ?></h2>
</a>
</article>
\ No newline at end of file
<div class="content-row">
<div class="container">
<h2>content row</h2>
</div>
</div>
\ No newline at end of file
<?php
$type = get_sub_field('news_selection_type');
if ($type === 'manual') {
$news_items = get_sub_field('news');
} else {
$news = new WP_Query( array (
'posts_per_page' => get_sub_field('amount_news'),
'fields' => 'ID'
));
$news_items = $news->posts;
} ?>
<div class="content-row">
<div class="container">
<h2>latest news</h2>
<div class="grid">
<?php foreach ($news_items as $news) {
$news_id = ($type === 'manual') ? $news : $news->ID;
$news_post = get_post($news_id);
include(locate_template('template-parts/elements/news-teaser.php'));
} ?>
</div>
</div>
</div>
\ No newline at end of file
<?php
if( have_rows('page_builder') ):
while ( have_rows('page_builder') ) : the_row();
get_template_part('template-parts/page-builder-rows/' . get_row_layout());
endwhile;
endif;
\ No newline at end of file
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