dan/dchadwick
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new updates

Browse Source
This commit is contained in:
Dan Chadwick
2024-04-09 12:08:12 -07:00
parent 24f432858d
commit 1f84123528
25 changed files with 373 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
web/themes/custom/dchadwick/css/style.css
View File

@@ -3,7 +3,9 @@ header {
display: flex;
width: 100%;
justify-content: center;
padding: 0.5rem 0;
padding: 0.5rem;
border-top: 5px solid transparent;
border-bottom: 5px solid #9ccfd8;
}
header > div {
display: flex;
@@ -26,38 +28,6 @@ header .navbar-nav a.nav-link:hover {
color: #f6c177;
}
#block-dchadwick-primary-local-tasks > ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
}
#block-dchadwick-primary-local-tasks > ul li {
padding: 0.5rem 1rem;
background: #fffaf3;
border-bottom: 2px solid #9ccfd8;
border-right: 2px solid #9ccfd8;
}
#block-dchadwick-primary-local-tasks > ul li:first-child {
border-left: 2px solid #9ccfd8;
}
#block-dchadwick-primary-local-tasks > ul li a {
font-size: 0.8rem;
text-decoration: none;
transition: color 0.2s ease-in-out;
}
#block-dchadwick-primary-local-tasks > ul li a:hover {
color: #f6c177;
}
.main::before {
content: "";
display: block;
width: 100%;
background: #9ccfd8;
height: 1rem;
}
main {
max-width: 1152px;
margin: auto;
@@ -234,6 +204,53 @@ table.cols-5 td.incorrect {
color: white;
}
#block-dchadwick-homepagehero {
position: relative;
}
#block-dchadwick-homepagehero .field--name-field-media-image {
max-height: 400px;
overflow: hidden;
}
@media screen and (min-width: 1024px) {
#block-dchadwick-homepagehero .field--name-field-media-image img {
position: relative;
bottom: 100px;
}
}
#block-dchadwick-homepagehero #hero-caption {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -50px;
text-align: center;
min-width: 50%;
padding: 2rem;
padding-bottom: 1rem;
background: #31748f;
color: #f6c177;
opacity: 0.95;
}
#footer {
text-align: center;
background: #c4a7e7;
color: white;
padding: 0;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.page-node-type-fighter #footer {
position: relative;
}
#footer h2 {
color: white !important;
}
#footer p {
margin: 0;
}
body {
background: #faf4ed;
color: #6e6a86;

2
web/themes/custom/dchadwick/dchadwick.info.yml
View File

@@ -9,6 +9,8 @@ libraries:
base theme: bootstrap5
regions:
navigation: Main navigation
hero: Hero
content: Content
footer_bottom: Footer Bottom

22
web/themes/custom/dchadwick/src/sass/partials/footer.scss Normal file
View File

@@ -0,0 +1,22 @@
#footer {
text-align: center;
background: $iris;
color: white;
padding: 0;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
.page-node-type-fighter & {
position: relative;
}
h2 {
color: white !important;
}
p {
margin: 0;
}
}

56
web/themes/custom/dchadwick/src/sass/partials/header.scss
View File

@@ -2,7 +2,9 @@ header {
display: flex;
width: 100%;
justify-content: center;
padding: .5rem 0;
padding: .5rem;
border-top: 5px solid transparent;
border-bottom: 5px solid $foam;
> div {
display: flex;
@@ -27,57 +29,5 @@ header {
}
}
}
}
// header {
// display: flex;
// width: 100%;
// justify-content: center;
// color: $muted;
// > div {
// display: flex;
// justify-content: space-between;
// width: $container-full;
// // Need to add media queries to adjust on smaller screens.
// align-items: center;
// background: $surface;
// padding: 0 2rem;
// border-radius: 5px 5px 0 0;
// }
// #block-dchadwick-main-menu {
// > ul {
// display: flex;
// list-style-type: none;
// > li {
// padding: 0 1rem;
// a {
// text-decoration: none;
// transition: color .2s ease-in-out;
// &:hover {
// color: $orangeish;
// }
// }
// &:not(:last-child) {
// border-right: 2px solid darken($base_light, 5%);
// }
// }
// }
// }
// div#block-dchadwick-site-branding {
// padding: 1.5rem 0;
// > a {
// text-decoration: none;
// // padding-left: 1rem;
// white-space: nowrap;
// width: auto;
// font-weight: 700;
// font-size: 1.4rem;
// }
// }
// }

33
web/themes/custom/dchadwick/src/sass/partials/hero.scss Normal file
View File

@@ -0,0 +1,33 @@
#block-dchadwick-homepagehero {
position: relative;
.field--name-field-media-image {
max-height: 400px;
overflow: hidden;
img {
@media screen and (min-width: 1024px) {
position: relative;
bottom: 100px;
}
}
}
#hero-caption {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -50px;
text-align: center;
min-width: 50%;
padding: 2rem;
padding-bottom: 1rem;
background: $pine;
// border: 5px solid $pine;
color: $orangeish;
opacity: 0.95;
}
}

