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

Some more styles and things.

Browse Source
This commit is contained in:
Dan Chadwick 2024-09-22 20:35:23 -04:00
parent ed270d842d
commit 0cd50e0183
9 changed files with 212 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
config/default/editor.editor.basic_html.yml
View File

@ -13,8 +13,11 @@ editor: ckeditor5
settings:
toolbar:
items:
- heading
- alignment
- bold
- italic
- underline
- '|'
- link
- '|'
@ -22,13 +25,69 @@ settings:
- numberedList
- '|'
- blockQuote
- drupalInsertImage
- '|'
- heading
- drupalMedia
- code
- codeBlock
- '|'
- sourceEditing
plugins:
ckeditor5_alignment:
enabled_alignments:
- center
- justify
- left
- right
ckeditor5_codeBlock:
languages:
-
label: 'Plain text'
language: plaintext
-
label: C
language: c
-
label: 'C#'
language: cs
-
label: C++
language: cpp
-
label: CSS
language: css
-
label: Diff
language: diff
-
label: HTML
language: html
-
label: Java
language: java
-
label: JavaScript
language: javascript
-
label: PHP
language: php
-
label: Python
language: python
-
label: Ruby
language: ruby
-
label: TypeScript
language: typescript
-
label: XML
language: xml
-
label: YAML
language: yml
-
label: JSON
language: json
ckeditor5_heading:
enabled_headings:
- heading2
@ -36,8 +95,6 @@ settings:
- heading4
- heading5
- heading6
ckeditor5_imageResize:
allow_resize: true
ckeditor5_list:
properties:
reversed: false

2
config/default/filter.format.basic_html.yml
View File

@ -35,7 +35,7 @@ filters:
status: true
weight: -10
settings:
allowed_html: '<br> <p> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol type start> <strong> <em> <code> <li> <img src alt height width data-entity-uuid data-entity-type data-caption data-align> <drupal-media data-entity-type data-entity-uuid alt data-caption data-align>'
allowed_html: '<br> <p class="text-align-left text-align-center text-align-right text-align-justify"> <h2 id class="text-align-left text-align-center text-align-right text-align-justify"> <h3 id class="text-align-left text-align-center text-align-right text-align-justify"> <h4 id class="text-align-left text-align-center text-align-right text-align-justify"> <h5 id class="text-align-left text-align-center text-align-right text-align-justify"> <h6 id class="text-align-left text-align-center text-align-right text-align-justify"> <cite> <dl> <dt> <dd> <a hreflang href> <blockquote cite> <ul type> <ol type start> <strong> <em> <u> <code class="language-*"> <pre class="text-align-left text-align-center text-align-right text-align-justify"> <li> <drupal-media data-entity-type data-entity-uuid alt data-caption data-align>'
filter_html_help: false
filter_html_nofollow: false
filter_html_image_secure:

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

@ -143,6 +143,11 @@ header#header #block-dchadwick-main-menu > ul a.is-active:hover {
margin: 0;
}
blockquote {
font-style: italic;
border-left: 1px solid var(--site-primary);
}
.table {
width: auto;
margin: auto;
@ -474,6 +479,7 @@ table.cols-5 td.incorrect {
font-size: 14px;
color: var(--site-gray);
margin-bottom: 10px;
border-radius: 10px;
}
.node-type-article .left-side .article-info .info-item {
display: flex;
@ -487,26 +493,54 @@ table.cols-5 td.incorrect {
font-size: 16px;
line-height: 24px;
}
.node-type-article .left-side img {
border-radius: 10px;
}
.node-type-article .right-side {
display: inline-block;
vertical-align: top;
width: 24%;
text-align: center;
text-align: left;
right: 0;
}
.node-type-article .right-side ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
margin-left: 5px;
padding-left: 10px;
border-left: 2px solid var(--site-primary);
}
.node-type-article .right-side ul li a {
display: inline-block;
margin-left: 20px;
width: 100%;
margin: 20px 0;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
text-decoration-thickness: 0px;
}
.node-type-article .right-side ul li a:hover {
color: var(--site-gray);
text-decoration: underline;
text-decoration-thickness: 5px;
}
.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;
right: 34px;
}
html {
font-size: 100%;
box-sizing: border-box;
overflow-x: hidden;
scroll-behavior: smooth;
}
.region-content {
@ -546,3 +580,15 @@ p {
margin: 0 50px;
}
}
blockquote {
font-style: italic;
border-left: 1px solid var(--site-primary);
padding-left: 20px;
}
pre {
background: #414559;
color: #c6d0f5;
padding: 10px;
}

