From 42c49a2079281c4ff9949e601d903d24b45f882f Mon Sep 17 00:00:00 2001 From: MTRNord Date: Mon, 27 May 2024 12:03:33 +0200 Subject: [PATCH 01/21] Prepare stylelint --- .gitignore | 4 +++- .stylelintrc.json | 3 +++ DEVELOPER_NOTES.md | 13 +++++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 .stylelintrc.json create mode 100644 DEVELOPER_NOTES.md diff --git a/.gitignore b/.gitignore index 1d3301065..67eed179a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ /public .DS_Store gatsby - +package.json +pnpm-lock.yaml +node_modules \ No newline at end of file diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 000000000..77b9e3da6 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-standard-scss" +} \ No newline at end of file diff --git a/DEVELOPER_NOTES.md b/DEVELOPER_NOTES.md new file mode 100644 index 000000000..665b41784 --- /dev/null +++ b/DEVELOPER_NOTES.md @@ -0,0 +1,13 @@ +# Developer Notes + +These are notes for advanced tooling use of the repository and are not mandatory for the process at this time. + +## Stylelint + +The repo already contains a config but not the package.json for the dependencies. This is for now an exercise to the reader. + +Required dependencies besides stylelint itself are currently: + +- stylelint-config-standard-scss + +You can then run it with `npx stylelint "sass/**/*.scss"` \ No newline at end of file From 60a7e02f837f86b6d134ae8823e89eeafca75bd1 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Mon, 27 May 2024 13:48:23 +0200 Subject: [PATCH 02/21] Apply auto corrections from stylelint --- sass/_base.scss | 37 ++++++---------- sass/_blog.scss | 18 ++++---- sass/_bridges.scss | 9 ++-- sass/_clients.scss | 18 +++----- sass/_docs.scss | 20 ++++----- sass/_fonts.scss | 2 +- sass/_header.scss | 46 ++++++++------------ sass/_hosting.scss | 16 +++---- sass/_howitworks.scss | 2 +- sass/_index.scss | 73 +++++++++++++------------------- sass/_legacy-docs.scss | 2 +- sass/_otwsu.scss | 8 ++-- sass/_projects.scss | 26 +++--------- sass/_security-hall-of-fame.scss | 4 +- sass/_servers.scss | 8 +--- sass/_support.scss | 35 ++++++++------- sass/_tables.scss | 2 +- sass/_taxonomies.scss | 14 +++--- sass/_try-matrix.scss | 8 ++-- 19 files changed, 137 insertions(+), 211 deletions(-) diff --git a/sass/_base.scss b/sass/_base.scss index 4765ebfae..a149fd3a7 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -2,7 +2,6 @@ --page-max-width: 57rem; --page-with-toc-max-width: 81rem; --navbar-height: 5.937rem; - --color-text: #333; --color-text-light: #757575; @@ -12,9 +11,7 @@ } --color-link: #0098d4; - --page-header-height: 15rem; - --borders-color: #ddd; } @@ -34,9 +31,8 @@ body { flex-direction: column; background-color: #fff; color: var(--color-text); - font-family: "Helvetica Neue", - "Helvetica", + Helvetica, Arial, -apple-system, BlinkMacSystemFont, @@ -48,7 +44,6 @@ body { "Segoe UI Emoji", /* Emojis*/ "Segoe UI Symbol"; - line-height: 1.75; } @@ -64,7 +59,7 @@ a { ul, ol { - margin-top: 0px; + margin-top: 0; margin-bottom: 10px; padding-left: 40px; } @@ -85,7 +80,6 @@ ol:last-child { .content { width: 100%; max-width: var(--page-max-width); - margin: 1rem auto; padding-inline: 1rem; @@ -129,7 +123,7 @@ ol:last-child { justify-content: space-between; flex-wrap: wrap; - @media (max-width: 767px) { + @media (width <= 767px) { flex-direction: column; text-align: center; } @@ -188,7 +182,7 @@ pre table td:nth-of-type(1) { pre mark { display: block; - background-color: rgba(254, 252, 232, 0.9); + background-color: rgb(254 252 232 / 90%); } pre table { @@ -203,22 +197,20 @@ pre table { justify-content: center; padding-inline: 5.625rem; - @media (max-width: 767px) { + @media (width <= 767px) { padding-inline: 2rem; } padding-bottom: calc(var(--navbar-height)/2); - min-height: var(--page-header-height); - background-color: #000000; + background-color: #000; overflow: hidden; - - background-image: url(/assets/page-header-bg.svg); + background-image: url("/assets/page-header-bg.svg"); background-size: 90% 100%; background-position: bottom right; background-repeat: no-repeat; - @media (max-width: 767px) { + @media (width <= 767px) { background-size: 250% 100%; background-position-x: -533px; } @@ -229,18 +221,16 @@ pre table { font-weight: 700; font-size: 2.8rem; line-height: 120%; - color: #FFFFFF; + color: #FFF; } p { font-style: normal; font-size: 1.4rem; line-height: 120%; - display: flex; align-items: center; - - color: #FFFFFF; + color: #FFF; word-wrap: normal; } } @@ -265,7 +255,6 @@ a>code { background-size: 100% 100%; background-repeat: no-repeat; padding: 1rem; - max-width: 23rem; .wrapper { @@ -281,7 +270,7 @@ a>code { font-size: 1.125rem; font-weight: 700; padding: 0; - margin: 0 0 1rem 0; + margin: 0 0 1rem; } p { @@ -385,8 +374,7 @@ a>code { display: flex; justify-content: center; flex-wrap: wrap; - column-gap: 1rem; - row-gap: .5rem; + gap: .5rem 1rem; } .cta-col { @@ -394,6 +382,5 @@ a>code { flex-direction: column; justify-content: center; row-gap: 1rem; - align-items: center; } diff --git a/sass/_blog.scss b/sass/_blog.scss index 57aa8cd4c..ee6be6265 100644 --- a/sass/_blog.scss +++ b/sass/_blog.scss @@ -64,7 +64,7 @@ article.post { } blockquote { - margin: 0 0 10px 0; + margin: 0 0 10px; padding: 10px 20px; border-left: 5px solid #E2E2E2; } @@ -82,14 +82,13 @@ article.post { align-self: center; .callout { - display: grid; grid-template-columns: 300px auto; color: #fff; background-color: #000; border-radius: 16px; - @media (max-width: 767px) { + @media (width <= 767px) { grid-template-columns: auto; grid-template-rows: 10rem auto; } @@ -113,14 +112,14 @@ article.post { } a { - color: rgba(34, 109, 227); + color: rgb(34 109 227); } .call-to-action { display: inline-block; font-size: 1.125rem; font-weight: 700; - background-color: rgba(34, 109, 227); + background-color: rgb(34 109 227); padding: .5rem 1.5rem; border-radius: 9999px; color: #fff; @@ -129,20 +128,20 @@ article.post { .call-to-action:hover { background-color: #fff; - color: rgba(34, 109, 227); + color: rgb(34 109 227); } } aside { - @media (max-width: 1023px) { + @media (width <= 1023px) { display: none; } a { - color: rgb(51, 51, 51); + color: rgb(51 51 51); &:hover { - color: rgb(0, 152, 212); + color: rgb(0 152 212); } } @@ -165,6 +164,7 @@ article.post { .post-content { // Use all of the space not taken by the sidebar flex: 3; + // Necessary to allow the pre to scroll on overflow min-width: 0; diff --git a/sass/_bridges.scss b/sass/_bridges.scss index abe472309..044034cbc 100644 --- a/sass/_bridges.scss +++ b/sass/_bridges.scss @@ -18,13 +18,11 @@ padding-inline: .5rem 1rem; max-width: fit-content; cursor: pointer; - color: var(--color-text); img { width: 64px; height: 64px; - border: 1px solid #d2d2d2; border-radius: 15px; } @@ -63,7 +61,7 @@ max-width: var(--page-max-width); margin-inline: auto; - @media (max-width: 767px) { + @media (width <= 767px) { padding: 1rem; } @@ -71,7 +69,7 @@ grid-template-columns: 2fr 1fr; column-gap: 1rem; - @media (max-width: 767px) { + @media (width <= 767px) { grid-template-columns: 1fr; } @@ -106,8 +104,7 @@ .privileges>div, .licence>div { display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; gap: .5rem; div, diff --git a/sass/_clients.scss b/sass/_clients.scss index 5fc5d806b..bd4edb925 100644 --- a/sass/_clients.scss +++ b/sass/_clients.scss @@ -17,7 +17,7 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) { font-weight: 400; font-size: 1.125rem; line-height: 120%; - margin: 0 auto 4rem auto; + margin: 0 auto 4rem; max-width: 40rem; } } @@ -33,23 +33,21 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) { .platform-links { display: flex; - flex-direction: row; + flex-flow: row wrap; align-items: flex-start; justify-content: center; gap: 16px 4px; - flex-wrap: wrap; } .platform-pill { background: #E9E9E9; border-radius: 16px; padding: .375rem .625rem; - font-style: normal; font-weight: 400; font-size: 1rem; line-height: 120%; - color: #000000; + color: #000; } .client-details { @@ -57,7 +55,7 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) { display: grid; grid-template-columns: 2fr 1fr; - @media (max-width: 767px) { + @media (width <= 767px) { grid-template-columns: 1fr; } @@ -79,7 +77,6 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) { margin: 0 auto; align-items: center; justify-content: center; - font-style: normal; font-weight: 700; font-size: 2rem; @@ -115,11 +112,8 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) { &:checked~.client-details-overlay { position: fixed; z-index: 150; - top: var(--navbar-height); - right: 0; - bottom: 0; - left: 0; - background-color: rgba(0, 0, 0, .5); + inset: var(--navbar-height) 0 0 0; + background-color: rgb(0 0 0 / 50%); } &:not(:checked)~.client-details-overlay { diff --git a/sass/_docs.scss b/sass/_docs.scss index 27040fb07..93b09a04a 100644 --- a/sass/_docs.scss +++ b/sass/_docs.scss @@ -32,13 +32,14 @@ header { padding: 1.5rem; } - @media (max-width: 767px) { + @media (width <= 767px) { /* This trick is added because Chrome on Android doesn't re-calculate the height of the viewport before the user stops scrolling. We're artificially making the panel higher than it is */ --panel-bottom-trick: 300px; + border-right: unset; max-width: unset; inset-inline-end: 0; @@ -77,10 +78,8 @@ header { display: flex; flex-direction: row; gap: .8rem; - font-size: 1.2rem; font-weight: 700; - cursor: pointer; user-select: none; } @@ -113,7 +112,7 @@ header { .docs-content { padding-inline-start: calc(var(--docs-menu-width) + 3rem + .5rem); - @media (max-width: 767px) { + @media (width <= 767px) { margin-inline: auto; padding-inline: .5rem; } @@ -129,14 +128,13 @@ header { display: none; z-index: 991; - @media (max-width: 767px) { + @media (width <= 767px) { display: inline-block; } bottom: 2rem; left: 50%; transform: translateX(-50%); - background-color: #000; color: #fff; border: transparent; @@ -150,22 +148,22 @@ header { } #docs-menu-checkbox:not(:checked)~.docs-menu { - @media (max-width: 767px) { + @media (width <= 767px) { display: none; } } #docs-menu-checkbox:checked~.docs-content { - @media (max-width: 767px) { + @media (width <= 767px) { display: none; } } .mjolnir_button { - border: 1px solid rgb(217, 217, 217); + border: 1px solid rgb(217 217 217); border-radius: 1000px; padding: 0 .4rem; - background-color: rgb(242, 247, 252); + background-color: rgb(242 247 252); } figure { @@ -173,10 +171,8 @@ figure { flex-direction: column; align-items: center; gap: 1rem; - margin-inline: 0; padding: 1rem; - border: 1px solid #dedede; border-radius: 4px; diff --git a/sass/_fonts.scss b/sass/_fonts.scss index 9a30ba799..1673d0012 100644 --- a/sass/_fonts.scss +++ b/sass/_fonts.scss @@ -1,5 +1,5 @@ @font-face { - font-family: 'webflow-icons'; + font-family: webflow-icons; src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype'); font-weight: normal; font-style: normal; diff --git a/sass/_header.scss b/sass/_header.scss index ccd833fa2..d403e5def 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -1,6 +1,7 @@ .site-header { position: fixed; z-index: 1000; + --header-padding: 1.5dvw; --header-vertical-padding: 8px; @@ -10,17 +11,15 @@ padding-left: 20px; align-items: center; margin-bottom: 0; - font-size: 1.125rem; color: #fff; - background-color: #000; - @media screen and (min-width: 768px) { + @media screen and (width >= 768px) { padding-right: 10px; } - @media screen and (min-width: 1000px) { + @media screen and (width >= 1000px) { padding-right: 20px; } @@ -35,9 +34,8 @@ } .dropdown-button { - font-family: 'webflow-icons'; + font-family: webflow-icons; font-size: 1.5rem; - padding: 0 1rem; // Make the button take the full height @@ -45,7 +43,7 @@ display: flex; align-items: center; - @media screen and (min-width: 768px) { + @media screen and (width >= 768px) { display: none; } } @@ -53,21 +51,19 @@ nav { display: flex; - @media screen and (max-width: 767px) { + @media screen and (width <= 767px) { position: fixed; z-index: 800; top: 5.937rem; left: 0; right: 0; - flex-direction: column; background-color: #000; - max-height: calc(100vh - 5.937rem); overflow-y: auto; } - @media screen and (min-width: 768px) { + @media screen and (width >= 768px) { align-items: center; } @@ -75,7 +71,7 @@ color: #fff; font-size: 1.125rem; - @media screen and (max-width: 767px) { + @media screen and (width <= 767px) { font-size: 1.5rem; } @@ -93,17 +89,15 @@ border-radius: 60px; background-color: #fff; color: #000 !important; - - padding-inline: clamp(1em, 3dvw, 2em); margin-inline: .5rem; - @media screen and (max-width: 767px) { - margin-block: 1.2rem; + @media screen and (width <= 767px) { + margin-top: 1.2rem; text-align: center; } - @media screen and (min-width: 768px) { + @media screen and (width >= 768px) { &:not(:last-child) { margin-right: 12px; } @@ -115,7 +109,7 @@ opacity: 0; position: absolute; - @media screen and (max-width: 767px) { + @media screen and (width <= 767px) { &:not(:checked)~.section-submenu-wrap { display: none; } @@ -143,11 +137,10 @@ } .submenu-title { - @media screen and (max-width: 767px) { + @media screen and (width <= 767px) { display: flex; flex-direction: row; gap: 1rem; - font-size: 1.5rem; } @@ -156,7 +149,6 @@ } margin: auto 0; - padding: var(--header-vertical-padding) var(--header-padding); } @@ -165,7 +157,7 @@ } } - @media screen and (min-width: 768px) { + @media screen and (width >= 768px) { .section-wrap { position: relative; align-self: stretch; @@ -193,7 +185,7 @@ } } - @media screen and (max-width: 767px) { + @media screen and (width <= 767px) { .section-submenu { padding-left: 1em; display: flex; @@ -213,7 +205,7 @@ #site-header-dropdown-checkbox { display: none; - @media screen and (max-width: 767px) { + @media screen and (width <= 767px) { &:checked~.dropdown-button { background-color: #000; } @@ -221,11 +213,7 @@ &:checked~.page-overlay { position: fixed; z-index: 400; - top: 5.937rem; - right: 0; - bottom: 0; - left: 0; - + inset: 5.937rem 0 0; display: block; } diff --git a/sass/_hosting.scss b/sass/_hosting.scss index c653dd3a2..804cd0568 100644 --- a/sass/_hosting.scss +++ b/sass/_hosting.scss @@ -1,8 +1,9 @@ .hosting_page { margin: 0 auto; - padding: 5.625rem 0 2rem 0; - @media (max-width: 767px) { - padding: 5.625rem 32px 2rem 32px; + padding: 5.625rem 0 2rem; + + @media (width <= 767px) { + padding: 5.625rem 32px 2rem; } h2 { @@ -14,21 +15,19 @@ .hosting_providers { display: flex; - flex-direction: row; + flex-flow: row wrap; justify-content: center; - flex-wrap: wrap; gap: 3.125rem; .provider_card { display: flex; flex-direction: column; justify-content: space-between; - padding: 24px; - flex: 1 0 400px; max-width: 400px; - @media (max-width: 767px) { + + @media (width <= 767px) { flex: 1 0 300px; max-width: 300px; } @@ -48,7 +47,6 @@ height: 5rem; margin: 0; text-align: center; - font-style: normal; font-weight: 700; font-size: 2rem; diff --git a/sass/_howitworks.scss b/sass/_howitworks.scss index 6ded01b94..6fff3f5d3 100644 --- a/sass/_howitworks.scss +++ b/sass/_howitworks.scss @@ -2,7 +2,7 @@ display: grid; grid-template-columns: 1fr 1fr; - @media (max-width: 1024px) { + @media (width <= 1024px) { grid-template-columns: 1fr; } diff --git a/sass/_index.scss b/sass/_index.scss index 6229e05b4..e20a806e2 100644 --- a/sass/_index.scss +++ b/sass/_index.scss @@ -1,5 +1,4 @@ #frontpage { - h2 { margin-block: 1.38rem 1rem; } @@ -9,7 +8,7 @@ background-color: #000; background-image: url("/assets/frontpage/hero_dancing_lines.svg"); - @media (max-width: 767px) { + @media (width <= 767px) { background-image: url("/assets/frontpage/hero_dancing_lines_mobile.svg"); } @@ -32,7 +31,7 @@ margin: 0 auto; text-align: center; - @media (max-width: 767px) { + @media (width <= 767px) { font-size: 2.125rem; margin: 0 30px; } @@ -41,7 +40,7 @@ img { width: 200px; height: 86px; - margin: 0 auto 2rem auto; + margin: 0 auto 2rem; } } @@ -54,7 +53,7 @@ bottom: -1vh; right: -50px; - @media (max-width: 767px) { + @media (width <= 767px) { height: 15vh; } } @@ -68,7 +67,7 @@ bottom: -3vh; right: -50px; - @media (max-width: 767px) { + @media (width <= 767px) { height: 15vh; } } @@ -82,7 +81,7 @@ bottom: -5vh; right: -50px; - @media (max-width: 767px) { + @media (width <= 767px) { height: 15vh; } } @@ -96,7 +95,7 @@ bottom: -7vh; right: -50px; - @media (max-width: 767px) { + @media (width <= 767px) { height: 15vh; } } @@ -106,7 +105,7 @@ background: url("/assets/frontpage/personal-bg.svg"); background-size: 100% 100%; - @media (max-width: 59rem) { + @media (width <= 59rem) { background-image: url("/assets/frontpage/personal-bg-mobile.svg"); background-size: 100% 241px; padding-inline: 1rem; @@ -114,10 +113,8 @@ background-repeat: no-repeat; background-position-y: bottom -20px; - position: relative; overflow: hidden; - padding-inline: 2rem; padding-bottom: 175px; @@ -128,7 +125,7 @@ max-width: 1000px; margin-inline: auto; - @media (max-width: 59rem) { + @media (width <= 59rem) { flex-direction: column-reverse; align-items: center; } @@ -147,26 +144,25 @@ font-size: 2.5rem; font-weight: 700; - @media (max-width: 59rem) { + @media (width <= 59rem) { margin-top: 2rem; text-align: center; } - @media (max-width: 767px) { + @media (width <= 767px) { font-size: 2.125rem; } } } img { - margin: auto 0px; - + margin: auto 0; flex: auto; max-width: 470px; aspect-ratio: 470 / 418; - @media (max-width: 59rem) { - margin: 0px auto; + @media (width <= 59rem) { + margin: 0 auto; } } @@ -175,12 +171,11 @@ bottom: -340px; height: 400px; background-color: black; - border-radius: 100% 100%; - + border-radius: 100%; width: 150%; left: -25%; - @media (max-width: 767px) { + @media (width <= 767px) { width: 200%; left: -50%; } @@ -189,11 +184,9 @@ #use-case-community { background-color: #000; - display: flex; flex-direction: column; justify-content: space-around; - text-align: center; padding-top: 60px; padding-bottom: 100px; @@ -228,7 +221,7 @@ margin-inline: auto; padding: 10rem 2rem; - @media (max-width: 64rem) { + @media (width <= 64rem) { flex-direction: column-reverse; align-items: center; } @@ -241,7 +234,7 @@ max-width: 27.9rem; margin-inline: auto; - @media (max-width: 767px) { + @media (width <= 767px) { max-width: none; } @@ -251,16 +244,16 @@ font-size: 2.5rem; font-weight: 700; - @media (max-width: 64rem) { + @media (width <= 64rem) { text-align: center; } - @media (max-width: 767px) { + @media (width <= 767px) { font-size: 2.125rem; - margin: 0 auto 2rem auto; + margin: 0 auto 2rem; } - margin: 0 0 2rem 0; + margin: 0 0 2rem; } } @@ -277,23 +270,21 @@ display: flex; flex-direction: column; gap: 28px; - padding: 250px 0 300px 0; + padding: 250px 0 300px; overflow: hidden; - @media (max-width: 767px) { - padding: 100px 35px 435px 35px; + @media (width <= 767px) { + padding: 100px 35px 435px; } justify-content: space-around; - position: relative; - color: #fff; background-color: #000; background-image: url("/assets/frontpage/buildon-bg.svg"); background-size: 100% 100%; - @media (max-width: 767px) { + @media (width <= 767px) { background-image: url("/assets/frontpage/buildon-bg-mobile.svg"); background-size: 100% 480px; background-position-y: bottom; @@ -325,7 +316,6 @@ position: absolute; top: 100px; left: calc(60dvw - 800px); - width: 240px; height: 287px; } @@ -334,7 +324,6 @@ position: absolute; bottom: 50px; left: calc(60dvw - 800px); - width: 230px; height: 235px; } @@ -359,7 +348,6 @@ #sponsors { display: flex; flex-direction: column; - padding: 5rem 45px; h2 { @@ -370,12 +358,11 @@ #sponsors_grid { display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; justify-content: space-around; margin: 2rem auto; - @media (max-width: 767px) { + @media (width <= 767px) { margin: 0 auto; } @@ -384,13 +371,11 @@ display: flex; flex-direction: column; justify-content: space-between; - margin: 1rem 0; padding: 1rem 0; - width: 22rem; - @media (max-width: 767px) { + @media (width <= 767px) { width: 100%; } diff --git a/sass/_legacy-docs.scss b/sass/_legacy-docs.scss index 8902615d6..e0816161b 100644 --- a/sass/_legacy-docs.scss +++ b/sass/_legacy-docs.scss @@ -7,7 +7,7 @@ margin-bottom: 1rem; h2 { - margin-top: 0px; + margin-top: 0; margin-bottom: 10px; } diff --git a/sass/_otwsu.scss b/sass/_otwsu.scss index 8cf339516..ff87c2a9d 100644 --- a/sass/_otwsu.scss +++ b/sass/_otwsu.scss @@ -1,8 +1,10 @@ .podcasts-content { display: flex; - @media (max-width: 767px) { + + @media (width <= 767px) { flex-direction: column; } + max-width: 1200px; margin: 0 auto 2em; } @@ -50,7 +52,7 @@ } - @media screen and (max-width: 703px) { + @media screen and (width <= 703px) { img { margin: -1em 0 1em; width: 100%; @@ -60,7 +62,7 @@ } } - @media screen and (min-width: 704px) { + @media screen and (width >= 704px) { img { margin: 0 0 .5em 1em; float: right; diff --git a/sass/_projects.scss b/sass/_projects.scss index 18b1a3a01..cc8a93df5 100644 --- a/sass/_projects.scss +++ b/sass/_projects.scss @@ -2,7 +2,7 @@ display: grid; grid-template-columns: repeat(auto-fill, 17.6rem); - @media (max-width: 767px) { + @media (width <= 767px) { max-width: 17.6rem; } @@ -22,9 +22,7 @@ align-items: center; padding: 24px; gap: 1rem; - min-height: 100%; - border: 1px solid #D2D2D2; border-radius: 16px; @@ -37,7 +35,6 @@ h3 { margin: 0; - font-style: normal; font-weight: 700; font-size: 1.8rem; @@ -75,10 +72,9 @@ .filters { display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; max-width: 40rem; - margin: 0 auto 2rem auto; + margin: 0 auto 2rem; justify-content: center; gap: 1rem; @@ -92,14 +88,11 @@ justify-content: space-between; gap: .8rem; z-index: 100; - padding: .5rem .8rem; - background-color: #fafafa; color: #000; border: 1px solid #d2d2d2; border-radius: 1000px; - cursor: pointer; user-select: none; @@ -136,9 +129,7 @@ min-width: 15rem; max-width: 20rem; z-index: 200; - padding: .5rem 1rem; - background-color: #fafafa; border: 1px solid var(--borders-color); border-radius: 16px; @@ -227,13 +218,9 @@ #filters-overlay { position: fixed; - top: var(--navbar-height); - left: 0; - right: 0; - bottom: 0; + inset: var(--navbar-height) 0 0 0; z-index: 100; - - background-color: rgba(0, 0, 0, .5); + background-color: rgb(0 0 0 / 50%); &:not(.display) { display: none; @@ -244,14 +231,12 @@ display: flex; flex-wrap: wrap; gap: .3rem; - margin-bottom: 1rem; .pill { display: flex; align-items: center; gap: .2rem; - border: 1px solid var(--color-text); color: var(--color-text); border-radius: 9999px; @@ -283,7 +268,6 @@ } .features-matrix { - ul { border: 1px solid var(--borders-color); border-radius: 16px; diff --git a/sass/_security-hall-of-fame.scss b/sass/_security-hall-of-fame.scss index be5403f9c..35adaa3ca 100644 --- a/sass/_security-hall-of-fame.scss +++ b/sass/_security-hall-of-fame.scss @@ -4,9 +4,7 @@ padding-left: .5em; padding-top: 0; padding-bottom: 0; - border-left-color: #333; - border-left-style: solid; - border-left-width: 2px; + border-left: 2px solid #333; } .finding-header { diff --git a/sass/_servers.scss b/sass/_servers.scss index 3d8605475..2e0d700d8 100644 --- a/sass/_servers.scss +++ b/sass/_servers.scss @@ -4,15 +4,14 @@ font-weight: 400; font-size: 1.125rem; line-height: 120%; - margin: 0 auto 4rem auto; + margin: 0 auto 4rem; } } .server-links { margin-top: auto; display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; justify-content: center; gap: .7rem; @@ -20,11 +19,9 @@ display: flex; align-items: center; gap: .3rem; - border: 1px solid #777; border-radius: 999px; padding-inline: .5rem; - font-size: .8rem; svg { @@ -46,7 +43,6 @@ background-color: #777; svg { - * { fill: #fff; } diff --git a/sass/_support.scss b/sass/_support.scss index f10379473..bced6fec6 100644 --- a/sass/_support.scss +++ b/sass/_support.scss @@ -1,11 +1,10 @@ .page-header.support { - .donate-row { display: flex; gap: 1rem; margin-block-start: 2rem; - @media (max-width: 767px) { + @media (width <= 767px) { flex-direction: column; } } @@ -18,22 +17,20 @@ color: #000; border-radius: 9999px; padding: .5rem 1rem; - font-size: 1.125rem; font-weight: 600; - @media (max-width: 767px) { + @media (width <= 767px) { justify-content: center; } } } .support.main { - &>div { padding-block: 3rem; - @media (max-width: 767px) { + @media (width <= 767px) { padding-block: 2rem; } } @@ -89,7 +86,9 @@ flex-direction: column; max-width: var(--page-max-width); margin-inline: auto; + --supporters-padding-inline: 1rem; + padding-inline: var(--supporters-padding-inline); .supporters-section { @@ -102,9 +101,10 @@ .cards { display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; + --cards-gap: 1rem; + gap: var(--cards-gap); justify-content: center; @@ -113,13 +113,19 @@ flex-direction: column; justify-content: center; align-items: center; + --supporters-card-border-width: 1px; + border: var(--supporters-card-border-width) solid var(--borders-color); border-radius: 16px; + --supporters-card-hpadding: 8px; + padding: var(--supporters-card-hpadding); + // The whitespace of the text at the bottom visually adds to the padding so we account for this on the top a little. padding-top: calc(1.5 * var(--supporters-card-hpadding)); + // This adds some space between the text and the image gap: var(--supporters-card-hpadding); @@ -141,7 +147,7 @@ flex-direction: row; gap: 3rem; - @media (max-width: 767px) { + @media (width <= 767px) { flex-direction: column-reverse; } @@ -161,14 +167,13 @@ flex-direction: row; gap: 3rem; - @media (max-width: 767px) { + @media (width <= 767px) { flex-direction: column; } } } #all-your-comms { - .content { display: flex; flex-direction: row; @@ -183,7 +188,7 @@ min-width: 0; } - @media (max-width: 767px) { + @media (width <= 767px) { flex-direction: column-reverse; } } @@ -208,7 +213,7 @@ grid-template-columns: 1fr 1fr; gap: 3rem; - @media (max-width: 767px) { + @media (width <= 767px) { grid-template-columns: 1fr; } @@ -229,7 +234,6 @@ } .membership { - max-width: 65rem; padding-inline: 1rem; margin-inline: auto; @@ -244,7 +248,7 @@ gap: 2rem; margin-block: 2rem 3rem; - @media (max-width: 767px) { + @media (width <= 767px) { flex-direction: column; } } @@ -286,7 +290,6 @@ border: 1px solid var(--borders-color); border-radius: 16px; background-color: #fff; - display: flex; flex-direction: column; padding: 1em; diff --git a/sass/_tables.scss b/sass/_tables.scss index b87359dda..0188f2532 100644 --- a/sass/_tables.scss +++ b/sass/_tables.scss @@ -1,5 +1,5 @@ table { - @media (max-width: 991px) { + @media (width <= 991px) { display: block; overflow-x: auto; width: fit-content; diff --git a/sass/_taxonomies.scss b/sass/_taxonomies.scss index 58647465b..9d0ceacc4 100644 --- a/sass/_taxonomies.scss +++ b/sass/_taxonomies.scss @@ -1,10 +1,10 @@ #taxonomy-list { h4 { - margin-top: 0px; + margin-top: 0; } h3 { - margin-bottom: 0px; + margin-bottom: 0; } } @@ -16,7 +16,7 @@ position: relative; margin-bottom: 10px; - &:after { + &::after { content: ""; height: 1px; width: 70px; @@ -24,16 +24,16 @@ bottom: -10px; left: 24px; margin-left: -25px; - background: rgba(0, 0, 0, 0.25) none repeat scroll 0% 0%; + background: rgb(0 0 0 / 25%) none repeat scroll 0% 0%; } h2 { - margin-top: 0px; - margin-bottom: 0px; + margin-top: 0; + margin-bottom: 0; } h1 { - margin-bottom: 0px; + margin-bottom: 0; } } diff --git a/sass/_try-matrix.scss b/sass/_try-matrix.scss index 32b368c38..63fea4e3f 100644 --- a/sass/_try-matrix.scss +++ b/sass/_try-matrix.scss @@ -5,7 +5,7 @@ .step-background { padding: 5rem 5.625rem; - @media (max-width: 767px) { + @media (width <= 767px) { padding: 1rem; } @@ -19,7 +19,7 @@ display: grid; grid-template-columns: 1fr 1fr; - @media (max-width: 767px) { + @media (width <= 767px) { grid-template-columns: 1fr; } @@ -28,7 +28,6 @@ .instructions { display: flex; flex-direction: column; - padding-block: 1rem; h3 { @@ -44,10 +43,9 @@ img { max-height: 220px; max-width: 360px; - margin: auto; - @media (max-width: 767px) { + @media (width <= 767px) { margin-block: 2rem; max-width: calc(100% - 2rem); } From 42f797aa57f9707eb3fd3e3ed9971661e9d35e56 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Mon, 27 May 2024 13:53:10 +0200 Subject: [PATCH 03/21] Use imports as intended by scss. The underscore denotes partials in sass which means they are not "entrypoints". This also means the underscore in imports is not meant to be used and instead it should just be refered to their "component" name. --- sass/style.scss | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/sass/style.scss b/sass/style.scss index 2e13a65f4..012cf70d6 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,23 +1,23 @@ -@import '_normalize'; -@import '_fonts'; -@import '_base'; -@import '_header'; -@import '_index'; -@import '_blog'; -@import '_pagination'; -@import '_taxonomies'; -@import '_projects'; -@import '_clients'; -@import '_bridges'; -@import '_servers'; -@import '_sdks'; -@import '_otwsu'; -@import '_about-bios'; -@import '_legacy-docs'; -@import '_docs'; -@import '_security-hall-of-fame'; -@import '_hosting'; -@import '_try-matrix'; -@import '_support'; -@import '_howitworks'; -@import '_elections'; +@import 'normalize'; +@import 'fonts'; +@import 'base'; +@import 'header'; +@import 'index'; +@import 'blog'; +@import 'pagination'; +@import 'taxonomies'; +@import 'projects'; +@import 'clients'; +@import 'bridges'; +@import 'servers'; +@import 'sdks'; +@import 'otwsu'; +@import 'about-bios'; +@import 'legacy-docs'; +@import 'docs'; +@import 'security-hall-of-fame'; +@import 'hosting'; +@import 'try-matrix'; +@import 'support'; +@import 'howitworks'; +@import 'elections'; \ No newline at end of file From e8d04dcedca106bb4801e1bbff1fac987f5508e4 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Mon, 27 May 2024 14:01:03 +0200 Subject: [PATCH 04/21] Manually apply rest of errors and adjust rules for our code --- .stylelintignore | 1 + .stylelintrc.json | 15 ++++++++++++++- sass/_base.scss | 2 +- sass/_support.scss | 20 ++++++++++---------- 4 files changed, 26 insertions(+), 12 deletions(-) create mode 100644 .stylelintignore diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 000000000..8dc6f2d53 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1 @@ +sass/_normalize.scss \ No newline at end of file diff --git a/.stylelintrc.json b/.stylelintrc.json index 77b9e3da6..746f3d364 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,3 +1,16 @@ { - "extends": "stylelint-config-standard-scss" + "extends": "stylelint-config-standard-scss", + "rules": { + "no-descending-specificity": null, + "selector-class-pattern": "[a-zA-Z]+(_[a-zA-Z]+)*", + "selector-id-pattern": "[a-zA-Z]+(_[a-zA-Z]+)*", + "font-family-no-missing-generic-family-keyword": [ + true, + { + "ignoreFontFamilies": [ + "webflow-icons" + ] + } + ] + } } \ No newline at end of file diff --git a/sass/_base.scss b/sass/_base.scss index a149fd3a7..4fe22e433 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -201,7 +201,7 @@ pre table { padding-inline: 2rem; } - padding-bottom: calc(var(--navbar-height)/2); + padding-bottom: calc(var(--navbar-height) / 2); min-height: var(--page-header-height); background-color: #000; overflow: hidden; diff --git a/sass/_support.scss b/sass/_support.scss index bced6fec6..0a849e862 100644 --- a/sass/_support.scss +++ b/sass/_support.scss @@ -4,7 +4,7 @@ gap: 1rem; margin-block-start: 2rem; - @media (width <= 767px) { + @media (width <=767px) { flex-direction: column; } } @@ -20,7 +20,7 @@ font-size: 1.125rem; font-weight: 600; - @media (width <= 767px) { + @media (width <=767px) { justify-content: center; } } @@ -30,7 +30,7 @@ &>div { padding-block: 3rem; - @media (width <= 767px) { + @media (width <=767px) { padding-block: 2rem; } } @@ -132,7 +132,7 @@ img { aspect-ratio: 1/1; object-fit: contain; - width: calc((var(--page-max-width) - 2* var(--supporters-padding-inline) - calc(var(--cards-per-row) - 1)* var(--cards-gap)) / var(--cards-per-row) - 2* var(--supporters-card-hpadding) - 2* var(--supporters-card-border-width)); + width: calc((var(--page-max-width) - 2 * var(--supporters-padding-inline) - calc(var(--cards-per-row) - 1) * var(--cards-gap)) / var(--cards-per-row) - 2 * var(--supporters-card-hpadding) - 2 * var(--supporters-card-border-width)); } } } @@ -147,7 +147,7 @@ flex-direction: row; gap: 3rem; - @media (width <= 767px) { + @media (width <=767px) { flex-direction: column-reverse; } @@ -167,7 +167,7 @@ flex-direction: row; gap: 3rem; - @media (width <= 767px) { + @media (width <=767px) { flex-direction: column; } } @@ -188,7 +188,7 @@ min-width: 0; } - @media (width <= 767px) { + @media (width <=767px) { flex-direction: column-reverse; } } @@ -213,7 +213,7 @@ grid-template-columns: 1fr 1fr; gap: 3rem; - @media (width <= 767px) { + @media (width <=767px) { grid-template-columns: 1fr; } @@ -248,7 +248,7 @@ gap: 2rem; margin-block: 2rem 3rem; - @media (width <= 767px) { + @media (width <=767px) { flex-direction: column; } } @@ -317,4 +317,4 @@ } } } -} +} \ No newline at end of file From 8b4cdbd5dd45e4c5555c34ab1b2f7c9571c30ad7 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Mon, 27 May 2024 14:07:07 +0200 Subject: [PATCH 05/21] Prepare general structure --- sass/components/_index.scss | 0 sass/helpers/_index.scss | 1 + sass/{ => helpers}/_normalize.scss | 0 sass/pages/_index.scss | 1 + sass/pages/_skeleton.scss | 3 +++ sass/style.scss | 12 +++++++++++- 6 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 sass/components/_index.scss create mode 100644 sass/helpers/_index.scss rename sass/{ => helpers}/_normalize.scss (100%) create mode 100644 sass/pages/_index.scss create mode 100644 sass/pages/_skeleton.scss diff --git a/sass/components/_index.scss b/sass/components/_index.scss new file mode 100644 index 000000000..e69de29bb diff --git a/sass/helpers/_index.scss b/sass/helpers/_index.scss new file mode 100644 index 000000000..a75848ee5 --- /dev/null +++ b/sass/helpers/_index.scss @@ -0,0 +1 @@ +@import "normalize" \ No newline at end of file diff --git a/sass/_normalize.scss b/sass/helpers/_normalize.scss similarity index 100% rename from sass/_normalize.scss rename to sass/helpers/_normalize.scss diff --git a/sass/pages/_index.scss b/sass/pages/_index.scss new file mode 100644 index 000000000..080a5b91c --- /dev/null +++ b/sass/pages/_index.scss @@ -0,0 +1 @@ +@import "skeleton"; \ No newline at end of file diff --git a/sass/pages/_skeleton.scss b/sass/pages/_skeleton.scss new file mode 100644 index 000000000..0cd364848 --- /dev/null +++ b/sass/pages/_skeleton.scss @@ -0,0 +1,3 @@ +/** + * This file contains general rules shared across pages like the footer + */ \ No newline at end of file diff --git a/sass/style.scss b/sass/style.scss index 012cf70d6..8d7b8ba53 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,6 +1,16 @@ -@import 'normalize'; +@import 'helpers'; @import 'fonts'; @import 'base'; + +// Anything that is a dedicated component +@import 'components'; + +// All the page specifics +@import 'pages'; + + + +// Old structure @import 'header'; @import 'index'; @import 'blog'; From d60895ca04195736cf572050317e565b9a195979 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Mon, 27 May 2024 14:09:46 +0200 Subject: [PATCH 06/21] Migrate to modern imports --- .stylelintignore | 2 +- sass/_index.scss | 42 ++++++++++++++++----------------- sass/helpers/_index.scss | 2 +- sass/pages/_index.scss | 2 +- sass/style.scss | 50 ++++++++++++++++++++-------------------- 5 files changed, 49 insertions(+), 49 deletions(-) diff --git a/.stylelintignore b/.stylelintignore index 8dc6f2d53..47033ccbe 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1 +1 @@ -sass/_normalize.scss \ No newline at end of file +sass/helpers/_normalize.scss \ No newline at end of file diff --git a/sass/_index.scss b/sass/_index.scss index e20a806e2..6ad5f64bb 100644 --- a/sass/_index.scss +++ b/sass/_index.scss @@ -8,7 +8,7 @@ background-color: #000; background-image: url("/assets/frontpage/hero_dancing_lines.svg"); - @media (width <= 767px) { + @media (width <=767px) { background-image: url("/assets/frontpage/hero_dancing_lines_mobile.svg"); } @@ -31,7 +31,7 @@ margin: 0 auto; text-align: center; - @media (width <= 767px) { + @media (width <=767px) { font-size: 2.125rem; margin: 0 30px; } @@ -53,7 +53,7 @@ bottom: -1vh; right: -50px; - @media (width <= 767px) { + @media (width <=767px) { height: 15vh; } } @@ -67,7 +67,7 @@ bottom: -3vh; right: -50px; - @media (width <= 767px) { + @media (width <=767px) { height: 15vh; } } @@ -81,7 +81,7 @@ bottom: -5vh; right: -50px; - @media (width <= 767px) { + @media (width <=767px) { height: 15vh; } } @@ -95,7 +95,7 @@ bottom: -7vh; right: -50px; - @media (width <= 767px) { + @media (width <=767px) { height: 15vh; } } @@ -105,7 +105,7 @@ background: url("/assets/frontpage/personal-bg.svg"); background-size: 100% 100%; - @media (width <= 59rem) { + @media (width <=59rem) { background-image: url("/assets/frontpage/personal-bg-mobile.svg"); background-size: 100% 241px; padding-inline: 1rem; @@ -125,7 +125,7 @@ max-width: 1000px; margin-inline: auto; - @media (width <= 59rem) { + @media (width <=59rem) { flex-direction: column-reverse; align-items: center; } @@ -144,12 +144,12 @@ font-size: 2.5rem; font-weight: 700; - @media (width <= 59rem) { + @media (width <=59rem) { margin-top: 2rem; text-align: center; } - @media (width <= 767px) { + @media (width <=767px) { font-size: 2.125rem; } } @@ -161,7 +161,7 @@ max-width: 470px; aspect-ratio: 470 / 418; - @media (width <= 59rem) { + @media (width <=59rem) { margin: 0 auto; } } @@ -175,7 +175,7 @@ width: 150%; left: -25%; - @media (width <= 767px) { + @media (width <=767px) { width: 200%; left: -50%; } @@ -221,7 +221,7 @@ margin-inline: auto; padding: 10rem 2rem; - @media (width <= 64rem) { + @media (width <=64rem) { flex-direction: column-reverse; align-items: center; } @@ -234,7 +234,7 @@ max-width: 27.9rem; margin-inline: auto; - @media (width <= 767px) { + @media (width <=767px) { max-width: none; } @@ -244,11 +244,11 @@ font-size: 2.5rem; font-weight: 700; - @media (width <= 64rem) { + @media (width <=64rem) { text-align: center; } - @media (width <= 767px) { + @media (width <=767px) { font-size: 2.125rem; margin: 0 auto 2rem; } @@ -273,7 +273,7 @@ padding: 250px 0 300px; overflow: hidden; - @media (width <= 767px) { + @media (width <=767px) { padding: 100px 35px 435px; } @@ -284,7 +284,7 @@ background-image: url("/assets/frontpage/buildon-bg.svg"); background-size: 100% 100%; - @media (width <= 767px) { + @media (width <=767px) { background-image: url("/assets/frontpage/buildon-bg-mobile.svg"); background-size: 100% 480px; background-position-y: bottom; @@ -362,7 +362,7 @@ justify-content: space-around; margin: 2rem auto; - @media (width <= 767px) { + @media (width <=767px) { margin: 0 auto; } @@ -375,7 +375,7 @@ padding: 1rem 0; width: 22rem; - @media (width <= 767px) { + @media (width <=767px) { width: 100%; } @@ -413,4 +413,4 @@ margin-block-start: 2rem; } } -} +} \ No newline at end of file diff --git a/sass/helpers/_index.scss b/sass/helpers/_index.scss index a75848ee5..3dcfe0954 100644 --- a/sass/helpers/_index.scss +++ b/sass/helpers/_index.scss @@ -1 +1 @@ -@import "normalize" \ No newline at end of file +@use "normalize" \ No newline at end of file diff --git a/sass/pages/_index.scss b/sass/pages/_index.scss index 080a5b91c..2837b1bdf 100644 --- a/sass/pages/_index.scss +++ b/sass/pages/_index.scss @@ -1 +1 @@ -@import "skeleton"; \ No newline at end of file +@use "skeleton"; \ No newline at end of file diff --git a/sass/style.scss b/sass/style.scss index 8d7b8ba53..adfc9fad7 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,33 +1,33 @@ -@import 'helpers'; -@import 'fonts'; -@import 'base'; +@use 'helpers'; +@use 'fonts'; +@use 'base'; // Anything that is a dedicated component -@import 'components'; +@use 'components'; // All the page specifics -@import 'pages'; +@use 'pages'; // Old structure -@import 'header'; -@import 'index'; -@import 'blog'; -@import 'pagination'; -@import 'taxonomies'; -@import 'projects'; -@import 'clients'; -@import 'bridges'; -@import 'servers'; -@import 'sdks'; -@import 'otwsu'; -@import 'about-bios'; -@import 'legacy-docs'; -@import 'docs'; -@import 'security-hall-of-fame'; -@import 'hosting'; -@import 'try-matrix'; -@import 'support'; -@import 'howitworks'; -@import 'elections'; \ No newline at end of file +@use 'header'; +@use 'index'; +@use 'blog'; +@use 'pagination'; +@use 'taxonomies'; +@use 'projects'; +@use 'clients'; +@use 'bridges'; +@use 'servers'; +@use 'sdks'; +@use 'otwsu'; +@use 'about-bios'; +@use 'legacy-docs'; +@use 'docs'; +@use 'security-hall-of-fame'; +@use 'hosting'; +@use 'try-matrix'; +@use 'support'; +@use 'howitworks'; +@use 'elections'; \ No newline at end of file From 09ee7189b0e098fd605550ddb00d67f34b3b2981 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Mon, 27 May 2024 14:25:02 +0200 Subject: [PATCH 07/21] Add media helper, disable @import fully in favor of @use, factor out call-to-action --- .stylelintrc.json | 1 + sass/_base.scss | 63 ++++------------------------ sass/components/_call-to-action.scss | 50 ++++++++++++++++++++++ sass/components/_index.scss | 1 + sass/helpers/_media.scss | 5 +++ 5 files changed, 65 insertions(+), 55 deletions(-) create mode 100644 sass/components/_call-to-action.scss create mode 100644 sass/helpers/_media.scss diff --git a/.stylelintrc.json b/.stylelintrc.json index 746f3d364..e94022ec3 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,6 +4,7 @@ "no-descending-specificity": null, "selector-class-pattern": "[a-zA-Z]+(_[a-zA-Z]+)*", "selector-id-pattern": "[a-zA-Z]+(_[a-zA-Z]+)*", + "scss/partial-no-import": true, "font-family-no-missing-generic-family-keyword": [ true, { diff --git a/sass/_base.scss b/sass/_base.scss index 4fe22e433..17bcee848 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -1,3 +1,5 @@ +@use "./helpers/media"; + :root { --page-max-width: 57rem; --page-with-toc-max-width: 81rem; @@ -123,7 +125,9 @@ ol:last-child { justify-content: space-between; flex-wrap: wrap; - @media (width <= 767px) { + + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ + @media (width <=media.$mobile) { flex-direction: column; text-align: center; } @@ -197,7 +201,7 @@ pre table { justify-content: center; padding-inline: 5.625rem; - @media (width <= 767px) { + @media (width <=767px) { padding-inline: 2rem; } @@ -210,7 +214,7 @@ pre table { background-position: bottom right; background-repeat: no-repeat; - @media (width <= 767px) { + @media (width <=767px) { background-size: 250% 100%; background-position-x: -533px; } @@ -332,55 +336,4 @@ a>code { } } } -} - -.call-to-action { - background-color: #000; - border: 2px solid #000; - color: #fff; - font-size: 1.125rem; - font-weight: 600; - border-radius: 1000px; - padding: .6em 2em; - - &.inverted { - border: 2px solid #fff; - background-color: #fff; - color: #000; - - &.secondary { - background-color: #000; - color: #fff; - - &:hover { - background-color: #fff; - color: #000 - } - } - } - - &.secondary { - background-color: #fff; - color: #000; - - &:hover { - background-color: #000; - color: #fff; - } - } -} - -.cta-row { - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: .5rem 1rem; -} - -.cta-col { - display: flex; - flex-direction: column; - justify-content: center; - row-gap: 1rem; - align-items: center; -} +} \ No newline at end of file diff --git a/sass/components/_call-to-action.scss b/sass/components/_call-to-action.scss new file mode 100644 index 000000000..4d0cb61e8 --- /dev/null +++ b/sass/components/_call-to-action.scss @@ -0,0 +1,50 @@ +.call-to-action { + background-color: #000; + border: 2px solid #000; + color: #fff; + font-size: 1.125rem; + font-weight: 600; + border-radius: 1000px; + padding: .6em 2em; + + &.inverted { + border: 2px solid #fff; + background-color: #fff; + color: #000; + + &.secondary { + background-color: #000; + color: #fff; + + &:hover { + background-color: #fff; + color: #000 + } + } + } + + &.secondary { + background-color: #fff; + color: #000; + + &:hover { + background-color: #000; + color: #fff; + } + } +} + +.cta-row { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: .5rem 1rem; +} + +.cta-col { + display: flex; + flex-direction: column; + justify-content: center; + row-gap: 1rem; + align-items: center; +} \ No newline at end of file diff --git a/sass/components/_index.scss b/sass/components/_index.scss index e69de29bb..325e0b0aa 100644 --- a/sass/components/_index.scss +++ b/sass/components/_index.scss @@ -0,0 +1 @@ +@use "call-to-action"; \ No newline at end of file diff --git a/sass/helpers/_media.scss b/sass/helpers/_media.scss new file mode 100644 index 000000000..9697662e1 --- /dev/null +++ b/sass/helpers/_media.scss @@ -0,0 +1,5 @@ +/** + * Defines some variables for media queries + */ + +$mobile: 767px \ No newline at end of file From 4201dc86d9147d4fc8b1d48d63136278d57c2cb6 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Mon, 27 May 2024 14:29:36 +0200 Subject: [PATCH 08/21] Factor out code block and youtube specific css --- sass/_base.scss | 87 ----------------------------------- sass/components/_code.scss | 46 ++++++++++++++++++ sass/components/_index.scss | 4 +- sass/components/_youtube.scss | 47 +++++++++++++++++++ 4 files changed, 96 insertions(+), 88 deletions(-) create mode 100644 sass/components/_code.scss create mode 100644 sass/components/_youtube.scss diff --git a/sass/_base.scss b/sass/_base.scss index 17bcee848..5ab8df714 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -163,37 +163,6 @@ ol:last-child { } } -pre { - padding: 1rem; - overflow: auto; - border-radius: 4px; -} - -// The line numbers already provide some kind of left/right padding -pre[data-linenos] { - padding: 1rem 0; -} - -pre table td { - padding: 0; -} - -// The line number cells -pre table td:nth-of-type(1) { - text-align: center; - user-select: none; -} - -pre mark { - display: block; - background-color: rgb(254 252 232 / 90%); -} - -pre table { - width: 100%; - border-collapse: collapse; -} - /* The black block on pages at the top. */ .page-header { display: flex; @@ -240,18 +209,6 @@ pre table { } } -:not(pre)>code { - color: #f54029; - border: 1px solid #f54029; - border-radius: 4px; - padding: 0 .4rem; -} - -a>code { - border-color: var(--color-link); - color: var(--color-link); -} - .page_card { background-color: #000; border-radius: 16px; @@ -292,48 +249,4 @@ a>code { transform: rotate(-90deg); filter: invert(1); } -} - -.youtube_placeholder { - display: flex; - flex-direction: column; - justify-content: center; - aspect-ratio: 16/9; - width: 100%; - background-color: #333; - - div { - display: flex; - flex-direction: column; - color: #fff; - padding: 1.5rem; - gap: 1.5rem; - - img { - margin-inline: auto; - } - - p { - max-width: 30rem; - text-align: center; - margin-inline: auto; - } - - button { - max-width: fit-content; - margin-inline: auto; - padding: .5rem 1rem; - border-radius: 9999px; - background-color: #fff; - border: 1px solid transparent; - color: #000; - cursor: pointer; - - &:hover { - border: 1px solid #fff; - color: #fff; - background-color: #333; - } - } - } } \ No newline at end of file diff --git a/sass/components/_code.scss b/sass/components/_code.scss new file mode 100644 index 000000000..5e8d4474f --- /dev/null +++ b/sass/components/_code.scss @@ -0,0 +1,46 @@ +/** + * This is anything relevant to codeblocks + */ + +pre { + padding: 1rem; + overflow: auto; + border-radius: 4px; +} + +// The line numbers already provide some kind of left/right padding +pre[data-linenos] { + padding: 1rem 0; +} + +pre table td { + padding: 0; +} + +// The line number cells +pre table td:nth-of-type(1) { + text-align: center; + user-select: none; +} + +pre mark { + display: block; + background-color: rgb(254 252 232 / 90%); +} + +pre table { + width: 100%; + border-collapse: collapse; +} + +:not(pre)>code { + color: #f54029; + border: 1px solid #f54029; + border-radius: 4px; + padding: 0 .4rem; +} + +a>code { + border-color: var(--color-link); + color: var(--color-link); +} \ No newline at end of file diff --git a/sass/components/_index.scss b/sass/components/_index.scss index 325e0b0aa..1adb5e117 100644 --- a/sass/components/_index.scss +++ b/sass/components/_index.scss @@ -1 +1,3 @@ -@use "call-to-action"; \ No newline at end of file +@use "code"; +@use "call-to-action"; +@use "youtube"; \ No newline at end of file diff --git a/sass/components/_youtube.scss b/sass/components/_youtube.scss new file mode 100644 index 000000000..0ef096df1 --- /dev/null +++ b/sass/components/_youtube.scss @@ -0,0 +1,47 @@ +/** + * These are specifics to the youtube banner we use in the blog + */ + +.youtube_placeholder { + display: flex; + flex-direction: column; + justify-content: center; + aspect-ratio: 16/9; + width: 100%; + background-color: #333; + + div { + display: flex; + flex-direction: column; + color: #fff; + padding: 1.5rem; + gap: 1.5rem; + + img { + margin-inline: auto; + } + + p { + max-width: 30rem; + text-align: center; + margin-inline: auto; + } + + button { + max-width: fit-content; + margin-inline: auto; + padding: .5rem 1rem; + border-radius: 9999px; + background-color: #fff; + border: 1px solid transparent; + color: #000; + cursor: pointer; + + &:hover { + border: 1px solid #fff; + color: #fff; + background-color: #333; + } + } + } +} \ No newline at end of file From df4200249c155d00c7539f424fff712329e52b17 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Mon, 27 May 2024 14:40:54 +0200 Subject: [PATCH 09/21] Factor out footer and page-hero --- sass/_base.scss | 110 +----------------- sass/_support.scss | 2 +- sass/components/_footer.scss | 63 ++++++++++ sass/components/_index.scss | 2 + sass/components/_page-hero.scss | 48 ++++++++ .../ecosystem/bridge_implementations.html | 2 +- templates/ecosystem/bridges.html | 2 +- templates/ecosystem/clients.html | 2 +- templates/ecosystem/hosting.html | 2 +- templates/ecosystem/integrations.html | 2 +- templates/ecosystem/sdks.html | 2 +- templates/ecosystem/servers.html | 2 +- templates/membership.html | 2 +- templates/support.html | 2 +- templates/try-matrix.html | 2 +- 15 files changed, 125 insertions(+), 120 deletions(-) create mode 100644 sass/components/_footer.scss create mode 100644 sass/components/_page-hero.scss diff --git a/sass/_base.scss b/sass/_base.scss index 5ab8df714..6d4c94937 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -13,7 +13,7 @@ } --color-link: #0098d4; - --page-header-height: 15rem; + --page-hero-height: 15rem; --borders-color: #ddd; } @@ -101,114 +101,6 @@ ol:last-child { max-width: var(--page-with-toc-max-width); } -.site-footer { - position: relative; - z-index: 1; - background-color: #000; - width: 100%; - display: flex; - align-items: center; - flex-direction: column; - padding: 30px 40px; - - a { - color: #999; - text-decoration: none; - margin-inline: .8rem; - } - - .internal-links { - width: 100%; - padding-bottom: 20px; - max-width: 960px; - display: flex; - justify-content: space-between; - flex-wrap: wrap; - - - /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ - @media (width <=media.$mobile) { - flex-direction: column; - text-align: center; - } - } - - .external-links { - display: flex; - width: 100%; - max-width: 960px; - justify-content: center; - - a { - max-width: 100%; - display: inline-block; - - img { - margin-inline: .625rem; - } - - img:hover { - filter: brightness(0) invert(1); - } - } - } - - a:hover { - color: #fff; - } - - p { - margin-top: 20px; - color: #999; - } -} - -/* The black block on pages at the top. */ -.page-header { - display: flex; - flex-direction: column; - justify-content: center; - padding-inline: 5.625rem; - - @media (width <=767px) { - padding-inline: 2rem; - } - - padding-bottom: calc(var(--navbar-height) / 2); - min-height: var(--page-header-height); - background-color: #000; - overflow: hidden; - background-image: url("/assets/page-header-bg.svg"); - background-size: 90% 100%; - background-position: bottom right; - background-repeat: no-repeat; - - @media (width <=767px) { - background-size: 250% 100%; - background-position-x: -533px; - } - - .hero-block { - h1 { - font-style: normal; - font-weight: 700; - font-size: 2.8rem; - line-height: 120%; - color: #FFF; - } - - p { - font-style: normal; - font-size: 1.4rem; - line-height: 120%; - display: flex; - align-items: center; - color: #FFF; - word-wrap: normal; - } - } -} - .page_card { background-color: #000; border-radius: 16px; diff --git a/sass/_support.scss b/sass/_support.scss index 0a849e862..c372c498f 100644 --- a/sass/_support.scss +++ b/sass/_support.scss @@ -1,4 +1,4 @@ -.page-header.support { +.page-hero.support { .donate-row { display: flex; gap: 1rem; diff --git a/sass/components/_footer.scss b/sass/components/_footer.scss new file mode 100644 index 000000000..a17caf51c --- /dev/null +++ b/sass/components/_footer.scss @@ -0,0 +1,63 @@ +@use "../helpers/media"; + +.site-footer { + position: relative; + z-index: 1; + background-color: #000; + width: 100%; + display: flex; + align-items: center; + flex-direction: column; + padding: 30px 40px; + + a { + color: #999; + text-decoration: none; + margin-inline: .8rem; + } + + .internal-links { + width: 100%; + padding-bottom: 20px; + max-width: 960px; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + + + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ + @media (width <=media.$mobile) { + flex-direction: column; + text-align: center; + } + } + + .external-links { + display: flex; + width: 100%; + max-width: 960px; + justify-content: center; + + a { + max-width: 100%; + display: inline-block; + + img { + margin-inline: .625rem; + } + + img:hover { + filter: brightness(0) invert(1); + } + } + } + + a:hover { + color: #fff; + } + + p { + margin-top: 20px; + color: #999; + } +} \ No newline at end of file diff --git a/sass/components/_index.scss b/sass/components/_index.scss index 1adb5e117..48a3fe1cb 100644 --- a/sass/components/_index.scss +++ b/sass/components/_index.scss @@ -1,3 +1,5 @@ @use "code"; +@use "footer"; +@use "page-hero"; @use "call-to-action"; @use "youtube"; \ No newline at end of file diff --git a/sass/components/_page-hero.scss b/sass/components/_page-hero.scss new file mode 100644 index 000000000..41808d019 --- /dev/null +++ b/sass/components/_page-hero.scss @@ -0,0 +1,48 @@ +@use "../helpers/media"; + +/* The black block on pages at the top. */ +.page-hero { + display: flex; + flex-direction: column; + justify-content: center; + padding-inline: 5.625rem; + + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ + @media (width <=media.$mobile) { + padding-inline: 2rem; + } + + padding-bottom: calc(var(--navbar-height) / 2); + min-height: var(--page-hero-height); + background-color: #000; + overflow: hidden; + background-image: url("/assets/page-header-bg.svg"); + background-size: 90% 100%; + background-position: bottom right; + background-repeat: no-repeat; + + @media (width <=media.$mobile) { + background-size: 250% 100%; + background-position-x: -533px; + } + + .hero-block { + h1 { + font-style: normal; + font-weight: 700; + font-size: 2.8rem; + line-height: 120%; + color: #FFF; + } + + p { + font-style: normal; + font-size: 1.4rem; + line-height: 120%; + display: flex; + align-items: center; + color: #FFF; + word-wrap: normal; + } + } +} \ No newline at end of file diff --git a/templates/ecosystem/bridge_implementations.html b/templates/ecosystem/bridge_implementations.html index f7b3f0881..88d8e7e45 100644 --- a/templates/ecosystem/bridge_implementations.html +++ b/templates/ecosystem/bridge_implementations.html @@ -1,6 +1,6 @@ {% extends "section.html" %} {% block content %} -
+