27
web/themes/custom/dchadwick/src/sass/partials/local-tasks.scss
View File

@@ -1,27 +0,0 @@
#block-dchadwick-primary-local-tasks {
> ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
li {
padding: .5rem 1rem;
background: $surface;
border-bottom: 2px solid $foam;
&:first-child {
border-left: 2px solid $foam;
}
border-right: 2px solid $foam;
a {
font-size: 0.8rem;
text-decoration: none;
transition: color .2s ease-in-out;
&:hover {
color: $orangeish;
}
}
}
}
}

10
web/themes/custom/dchadwick/src/sass/partials/main.scss
View File

@@ -1,13 +1,3 @@
.main {
&::before {
content: "";
display: block;
width: 100%;
background: $foam;
height: 1rem;
}
}
main {
max-width: $container-full;
margin: auto;

12
web/themes/custom/dchadwick/src/sass/style.scss
View File

@@ -14,13 +14,6 @@ $foam: #9ccfd8;
$iris: #c4a7e7;
$link-color: $foam;
// Bootstrap overrides.
$primary: $surface;
$secondary: $base_bl;
$link_color: pink;
$link_hover_color: pink;
$a_link_hover_color: pink;
// Other variables.
$container-full: 1152px;
$container-plus-padding: 1216px;
@@ -30,12 +23,13 @@ $container-plus-padding: 1216px;
// Partials.
@import "partials/header";
@import "partials/local-tasks";
@import "partials/main";
@import "partials/fighter";
@import "partials/fighters-view";
@import "partials/fight";
@import "partials/event";
@import "partials/hero";
@import "partials/footer";
body {
background: $base_light;
@@ -43,9 +37,11 @@ body {
font-family: "Ubuntu", sans-serif;
margin: auto;
}
a {
color: $muted;
}
img {
width: auto;
height: auto;

49
web/themes/custom/dchadwick/templates/blocks/block--dchadwick-homepagehero.html.twig Normal file
View File

@@ -0,0 +1,49 @@
{#
/**
* @file
* Theme override to display a block.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - in_preview: Whether the plugin is being rendered in preview mode.
* - content: The content of this block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_block()
*/
#}
{%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
<div id="hero-image">{{ content.field_slide_image }}</div>
<div id="hero-caption">
<h2>{{ content.field_slide_text }}</h2>
<p>{{ content.field_slide_link }}</p>
</div>
{% endblock %}
</div>

72
web/themes/custom/dchadwick/templates/field/field--block-content--field-slide-link.html.twig Normal file
View File

@@ -0,0 +1,72 @@
{#
/**
* @file
* Theme override for a field.
*
* To override output, copy the "field.html.twig" from the templates directory
* to your theme's directory and customize it, just like customizing other
* Drupal templates such as page.html.twig or node.html.twig.
*
* Instead of overriding the theming for all fields, you can also just override
* theming for a subset of fields using
* @link themeable Theme hook suggestions. @endlink For example,
* here are some theme hook suggestions that can be used for a field_foo field
* on an article node type:
* - field--node--field-foo--article.html.twig
* - field--node--field-foo.html.twig
* - field--node--article.html.twig
* - field--field-foo.html.twig
* - field--text-with-summary.html.twig
* - field.html.twig
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - label_hidden: Whether to show the field label or not.
* - title_attributes: HTML attributes for the title.
* - label: The label for the field.
* - multiple: TRUE if a field can contain multiple items.
* - items: List of all the field items. Each item contains:
* - attributes: List of HTML attributes for each item.
* - content: The field item's content.
* - entity_type: The entity type to which the field belongs.
* - field_name: The name of the field.
* - field_type: The type of the field.
* - label_display: The display settings for the label.
*
*
* @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 %}
{% for item in items %}
{% set linkText = item.content['#title'] %}
{% set url = item.content['#url'] ?? '' %}
{% include '@dchadwick/templates/components/button.html.twig' with {
'type': 'dark',
'text': linkText,
'uri': url
} %}
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>

17
web/themes/custom/dchadwick/templates/system/page.html.twig
View File

@@ -2,19 +2,16 @@
<header aria-label="Site header" class="header" id="header" role="banner">
{{ page.navigation }}
</header>
<section id="hero">
<div id="hero-wrapper">
{{ page.hero }}
</div>
</section>
<section class="main" id="main">
<main aria-label="Site main content" class="content" id="content" role="main">
{{ page.content }}
<div id="react-app"></div>
{#
{% include '@dchadwick/components/button.html.twig' with { 'type': 'danger', 'text': "WARNING!!!" } %}
{% include '@dchadwick/components/button.html.twig' with { 'type': 'primary', 'text': "Primary" } %}
{% include '@dchadwick/components/button.html.twig' with { 'type': 'secondary', 'text': "Secondary" } %}
#}
</main>
</section>
<footer aria-label="Site footer" class="footer" id="footer" role="contentinfo">