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

Switching to manual ga tagging.

Browse Source
This commit is contained in:
Dan Chadwick
2024-09-22 14:51:34 -04:00
parent 95813b49f2
commit ed270d842d
24 changed files with 422 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,8 @@
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
:root {
--site-primary: #009FB7;
--site-primary-light: #01bfdb;
--site-gray: #565264;
--site-secondary: #FED766;
--site-white: #F4F4F8;
--site-platinum: #E6E6EA;
@@ -17,6 +19,24 @@ h1.center {
width: 100%;
}
h2 {
font-size: 2.5rem;
font-weight: 700;
margin: 10px 0;
}
h3 {
font-size: 2rem;
font-weight: 700;
margin: 10px 0;
}
h4 {
font-size: 1.5rem;
font-weight: 700;
margin: 10px 0;
}
#block-dchadwick-primary-local-tasks {
width: 100%;
}
@@ -41,7 +61,7 @@ h1.center {
color: var(--site-primary);
}
.btn-primary {
.btn-primary a {
background: var(--site-primary) !important;
color: var(--site-white);
cursor: pointer;
@@ -50,7 +70,7 @@ h1.center {
border: none;
border-radius: 5px;
}
.btn-primary:hover {
.btn-primary a:hover {
background: var(--site-white);
color: var(--site-secondary);
}
@@ -106,18 +126,6 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
color: var(--site-white);
}
@media screen and (max-width: 1300px) {
#block-dchadwick-main-menu {
margin-right: 50px;
}
#block-dchadwick-site-branding {
margin-left: 50px;
}
header#header {
padding-left: 20px;
padding-right: 20px;
}
}
#footer {
display: flex;
background: var(--site-primary);
@@ -441,54 +449,58 @@ table.cols-5 td.incorrect {
}
.node-type-article .hero {
position: relative;
max-height: 60vh;
overflow: hidden;
padding: 30px 0;
}
.node-type-article .hero img {
object-fit: cover;
width: 100%;
height: 100%;
}
.node-type-article .hero h1 {
width: 100%;
flex-basis: 100%;
color: var(--site-primary);
.node-type-article .article-intro h1 {
margin: 0;
}
.node-type-article .article-intro {
display: flex;
position: absolute;
top: 50%;
height: auto;
background: rgba(254, 215, 101, 0.9);
font-size: 56px;
color: var(--site-white);
flex-direction: row;
flex-wrap: wrap;
padding: 20px 30px;
transform: translateY(-50%);
}
@media screen and (min-width: 1300px) {
.node-type-article .article-intro {
left: calc((100vw - 1300px) / 2);
}
}
.node-type-article .article-intro > div {
flex: 1;
}
.node-type-article #article-body {
display: flex;
padding: 20px;
display: block;
margin-top: 20px;
}
.node-type-article .left-side {
flex: 2;
display: inline-block;
width: 75%;
}
.node-type-article .left-side .article-info {
background: var(--site-platinum);
padding: 10px;
gap: 20px;
display: inline-flex;
justify-content: space-evenly;
align-items: center;
font-size: 14px;
color: var(--site-gray);
margin-bottom: 10px;
}
.node-type-article .left-side .article-info .info-item {
display: flex;
align-items: center;
}
.node-type-article .left-side .article-info .info-item span {
margin-right: 3px;
color: var(--site-primary);
}
.node-type-article .left-side p {
font-size: 16px;
line-height: 24px;
}
.node-type-article .right-side {
flex: 1;
display: inline-block;
vertical-align: top;
width: 24%;
text-align: center;
right: 0;
}
.node-type-article .right-side.fixed-sidebar {
position: fixed;
top: 0;
right: 25px;
background: var(--site-secondary);
color: var(--site-primary);
transition: all 0.2s ease-in-out;
}
html {
@@ -521,7 +533,16 @@ img {
max-height: 100%;
}
p {
color: var(--site-gray);
}
.container {
max-width: 1300px;
margin: auto;
}
@media screen and (max-width: 1300px) {
.container {
margin: 0 50px;
}
}

7
web/themes/custom/dchadwick/dchadwick.libraries.yml
View File

@@ -27,3 +27,10 @@ brainjs:
js:
https://unpkg.com/brain.js@2.0.0-beta.23/dist/browser.js: { type: external, attributes: { async: true }}
articles:
js:
js/articles.js: { }
dependencies:
- core/drupal
- core/once

4
web/themes/custom/dchadwick/dchadwick.theme
View File

@@ -12,6 +12,10 @@ function dchadwick_preprocess_html(&$variables) {
}
}
function dchadwick_preprocess_node__article(&$vars) {
$vars['#attached']['library'] = 'dchadwick/articles';
}
function dchadwick_page_attachments_alter(&$page) {
$page['#attached']['library'][] = 'dchadwick/brainjs';
}

32
web/themes/custom/dchadwick/js/articles.js Normal file
View File

@@ -0,0 +1,32 @@
/**
* @file
* Claro's enhancement for autocomplete form element.
*/
// cspell:ignore is-autocompleting
((Drupal, once) => {
Drupal.behaviors.articleBehaviors = {
attach(context) {
let rightSidebar = once('articleBehavior', '#article-body .right-side', context);
let anchor = document.querySelector('.right-side').offsetTop;
const seeIfSticky = (element) => {
// get right sidebar scroll top.
let jumpLinks = document.querySelector('.right-side');
var curScroll = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
console.log(curScroll + ":: jumpPos: " + anchor);
if (curScroll >= anchor) {
jumpLinks.classList.add('fixed-sidebar');
}
else if (curScroll < anchor) {
jumpLinks.classList.remove('fixed-sidebar');
}
};
rightSidebar.forEach(function(elem) {
document.addEventListener("scroll", seeIfSticky);
});
},
};
})(Drupal, once);