{{ section.title }}

All the {{ section.title }} bridges

diff --git a/templates/ecosystem/bridges.html b/templates/ecosystem/bridges.html index 9742dd49c..a065fc401 100644 --- a/templates/ecosystem/bridges.html +++ b/templates/ecosystem/bridges.html @@ -3,7 +3,7 @@ {% endblock head_extra %} {% block content %} -
+

{{ section.title }}

{{ section.extra.summary }}

diff --git a/templates/ecosystem/clients.html b/templates/ecosystem/clients.html index 3c5811878..d74299f7c 100644 --- a/templates/ecosystem/clients.html +++ b/templates/ecosystem/clients.html @@ -15,7 +15,7 @@ {% set_global licences = licences | concat(with=client.extra.licence) %} {% endfor %} {% set licences = licences | unique | sort %} -
+

{{ section.title }}

{{ section.extra.summary }}

diff --git a/templates/ecosystem/hosting.html b/templates/ecosystem/hosting.html index f89f6245d..8ca885d6e 100644 --- a/templates/ecosystem/hosting.html +++ b/templates/ecosystem/hosting.html @@ -3,7 +3,7 @@ {% endblock head_extra %} {% block content %} -
+

{{ page.title }}

{{ page.extra.summary }}

diff --git a/templates/ecosystem/integrations.html b/templates/ecosystem/integrations.html index 48c48d3f6..5752b69c1 100644 --- a/templates/ecosystem/integrations.html +++ b/templates/ecosystem/integrations.html @@ -1,6 +1,6 @@ {% extends "page.html" %} {% block content %} -
+

