Commit 4ed2e4d1 authored by Benthe Kuijpers's avatar Benthe Kuijpers
Browse files

homepage styling

parent f4c61289
......@@ -21,7 +21,182 @@
"name": "content",
"label": "Content",
"display": "block",
"sub_fields": [],
"sub_fields": [
{
"key": "field_6040ff7cae543",
"label": "Content",
"name": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "top",
"endpoint": 0
},
{
"key": "field_6040ff81ae544",
"label": "Content",
"name": "content",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
},
{
"key": "field_604102a087c61",
"label": "Button text",
"name": "button_text",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "50",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_604102ae87c62",
"label": "Button URL",
"name": "button_url",
"type": "url",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "50",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": ""
},
{
"key": "field_6040ff70ae542",
"label": "Image",
"name": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "top",
"endpoint": 0
},
{
"key": "field_6040ff63ae541",
"label": "Image",
"name": "image",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "url",
"preview_size": "large",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": ""
},
{
"key": "field_6040fef0377bc",
"label": "Design",
"name": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "top",
"endpoint": 0
},
{
"key": "field_6040fefb377bd",
"label": "Order on desktop",
"name": "order",
"type": "radio",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "50",
"class": "",
"id": ""
},
"choices": {
"text_image": "Text | Image",
"image_text": "Image | Text"
},
"allow_null": 0,
"other_choice": 0,
"default_value": "",
"layout": "vertical",
"return_format": "value",
"save_other_choice": 0
},
{
"key": "field_6040ff3b377be",
"label": "Background",
"name": "background",
"type": "radio",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "50",
"class": "",
"id": ""
},
"choices": {
"white": "White",
"blocks": "Blocked yellow"
},
"allow_null": 0,
"other_choice": 0,
"default_value": "",
"layout": "vertical",
"return_format": "value",
"save_other_choice": 0
}
],
"min": "",
"max": ""
},
......@@ -123,12 +298,97 @@
"min": "",
"max": ""
},
"layout_603c99adc0d18": {
"key": "layout_603c99adc0d18",
"name": "events",
"label": "Events",
"layout_60410c91ea5e3": {
"key": "layout_60410c91ea5e3",
"name": "pinned_content_grid",
"label": "Pinned news, events & resources",
"display": "block",
"sub_fields": [],
"sub_fields": [
{
"key": "field_60410ca1ea5e4",
"label": "News",
"name": "news",
"type": "relationship",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"post_type": [
"post"
],
"taxonomy": "",
"filters": [
"search",
"taxonomy"
],
"elements": [
"featured_image"
],
"min": 2,
"max": 6,
"return_format": "id"
},
{
"key": "field_60410cf0ea5e5",
"label": "Events",
"name": "events",
"type": "relationship",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"post_type": [
"events"
],
"taxonomy": "",
"filters": [
"search",
"taxonomy"
],
"elements": [
"featured_image"
],
"min": 2,
"max": 6,
"return_format": "id"
},
{
"key": "field_60410cfeea5e6",
"label": "Resources",
"name": "resources",
"type": "relationship",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"post_type": [
"resources"
],
"taxonomy": "",
"filters": [
"search",
"taxonomy"
],
"elements": [
"featured_image"
],
"min": 2,
"max": 6,
"return_format": "id"
}
],
"min": "",
"max": ""
}
......@@ -155,5 +415,5 @@
"hide_on_screen": "",
"active": true,
"description": "",
"modified": 1614683424
"modified": 1614875934
}
\ No newline at end of file
......@@ -33,7 +33,7 @@
"id": ""
},
"display_format": "g:i a",
"return_format": "g:i a"
"return_format": "H:i"
},
{
"key": "field_603e1c16aec19",
......@@ -49,7 +49,7 @@
"id": ""
},
"display_format": "g:i a",
"return_format": "g:i a"
"return_format": "H:i"
}
],
"location": [
......@@ -69,5 +69,5 @@
"hide_on_screen": "",
"active": true,
"description": "",
"modified": 1614683905
"modified": 1614880959
}
\ No newline at end of file
......@@ -12,18 +12,7 @@ $post_type_obj = get_post_type_object( $post_type ); ?>
</div>
<?php
$filters = get_terms( array(
'taxonomy' => 'resource-types',
'hide_empty' => false,
) );
$filter_colours = array(
'#06C770',
'#F2E1B6',
'#B383FF',
'#65C4EA',
'#FF6C8F'
);
$filters = get_terms( array('taxonomy' => 'resource-types', 'hide_empty' => false ) );
if (!empty($filters)) { ?>
<div class="archive__filters">
......@@ -32,12 +21,15 @@ $post_type_obj = get_post_type_object( $post_type ); ?>
<div class="filter-button" data-filter="*"><?php _e('all', 'makeitopen'); ?></div>
<?php
// Build filter array with slugs combined with colours
$filter_colours = array('#06C770', '#F2E1B6', '#B383FF', '#65C4EA', '#FF6C8F');
$filter_array = array();
foreach ($filters as $key=>$filter) {
$colour = $filter_colours[$key];
$filter_array[$key] = array($filter->name, $filter->slug, $colour);
}
// Loop through filters to make buttons
foreach ($filter_array as $filter) { ?>
<div class="filter-button" data-filter=".<?php echo $filter[1]; ?>" style="background:<?php echo $filter[2]; ?>">
<?php echo lcfirst($filter[0]); ?>
......@@ -60,34 +52,24 @@ $post_type_obj = get_post_type_object( $post_type ); ?>
if( $query->have_posts() ) :
while( $query->have_posts() ) : $query->the_post();
$filterclass = '';
$filters = get_the_terms( get_the_ID(), 'resource-types' );
// Make (combined) filter class for isotope
$filterclass = '';
if (!empty($filters)) {
foreach ($filters as $filter) {
$filterclass .= ' ' . $filter->slug;
}
}
$type = get_field('type');
$url = ($type === 'url') ? get_field('url') : get_field('file'); ?>
<div class="list__item <?php echo $filterclass; ?>">
<a href="<?php echo $url; ?>" target="_blank">
<?php
if (!empty($filters)) {
foreach($filters as $filter) {
$filter_key = array_search($filter->slug, array_column($filter_array, 1));
$colour = $filter_array[$filter_key][2];
echo '<span class="label" style="background:' . $colour . '">' . lcfirst($filter->name) . '</span>';
}
} ?>
<h2><?php the_title(); ?></h2>
<p><?php echo excerpt(get_the_excerpt(), 100); ?></p>
</a>
</div>
if ($post_type_obj->name === 'resources') {
$resource_post = get_post();
include(locate_template('template-parts/elements/resource-teaser.php'));
} elseif ($post_type_obj->name === 'events') {
$event_post = get_post();
include(locate_template('template-parts/elements/events-teaser.php'));
}
<?php endwhile;
endwhile;
endif; ?>
</div>
......
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10">
<rect width="10" height="10" fill="#fff"/>
<rect width="10" height="10" fill="#f2e1b6" opacity="0.04" style="mix-blend-mode: multiply;isolation: isolate"/>
<rect width="10" height="10" fill="#f2e1b6" style="mix-blend-mode: multiply;isolation: isolate"/>
<line y2="10" transform="translate(0.5)" fill="none" stroke="#000" stroke-width="1" opacity="0.04" style="mix-blend-mode: multiply;isolation: isolate"/>
<line y2="10" transform="translate(10 0.5) rotate(90)" fill="none" stroke="#000" stroke-width="1" opacity="0.04" style="mix-blend-mode: multiply;isolation: isolate"/>
</svg>
......@@ -38,6 +38,9 @@
$('.menu-item a').each(function() {
descenderSpan($(this));
});
$('blockquote strong').each(function() {
descenderSpan($(this));
});
// 4. Add little arrow behind Open Schooling Navigator link
$('.menu-item.osn a').append('<span class="arrow">↗</span>');
......
!function(e){e(document).ready(function(){function t(e){var t={g:!0,j:!0,p:!0,q:!0,y:!0},s=e.html().split("");for(i=0,i=0;i<s.length;i+=1)t[s[i]]&&(s[i]='<span class="descender descender--'+s[i]+'">'+s[i]+"</span>");e.html(s.join(""))}e(window).scroll(function(t){e(window).scrollTop()>200?e(".site-header").addClass("site-header--scrolling"):e(".site-header").removeClass("site-header--scrolling")}),e(".js-toggle-hamburger").click(function(){e(this).toggleClass("hamburger--active"),e(".site-header").toggleClass("site-header--nav-active"),e(".navigation").toggleClass("navigation--shown")}),e(".menu-item a").each(function(){t(e(this))}),e(".menu-item.osn a").append('<span class="arrow">↗</span>'),e(".archive__filters").on("click",".filter-button",function(){var t=e(this),i=t.attr("data-filter");t.parent().addClass("archive__filters--active"),e(".filter-button").removeClass("filter-button--active"),t.addClass("filter-button--active"),e(".archive__no-results").hide(),e(".list").isotope({filter:i}),e(".list").data("isotope").filteredItems.length||e(".archive__no-results").show()})})}(jQuery);
\ No newline at end of file
!function(e){e(document).ready(function(){function t(e){var t={g:!0,j:!0,p:!0,q:!0,y:!0},s=e.html().split("");for(i=0,i=0;i<s.length;i+=1)t[s[i]]&&(s[i]='<span class="descender descender--'+s[i]+'">'+s[i]+"</span>");e.html(s.join(""))}e(window).scroll(function(t){e(window).scrollTop()>200?e(".site-header").addClass("site-header--scrolling"):e(".site-header").removeClass("site-header--scrolling")}),e(".js-toggle-hamburger").click(function(){e(this).toggleClass("hamburger--active"),e(".site-header").toggleClass("site-header--nav-active"),e(".navigation").toggleClass("navigation--shown")}),e(".menu-item a").each(function(){t(e(this))}),e("blockquote strong").each(function(){t(e(this))}),e(".menu-item.osn a").append('<span class="arrow">↗</span>'),e(".archive__filters").on("click",".filter-button",function(){var t=e(this),i=t.attr("data-filter");t.parent().addClass("archive__filters--active"),e(".filter-button").removeClass("filter-button--active"),t.addClass("filter-button--active"),e(".archive__no-results").hide(),e(".list").isotope({filter:i}),e(".list").data("isotope").filteredItems.length||e(".archive__no-results").show()})})}(jQuery);
\ No newline at end of file
......@@ -26,7 +26,7 @@ $large: 1400px;
$container-width: 1100px;
$container-width-small: 800px;
$mobile-header-height: 80px;
$desktop-header-height: 80px;
$desktop-header-height: 70px;
// Z-indexes:
$z-header: 1000;
......
.events-teaser {
margin: 10px 0;
margin: 0 0 30px;
a {
display: flex;
......@@ -8,6 +8,11 @@
text-decoration: none;
}
.category {
font-style: italic;
font-weight: 300;
}
&__date {
background: $blue;
flex: 0 0 60px;
......@@ -16,16 +21,34 @@
color: white;
font-weight: bold;
text-align: center;
font-size: 20px;
line-height: 22px;
padding: 10px;
font-size: 24px;
line-height: 24px;
padding: 8px;
mix-blend-mode: multiply;
@include colourBg($bg-yellow, 0deg);
span {
padding: 5px;
background: rgba(black,0.2);
display: block;
margin: 10px -8px -8px;
font-size: 19px;
line-height: 19px;
}
}
&__text {
flex: 1;
h4 {
font-size: 22px;
line-height: 22px;
margin: 0;
@media only screen and (min-width: $smallmedium) {
font-size: 28px;
line-height: 30px;
}
}
}
}
\ No newline at end of file
......@@ -4,6 +4,10 @@
line-height: 0;
display: block;
box-shadow: 3px 3px 0 $bg-yellow;
img {
max-width: 100%;
}
}
a {
......@@ -15,8 +19,13 @@
h2 {
margin: 0 0 10px;
font-size: 28px;
font-size: 22px;
line-height: 22px;
@media only screen and (min-width: $smallmedium) {
font-size: 28px;
line-height: 30px;
}
@media only screen and (min-width: $large) {
font-size: 32px;
......
......@@ -6,7 +6,7 @@ body {
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
@media only screen and (min-width: $large) {
@media only screen and (min-width: $mediumlarge) {
margin: $desktop-header-height 0 0;
}
}
......
......@@ -12,10 +12,6 @@
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
transition: all 0.25s ease;
@media only screen and (min-width: $medium) {
padding: 9px;
}
body.admin-bar & {
top: 45px;
......
......@@ -77,7 +77,7 @@
right: 145px;
mix-blend-mode: multiply;
@media only screen and (min-width: $medium) {
@media only screen and (min-width: $mediumlarge) {
right: 65px;
}
}
......@@ -145,7 +145,7 @@
right: 12px;
mix-blend-mode: multiply;
@media only screen and (min-width: $mediumlarge) {
@media only screen and (min-width: $medium) {
bottom: 8px;
}
......
.content-row {
padding: 25px 0;
padding: 60px 0;
border-bottom: 1px solid #EEE;
@media only screen and (min-width: $large) {