diff --git a/.gitignore b/.gitignore index 31fe125..3ed1fc2 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,8 @@ node_modules resources/ themes/ public/ +.hugo_build.lock +go.sum # Yarn Berry yarn-error.log diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..18c9147 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,128 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +We as members, contributors, and leaders pledge to make participation in our +community a harassment-free experience for everyone, regardless of age, body +size, visible or invisible disability, ethnicity, sex characteristics, gender +identity and expression, level of experience, education, socio-economic status, +nationality, personal appearance, race, religion, or sexual identity +and orientation. + +We pledge to act and interact in ways that contribute to an open, welcoming, +diverse, inclusive, and healthy community. + +## Our Standards + +Examples of behavior that contributes to a positive environment for our +community include: + +* Demonstrating empathy and kindness toward other people +* Being respectful of differing opinions, viewpoints, and experiences +* Giving and gracefully accepting constructive feedback +* Accepting responsibility and apologizing to those affected by our mistakes, + and learning from the experience +* Focusing on what is best not just for us as individuals, but for the + overall community + +Examples of unacceptable behavior include: + +* The use of sexualized language or imagery, and sexual attention or + advances of any kind +* Trolling, insulting or derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or email + address, without their explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Enforcement Responsibilities + +Community leaders are responsible for clarifying and enforcing our standards of +acceptable behavior and will take appropriate and fair corrective action in +response to any behavior that they deem inappropriate, threatening, offensive, +or harmful. + +Community leaders have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct, and will communicate reasons for moderation +decisions when appropriate. + +## Scope + +This Code of Conduct applies within all community spaces, and also applies when +an individual is officially representing the community in public spaces. +Examples of representing our community include using an official e-mail address, +posting via an official social media account, or acting as an appointed +representative at an online or offline event. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported to the community leaders responsible for enforcement at +. +All complaints will be reviewed and investigated promptly and fairly. + +All community leaders are obligated to respect the privacy and security of the +reporter of any incident. + +## Enforcement Guidelines + +Community leaders will follow these Community Impact Guidelines in determining +the consequences for any action they deem in violation of this Code of Conduct: + +### 1. Correction + +**Community Impact**: Use of inappropriate language or other behavior deemed +unprofessional or unwelcome in the community. + +**Consequence**: A private, written warning from community leaders, providing +clarity around the nature of the violation and an explanation of why the +behavior was inappropriate. A public apology may be requested. + +### 2. Warning + +**Community Impact**: A violation through a single incident or series +of actions. + +**Consequence**: A warning with consequences for continued behavior. No +interaction with the people involved, including unsolicited interaction with +those enforcing the Code of Conduct, for a specified period of time. This +includes avoiding interactions in community spaces as well as external channels +like social media. Violating these terms may lead to a temporary or +permanent ban. + +### 3. Temporary Ban + +**Community Impact**: A serious violation of community standards, including +sustained inappropriate behavior. + +**Consequence**: A temporary ban from any sort of interaction or public +communication with the community for a specified period of time. No public or +private interaction with the people involved, including unsolicited interaction +with those enforcing the Code of Conduct, is allowed during this period. +Violating these terms may lead to a permanent ban. + +### 4. Permanent Ban + +**Community Impact**: Demonstrating a pattern of violation of community +standards, including sustained inappropriate behavior, harassment of an +individual, or aggression toward or disparagement of classes of individuals. + +**Consequence**: A permanent ban from any sort of public interaction within +the community. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], +version 2.0, available at +https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. + +Community Impact Guidelines were inspired by [Mozilla's code of conduct +enforcement ladder](https://github.com/mozilla/diversity). + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see the FAQ at +https://www.contributor-covenant.org/faq. Translations are available at +https://www.contributor-covenant.org/translations. diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..8838cb3 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Span Digital + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/assets/_sass/_custom_enterprise.scss b/assets/_sass/_custom_enterprise.scss new file mode 100644 index 0000000..0d8e031 --- /dev/null +++ b/assets/_sass/_custom_enterprise.scss @@ -0,0 +1 @@ +// Don't remove, this file is the default diff --git a/assets/_sass/_default-colors.scss b/assets/_sass/_default-colors.scss new file mode 100644 index 0000000..0d8e031 --- /dev/null +++ b/assets/_sass/_default-colors.scss @@ -0,0 +1 @@ +// Don't remove, this file is the default diff --git a/assets/_sass/_default-fonts.scss b/assets/_sass/_default-fonts.scss deleted file mode 100644 index 2cea553..0000000 --- a/assets/_sass/_default-fonts.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); -@import url('https://use.typekit.net/cpr8cmy.css'); // TODO This can be removed to the span theme when it's created - -html, -body { - font-family: $primary-font-family !important; -} - -code, -kbd, -pre, -samp { - font-family: monospace !important; - position: relative; - - span { - font-family: monospace !important; - } -} diff --git a/assets/_sass/_default-typography.scss b/assets/_sass/_default-typography.scss new file mode 100644 index 0000000..8ccf204 --- /dev/null +++ b/assets/_sass/_default-typography.scss @@ -0,0 +1,147 @@ +//======================================================================== +//== Typography +//------------------------------------------------------------------------ + +// Presidium System level Variables + +//## Font, line-height, and color for body text, headings, and more. +@import "https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"; + +// Base +$prsdm-typography-default-font-color: $color-grey-1 !default; +$prsdm-typography-base-font-family: "Open Sans" !default; +$prsdm-typography-base-font-weight: 400 !default; +$prsdm-typography-base-line-height: 18px !default; +$prsdm-typography-base-font-size: 13px !default; +$prsdm-typography-base-letter-spacing: 0 !default; +$prsdm-typography-base-color: $prsdm-typography-default-font-color !default; +$prsdm-typography-html-font-size: 16px !default; + +// Headings +$headings-font-family: $prsdm-typography-base-font-family !default; +$prsdm-typography-heading-strong-font-weight: 600 !default; +$prsdm-typography-heading-medium-font-weight: 500 !default; +$prsdm-typography-heading-light-font-weight: 450 !default; + +// H1 +$presidium-typography-h1-line-height: 41px !default; +$presidium-typography-h1-font-size: 34px !default; +$presidium-typography-h1-font-weight: $prsdm-typography-heading-medium-font-weight !default; +// H2 +$presidium-typography-h2-line-height: 32px !default; +$presidium-typography-h2-font-size: 28px !default; +$presidium-typography-h2-font-weight: $prsdm-typography-heading-medium-font-weight !default; +// H3 +$presidium-typography-h3-line-height: 28px !default; +$presidium-typography-h3-font-size: 24px !default; +$presidium-typography-h3-font-weight: $prsdm-typography-heading-medium-font-weight !default; +// H4 +$presidium-typography-h4-line-height: 24px !default; +$presidium-typography-h4-font-size: 22px !default; +$presidium-typography-h4-font-weight: $prsdm-typography-heading-medium-font-weight !default; +// H5 +$presidium-typography-h5-line-height: 22px !default; +$presidium-typography-h5-font-size: 20px !default; +$presidium-typography-h5-font-weight: $prsdm-typography-heading-medium-font-weight !default; +// H6 +$presidium-typography-h6-line-height: 20px !default; +$presidium-typography-h6-font-size: 18px !default; +$presidium-typography-h6-font-weight: $prsdm-typography-heading-medium-font-weight !default; + +// Fonts +$primary-font-color: $prsdm-typography-default-font-color !default; +$primary-font-family: $prsdm-typography-base-font-family !default; +$font-size-base: $prsdm-typography-base-font-size !default; + +//** Unit-less `line-height` for use in components like buttons. +$line-height-base: 1.428571429 !default; // 20/14 +$line-height-computed: floor( + ($font-size-base * $line-height-base) +) !default; // ~20px +$padding-base-vertical: 8px !default; +$padding-base-horizontal: 12px !default; +$input-height-base: ( + $line-height-computed + ($padding-base-vertical * 2) + 2 +) !default; + +// Include glyphicons (remove this when bootstrap dependency is removed) +// The icons font path needs to be loaded before bootstrap in order to work +$icon-font-path: "assets/fonts/bootstrap/" !default; + +.content-wrapper { + .presidium-content { + .presidium-article-wrapper { + h1 .h1 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h1-font-weight !important; + line-height: $presidium-typography-h1-line-height !important; + font-size: $presidium-typography-h1-font-size !important; + margin-top: ($line-height-computed / 2); + margin-bottom: ($line-height-computed / 2); + } + + h2 .h2 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h2-font-weight !important; + line-height: $presidium-typography-h2-line-height !important; + font-size: $presidium-typography-h2-font-size !important; + margin-top: ($line-height-computed / 2); + margin-bottom: ($line-height-computed / 2); + } + + h3 .h3 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h3-font-weight !important; + line-height: $presidium-typography-h3-line-height !important; + font-size: $presidium-typography-h3-font-size !important; + margin-top: ($line-height-computed / 2); + margin-bottom: ($line-height-computed / 2); + } + + h4 .h4 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h4-font-weight !important; + line-height: $presidium-typography-h4-line-height !important; + font-size: $presidium-typography-h4-font-size !important; + margin-top: 0; + margin-bottom: ($line-height-computed / 2); + } + + h5 .h5 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h5-font-weight !important; + line-height: $presidium-typography-h5-line-height !important; + font-size: $presidium-typography-h5-font-size !important; + margin-top: 0; + margin-bottom: ($line-height-computed / 2); + } + + h6 .h6 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h6-font-weight !important; + line-height: $presidium-typography-h6-line-height !important; + font-size: $presidium-typography-h6-font-size !important; + margin-top: 0; + margin-bottom: ($line-height-computed / 2); + } + } + } +} + +html, +body { + font-family: $primary-font-family !important; + color: $primary-font-color !important; +} + +code, +kbd, +pre, +samp { + font-family: monospace !important; + position: relative; + + span { + font-family: monospace !important; + } +} diff --git a/assets/_sass/_default-variables.scss b/assets/_sass/_default-variables.scss index e14709e..01e4e93 100644 --- a/assets/_sass/_default-variables.scss +++ b/assets/_sass/_default-variables.scss @@ -7,7 +7,8 @@ $navbar-default-link-hover-bg: white; $link-color: #e49134; // Custom colors -$color-grey: #555; +$color-grey: #333; +$color-grey-1: #555; $color-grey-2: #777; $color-grey-3: #bbb; $color-grey-4: #f3f3f3; @@ -18,9 +19,6 @@ $color-blue: #4586cd; $color-red: #e52213; $color-dark-grey: #3d3d3d; -// Fonts -$primary-font-family: proxima-nova !default; // TODO This should be 'Open Sans', but until we have a span theme, this is proxima nova - // Extracted from spacelab theme: // Colors $gray-base: #000 !default; @@ -32,19 +30,3 @@ $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee $navbar-default-bg: #eee !default; $border: #dadada; -// fonts -$font-size-base: 14px !default; -$line-height-base: 1.428571429 !default; // 20/14 -$padding-base-vertical: 8px !default; -$padding-base-horizontal: 12px !default; -$line-height-computed: floor( - ($font-size-base * $line-height-base) -) !default; // ~20px - -$input-height-base: ( - $line-height-computed + ($padding-base-vertical * 2) + 2 -) !default; - -// Include glyphicons (remove this when bootstrap dependency is removed) -// The icons font path needs to be loaded before bootstrap in order to work -$icon-font-path: "assets/fonts/bootstrap/" !default; diff --git a/assets/_sass/_local.scss b/assets/_sass/_local.scss new file mode 100644 index 0000000..0d8e031 --- /dev/null +++ b/assets/_sass/_local.scss @@ -0,0 +1 @@ +// Don't remove, this file is the default diff --git a/assets/_sass/_navbar.scss b/assets/_sass/_navbar.scss index 3ad1db6..f9975a8 100644 --- a/assets/_sass/_navbar.scss +++ b/assets/_sass/_navbar.scss @@ -94,7 +94,7 @@ $nav-item-border: darken($navbar-default-bg, 8%); } .navbar-nav { - margin: 7.5px 0; + margin: 0 0; .menu-row { background-color: transparent; @@ -187,12 +187,14 @@ $nav-item-border: darken($navbar-default-bg, 8%); width: 100%; margin-left: 0; margin-right: 0; + margin-top: 7.5px; flex-grow: 1; padding: 0 8px; word-break: break-all; overflow-wrap: anywhere; hyphens: auto; overflow-y: auto; + border-top: 1px solid $nav-item-border; span.glyphicon { padding: 4px; @@ -205,10 +207,6 @@ $nav-item-border: darken($navbar-default-bg, 8%); -webkit-text-stroke: 1px #e2e2e2; } } - - > ul:first-of-type { - border-top: 1px solid $nav-item-border; - } } .dropdown { @@ -361,6 +359,7 @@ $nav-item-border: darken($navbar-default-bg, 8%); word-break: normal; text-overflow: ellipsis; overflow: hidden; + font-weight: 400; a { color: $navbar-default-link-color; diff --git a/assets/_sass/_structure.scss b/assets/_sass/_structure.scss index 7088f09..80b89d4 100644 --- a/assets/_sass/_structure.scss +++ b/assets/_sass/_structure.scss @@ -81,7 +81,7 @@ #presidium-container { flex-basis: 0; flex-grow: 999; - color: $gray-darker; + color: $primary-font-color; .row { display: flex; @@ -97,7 +97,49 @@ h5, h6, p { - color: $gray-darker; + color: $primary-font-color; + } + + h1 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h1-font-weight !important; + line-height: $presidium-typography-h1-line-height !important; + font-size: $presidium-typography-h1-font-size !important; + } + + h2 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h2-font-weight !important; + line-height: $presidium-typography-h2-line-height !important; + font-size: $presidium-typography-h2-font-size !important; + } + + h3 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h3-font-weight !important; + line-height: $presidium-typography-h3-line-height !important; + font-size: $presidium-typography-h3-font-size !important; + } + + h4 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h4-font-weight !important; + line-height: $presidium-typography-h4-line-height !important; + font-size: $presidium-typography-h4-font-size !important; + } + + h5 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h5-font-weight !important; + line-height: $presidium-typography-h5-line-height !important; + font-size: $presidium-typography-h5-font-size !important; + } + + h6 { + font-family: $headings-font-family !important; + font-weight: $presidium-typography-h6-font-weight !important; + line-height: $presidium-typography-h6-line-height !important; + font-size: $presidium-typography-h6-font-size !important; } p { @@ -109,22 +151,10 @@ } #presidium-content { - margin: 40px auto 0 auto; + padding: 20px 40px 40px; + width: 100%; height: 100%; - width: calc(100% - (144px * 0.25)); - - @media (min-width: $screen-md) { - width: calc(100% - (144px * 0.5)); - } - @media (min-width: $screen-lg) { - width: calc(100% - (144px * 1)); - } - @media (min-width: $screen-xlg) { - width: calc(100% - (144px * 2)); - } - @media (min-width: $screen-xxlg) { - width: calc(100% - (144px * 3)); - } + min-width: 375px; section { #no-content-warning { @@ -177,22 +207,22 @@ } .status-draft { - background-image: url('images/status-draft.png'); + background-image: url("images/status-draft.png"); color: $color-yellow-green; } .status-review { - background-image: url('images/status-review.png'); + background-image: url("images/status-review.png"); color: $color-yellow-green; } .status-published { - background-image: url('images/status-published.png'); + background-image: url("images/status-published.png"); color: $color-green; } .status-retired { - background-image: url('images/status-retired.png'); + background-image: url("images/status-retired.png"); color: $color-grey; } } @@ -226,7 +256,7 @@ float: right; .label { - background-image: url('images/role-icon.svg'); + background-image: url("images/role-icon.svg"); background-repeat: no-repeat; background-size: 25px 15px; background-color: unset; @@ -278,7 +308,7 @@ right: 100%; top: 50%; border: solid transparent; - content: ' '; + content: " "; height: 0; width: 0; position: absolute; @@ -302,14 +332,14 @@ } .edit-icon { - background-image: url('assets/svg/edit-icon.svg'); + background-image: url("assets/svg/edit-icon.svg"); fill: #9a9a99; width: 16px; height: 16px; } .link-icon { - background-image: url('assets/svg/link-icon.svg'); + background-image: url("assets/svg/link-icon.svg"); fill: #9a9a99; width: 16px; height: 16px; @@ -375,44 +405,44 @@ } .presidium-pro-tip { - @include callout($color-orange, 'span pro tip'); + @include callout($color-orange, "span pro tip"); } .presidium-for-example { - @include callout($color-green, 'for example...'); + @include callout($color-green, "for example..."); } .presidium-suggested-reading { - @include callout($color-blue, 'suggested reading'); + @include callout($color-blue, "suggested reading"); } .presidium-suggested-courses { - @include callout($color-blue, 'suggested courses'); + @include callout($color-blue, "suggested courses"); } .presidium-best-practice { - @include callout($color-orange, 'best practice'); + @include callout($color-orange, "best practice"); } .presidium-warning { - @include callout($color-red, 'warning'); + @include callout($color-red, "warning"); } .presidium-prerequisite { - @include callout($color-yellow-green, 'prerequisite'); + @include callout($color-yellow-green, "prerequisite"); } .presidium-chris-says { background-color: #000; border-color: #000; - background-image: url('images/pentagram-symbol.svg'); + background-image: url("images/pentagram-symbol.svg"); color: $color-grey-2; background-repeat: no-repeat; background-position: top right; background-size: 31px; background-origin: content-box; - @include callout($color-grey-2, 'chris says...'); + @include callout($color-grey-2, "chris says..."); } } } @@ -474,9 +504,9 @@ } .global-footer { - position: fixed; - bottom: 0; - left: 0; + position: fixed; + bottom: 0; + left: 0; z-index: 1000; width: 100%; background-color: $color-grey-3; diff --git a/assets/presidium.scss b/assets/presidium.scss index 0ebac53..051bc91 100644 --- a/assets/presidium.scss +++ b/assets/presidium.scss @@ -1,23 +1,23 @@ -// Optional variable overrides -@import "_sass/default-variables"; -@import "_sass/variables"; - -//Core CSS -@import "_sass/bootstrap/"; -@import "_sass/navbar"; -@import "_sass/structure"; -@import "_sass/editor"; -@import "_sass/image"; -@import "_sass/syntax"; -@import "_sass/tooltips"; -@import "_sass/home"; -@import "_sass/print"; +//Core System level CSS +@import '_sass/default-variables'; +@import '_sass/default-typography'; +@import '_sass/variables'; +@import '_sass/bootstrap/'; +@import '_sass/navbar'; +@import '_sass/structure'; +@import '_sass/editor'; +@import '_sass/image'; +@import '_sass/syntax'; +@import '_sass/tooltips'; +@import '_sass/print'; +@import '_sass/home'; +// Enterprise level configuration +@import '_sass/custom_enterprise'; // Optional custom CSS loaded last -@import "_sass/variables"; -@import "_sass/default-fonts"; -@import "_sass/fonts"; -@import "_sass/custom"; -@import "_sass/pdf"; -@import "_sass/mermaid"; +@import '_sass/fonts'; +@import '_sass/custom'; +@import '_sass/local'; +@import '_sass/pdf'; +@import '_sass/mermaid'; diff --git a/config.yml b/config.yml index 97da240..e2b46d5 100644 --- a/config.yml +++ b/config.yml @@ -1,4 +1,5 @@ module: + _merge: shallow mounts: - source: static target: static diff --git a/go.mod b/go.mod index fa334a8..1959858 100644 --- a/go.mod +++ b/go.mod @@ -1,3 +1,3 @@ module github.com/spandigital/presidium-styling-base -go 1.23.0 +go 1.18 diff --git a/pull_request_template.md b/pull_request_template.md new file mode 100644 index 0000000..e98c518 --- /dev/null +++ b/pull_request_template.md @@ -0,0 +1,16 @@ +## Description + +## Issue +- [ ] :clipboard: JIRA_TICKET_URL + +## Screenshots + +## PR Readiness Checks +- [ ] Your PR title conforms to conventional commits `: `, for example: `fix: PRSDM-123 issue with login` with a maximum of 100 characters +- [ ] You have performed a self-review of your changes via the GitHub UI +- [ ] Comments were added to new code that can not explain itself (see [reference 1](https://bpoplauschi.github.io/2021/01/20/Clean-Code-Comments-by-Uncle-Bob-part-2.html) and [reference 2](https://blog.cleancoder.com/uncle-bob/2017/02/23/NecessaryComments.html)) +- [ ] New code adheres to the following quality standards: + - Function Length ([see reference](https://martinfowler.com/bliki/FunctionLength.html)) + - Meaningful Names ([see reference](https://learning.oreilly.com/library/view/clean-code-a/9780136083238/chapter02.xhtml)) + - DRY ([see reference](https://java-design-patterns.com/principles/#keep-things-dry)) + - YAGNI ([see reference](https://java-design-patterns.com/principles/#yagni))