53
web/themes/custom/dchadwick/js/articles.js
View File

@ -9,22 +9,45 @@
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) {
let anchor = document.querySelector('.right-side').offsetTop;
// get all headings.
let headings = context.querySelectorAll(".article-content h2, h3, h4, h5, h6");
// create an <ol>
// add each item as <li><a href="#name">Text</a></li>
let jumpLinks = document.createElement('ul');
headings.forEach(function(heading) {
if (heading.classList.contains("visually-hidden")) {
return;
}
// convert text to a name.
let headingText = heading.innerText;
let headingId = headingText.replace(/\s+/g, '-').toLowerCase();
// set as the id.
heading.id = headingId;
let listElement = document.createElement('li');
let listElementLink = document.createElement('a');
listElementLink.href = "#" + headingId;
listElementLink.innerText = headingText;
listElement.appendChild(listElementLink)
jumpLinks.appendChild(listElement);
});
elem.innerHTML = "";
elem.append(jumpLinks);
// Function to check if the nav should stick.
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;
if (curScroll >= anchor) {
jumpLinks.classList.add('fixed-sidebar');
}
else if (curScroll < anchor) {
jumpLinks.classList.remove('fixed-sidebar');
}
};
document.addEventListener("scroll", seeIfSticky);
});
},

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

@ -5,12 +5,10 @@
}
.article-intro {
h1 {
margin: 0;
font-size: 56px;
color: var(--site-white);
// max-width: 70%;
}
}
@ -33,6 +31,7 @@
font-size: 14px;
color: var(--site-gray);
margin-bottom: 10px;
border-radius: 10px;
.info-item {
display: flex;
@ -49,22 +48,53 @@
font-size: 16px;
line-height: 24px;
}
img {
border-radius: 10px;
}
}
.right-side {
display: inline-block;
vertical-align: top;
width: 24%;
text-align: center;
text-align: left;
right: 0;
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
margin-left: 5px;
padding-left: 10px;
border-left: 2px solid var(--site-primary);
li a {
display: inline-block;
margin-left: 20px;
width: 100%;
margin: 20px 0;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all .2s ease;
text-decoration: none;
text-decoration-thickness: 0px;
&:hover {
color: var(--site-gray);
text-decoration: underline;
text-decoration-thickness: 5px;
}
}
}
&.fixed-sidebar {
position: fixed;
top: 0;
right: 25px;
background: var(--site-secondary);
color: var(--site-primary);
transition: all .2s ease-in-out;
right: 34px;
}
}
}

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

@ -1,8 +1,4 @@
main {
// max-width: $container-full;
// margin: auto;
}
#main {
// z-index: 501;
blockquote {
font-style: italic;
border-left: 1px solid var(--site-primary);
}

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

@ -52,6 +52,7 @@ html {
font-size: 100%;
box-sizing: border-box;
overflow-x: hidden;
scroll-behavior: smooth;
}
.region-content {
@ -91,3 +92,15 @@ p {
}
}
blockquote {
font-style: italic;
border-left: 1px solid var(--site-primary);
padding-left: 20px;
}
pre {
background: #414559;
color: #c6d0f5;
padding: 10px;
}

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

@ -82,21 +82,21 @@
<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") }}
<span class="material-icons md-24">calendar_month</span>{{ node.changed.value|date("m/d/Y") }}
</div>
<div class="info-item">
<span class="material-icons md-24">schedule</span>{{ content.field_read_time|default('1 minute read time') }}
<span class="material-icons md-24">schedule</span>{{ node.changed.value|date("h:i A") }}
</div>
<div class="info-item">
<span class="material-icons md-24">hourglass_top</span>{{ content.field_read_time|default('1 minute read time') }}
</div>
</div>
{{ content.body }}
<div class="article-content">
{{ content.body }}
</div>
</div>
<div class="right-side">
<p>This is where link block goes</p>
<p>This is where link block goes</p>
<p>This is where link block goes</p>
<p>This is where link block goes</p>
<p>This is where link block goes</p>
<p>This is where link block goes</p>
</div>
</div>

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

@ -1,11 +1,3 @@
<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>
@ -22,20 +14,6 @@
</main>
</section>
<footer aria-label="Site footer" class="footer" id="footer" role="contentinfo">
{# include('dchadwick:button', {text: 'Click me', type: 'danger'}, with_context = false) #}
{# embed 'dchadwick:accordion' %}
{% block accordion_title %}
Click Me!
{% endblock %}
{% block accordion_content %}
Here is some content that goes in the place where the body is.
{% endblock %}
{% endembed #}
<div class="footer--bottom">
{{ page.footer_bottom }}
</div>