{{ page.title }}

{{ page.extra.summary }}

diff --git a/templates/ecosystem/sdks.html b/templates/ecosystem/sdks.html index da51ec3c0..a2df00147 100644 --- a/templates/ecosystem/sdks.html +++ b/templates/ecosystem/sdks.html @@ -8,7 +8,7 @@ {% endblock head_extra%} {% block content %} -
+

{{ page.title }}

{{ page.extra.summary }}

diff --git a/templates/ecosystem/servers.html b/templates/ecosystem/servers.html index 5e3a8f045..7c9a9ed00 100644 --- a/templates/ecosystem/servers.html +++ b/templates/ecosystem/servers.html @@ -7,7 +7,7 @@ {% endblock head_extra%} {% block content %} -
+

{{ page.title }}

{{ page.extra.summary }}

diff --git a/templates/membership.html b/templates/membership.html index a4a2d1c6e..3a1a4cd42 100644 --- a/templates/membership.html +++ b/templates/membership.html @@ -12,7 +12,7 @@ {% endblock head_extra %} {% block content %} -
+

{{ page.title }}

{{ page.extra.summary }}

diff --git a/templates/support.html b/templates/support.html index 3be00368a..6320608fb 100644 --- a/templates/support.html +++ b/templates/support.html @@ -4,7 +4,7 @@ {% endblock head_extra %} {% block content %} {% set supporters = load_data(path="content/support/supporters.toml") %} -
+