88
web/themes/custom/dchadwick/src/sass/partials/article.scss
View File

@@ -1,55 +1,50 @@
.node-type-article {
.hero {
position: relative;
max-height: 60vh;
overflow: hidden;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
h1 {
// display: block;
width: 100%;
flex-basis: 100%;
color: var(--site-primary);
margin: 0;
}
padding: 30px 0;
}
.article-intro {
display: flex;
position: absolute;
top: 50%;
height: auto;
background: rgba(254, 215, 101, 0.9);
color: var(--site-white);
flex-direction: row;
flex-wrap: wrap;
padding: 20px 30px;
transform: translateY(-50%);
@media screen and (min-width: $container-full) {
left: calc((100vw - $container-full) / 2);
}
> div {
flex: 1;
h1 {
margin: 0;
font-size: 56px;
color: var(--site-white);
// max-width: 70%;
}
}
#article-body {
display: flex;
padding: 20px;
display: block;
margin-top: 20px;
}
.left-side {
flex: 2;
display: inline-block;
width: 75%;
.article-info {
background: var(--site-platinum);
padding: 10px;
gap: 20px;
display: inline-flex;
justify-content: space-evenly;
align-items: center;
font-size: 14px;
color: var(--site-gray);
margin-bottom: 10px;
.info-item {
display: flex;
align-items: center;
span {
margin-right: 3px;
color: var(--site-primary);
}
}
}
p {
font-size: 16px;
line-height: 24px;
@@ -57,7 +52,20 @@
}
.right-side {
flex: 1;
display: inline-block;
vertical-align: top;
width: 24%;
text-align: center;
right: 0;
&.fixed-sidebar {
position: fixed;
top: 0;
right: 25px;
background: var(--site-secondary);
color: var(--site-primary);
transition: all .2s ease-in-out;
}
}
}

2
web/themes/custom/dchadwick/src/sass/partials/buttons.scss
View File

@@ -1,4 +1,4 @@
.btn-primary {
.btn-primary a {
background: var(--site-primary) !important;
color: var(--site-white);
cursor: pointer;

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

@@ -60,16 +60,16 @@ header#header {
}
}
@media screen and (max-width: $container-full) {
#block-dchadwick-main-menu {
margin-right: 50px;
}
#block-dchadwick-site-branding {
margin-left: 50px;
}
header#header {
padding-left: 20px;
padding-right: 20px;
}
}
// @media screen and (max-width: $container-full) {
// #block-dchadwick-main-menu {
// margin-right: 50px;
// }
// #block-dchadwick-site-branding {
// margin-left: 50px;
// }
// header#header {
// padding-left: 20px;
// padding-right: 20px;
// }
// }

18
web/themes/custom/dchadwick/src/sass/partials/headings.scss
View File

@@ -7,3 +7,21 @@ h1 {
width: 100%;
}
}
h2 {
font-size: 2.5rem;
font-weight: 700;
margin: 10px 0;
}
h3 {
font-size: 2rem;
font-weight: 700;
margin: 10px 0;
}
h4 {
font-size: 1.5rem;
font-weight: 700;
margin: 10px 0;
}

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

@@ -1,6 +1,8 @@
// Colors.
:root {
--site-primary: #009FB7;
--site-primary-light: #01bfdb;
--site-gray: #565264;
--site-secondary: #FED766;
--site-white: #F4F4F8;
--site-platinum: #E6E6EA;
@@ -76,8 +78,16 @@ img {
max-height: 100%;
}
p {
color: var(--site-gray);
}
.container {
max-width: $container-full;
margin: auto;
@media screen and (max-width: $container-full) {
margin: 0 50px;
}
}

26
web/themes/custom/dchadwick/templates/node/node--article.html.twig
View File

@@ -61,21 +61,33 @@
*
*/
#}
{% set bannerColor = content.field_banner_color.0['#markup']|default('#fff') %}
<article{{ attributes }}>
<div class="hero">
{{ content.field_article_image }}
<div class="article-intro">
<div class="hero" style="background-color:{{ bannerColor }}">
{# content.field_article_image #}
<div class="article-intro container">
{{ title_prefix }}
<h1>{{ label }}</h1>
{% embed 'dchadwick:heading' with {
level: 1,
}%}
{% block text %}
{{ node.getTitle() }}
{% endblock %}
{% endembed %}
{{ title_suffix }}
<span class="material-icons md-24">calendar_month</span>{{ date }}
<span class="material-icons md-24">schedule</span>{{ content.field_read_time|default('1 minute read time') }}
</div>
</div>
<div id="article-body" class="container">
<div class="left-side">
<div class="article-info">
<div class="info-item">
<span class="material-icons md-24">calendar_month</span>{{ node.changed.value|date("m/d/Y h:i A") }}
</div>
<div class="info-item">
<span class="material-icons md-24">schedule</span>{{ content.field_read_time|default('1 minute read time') }}
</div>
</div>
{{ content.body }}
</div>
<div class="right-side">

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

@@ -1,3 +1,11 @@
<script async src="https://www.googletagmanager.com/gtag/js?id=G-47TH3K5YXH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-47TH3K5YXH');
</script>
<header aria-label="Site header" class="header" id="header" role="banner">
{{ page.navigation }}
</header>