Skip to content

Commit

Permalink
Merge branch '1.x' into feature/672-better-404-403-pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@finnlewis
finnlewis committed Feb 5, 2025
2 parents c221cdf + 50e4eda commit 948ac7b
Show file tree
Hide file tree
Showing 28 changed files with 382 additions and 569 deletions.
38 changes: 35 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ You need to enter two items when creating a sub-theme:
2. The machine name for the theme, this must start with a letter and use only lowercase letters and underscores, e.g. super_council

## Custom Styles
Hopefully most of the custom styles you will need are set via CSS custom properties in the `/css/variables.css` file in your sub-theme.
Hopefully most of the custom styles you will need are set via CSS custom properties in the `/css/base/variables.css` file in your sub-theme.

This is where you set your colours, fonts, spacing, etc. Then you "apply" these variables where needed, like so:

Expand All @@ -48,11 +48,43 @@ If you need to add any CSS overrides, you can create custom CSS files for these
## Automated CSS Coding Standards
To make sure we follow Drupal's CSS coding standards (without having to think about it), there is a handy `npm` script to automatically scan and fix any CSS coding standards violations.

Simple run `npm install` to get the necessary packages, then run `npm start` to scan the files and fix any issues.
Simply run `npm install` to get the necessary packages, then run one of the following commands to scan the files and fix any issues.

- "start": "npm run lint:css && npm run lint:js",
- "start:fix": "npm run lint:css:fix && npm run lint:js:fix",
- "lint:css": "stylelint \"**/*.css\"",
- "lint:css:fix": "stylelint \"**/*.css\" --fix",
- "lint:js": "eslint \"**/*.js\"",
- "lint:js:fix": "eslint \"**/*.js\" --fix",

### start
This command will run the linter on your CSS and JS files and give you are report in your terminal of any issues. found.

### start:fix
This command will do the same as `start` but will also attempt to fix any issues it finds, such as using correct quote marks, fixing indentation, etc.

It's advisable to run `start` after you run this command to see if there was anything the automated linter couldn't fix.

### lint:css
This is the same as `start` except it only checks the CSS files.

### lint:css:fix
This is the same as `start:fix` except it only affects the CSS files.

### lint:js
This is the same as `start` except it only checks the JS files.

### lint:js:fix
This is the same as `start:fix` except it only affects the JS files.

### Troubleshooting
If you get an error, such as node not being able to find prettier, you might need to install the packages from Drupal core's `package.json`. All of our linting extends Drupal core's linting to make sure we are always following Drupal's exact coding standards. To do so, simply `cd web/core` and then `npm install`.

If you still cannot run the linter, make sure you are using the correct version of Node. We have a `.nvmrc` file to help you. Run `nvm use` from your theme directory to install the correct version.

## Maintainers

This project is currently maintained by:
This project is currently maintained by:

- Mark Conroy https://github.com/markconroy
- Maria Young https://github.com/msayoung
16 changes: 11 additions & 5 deletions components/add-to-calendar/add-to-calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,17 @@
(function localgovAddToCalendarScript(Drupal) {
Drupal.behaviors.localgovAddToCalendar = {
attach(context) {
const addToCalendarButtons = once('all-add-to-calendar-buttons', '.localgov-add-to-calendar__trigger', context);
const addToCalendarButtons = once(
'all-add-to-calendar-buttons',
'.localgov-add-to-calendar__trigger',
context,
);
if (addToCalendarButtons.length) {
addToCalendarButtons.forEach(button => {
addToCalendarButtons.forEach((button) => {
const calendarModal = button.nextElementSibling;
const calendarModalClose = calendarModal.querySelector('.localgov-add-to-calendar__dialog-close-button');
const calendarModalClose = calendarModal.querySelector(
'.localgov-add-to-calendar__dialog-close-button',
);
button.addEventListener('click', () => {
calendarModal.showModal();
});
Expand All @@ -19,6 +25,6 @@
});
});
}
}
},
};
}(Drupal));
})(Drupal);
3 changes: 1 addition & 2 deletions components/prev-next/prev-next.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ ul.lgd-prev-next__list li.lgd-prev-next__list-item {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: var(--button-padding-vertical) var(--button-padding-horizontal)
var(--button-padding-vertical) var(--button-padding-horizontal);
padding: var(--button-padding-vertical) var(--button-padding-horizontal) var(--button-padding-vertical) var(--button-padding-horizontal);
text-decoration: none;
color: var(--button-text-color);
border: var(--border);
Expand Down
260 changes: 65 additions & 195 deletions css/base/variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,7 @@ body {
We choose basic fonts that most people have in browser cache from visiting other websites.
This will help with page speed, rather than calling fonts from Google Fonts or somewhere.
*/
--font-primary: roboto, oxygen, ubuntu, cantarell, "Open Sans",
"Helvetica Neue", sans-serif;
--font-primary: roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--font-secondary: georgia, "Times New Roman", times, serif;
--font-heading-1: var(--font-secondary);
--font-heading-2: var(--font-secondary);
Expand All @@ -94,11 +93,7 @@ body {
--font-size-large: calc(var(--font-size) * 1.3125);
--font-size-larger: calc(var(--font-size) * 1.6875);
--font-size-largest: calc(var(--font-size) * 2.875);
--font-size-h1: clamp(
var(--font-size-larger),
10vw,
var(--font-size-largest)
);
--font-size-h1: clamp(var(--font-size-larger), 10vw, var(--font-size-largest));
--font-size-h2: clamp(var(--font-size-large), 8vw, var(--font-size-larger));
--font-size-h3: clamp(var(--font-size-medium), 6vw, var(--font-size-large));
--font-size-h4: var(--font-size-medium);
Expand Down Expand Up @@ -140,10 +135,8 @@ body {
--border-style: solid;
--border-radius: var(--spacing-smallest);
--border: var(--border-width) var(--border-style) var(--border-color);
--border-large: var(--border-width-large) var(--border-style)
var(--border-color);
--border-dark: var(--border-width) var(--border-style)
var(--border-color-dark);
--border-large: var(--border-width-large) var(--border-style) var(--border-color);
--border-dark: var(--border-width) var(--border-style) var(--border-color-dark);
--border-transparent: var(--border-width) var(--border-style) transparent;

/* Animation */
Expand Down Expand Up @@ -292,10 +285,7 @@ body {
--sidebar-exposed-form-item-spacing: var(--spacing);

/* Guide Navigation */
--section-spacing-vertical-guide-nav: calc(
var(--spacing-large) + 1rem
); /* 1rem to account for padding on left of bullets */

--section-spacing-vertical-guide-nav: calc(var(--spacing-large) + 1rem); /* 1rem to account for padding on left of bullets */
--section-spacing-horizontal-guide-nav: var(--spacing-large);
--guide-nav-column-count: 3;

Expand Down Expand Up @@ -501,188 +491,68 @@ body {
--color-page-section-background-color-6-text-color: var(--color-white);
--color-page-section-background-color-6-link-color: var(--color-white);
/* Page Sections - Newsroom Teasers */
--color-page-section-background-color-1-newsroom-teaser-background-color: var(
--color-white
);
--color-page-section-background-color-1-newsroom-teaser-text-color: var(
--color-black
);
--color-page-section-background-color-1-newsroom-teaser-link-color: var(
--color-black
);
--color-page-section-background-color-2-newsroom-teaser-background-color: var(
--color-white
);
--color-page-section-background-color-2-newsroom-teaser-text-color: var(
--color-black
);
--color-page-section-background-color-2-newsroom-teaser-link-color: var(
--color-black
);
--color-page-section-background-color-3-newsroom-teaser-background-color: var(
--color-black
);
--color-page-section-background-color-3-newsroom-teaser-text-color: var(
--color-white
);
--color-page-section-background-color-3-newsroom-teaser-link-color: var(
--color-white
);
--color-page-section-background-color-4-newsroom-teaser-background-color: var(
--color-white
);
--color-page-section-background-color-4-newsroom-teaser-text-color: var(
--color-black
);
--color-page-section-background-color-4-newsroom-teaser-link-color: var(
--color-black
);
--color-page-section-background-color-5-newsroom-teaser-background-color: var(
--color-white
);
--color-page-section-background-color-5-newsroom-teaser-text-color: var(
--color-black
);
--color-page-section-background-color-5-newsroom-teaser-link-color: var(
--color-black
);
--color-page-section-background-color-6-newsroom-teaser-background-color: var(
--color-white
);
--color-page-section-background-color-6-newsroom-teaser-text-color: var(
--color-black
);
--color-page-section-background-color-6-newsroom-teaser-link-color: var(
--color-black
);
--color-page-section-background-color-1-newsroom-teaser-background-color: var(--color-white);
--color-page-section-background-color-1-newsroom-teaser-text-color: var(--color-black);
--color-page-section-background-color-1-newsroom-teaser-link-color: var(--color-black);
--color-page-section-background-color-2-newsroom-teaser-background-color: var(--color-white);
--color-page-section-background-color-2-newsroom-teaser-text-color: var(--color-black);
--color-page-section-background-color-2-newsroom-teaser-link-color: var(--color-black);
--color-page-section-background-color-3-newsroom-teaser-background-color: var(--color-black);
--color-page-section-background-color-3-newsroom-teaser-text-color: var(--color-white);
--color-page-section-background-color-3-newsroom-teaser-link-color: var(--color-white);
--color-page-section-background-color-4-newsroom-teaser-background-color: var(--color-white);
--color-page-section-background-color-4-newsroom-teaser-text-color: var(--color-black);
--color-page-section-background-color-4-newsroom-teaser-link-color: var(--color-black);
--color-page-section-background-color-5-newsroom-teaser-background-color: var(--color-white);
--color-page-section-background-color-5-newsroom-teaser-text-color: var(--color-black);
--color-page-section-background-color-5-newsroom-teaser-link-color: var(--color-black);
--color-page-section-background-color-6-newsroom-teaser-background-color: var(--color-white);
--color-page-section-background-color-6-newsroom-teaser-text-color: var(--color-black);
--color-page-section-background-color-6-newsroom-teaser-link-color: var(--color-black);
/* Page Sections - Box Links */
--color-page-section-background-color-1-box-link-border-color: var(
--color-white
);
--color-page-section-background-color-1-box-link-background-color: var(
--color-white
);
--color-page-section-background-color-1-box-link-text-color: var(
--color-black
);
--color-page-section-background-color-1-box-link-link-color: var(
--color-black
);
--color-page-section-background-color-2-box-link-border-color: var(
--color-white
);
--color-page-section-background-color-2-box-link-background-color: var(
--color-white
);
--color-page-section-background-color-2-box-link-text-color: var(
--color-black
);
--color-page-section-background-color-2-box-link-link-color: var(
--color-black
);
--color-page-section-background-color-3-box-link-border-color: var(
--color-black
);
--color-page-section-background-color-3-box-link-background-color: var(
--color-black
);
--color-page-section-background-color-3-box-link-text-color: var(
--color-white
);
--color-page-section-background-color-3-box-link-link-color: var(
--color-white
);
--color-page-section-background-color-4-box-link-border-color: var(
--color-white
);
--color-page-section-background-color-4-box-link-background-color: var(
--color-white
);
--color-page-section-background-color-4-box-link-text-color: var(
--color-black
);
--color-page-section-background-color-4-box-link-link-color: var(
--color-black
);
--color-page-section-background-color-5-box-link-border-color: var(
--color-white
);
--color-page-section-background-color-5-box-link-background-color: var(
--color-white
);
--color-page-section-background-color-5-box-link-text-color: var(
--color-black
);
--color-page-section-background-color-5-box-link-link-color: var(
--color-black
);
--color-page-section-background-color-6-box-link-border-color: var(
--color-white
);
--color-page-section-background-color-6-box-link-background-color: var(
--color-white
);
--color-page-section-background-color-6-box-link-text-color: var(
--color-black
);
--color-page-section-background-color-6-box-link-link-color: var(
--color-black
);
--color-page-section-background-color-1-box-link-border-color: var(--color-white);
--color-page-section-background-color-1-box-link-background-color: var(--color-white);
--color-page-section-background-color-1-box-link-text-color: var(--color-black);
--color-page-section-background-color-1-box-link-link-color: var(--color-black);
--color-page-section-background-color-2-box-link-border-color: var(--color-white);
--color-page-section-background-color-2-box-link-background-color: var(--color-white);
--color-page-section-background-color-2-box-link-text-color: var(--color-black);
--color-page-section-background-color-2-box-link-link-color: var(--color-black);
--color-page-section-background-color-3-box-link-border-color: var(--color-black);
--color-page-section-background-color-3-box-link-background-color: var(--color-black);
--color-page-section-background-color-3-box-link-text-color: var(--color-white);
--color-page-section-background-color-3-box-link-link-color: var(--color-white);
--color-page-section-background-color-4-box-link-border-color: var(--color-white);
--color-page-section-background-color-4-box-link-background-color: var(--color-white);
--color-page-section-background-color-4-box-link-text-color: var(--color-black);
--color-page-section-background-color-4-box-link-link-color: var(--color-black);
--color-page-section-background-color-5-box-link-border-color: var(--color-white);
--color-page-section-background-color-5-box-link-background-color: var(--color-white);
--color-page-section-background-color-5-box-link-text-color: var(--color-black);
--color-page-section-background-color-5-box-link-link-color: var(--color-black);
--color-page-section-background-color-6-box-link-border-color: var(--color-white);
--color-page-section-background-color-6-box-link-background-color: var(--color-white);
--color-page-section-background-color-6-box-link-text-color: var(--color-black);
--color-page-section-background-color-6-box-link-link-color: var(--color-black);
/* Page Sections - Featured Subsites */
--color-page-section-background-color-1-featured-subsite-background-color: var(
--color-grey-lightest
);
--color-page-section-background-color-1-featured-subsite-text-color: var(
--color-black
);
--color-page-section-background-color-1-featured-subsite-link-color: var(
--color-black
);
--color-page-section-background-color-2-featured-subsite-background-color: var(
--color-grey-lightest
);
--color-page-section-background-color-2-featured-subsite-text-color: var(
--color-black
);
--color-page-section-background-color-2-featured-subsite-link-color: var(
--color-black
);
--color-page-section-background-color-3-featured-subsite-background-color: var(
--color-black
);
--color-page-section-background-color-3-featured-subsite-text-color: var(
--color-grey-lightest
);
--color-page-section-background-color-3-featured-subsite-link-color: var(
--color-grey-lightest
);
--color-page-section-background-color-4-featured-subsite-background-color: var(
--color-grey-lightest
);
--color-page-section-background-color-4-featured-subsite-text-color: var(
--color-black
);
--color-page-section-background-color-4-featured-subsite-link-color: var(
--color-black
);
--color-page-section-background-color-5-featured-subsite-background-color: var(
--color-grey-lightest
);
--color-page-section-background-color-5-featured-subsite-text-color: var(
--color-black
);
--color-page-section-background-color-5-featured-subsite-link-color: var(
--color-black
);
--color-page-section-background-color-6-featured-subsite-background-color: var(
--color-grey-lightest
);
--color-page-section-background-color-6-featured-subsite-text-color: var(
--color-black
);
--color-page-section-background-color-6-featured-subsite-link-color: var(
--color-black
);
--color-page-section-background-color-1-featured-subsite-background-color: var(--color-grey-lightest);
--color-page-section-background-color-1-featured-subsite-text-color: var(--color-black);
--color-page-section-background-color-1-featured-subsite-link-color: var(--color-black);
--color-page-section-background-color-2-featured-subsite-background-color: var(--color-grey-lightest);
--color-page-section-background-color-2-featured-subsite-text-color: var(--color-black);
--color-page-section-background-color-2-featured-subsite-link-color: var(--color-black);
--color-page-section-background-color-3-featured-subsite-background-color: var(--color-black);
--color-page-section-background-color-3-featured-subsite-text-color: var(--color-grey-lightest);
--color-page-section-background-color-3-featured-subsite-link-color: var(--color-grey-lightest);
--color-page-section-background-color-4-featured-subsite-background-color: var(--color-grey-lightest);
--color-page-section-background-color-4-featured-subsite-text-color: var(--color-black);
--color-page-section-background-color-4-featured-subsite-link-color: var(--color-black);
--color-page-section-background-color-5-featured-subsite-background-color: var(--color-grey-lightest);
--color-page-section-background-color-5-featured-subsite-text-color: var(--color-black);
--color-page-section-background-color-5-featured-subsite-link-color: var(--color-black);
--color-page-section-background-color-6-featured-subsite-background-color: var(--color-grey-lightest);
--color-page-section-background-color-6-featured-subsite-text-color: var(--color-black);
--color-page-section-background-color-6-featured-subsite-link-color: var(--color-black);

/* Add to Calendar */
--add-to-calendar-dialog-max-width: 80%;
Expand Down
Loading

0 comments on commit 948ac7b

Please sign in to comment.