{{ section.title }}

{{ section.extra.summary }}

diff --git a/templates/try-matrix.html b/templates/try-matrix.html index 66201075f..6bce13a46 100644 --- a/templates/try-matrix.html +++ b/templates/try-matrix.html @@ -1,6 +1,6 @@ {% extends "page.html" %} {% block content %} -
+

{{ page.title }}

{{ page.extra.summary }}

From 732e4a9819384105c8f32ff0abc16a8a4e754581 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Mon, 27 May 2024 14:47:12 +0200 Subject: [PATCH 10/21] Factor out page-card --- sass/_base.scss | 42 ------------------------------ sass/components/_index.scss | 3 ++- sass/components/_page-card.scss | 45 +++++++++++++++++++++++++++++++++ 3 files changed, 47 insertions(+), 43 deletions(-) create mode 100644 sass/components/_page-card.scss diff --git a/sass/_base.scss b/sass/_base.scss index 6d4c94937..7c4a6ae45 100644 --- a/sass/_base.scss +++ b/sass/_base.scss @@ -99,46 +99,4 @@ ol:last-child { .content.with-sidebar { max-width: var(--page-with-toc-max-width); -} - -.page_card { - background-color: #000; - border-radius: 16px; - background-image: url("/assets/frontpage/hero_dancing_lines.svg"); - background-size: 100% 100%; - background-repeat: no-repeat; - padding: 1rem; - max-width: 23rem; - - .wrapper { - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .card_content { - color: #fff; - - h4 { - font-size: 1.125rem; - font-weight: 700; - padding: 0; - margin: 0 0 1rem; - } - - p { - font-size: .9rem; - } - } - - .arrow { - background-image: url("/assets/down-arrow.svg"); - background-repeat: no-repeat; - background-size: 100% 100%; - width: 3rem; - height: 3rem; - margin: auto 0 auto .5rem; - transform: rotate(-90deg); - filter: invert(1); - } } \ No newline at end of file diff --git a/sass/components/_index.scss b/sass/components/_index.scss index 48a3fe1cb..5e20a1a9d 100644 --- a/sass/components/_index.scss +++ b/sass/components/_index.scss @@ -2,4 +2,5 @@ @use "footer"; @use "page-hero"; @use "call-to-action"; -@use "youtube"; \ No newline at end of file +@use "youtube"; +@use "page-card"; \ No newline at end of file diff --git a/sass/components/_page-card.scss b/sass/components/_page-card.scss new file mode 100644 index 000000000..fa05f2174 --- /dev/null +++ b/sass/components/_page-card.scss @@ -0,0 +1,45 @@ +/** + * These are link cards commonly used on the docs page + */ + +.page_card { + background-color: #000; + border-radius: 16px; + background-image: url("/assets/frontpage/hero_dancing_lines.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + padding: 1rem; + max-width: 23rem; + + .wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .card_content { + color: #fff; + + h4 { + font-size: 1.125rem; + font-weight: 700; + padding: 0; + margin: 0 0 1rem; + } + + p { + font-size: .9rem; + } + } + + .arrow { + background-image: url("/assets/down-arrow.svg"); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 3rem; + height: 3rem; + margin: auto 0 auto .5rem; + transform: rotate(-90deg); + filter: invert(1); + } +} \ No newline at end of file From 4c34e7a403476e64b0abaa9ceb27fba232b61d60 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Mon, 27 May 2024 14:53:18 +0200 Subject: [PATCH 11/21] Move header and index page to new loactions --- sass/{ => components}/_header.scss | 30 +++++++++++--------- sass/components/_index.scss | 1 + sass/pages/_index.scss | 2 +- sass/{_index.scss => pages/_index_page.scss} | 0 sass/pages/_skeleton.scss | 3 -- sass/style.scss | 2 -- 6 files changed, 18 insertions(+), 20 deletions(-) rename sass/{ => components}/_header.scss (86%) rename sass/{_index.scss => pages/_index_page.scss} (100%) delete mode 100644 sass/pages/_skeleton.scss diff --git a/sass/_header.scss b/sass/components/_header.scss similarity index 86% rename from sass/_header.scss rename to sass/components/_header.scss index d403e5def..94d546458 100644 --- a/sass/_header.scss +++ b/sass/components/_header.scss @@ -1,3 +1,5 @@ +@use "../helpers/media"; + .site-header { position: fixed; z-index: 1000; @@ -15,11 +17,11 @@ color: #fff; background-color: #000; - @media screen and (width >= 768px) { + @media screen and (width >=768px) { padding-right: 10px; } - @media screen and (width >= 1000px) { + @media screen and (width >=1000px) { padding-right: 20px; } @@ -43,7 +45,7 @@ display: flex; align-items: center; - @media screen and (width >= 768px) { + @media screen and (width >=media.$mobile) { display: none; } } @@ -51,7 +53,7 @@ nav { display: flex; - @media screen and (width <= 767px) { + @media screen and (width <=media.$mobile) { position: fixed; z-index: 800; top: 5.937rem; @@ -63,7 +65,7 @@ overflow-y: auto; } - @media screen and (width >= 768px) { + @media screen and (width >=media.$mobile) { align-items: center; } @@ -71,7 +73,7 @@ color: #fff; font-size: 1.125rem; - @media screen and (width <= 767px) { + @media screen and (width <=media.$mobile) { font-size: 1.5rem; } @@ -92,12 +94,12 @@ padding-inline: clamp(1em, 3dvw, 2em); margin-inline: .5rem; - @media screen and (width <= 767px) { + @media screen and (width <=media.$mobile) { margin-top: 1.2rem; text-align: center; } - @media screen and (width >= 768px) { + @media screen and (width >=media.$mobile) { &:not(:last-child) { margin-right: 12px; } @@ -109,7 +111,7 @@ opacity: 0; position: absolute; - @media screen and (width <= 767px) { + @media screen and (width <=media.$mobile) { &:not(:checked)~.section-submenu-wrap { display: none; } @@ -137,7 +139,7 @@ } .submenu-title { - @media screen and (width <= 767px) { + @media screen and (width <=media.$mobile) { display: flex; flex-direction: row; gap: 1rem; @@ -157,7 +159,7 @@ } } - @media screen and (width >= 768px) { + @media screen and (width >=media.$mobile) { .section-wrap { position: relative; align-self: stretch; @@ -185,7 +187,7 @@ } } - @media screen and (width <= 767px) { + @media screen and (width <=media.$mobile) { .section-submenu { padding-left: 1em; display: flex; @@ -205,7 +207,7 @@ #site-header-dropdown-checkbox { display: none; - @media screen and (width <= 767px) { + @media screen and (width <=media.$mobile) { &:checked~.dropdown-button { background-color: #000; } @@ -221,4 +223,4 @@ display: none; } } -} +} \ No newline at end of file diff --git a/sass/components/_index.scss b/sass/components/_index.scss index 5e20a1a9d..31f9d0b06 100644 --- a/sass/components/_index.scss +++ b/sass/components/_index.scss @@ -1,5 +1,6 @@ @use "code"; @use "footer"; +@use "header"; @use "page-hero"; @use "call-to-action"; @use "youtube"; diff --git a/sass/pages/_index.scss b/sass/pages/_index.scss index 2837b1bdf..f056027e2 100644 --- a/sass/pages/_index.scss +++ b/sass/pages/_index.scss @@ -1 +1 @@ -@use "skeleton"; \ No newline at end of file +@use "index_page"; \ No newline at end of file diff --git a/sass/_index.scss b/sass/pages/_index_page.scss similarity index 100% rename from sass/_index.scss rename to sass/pages/_index_page.scss diff --git a/sass/pages/_skeleton.scss b/sass/pages/_skeleton.scss deleted file mode 100644 index 0cd364848..000000000 --- a/sass/pages/_skeleton.scss +++ /dev/null @@ -1,3 +0,0 @@ -/** - * This file contains general rules shared across pages like the footer - */ \ No newline at end of file diff --git a/sass/style.scss b/sass/style.scss index adfc9fad7..9ea4b7096 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -11,8 +11,6 @@ // Old structure -@use 'header'; -@use 'index'; @use 'blog'; @use 'pagination'; @use 'taxonomies'; From aa86b3c00443da01ed5aa7163eeeba0d3ef372bf Mon Sep 17 00:00:00 2001 From: MTRNord Date: Tue, 28 May 2024 10:03:47 +0200 Subject: [PATCH 12/21] Add missing stylelint disable rules --- sass/components/_header.scss | 12 ++++++++++++ sass/components/_page-hero.scss | 1 + 2 files changed, 13 insertions(+) diff --git a/sass/components/_header.scss b/sass/components/_header.scss index 94d546458..710e79718 100644 --- a/sass/components/_header.scss +++ b/sass/components/_header.scss @@ -45,6 +45,7 @@ display: flex; align-items: center; + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width >=media.$mobile) { display: none; } @@ -53,6 +54,7 @@ nav { display: flex; + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width <=media.$mobile) { position: fixed; z-index: 800; @@ -65,6 +67,7 @@ overflow-y: auto; } + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width >=media.$mobile) { align-items: center; } @@ -73,6 +76,7 @@ color: #fff; font-size: 1.125rem; + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width <=media.$mobile) { font-size: 1.5rem; } @@ -94,11 +98,13 @@ padding-inline: clamp(1em, 3dvw, 2em); margin-inline: .5rem; + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width <=media.$mobile) { margin-top: 1.2rem; text-align: center; } + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width >=media.$mobile) { &:not(:last-child) { margin-right: 12px; @@ -111,6 +117,7 @@ opacity: 0; position: absolute; + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width <=media.$mobile) { &:not(:checked)~.section-submenu-wrap { display: none; @@ -139,6 +146,8 @@ } .submenu-title { + + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width <=media.$mobile) { display: flex; flex-direction: row; @@ -159,6 +168,7 @@ } } + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width >=media.$mobile) { .section-wrap { position: relative; @@ -187,6 +197,7 @@ } } + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width <=media.$mobile) { .section-submenu { padding-left: 1em; @@ -207,6 +218,7 @@ #site-header-dropdown-checkbox { display: none; + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width <=media.$mobile) { &:checked~.dropdown-button { background-color: #000; diff --git a/sass/components/_page-hero.scss b/sass/components/_page-hero.scss index 41808d019..3a902d8cd 100644 --- a/sass/components/_page-hero.scss +++ b/sass/components/_page-hero.scss @@ -21,6 +21,7 @@ background-position: bottom right; background-repeat: no-repeat; + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media (width <=media.$mobile) { background-size: 250% 100%; background-position-x: -533px; From 4661b2d53c795f56c42a4f7a88ab7193360df96c Mon Sep 17 00:00:00 2001 From: MTRNord Date: Tue, 28 May 2024 10:06:16 +0200 Subject: [PATCH 13/21] Move blog specific scss to new location and update the media queries to use the helper variables --- sass/helpers/_media.scss | 3 ++- sass/{ => pages}/_blog.scss | 13 +++++++++---- sass/pages/_index.scss | 3 ++- sass/style.scss | 1 - 4 files changed, 13 insertions(+), 7 deletions(-) rename sass/{ => pages}/_blog.scss (91%) diff --git a/sass/helpers/_media.scss b/sass/helpers/_media.scss index 9697662e1..5978f1b59 100644 --- a/sass/helpers/_media.scss +++ b/sass/helpers/_media.scss @@ -2,4 +2,5 @@ * Defines some variables for media queries */ -$mobile: 767px \ No newline at end of file +$mobile: 767px; +$tablet: 1023px; \ No newline at end of file diff --git a/sass/_blog.scss b/sass/pages/_blog.scss similarity index 91% rename from sass/_blog.scss rename to sass/pages/_blog.scss index ee6be6265..64d1f94a0 100644 --- a/sass/_blog.scss +++ b/sass/pages/_blog.scss @@ -1,4 +1,6 @@ -article.post { +@use "../helpers/media"; + +article .post { width: 100%; word-break: break-word; @@ -88,7 +90,8 @@ article.post { background-color: #000; border-radius: 16px; - @media (width <= 767px) { + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ + @media (width <=media.$mobile) { grid-template-columns: auto; grid-template-rows: 10rem auto; } @@ -133,7 +136,9 @@ article.post { } aside { - @media (width <= 1023px) { + + /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ + @media (width <=media.$tablet) { display: none; } @@ -195,4 +200,4 @@ h3 a { .footnote-definition>p { display: inline; -} +} \ No newline at end of file diff --git a/sass/pages/_index.scss b/sass/pages/_index.scss index f056027e2..30bcba57f 100644 --- a/sass/pages/_index.scss +++ b/sass/pages/_index.scss @@ -1 +1,2 @@ -@use "index_page"; \ No newline at end of file +@use "index_page"; +@use "blog"; \ No newline at end of file diff --git a/sass/style.scss b/sass/style.scss index 9ea4b7096..d6a7dec01 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -11,7 +11,6 @@ // Old structure -@use 'blog'; @use 'pagination'; @use 'taxonomies'; @use 'projects'; From 5affb8e3e332690b7f4e77834b5feac79f31b449 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Tue, 28 May 2024 10:11:08 +0200 Subject: [PATCH 14/21] Make pagination a component --- sass/components/_index.scss | 3 ++- sass/{ => components}/_pagination.scss | 0 sass/style.scss | 1 - 3 files changed, 2 insertions(+), 2 deletions(-) rename sass/{ => components}/_pagination.scss (100%) diff --git a/sass/components/_index.scss b/sass/components/_index.scss index 31f9d0b06..2fc89f3ff 100644 --- a/sass/components/_index.scss +++ b/sass/components/_index.scss @@ -4,4 +4,5 @@ @use "page-hero"; @use "call-to-action"; @use "youtube"; -@use "page-card"; \ No newline at end of file +@use "page-card"; +@use "pagination"; \ No newline at end of file diff --git a/sass/_pagination.scss b/sass/components/_pagination.scss similarity index 100% rename from sass/_pagination.scss rename to sass/components/_pagination.scss diff --git a/sass/style.scss b/sass/style.scss index d6a7dec01..e0a0d637c 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -11,7 +11,6 @@ // Old structure -@use 'pagination'; @use 'taxonomies'; @use 'projects'; @use 'clients'; From 842e0f3e781f51b61935fe3155621346c901cb78 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Thu, 30 May 2024 21:53:26 +0200 Subject: [PATCH 15/21] Move taxonomies to components --- sass/components/_index.scss | 3 ++- sass/{ => components}/_taxonomies.scss | 0 sass/style.scss | 1 - 3 files changed, 2 insertions(+), 2 deletions(-) rename sass/{ => components}/_taxonomies.scss (100%) diff --git a/sass/components/_index.scss b/sass/components/_index.scss index 2fc89f3ff..92fae9462 100644 --- a/sass/components/_index.scss +++ b/sass/components/_index.scss @@ -5,4 +5,5 @@ @use "call-to-action"; @use "youtube"; @use "page-card"; -@use "pagination"; \ No newline at end of file +@use "pagination"; +@use "taxonomies"; \ No newline at end of file diff --git a/sass/_taxonomies.scss b/sass/components/_taxonomies.scss similarity index 100% rename from sass/_taxonomies.scss rename to sass/components/_taxonomies.scss diff --git a/sass/style.scss b/sass/style.scss index e0a0d637c..e760c4b24 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -11,7 +11,6 @@ // Old structure -@use 'taxonomies'; @use 'projects'; @use 'clients'; @use 'bridges'; From 6fcb3125185526a990b634b0fc141343d2fb0525 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Tue, 4 Jun 2024 10:59:30 +0200 Subject: [PATCH 16/21] Prepare helper for colors --- sass/components/_header.scss | 21 +++++++++++---------- sass/helpers/_colors.scss | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 10 deletions(-) create mode 100644 sass/helpers/_colors.scss diff --git a/sass/components/_header.scss b/sass/components/_header.scss index 710e79718..467831b02 100644 --- a/sass/components/_header.scss +++ b/sass/components/_header.scss @@ -1,4 +1,5 @@ @use "../helpers/media"; +@use "../helpers/colors"; .site-header { position: fixed; @@ -14,8 +15,8 @@ align-items: center; margin-bottom: 0; font-size: 1.125rem; - color: #fff; - background-color: #000; + color: colors.$white; + background-color: colors.$black; @media screen and (width >=768px) { padding-right: 10px; @@ -84,17 +85,17 @@ padding: var(--header-vertical-padding) var(--header-padding); &:hover { - color: #0082f3; + color: colors.$linkHoverBlue; } &.current { - color: #0082f3; + color: colors.$linkHoverBlue; } &.primary { border-radius: 60px; background-color: #fff; - color: #000 !important; + color: colors.$linkBlue !important; padding-inline: clamp(1em, 3dvw, 2em); margin-inline: .5rem; @@ -156,7 +157,7 @@ } label:hover { - color: #0082f3; + color: colors.$linkHoverBlue; } margin: auto 0; @@ -187,12 +188,12 @@ } .section-submenu { - background: #fff; - border: 1px solid #f4f4f4; + background: colors.$white; + border: 1px solid colors.$submenuBorderColor; border-radius: 6px; a { - color: #000; + color: colors.$black; } } } @@ -221,7 +222,7 @@ /* stylelint-disable-next-line media-feature-name-no-unknown -- namespaced imports make stylelint rule unhappy */ @media screen and (width <=media.$mobile) { &:checked~.dropdown-button { - background-color: #000; + background-color: colors.$black; } &:checked~.page-overlay { diff --git a/sass/helpers/_colors.scss b/sass/helpers/_colors.scss new file mode 100644 index 000000000..4c56fd583 --- /dev/null +++ b/sass/helpers/_colors.scss @@ -0,0 +1,32 @@ +$black: #000; +$white: #fff; +$chipGrey: #e9e9e9; +$footerGrey: #999999; +$submenuBorderColor: #f4f4f4; + +// Links +$linkBlue: #0098d4; +$linkHoverBlue: #0082f3; + +// Stable Maturity Badge Colors +$stableBadgeBG: #dff6d5; +$stableBadgeBorder: #245c0c; +$stableBadgeText: #245c0c; + +// Beta Maturity Badge Colors +$betaBadgeBG: #f6e7d5; +$betaBadgeBorder: #6f420f; +$betaBadgeText: #6f420f; + +// Alpha Maturity Badge Colors +$alphaBadgeBG: #f6d5d5; +$alphaBadgeBorder: #8b1212; +$alphaBadgeText: #8b1212; + +// Obsolete Maturity Badge Colors +$obsoleteBadgeBG: #e6e6e6; +$obsoleteBadgeBorder: #4a4a4a; +$obsoleteBadgeText: #4a4a4a; + +// Codeblock Color +$codeblock: #f54029; \ No newline at end of file From 224a5e70751dd83c1d2f89464b5e6c287041c2bf Mon Sep 17 00:00:00 2001 From: MTRNord Date: Tue, 4 Jun 2024 11:06:58 +0200 Subject: [PATCH 17/21] Fix stylelint complaints --- sass/components/_header.scss | 10 +++++----- sass/helpers/_colors.scss | 34 +++++++++++++++++----------------- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/sass/components/_header.scss b/sass/components/_header.scss index 467831b02..1065ab833 100644 --- a/sass/components/_header.scss +++ b/sass/components/_header.scss @@ -85,17 +85,17 @@ padding: var(--header-vertical-padding) var(--header-padding); &:hover { - color: colors.$linkHoverBlue; + color: colors.$link-hover-blue; } &.current { - color: colors.$linkHoverBlue; + color: colors.$link-hover-blue; } &.primary { border-radius: 60px; background-color: #fff; - color: colors.$linkBlue !important; + color: colors.$link-blue !important; padding-inline: clamp(1em, 3dvw, 2em); margin-inline: .5rem; @@ -157,7 +157,7 @@ } label:hover { - color: colors.$linkHoverBlue; + color: colors.$link-hover-blue; } margin: auto 0; @@ -189,7 +189,7 @@ .section-submenu { background: colors.$white; - border: 1px solid colors.$submenuBorderColor; + border: 1px solid colors.$submenu-border-color; border-radius: 6px; a { diff --git a/sass/helpers/_colors.scss b/sass/helpers/_colors.scss index 4c56fd583..a26e3839e 100644 --- a/sass/helpers/_colors.scss +++ b/sass/helpers/_colors.scss @@ -1,32 +1,32 @@ $black: #000; $white: #fff; -$chipGrey: #e9e9e9; -$footerGrey: #999999; -$submenuBorderColor: #f4f4f4; +$chip-grey: #e9e9e9; +$footer-grey: #999; +$submenu-border-color: #f4f4f4; // Links -$linkBlue: #0098d4; -$linkHoverBlue: #0082f3; +$link-blue: #0098d4; +$link-hover-blue: #0082f3; // Stable Maturity Badge Colors -$stableBadgeBG: #dff6d5; -$stableBadgeBorder: #245c0c; -$stableBadgeText: #245c0c; +$stable-badge-bg: #dff6d5; +$stable-badge-border: #245c0c; +$stable-badge-text: #245c0c; // Beta Maturity Badge Colors -$betaBadgeBG: #f6e7d5; -$betaBadgeBorder: #6f420f; -$betaBadgeText: #6f420f; +$beta-badge-bg: #f6e7d5; +$beta-badge-border: #6f420f; +$beta-badge-text: #6f420f; // Alpha Maturity Badge Colors -$alphaBadgeBG: #f6d5d5; -$alphaBadgeBorder: #8b1212; -$alphaBadgeText: #8b1212; +$alpha-badge-bg: #f6d5d5; +$alpha-badge-border: #8b1212; +$alpha-badge-text: #8b1212; // Obsolete Maturity Badge Colors -$obsoleteBadgeBG: #e6e6e6; -$obsoleteBadgeBorder: #4a4a4a; -$obsoleteBadgeText: #4a4a4a; +$obsolete-badge-bg: #e6e6e6; +$obsolete-badge-border: #4a4a4a; +$obsolete-badge-text: #4a4a4a; // Codeblock Color $codeblock: #f54029; \ No newline at end of file From a221952cdd3bc80cbe99efeb975328a9eb6757ff Mon Sep 17 00:00:00 2001 From: MTRNord Date: Tue, 4 Jun 2024 11:23:38 +0200 Subject: [PATCH 18/21] Apply colors to call-to-action component --- sass/components/_call-to-action.scss | 30 +++++++++++++++------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/sass/components/_call-to-action.scss b/sass/components/_call-to-action.scss index 4d0cb61e8..87a6c33ab 100644 --- a/sass/components/_call-to-action.scss +++ b/sass/components/_call-to-action.scss @@ -1,35 +1,37 @@ +@use "../helpers/colors"; + .call-to-action { - background-color: #000; - border: 2px solid #000; - color: #fff; + background-color: colors.$black; + border: 2px solid colors.$black; + color: colors.$white; font-size: 1.125rem; font-weight: 600; border-radius: 1000px; padding: .6em 2em; &.inverted { - border: 2px solid #fff; - background-color: #fff; - color: #000; + border: 2px solid colors.$white; + background-color: colors.$white; + color: colors.$black; &.secondary { - background-color: #000; - color: #fff; + background-color: colors.$black; + color: colors.$white; &:hover { - background-color: #fff; - color: #000 + background-color: colors.$white; + color: colors.$black; } } } &.secondary { - background-color: #fff; - color: #000; + background-color: colors.$white; + color: colors.$black; &:hover { - background-color: #000; - color: #fff; + background-color: colors.$black; + color: colors.$white; } } } From 4a5dd2c96904612df959d5445b12f74c2d130280 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Tue, 4 Jun 2024 11:26:50 +0200 Subject: [PATCH 19/21] Apply colors to codeblock component --- sass/components/_code.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/sass/components/_code.scss b/sass/components/_code.scss index 5e8d4474f..a78889606 100644 --- a/sass/components/_code.scss +++ b/sass/components/_code.scss @@ -1,3 +1,5 @@ +@use "../helpers/colors"; + /** * This is anything relevant to codeblocks */ @@ -34,8 +36,8 @@ pre table { } :not(pre)>code { - color: #f54029; - border: 1px solid #f54029; + color: colors.$codeblock; + border: 1px solid colors.$codeblock; border-radius: 4px; padding: 0 .4rem; } From 9767af434d0274a07115b83671cf29310bca4bb2 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Tue, 4 Jun 2024 11:27:04 +0200 Subject: [PATCH 20/21] Apply colors to footer component --- sass/components/_footer.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/sass/components/_footer.scss b/sass/components/_footer.scss index a17caf51c..9cb023789 100644 --- a/sass/components/_footer.scss +++ b/sass/components/_footer.scss @@ -1,9 +1,10 @@ @use "../helpers/media"; +@use "../helpers/colors"; .site-footer { position: relative; z-index: 1; - background-color: #000; + background-color: colors.$black; width: 100%; display: flex; align-items: center; @@ -11,7 +12,7 @@ padding: 30px 40px; a { - color: #999; + color: colors.$footer-grey; text-decoration: none; margin-inline: .8rem; } @@ -53,11 +54,11 @@ } a:hover { - color: #fff; + color: colors.$white; } p { margin-top: 20px; - color: #999; + color: colors.$footer-grey; } } \ No newline at end of file From 39ea97157b06f806757e9a037e62826eb9de070f Mon Sep 17 00:00:00 2001 From: MTRNord Date: Thu, 6 Jun 2024 15:47:51 +0200 Subject: [PATCH 21/21] Fix link color --- sass/components/_header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/components/_header.scss b/sass/components/_header.scss index 1065ab833..8697bb331 100644 --- a/sass/components/_header.scss +++ b/sass/components/_header.scss @@ -95,7 +95,7 @@ &.primary { border-radius: 60px; background-color: #fff; - color: colors.$link-blue !important; + color: colors.$black !important; padding-inline: clamp(1em, 3dvw, 2em); margin-inline: .5rem;