Updating containers and mobile styles, allowing for local videos.
This commit is contained in:
Dan Chadwick
parent
7304c4b0d7
commit
025c63e1dd
@ -15,7 +15,7 @@ third_party_settings:
|
||||
preset_accent_color: teal
|
||||
preset_focus_color: accent
|
||||
enable_darkmode: '0'
|
||||
classic_toolbar: new
|
||||
classic_toolbar: horizontal
|
||||
secondary_toolbar_frontend: true
|
||||
high_contrast_mode: false
|
||||
accent_color: ''
|
||||
|
||||
@ -38,7 +38,7 @@ public function onRequest(RequestEvent $event) {
|
||||
$current_request = \Drupal::requestStack()->getCurrentRequest();
|
||||
$path = \Drupal::request()->getRequestUri();
|
||||
if (str_contains($path, '/node/')) {
|
||||
throw new NotFoundHttpException();
|
||||
return new NotFoundHttpException();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,8 +10,15 @@ props:
|
||||
description: "The type of button to render"
|
||||
# The enum directive restricts the possible values in the element to our list.
|
||||
enum: ['primary', 'secondary', 'danger']
|
||||
slots:
|
||||
# Content to display in the chip.
|
||||
button_text:
|
||||
title: Button Text
|
||||
description: The text for the button
|
||||
link:
|
||||
type: boolean
|
||||
title: Link type
|
||||
description: If true, output anchor element, else button.
|
||||
uri:
|
||||
type: string
|
||||
title: Uri destination
|
||||
description: The destination for the button.
|
||||
text:
|
||||
type: string
|
||||
title: Text
|
||||
description: The text for the button.
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
]
|
||||
%}
|
||||
|
||||
<button class="{{ classes|join(" ") }}">
|
||||
{% block button_text %}{% endblock %}
|
||||
</button>
|
||||
{% if link %}
|
||||
<a href="{{ uri }}" class="{{ classes|join(" ") }}">{{ text }}</a>
|
||||
{% else %}
|
||||
<button class="{{ classes|join(" ") }}">{{ text }}</button>
|
||||
{% endif %}
|
||||
|
||||
@ -47,10 +47,12 @@ h1.center {
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--site-secondary);
|
||||
color: var(--site-primary);
|
||||
background: var(--site-white);
|
||||
color: var(--site-secondary);
|
||||
}
|
||||
|
||||
header#header {
|
||||
@ -67,6 +69,9 @@ header#header > div {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
header#header .region-navigation {
|
||||
width: 100%;
|
||||
}
|
||||
header#header #block-dchadwick-site-branding a {
|
||||
white-space: nowrap;
|
||||
color: var(--site-secondary);
|
||||
@ -145,6 +150,17 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.hero-slide .hero-bground::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.hero-slide video {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
@ -157,21 +173,32 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
|
||||
}
|
||||
|
||||
.hero-caption {
|
||||
width: 50%;
|
||||
z-index: 2;
|
||||
width: 400px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 2rem;
|
||||
background: white;
|
||||
background: rgba(254, 215, 101, 0.93);
|
||||
padding: 2rem 8rem 2rem 2rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.hero-caption {
|
||||
width: 100%;
|
||||
top: unset;
|
||||
transform: none;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.hero-caption__text {
|
||||
font-size: 2rem;
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.hero-caption__text p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#recent-fights > div {
|
||||
@ -404,6 +431,7 @@ table.cols-5 td.incorrect {
|
||||
html {
|
||||
font-size: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.region-content {
|
||||
@ -431,6 +459,6 @@ img {
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1152px;
|
||||
max-width: 1152px;
|
||||
margin: auto;
|
||||
}
|
||||
@ -4,9 +4,11 @@
|
||||
cursor: pointer;
|
||||
transition: background .2s ease;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background: var(--site-secondary);
|
||||
color: var(--site-primary);
|
||||
background: var(--site-white);
|
||||
color: var(--site-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,10 @@ header#header {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.region-navigation {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#block-dchadwick-site-branding {
|
||||
a {
|
||||
white-space: nowrap;
|
||||
|
||||
@ -4,7 +4,17 @@
|
||||
position: relative;
|
||||
|
||||
.hero-bground {
|
||||
// position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
@ -20,19 +30,30 @@
|
||||
}
|
||||
|
||||
.hero-caption {
|
||||
width: 50%;
|
||||
z-index: 2;
|
||||
width: 400px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 2rem;
|
||||
background: white;
|
||||
background: rgba(254, 215, 101, 0.93);
|
||||
padding: 2rem 8rem 2rem 2rem;
|
||||
border-radius: 10px;
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
width: 100%;
|
||||
top: unset;
|
||||
transform: none;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 2rem;
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,7 +48,7 @@ $container-plus-padding: 1216px;
|
||||
html {
|
||||
font-size: 100%;
|
||||
box-sizing: border-box;
|
||||
// overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.region-content {
|
||||
@ -76,7 +76,7 @@ img {
|
||||
}
|
||||
|
||||
.container {
|
||||
width: $container-full;
|
||||
max-width: $container-full;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
{# Set the variables for the block #}
|
||||
{% set hasRemoteVideo = content.field_external_video.0['#context']['value'] %}
|
||||
{% set slideImage = content.field_slide_image.0['#media'].field_media_image.entity.uri.value %}
|
||||
|
||||
{% set slideVideo = file_url(content.field_slide_image.0['#media'].field_media_video_file.entity.uri.value) %}
|
||||
<div{{ attributes.addClass(classes) }}>
|
||||
{% block content %}
|
||||
{{ title_prefix }}
|
||||
@ -49,6 +49,10 @@
|
||||
<video autoplay muted loop id="bgVideo">
|
||||
<source src="{{ hasRemoteVideo }}" type="video/mp4">
|
||||
</video>
|
||||
{% elseif slideVideo is not null %}
|
||||
<video autoplay muted loop id="bgVideo">
|
||||
<source src="{{ slideVideo }}" type="video/mp4">
|
||||
</video>
|
||||
{% else %}
|
||||
<img src="{{ slideImage }}">
|
||||
{% endif %}
|
||||
|
||||
@ -37,36 +37,15 @@
|
||||
* @see template_preprocess_field()
|
||||
*/
|
||||
#}
|
||||
{%
|
||||
set classes = [
|
||||
'field',
|
||||
'field--name-' ~ field_name|clean_class,
|
||||
'field--type-' ~ field_type|clean_class,
|
||||
'field--label-' ~ label_display,
|
||||
label_display == 'inline' ? 'clearfix',
|
||||
]
|
||||
%}
|
||||
{%
|
||||
set title_classes = [
|
||||
'field__label',
|
||||
label_display == 'visually_hidden' ? 'visually-hidden',
|
||||
]
|
||||
%}
|
||||
|
||||
<div{{ attributes.addClass(classes) }}>
|
||||
{% if multiple %}
|
||||
<div class="field__items">
|
||||
{% endif %}
|
||||
<div{{ attributes }}>
|
||||
{% for item in items %}
|
||||
{% set linkText = item.content['#title'] %}
|
||||
{% set url = item.content['#url'] ?? '' %}
|
||||
{% include '@dchadwick/templates/components/button.html.twig' with {
|
||||
{% include 'dchadwick:button' with {
|
||||
'type': 'primary',
|
||||
'text': linkText,
|
||||
'uri': url
|
||||
'uri': url,
|
||||
'link': true
|
||||
} %}
|
||||
{% endfor %}
|
||||
{% if multiple %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user