From 902e2c25eac8124c5081de807461603e6571c0c6 Mon Sep 17 00:00:00 2001 From: henry Date: Mon, 26 May 2025 03:53:54 +0800 Subject: [PATCH 01/36] Refactor website structure and styles - Removed the open-color.styl file and replaced it with CSS components for better organization. - Updated config.toml to include sitemap settings and output formats. - Enhanced base layout with a new header structure and improved accessibility features. - Deleted single.html layout for pages and replaced it with a new structure in the default layout. - Added new CSS components for breadcrumbs, callouts, code blocks, and knowledge base items. - Implemented a sidebar with toggle functionality and improved search input styles. - Introduced JSON-LD schema for breadcrumbs and enhanced OpenGraph and Twitter Card metadata. - Added a copy button for code blocks to improve user experience. - Cleaned up various partials and layouts for better maintainability and readability. --- assets/css/components/breadcrumbs.css | 20 ++ assets/css/components/callout.css | 29 ++ assets/css/components/code.css | 21 ++ assets/css/components/kb.css | 44 +++ assets/css/dropdown.css | 2 +- assets/css/fonts.css | 48 +++ assets/css/nav.css | 35 +- assets/css/sidebar.css | 157 +++++++++ assets/css/sidebar.js | 35 ++ assets/css/styles.css | 182 ++++++----- assets/css/tokens.css | 30 ++ assets/openColour/open-color.css | 2 + assets/openColour/open-color.less | 234 ------------- assets/openColour/open-color.scss | 399 ----------------------- assets/openColour/open-color.styl | 377 --------------------- config.toml | 22 +- layouts/_default/baseof.html | 12 +- layouts/_default/list.html | 26 ++ layouts/_default/single.html | 13 + layouts/index.html | 2 +- layouts/page/single.html | 6 - layouts/partials/breadcrumbs-schema.html | 23 ++ layouts/partials/breadcrumbs.html | 17 + layouts/partials/footer.html | 27 +- layouts/partials/head.html | 84 ++++- layouts/partials/header.html | 2 + layouts/partials/kb-item.html | 11 +- layouts/partials/nav.html | 31 +- layouts/partials/single.html | 23 +- layouts/shortcodes/callout.html | 5 + static/assets/fonts | 1 - 31 files changed, 777 insertions(+), 1143 deletions(-) create mode 100644 assets/css/components/breadcrumbs.css create mode 100644 assets/css/components/callout.css create mode 100644 assets/css/components/code.css create mode 100644 assets/css/components/kb.css create mode 100644 assets/css/fonts.css create mode 100644 assets/css/sidebar.css create mode 100644 assets/css/sidebar.js create mode 100644 assets/css/tokens.css delete mode 100644 assets/openColour/open-color.less delete mode 100644 assets/openColour/open-color.scss delete mode 100644 assets/openColour/open-color.styl create mode 100644 layouts/_default/list.html create mode 100644 layouts/_default/single.html delete mode 100644 layouts/page/single.html create mode 100644 layouts/partials/breadcrumbs-schema.html create mode 100644 layouts/partials/breadcrumbs.html create mode 100644 layouts/shortcodes/callout.html delete mode 120000 static/assets/fonts diff --git a/assets/css/components/breadcrumbs.css b/assets/css/components/breadcrumbs.css new file mode 100644 index 0000000..3f7ec32 --- /dev/null +++ b/assets/css/components/breadcrumbs.css @@ -0,0 +1,20 @@ +.breadcrumbs { + font-size: 0.85rem; + margin-bottom: 1rem; + color: var(--oc-gray-6); + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + align-items: center; +} +.breadcrumbs::before { + content: "πŸ“"; + margin-right: 0.5rem; +} +.breadcrumbs a { + color: var(--primary); + text-decoration: none; +} +.breadcrumbs a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/assets/css/components/callout.css b/assets/css/components/callout.css new file mode 100644 index 0000000..15d75b8 --- /dev/null +++ b/assets/css/components/callout.css @@ -0,0 +1,29 @@ +/* assets/css/components/callout.css */ + +.callout { + padding: 1rem; + margin: 1.5rem 0; + border-radius: 4px; + background: var(--color-surface, var(--oc-gray-0)); + color: var(--color-text, #212529); + border-left: 4px solid currentColor; +} + +.callout.tip { + border-color: var(--oc-green-6); +} + +.callout.note { + border-color: var(--oc-blue-6); +} + +.callout.warning { + border-color: var(--oc-orange-6); +} + +@media (prefers-color-scheme: dark) { + .callout { + background: var(--color-surface, var(--oc-gray-8)); + color: var(--oc-gray-0); + } +} \ No newline at end of file diff --git a/assets/css/components/code.css b/assets/css/components/code.css new file mode 100644 index 0000000..b640e36 --- /dev/null +++ b/assets/css/components/code.css @@ -0,0 +1,21 @@ +.code-block-wrapper { + position: relative; +} + +.copy-code-button { + position: absolute; + top: 0.5rem; + right: 0.5rem; + background: var(--oc-gray-2); + border: none; + padding: 0.3rem 0.6rem; + font-size: 0.8rem; + cursor: pointer; + border-radius: 4px; + opacity: 0.7; + transition: opacity 0.2s ease; +} + +.copy-code-button:hover { + opacity: 1; +} \ No newline at end of file diff --git a/assets/css/components/kb.css b/assets/css/components/kb.css new file mode 100644 index 0000000..7b939a4 --- /dev/null +++ b/assets/css/components/kb.css @@ -0,0 +1,44 @@ +.knowledge-base-links { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; + text-align: center; +} + +.kb-item { + background-color: var(--oc-gray-1); + border: 1px solid var(--oc-gray-2); + border-radius: 8px; + padding: 20px; + width: 300px; + box-shadow: 0 2px 4px var(--oc-gray-3); + text-align: center; +} + +.kb-item h4 { + margin-bottom: 10px; + color: var(--oc-gray-8); +} + +.kb-item p { + margin-bottom: 15px; + color: var(--oc-gray-5); +} + +/* For internal Hugo buttons */ +.button, +.kb-btn { + display: inline-block; + padding: 0.8rem 1.5rem; + background-color: var(--oc-blue-5); + color: var(--oc-gray-0); + text-decoration: none; + border-radius: 4px; + transition: background-color 0.3s ease; +} + +.button:hover, +.kb-btn:hover { + background-color: var(--oc-orange-5); +} \ No newline at end of file diff --git a/assets/css/dropdown.css b/assets/css/dropdown.css index c6d7c1a..3c8ebfa 100644 --- a/assets/css/dropdown.css +++ b/assets/css/dropdown.css @@ -36,4 +36,4 @@ nav li a:hover, .dropdown:hover .dropbtn { } .dropdown:hover .dropdown-content { display: block; -} +} \ No newline at end of file diff --git a/assets/css/fonts.css b/assets/css/fonts.css new file mode 100644 index 0000000..f55374e --- /dev/null +++ b/assets/css/fonts.css @@ -0,0 +1,48 @@ +/* assets/css/fonts.css β€” Noto Sans with weights + performance tweaks */ +@font-face { + font-family: 'Noto Sans'; + src: url('/assets/fonts/NotoSans-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans'; + src: url('/assets/fonts/NotoSans-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans'; + src: url('/assets/fonts/NotoSans-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans'; + src: url('/assets/fonts/NotoSans-SemiBold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans'; + src: url('/assets/fonts/NotoSans-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans'; + src: url('/assets/fonts/NotoSans-Black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; + font-display: swap; +} \ No newline at end of file diff --git a/assets/css/nav.css b/assets/css/nav.css index 73357e5..ea902ce 100644 --- a/assets/css/nav.css +++ b/assets/css/nav.css @@ -2,7 +2,7 @@ /* Base nav styles */ nav { - background-color: var(--oc-teal-8); + background-color: var(--primary-hover); padding: 10px 0; } @@ -19,14 +19,20 @@ nav { } nav ul li a { + display: inline-block; + padding: 0.5rem 1rem; + background-color: var(--primary); + color: var(--bg); text-decoration: none; - color: var(--oc-gray-0); - font-weight: bold; - font-size: 1.1rem; + border-radius: 5px; + font-weight: 500; + font-size: 1rem; + transition: background 0.3s ease; } nav ul li a:hover { - color: var(--oc-orange-5); + background-color: var(--accent); + color: var(--bg); } /* Desktop nav */ @@ -51,7 +57,7 @@ nav { .hamburger span { height: 3px; width: 25px; - background: var(--oc-gray-0); + background: var(--bg); border-radius: 2px; transition: all 0.3s ease; } @@ -104,4 +110,19 @@ nav { .dropdown .dropbtn.active + .dropdown-content { display: block; } - } \ No newline at end of file + } + +.search-container { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.search-container input { + padding: 0.5rem 1rem; + font-size: 1rem; + border: 1px solid var(--oc-gray-3); + border-radius: 4px; + width: 300px; + max-width: 80%; +} \ No newline at end of file diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css new file mode 100644 index 0000000..b330a05 --- /dev/null +++ b/assets/css/sidebar.css @@ -0,0 +1,157 @@ +/* assets/css/sidebar.css */ + + +:root { + --sidebar-width: 250px; +} + +/* Search input */ +.book-search input { + padding: 0.75rem 1rem; + font-size: 1.1rem; + font-family: 'Noto Sans', Arial, sans-serif; + border: 1px solid var(--oc-gray-4); + border-radius: 6px; + width: 100%; + transition: box-shadow 0.2s ease; +} + +.book-search input:focus { + outline: none; + box-shadow: 0 0 0 3px var(--primary); +} + +/* Sidebar */ +.book-menu { + position: fixed; + top: 0; + bottom: 0; + left: 0; + width: var(--sidebar-width); + padding: 2rem 1rem; + background: var(--bg); + border-right: 1px solid var(--oc-gray-3); + overflow-y: auto; + z-index: 1000; + transform: translateX(-100%); + transition: transform 0.3s ease; +} + +/* Sidebar slide-in */ +#menu-control:checked ~ .book-menu { + transform: translateX(0); +} + +/* Toggle button */ +.menu-toggle { + position: fixed; + top: 1rem; + left: 0; + background: var(--primary); + color: var(--bg); + font-size: 1.5rem; + padding: 0.5rem 1rem; + border-radius: 0 5px 5px 0; + cursor: pointer; + z-index: 1100; + transition: transform 0.3s ease; +} + +/* Move toggle button with sidebar */ +#menu-control:checked ~ .menu-toggle { + transform: translateX(var(--sidebar-width)); +} + +/* Flex container */ +.layout-wrapper { + display: flex; + flex-direction: row; + width: 100%; +} + +/* Main content wrapper */ +.main-frame { + transition: margin-left 0.3s ease; + margin-left: 0; + width: 100%; + flex-grow: 1; +} + +/* Slide the entire frame (header, main, footer) */ +#menu-control:checked ~ .main-frame { + margin-left: var(--sidebar-width); +} + +/* Inner main area */ +.main-content { + max-width: 960px; + margin: 2rem auto; + padding: 1rem; + width: 100%; + box-sizing: border-box; +} + +/* Hide checkbox but keep it functional */ +.hidden { + position: absolute; + left: -9999px; +} + +/* Ensure sidebar always visible on desktop */ +@media (min-width: 1024px) { + .book-menu { + transform: translateX(0) !important; + } + + .menu-toggle { + display: none !important; + } + + .main-frame { + margin-left: var(--sidebar-width) !important; + } +} + + +/* Sidebar inner layout */ +.book-menu-content { + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.book-brand { + font-size: 1.25rem; + font-weight: 700; + color: var(--primary); + margin-bottom: 0.5rem; +} + +.book-nav { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.book-nav li a { + color: var(--text); + text-decoration: none; + font-weight: 500; + padding: 0.25rem 0.5rem; + border-left: 3px solid transparent; + transition: border-color 0.2s ease, background-color 0.2s ease; +} + +.book-nav li a:hover { + border-left: 3px solid var(--accent); + background-color: var(--oc-gray-1); + color: var(--primary); +} +.book-nav a.active { + border-left: 3px solid var(--primary); + background-color: var(--oc-gray-1); + padding-left: 0.5rem; +} \ No newline at end of file diff --git a/assets/css/sidebar.js b/assets/css/sidebar.js new file mode 100644 index 0000000..27cd3c7 --- /dev/null +++ b/assets/css/sidebar.js @@ -0,0 +1,35 @@ +// static/assets/js/sidebar.js +document.addEventListener('DOMContentLoaded', () => { + const checkbox = document.getElementById('menu-control'); + const sidebar = document.querySelector('.book-menu'); + const toggleBtn = document.querySelector('.menu-toggle'); + toggleBtn.setAttribute('aria-expanded', 'false'); + + + + // Dismiss on outside click + document.addEventListener('click', (e) => { + if ( + checkbox.checked && + !sidebar.contains(e.target) && + !e.target.closest('.menu-toggle') + ) { + checkbox.checked = false; + } + }); + + // (Optional) Hover-to-open only on pointer devices + if (window.matchMedia('(hover: hover)').matches) { + sidebar.addEventListener('mouseenter', () => { + if (!checkbox.checked) checkbox.checked = true; + }); + sidebar.addEventListener('mouseleave', () => { + if (window.innerWidth < 1024) checkbox.checked = false; + }); + } + + // Accessibility: Update aria-expanded + checkbox.addEventListener('change', () => { + toggleBtn.setAttribute('aria-expanded', checkbox.checked.toString()); + }); +}); \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css index b03a4e5..57e654c 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,41 +1,26 @@ -/* assets/css/styles.css */ +/* assets/css/styles.css β€” layout, structure, theme */ -@font-face { - font-family: 'Noto Sans'; - src: url('../fonts/static/NotoSans-Regular.ttf') format('truetype'); - font-weight: normal; +/* Global reset & font */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; } - -@font-face { - font-family: 'Noto Sans'; - src: url('../fonts/static/NotoSans-Bold.ttf') format('truetype'); - font-weight: bold; -} - -@media (max-width: 600px) { - header h1 { - font-size: 1.8rem; - } - - header p { - font-size: 1rem; - } -} - - - -@media (max-width: 600px) { - .btn { - width: 100%; - } +body { + font-family: 'Noto Sans', Arial, sans-serif; + font-weight: 400; + margin: 0; + padding: 0; + background: var(--color-bg); + color: var(--color-text);; } +/* Layout containers */ .container { - width: 90%; - max-width: 1200px; + max-width: 960px; margin: 2rem auto; - padding: 1rem; + padding: 0 2rem; } img { @@ -43,103 +28,84 @@ img { height: auto; } - - -body { - font-family: 'Noto Sans', arial; - margin: 0; - padding: 0; - text-align: center; - margin-top: 50px; - background: var(--oc-gray-0); - color: var(--gray-9); -} - +/* Header */ header { - background: var(--oc-teal-9); - color: var(--oc-gray-0); - text-align: center; - padding: 2rem 1rem; + background: var(--color-brand);; + color: var(--color-bg); + padding: 3rem 1rem 2rem; + text-align: center; } header h1 { - font-size: 2.5rem; - margin: 0; + font-size: 2.5rem; + margin: 0; + font-weight: 700; } header p { - font-size: 1.2rem; - margin: 0.5rem 0 0; + font-size: 1.2rem; + margin: 0.5rem 0 0; } - - - +/* Sections */ .section { - margin-bottom: 2rem; - padding: 1.5rem; - background: var(--oc-gray-0); - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; + padding: 1.5rem; + background: var(--color-bg); + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + text-align: center; } .section h2 { - font-size: 1.8rem; - margin-bottom: 1rem; - color: var(--oc-teal-9); + font-size: 1.8rem; + margin-bottom: 1rem; + color: var(--color-brand);; + font-weight: 600; } +/* Buttons */ .btn { display: inline-block; padding: 0.8rem 1.5rem; - background: var(--oc-teal-9); - color: var(--oc-gray-0); + background: var(--color-brand);; + color: var(--color-bg); text-decoration: none; border-radius: 5px; + font-weight: 500; transition: background 0.3s; - padding: 0.75rem 1.5rem; - display: inline-block; text-align: center; } .btn:hover { - background: var(--oc-orange-5); -} - -@media (max-width: 600px) { - .btn { - width: 100%; - } + background: var(--color-accent); + color: var(--color-bg); } +/* Footer */ footer { - text-align: center; - padding: 1rem 0; - background: var(--oc-teal-9); - color: var(--oc-gray-0); + text-align: center; + padding: 1rem 0; + background: var(--color-brand);; + color: var(--color-bg); } - -/* Logo link styling */ +/* Logo */ .logo-link { - text-decoration: none; - display: inline-block; - margin-right: 10px; + text-decoration: none; + display: inline-block; + margin-right: 10px; } -/* Logo image styling */ .logo-image { - vertical-align: middle; - width: 128px; - height: 128px; - margin-right: 10px; + vertical-align: middle; + width: 128px; + height: 128px; } - -/* Spinning logo */ +/* Animation */ .logo-spin { width: 96px; - height: auto; margin-top: 2rem; animation: spin 10s linear infinite; transform-origin: center; @@ -150,6 +116,7 @@ footer { to { transform: rotate(-360deg); } } +/* ASCII Art Block */ .ascii-art { font-family: "Courier New", Courier, monospace; background-color: #f0f0f0; @@ -160,4 +127,39 @@ footer { font-size: 14px; line-height: 1.4; white-space: pre; +} + +/* Responsive tweaks */ +@media (max-width: 600px) { + header h1 { + font-size: 1.8rem; + } + + header p { + font-size: 1rem; + } + + .btn { + width: 100%; + } +} + +#search-results { + margin-top: 1rem; + list-style: none; + padding: 0; + text-align: left; +} + +#search-results li a { + display: block; + padding: 0.5rem; + background: var(--oc-gray-0); + border-bottom: 1px solid var(--oc-gray-3); + color: var(--color-brand);; + text-decoration: none; +} + +#search-results li a:hover { + background: var(--oc-gray-1); } \ No newline at end of file diff --git a/assets/css/tokens.css b/assets/css/tokens.css new file mode 100644 index 0000000..75dbfdc --- /dev/null +++ b/assets/css/tokens.css @@ -0,0 +1,30 @@ +/* assets/css/tokens.css – semantic layer on top of Open-Color */ +:root{ + color-scheme: light dark; + --color-bg: var(--oc-gray-0); + --color-surface: var(--oc-gray-1); + --color-text: var(--oc-gray-9); + --color-brand: var(--oc-teal-6); + --color-brand-hover: var(--oc-teal-7); + --color-accent: var(--oc-orange-5); +} + +/* Light (default) */ +:root { + --color-bg: var(--oc-gray-0); + --color-surface: var(--oc-gray-1); + --color-text: var(--oc-gray-9); + --color-brand: var(--oc-teal-6); + --color-brand-hover: var(--oc-teal-7); + --color-accent: var(--oc-orange-5); +} + +/* Dark mode (manual via .dark class) */ +.dark { + --color-bg: var(--oc-gray-9); + --color-surface: var(--oc-gray-8); + --color-text: var(--oc-gray-0); + --color-brand: var(--oc-teal-3); + --color-brand-hover: var(--oc-teal-2); + --color-accent: var(--oc-orange-4); +} \ No newline at end of file diff --git a/assets/openColour/open-color.css b/assets/openColour/open-color.css index 5152f87..3701380 100644 --- a/assets/openColour/open-color.css +++ b/assets/openColour/open-color.css @@ -1,3 +1,5 @@ +/* assets/openColour/open-color.css */ + /* * * 𝗖 𝗒 π—Ÿ 𝗒 π—₯ diff --git a/assets/openColour/open-color.less b/assets/openColour/open-color.less deleted file mode 100644 index dc5eddf..0000000 --- a/assets/openColour/open-color.less +++ /dev/null @@ -1,234 +0,0 @@ -// -// -// 𝗖 𝗒 π—Ÿ 𝗒 π—₯ -// v 1.6.3 -// -// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - -// General -// ─────────────────────────────────── - -@oc-white: #ffffff; -@oc-black: #000000; - - -// Gray -// ─────────────────────────────────── - -@oc-gray-list: #f8f9fa, #f1f3f5, #e9ecef, #dee2e6, #ced4da, #adb5bd, #868e96, #495057, #343a40, #212529; - -@oc-gray-0: extract(@oc-gray-list, 1); -@oc-gray-1: extract(@oc-gray-list, 2); -@oc-gray-2: extract(@oc-gray-list, 3); -@oc-gray-3: extract(@oc-gray-list, 4); -@oc-gray-4: extract(@oc-gray-list, 5); -@oc-gray-5: extract(@oc-gray-list, 6); -@oc-gray-6: extract(@oc-gray-list, 7); -@oc-gray-7: extract(@oc-gray-list, 8); -@oc-gray-8: extract(@oc-gray-list, 9); -@oc-gray-9: extract(@oc-gray-list, 10); - - -// Red -// ─────────────────────────────────── - -@oc-red-list: #fff5f5, #ffe3e3, #ffc9c9, #ffa8a8, #ff8787, #ff6b6b, #fa5252, #f03e3e, #e03131, #c92a2a; - -@oc-red-0: extract(@oc-red-list, 1); -@oc-red-1: extract(@oc-red-list, 2); -@oc-red-2: extract(@oc-red-list, 3); -@oc-red-3: extract(@oc-red-list, 4); -@oc-red-4: extract(@oc-red-list, 5); -@oc-red-5: extract(@oc-red-list, 6); -@oc-red-6: extract(@oc-red-list, 7); -@oc-red-7: extract(@oc-red-list, 8); -@oc-red-8: extract(@oc-red-list, 9); -@oc-red-9: extract(@oc-red-list, 10); - - -// Pink -// ─────────────────────────────────── - -@oc-pink-list: #fff0f6, #ffdeeb, #fcc2d7, #faa2c1, #f783ac, #f06595, #e64980, #d6336c, #c2255c, #a61e4d; - -@oc-pink-0: extract(@oc-pink-list, 1); -@oc-pink-1: extract(@oc-pink-list, 2); -@oc-pink-2: extract(@oc-pink-list, 3); -@oc-pink-3: extract(@oc-pink-list, 4); -@oc-pink-4: extract(@oc-pink-list, 5); -@oc-pink-5: extract(@oc-pink-list, 6); -@oc-pink-6: extract(@oc-pink-list, 7); -@oc-pink-7: extract(@oc-pink-list, 8); -@oc-pink-8: extract(@oc-pink-list, 9); -@oc-pink-9: extract(@oc-pink-list, 10); - - -// Grape -// ─────────────────────────────────── - -@oc-grape-list: #f8f0fc, #f3d9fa, #eebefa, #e599f7, #da77f2, #cc5de8, #be4bdb, #ae3ec9, #9c36b5, #862e9c; - -@oc-grape-0: extract(@oc-grape-list, 1); -@oc-grape-1: extract(@oc-grape-list, 2); -@oc-grape-2: extract(@oc-grape-list, 3); -@oc-grape-3: extract(@oc-grape-list, 4); -@oc-grape-4: extract(@oc-grape-list, 5); -@oc-grape-5: extract(@oc-grape-list, 6); -@oc-grape-6: extract(@oc-grape-list, 7); -@oc-grape-7: extract(@oc-grape-list, 8); -@oc-grape-8: extract(@oc-grape-list, 9); -@oc-grape-9: extract(@oc-grape-list, 10); - - -// Violet -// ─────────────────────────────────── - -@oc-violet-list: #f3f0ff, #e5dbff, #d0bfff, #b197fc, #9775fa, #845ef7, #7950f2, #7048e8, #6741d9, #5f3dc4; - -@oc-violet-0: extract(@oc-violet-list, 1); -@oc-violet-1: extract(@oc-violet-list, 2); -@oc-violet-2: extract(@oc-violet-list, 3); -@oc-violet-3: extract(@oc-violet-list, 4); -@oc-violet-4: extract(@oc-violet-list, 5); -@oc-violet-5: extract(@oc-violet-list, 6); -@oc-violet-6: extract(@oc-violet-list, 7); -@oc-violet-7: extract(@oc-violet-list, 8); -@oc-violet-8: extract(@oc-violet-list, 9); -@oc-violet-9: extract(@oc-violet-list, 10); - - -// Indigo -// ─────────────────────────────────── - -@oc-indigo-list: #edf2ff, #dbe4ff, #bac8ff, #91a7ff, #748ffc, #5c7cfa, #4c6ef5, #4263eb, #3b5bdb, #364fc7; - -@oc-indigo-0: extract(@oc-indigo-list, 1); -@oc-indigo-1: extract(@oc-indigo-list, 2); -@oc-indigo-2: extract(@oc-indigo-list, 3); -@oc-indigo-3: extract(@oc-indigo-list, 4); -@oc-indigo-4: extract(@oc-indigo-list, 5); -@oc-indigo-5: extract(@oc-indigo-list, 6); -@oc-indigo-6: extract(@oc-indigo-list, 7); -@oc-indigo-7: extract(@oc-indigo-list, 8); -@oc-indigo-8: extract(@oc-indigo-list, 9); -@oc-indigo-9: extract(@oc-indigo-list, 10); - - -// Blue -// ─────────────────────────────────── - -@oc-blue-list: #e7f5ff, #d0ebff, #a5d8ff, #74c0fc, #4dabf7, #339af0, #228be6, #1c7ed6, #1971c2, #1864ab; - -@oc-blue-0: extract(@oc-blue-list, 1); -@oc-blue-1: extract(@oc-blue-list, 2); -@oc-blue-2: extract(@oc-blue-list, 3); -@oc-blue-3: extract(@oc-blue-list, 4); -@oc-blue-4: extract(@oc-blue-list, 5); -@oc-blue-5: extract(@oc-blue-list, 6); -@oc-blue-6: extract(@oc-blue-list, 7); -@oc-blue-7: extract(@oc-blue-list, 8); -@oc-blue-8: extract(@oc-blue-list, 9); -@oc-blue-9: extract(@oc-blue-list, 10); - - -// Cyan -// ─────────────────────────────────── - -@oc-cyan-list: #e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db, #22b8cf, #15aabf, #1098ad, #0c8599, #0b7285; - -@oc-cyan-0: extract(@oc-cyan-list, 1); -@oc-cyan-1: extract(@oc-cyan-list, 2); -@oc-cyan-2: extract(@oc-cyan-list, 3); -@oc-cyan-3: extract(@oc-cyan-list, 4); -@oc-cyan-4: extract(@oc-cyan-list, 5); -@oc-cyan-5: extract(@oc-cyan-list, 6); -@oc-cyan-6: extract(@oc-cyan-list, 7); -@oc-cyan-7: extract(@oc-cyan-list, 8); -@oc-cyan-8: extract(@oc-cyan-list, 9); -@oc-cyan-9: extract(@oc-cyan-list, 10); - - -// Teal -// ─────────────────────────────────── - -@oc-teal-list: #e6fcf5, #c3fae8, #96f2d7, #63e6be, #38d9a9, #20c997, #12b886, #0ca678, #099268, #087f5b; - -@oc-teal-0: extract(@oc-teal-list, 1); -@oc-teal-1: extract(@oc-teal-list, 2); -@oc-teal-2: extract(@oc-teal-list, 3); -@oc-teal-3: extract(@oc-teal-list, 4); -@oc-teal-4: extract(@oc-teal-list, 5); -@oc-teal-5: extract(@oc-teal-list, 6); -@oc-teal-6: extract(@oc-teal-list, 7); -@oc-teal-7: extract(@oc-teal-list, 8); -@oc-teal-8: extract(@oc-teal-list, 9); -@oc-teal-9: extract(@oc-teal-list, 10); - - -// Green -// ─────────────────────────────────── - -@oc-green-list: #ebfbee, #d3f9d8, #b2f2bb, #8ce99a, #69db7c, #51cf66, #40c057, #37b24d, #2f9e44, #2b8a3e; - -@oc-green-0: extract(@oc-green-list, 1); -@oc-green-1: extract(@oc-green-list, 2); -@oc-green-2: extract(@oc-green-list, 3); -@oc-green-3: extract(@oc-green-list, 4); -@oc-green-4: extract(@oc-green-list, 5); -@oc-green-5: extract(@oc-green-list, 6); -@oc-green-6: extract(@oc-green-list, 7); -@oc-green-7: extract(@oc-green-list, 8); -@oc-green-8: extract(@oc-green-list, 9); -@oc-green-9: extract(@oc-green-list, 10); - - -// Lime -// ─────────────────────────────────── - -@oc-lime-list: #f4fce3, #e9fac8, #d8f5a2, #c0eb75, #a9e34b, #94d82d, #82c91e, #74b816, #66a80f, #5c940d; - -@oc-lime-0: extract(@oc-lime-list, 1); -@oc-lime-1: extract(@oc-lime-list, 2); -@oc-lime-2: extract(@oc-lime-list, 3); -@oc-lime-3: extract(@oc-lime-list, 4); -@oc-lime-4: extract(@oc-lime-list, 5); -@oc-lime-5: extract(@oc-lime-list, 6); -@oc-lime-6: extract(@oc-lime-list, 7); -@oc-lime-7: extract(@oc-lime-list, 8); -@oc-lime-8: extract(@oc-lime-list, 9); -@oc-lime-9: extract(@oc-lime-list, 10); - - -// Yellow -// ─────────────────────────────────── - -@oc-yellow-list: #fff9db, #fff3bf, #ffec99, #ffe066, #ffd43b, #fcc419, #fab005, #f59f00, #f08c00, #e67700; - -@oc-yellow-0: extract(@oc-yellow-list, 1); -@oc-yellow-1: extract(@oc-yellow-list, 2); -@oc-yellow-2: extract(@oc-yellow-list, 3); -@oc-yellow-3: extract(@oc-yellow-list, 4); -@oc-yellow-4: extract(@oc-yellow-list, 5); -@oc-yellow-5: extract(@oc-yellow-list, 6); -@oc-yellow-6: extract(@oc-yellow-list, 7); -@oc-yellow-7: extract(@oc-yellow-list, 8); -@oc-yellow-8: extract(@oc-yellow-list, 9); -@oc-yellow-9: extract(@oc-yellow-list, 10); - - -// Orange -// ─────────────────────────────────── - -@oc-orange-list: #fff4e6, #ffe8cc, #ffd8a8, #ffc078, #ffa94d, #ff922b, #fd7e14, #f76707, #e8590c, #d9480f; - -@oc-orange-0: extract(@oc-orange-list, 1); -@oc-orange-1: extract(@oc-orange-list, 2); -@oc-orange-2: extract(@oc-orange-list, 3); -@oc-orange-3: extract(@oc-orange-list, 4); -@oc-orange-4: extract(@oc-orange-list, 5); -@oc-orange-5: extract(@oc-orange-list, 6); -@oc-orange-6: extract(@oc-orange-list, 7); -@oc-orange-7: extract(@oc-orange-list, 8); -@oc-orange-8: extract(@oc-orange-list, 9); -@oc-orange-9: extract(@oc-orange-list, 10); diff --git a/assets/openColour/open-color.scss b/assets/openColour/open-color.scss deleted file mode 100644 index d4c2bc5..0000000 --- a/assets/openColour/open-color.scss +++ /dev/null @@ -1,399 +0,0 @@ -// -// -// 𝗖 𝗒 π—Ÿ 𝗒 π—₯ -// v 1.6.3 -// -// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - -// General -// ─────────────────────────────────── - -$oc-white: #ffffff; -$oc-black: #000000; - - -// Gray -// ─────────────────────────────────── - -$oc-gray-list: ( - "0": #f8f9fa, - "1": #f1f3f5, - "2": #e9ecef, - "3": #dee2e6, - "4": #ced4da, - "5": #adb5bd, - "6": #868e96, - "7": #495057, - "8": #343a40, - "9": #212529 -); - -$oc-gray-0: map-get($oc-gray-list, "0"); -$oc-gray-1: map-get($oc-gray-list, "1"); -$oc-gray-2: map-get($oc-gray-list, "2"); -$oc-gray-3: map-get($oc-gray-list, "3"); -$oc-gray-4: map-get($oc-gray-list, "4"); -$oc-gray-5: map-get($oc-gray-list, "5"); -$oc-gray-6: map-get($oc-gray-list, "6"); -$oc-gray-7: map-get($oc-gray-list, "7"); -$oc-gray-8: map-get($oc-gray-list, "8"); -$oc-gray-9: map-get($oc-gray-list, "9"); - - -// Red -// ─────────────────────────────────── - -$oc-red-list: ( - "0": #fff5f5, - "1": #ffe3e3, - "2": #ffc9c9, - "3": #ffa8a8, - "4": #ff8787, - "5": #ff6b6b, - "6": #fa5252, - "7": #f03e3e, - "8": #e03131, - "9": #c92a2a -); - -$oc-red-0: map-get($oc-red-list, "0"); -$oc-red-1: map-get($oc-red-list, "1"); -$oc-red-2: map-get($oc-red-list, "2"); -$oc-red-3: map-get($oc-red-list, "3"); -$oc-red-4: map-get($oc-red-list, "4"); -$oc-red-5: map-get($oc-red-list, "5"); -$oc-red-6: map-get($oc-red-list, "6"); -$oc-red-7: map-get($oc-red-list, "7"); -$oc-red-8: map-get($oc-red-list, "8"); -$oc-red-9: map-get($oc-red-list, "9"); - - -// Pink -// ─────────────────────────────────── - -$oc-pink-list: ( - "0": #fff0f6, - "1": #ffdeeb, - "2": #fcc2d7, - "3": #faa2c1, - "4": #f783ac, - "5": #f06595, - "6": #e64980, - "7": #d6336c, - "8": #c2255c, - "9": #a61e4d -); - -$oc-pink-0: map-get($oc-pink-list, "0"); -$oc-pink-1: map-get($oc-pink-list, "1"); -$oc-pink-2: map-get($oc-pink-list, "2"); -$oc-pink-3: map-get($oc-pink-list, "3"); -$oc-pink-4: map-get($oc-pink-list, "4"); -$oc-pink-5: map-get($oc-pink-list, "5"); -$oc-pink-6: map-get($oc-pink-list, "6"); -$oc-pink-7: map-get($oc-pink-list, "7"); -$oc-pink-8: map-get($oc-pink-list, "8"); -$oc-pink-9: map-get($oc-pink-list, "9"); - - -// Grape -// ─────────────────────────────────── - -$oc-grape-list: ( - "0": #f8f0fc, - "1": #f3d9fa, - "2": #eebefa, - "3": #e599f7, - "4": #da77f2, - "5": #cc5de8, - "6": #be4bdb, - "7": #ae3ec9, - "8": #9c36b5, - "9": #862e9c -); - -$oc-grape-0: map-get($oc-grape-list, "0"); -$oc-grape-1: map-get($oc-grape-list, "1"); -$oc-grape-2: map-get($oc-grape-list, "2"); -$oc-grape-3: map-get($oc-grape-list, "3"); -$oc-grape-4: map-get($oc-grape-list, "4"); -$oc-grape-5: map-get($oc-grape-list, "5"); -$oc-grape-6: map-get($oc-grape-list, "6"); -$oc-grape-7: map-get($oc-grape-list, "7"); -$oc-grape-8: map-get($oc-grape-list, "8"); -$oc-grape-9: map-get($oc-grape-list, "9"); - - -// Violet -// ─────────────────────────────────── - -$oc-violet-list: ( - "0": #f3f0ff, - "1": #e5dbff, - "2": #d0bfff, - "3": #b197fc, - "4": #9775fa, - "5": #845ef7, - "6": #7950f2, - "7": #7048e8, - "8": #6741d9, - "9": #5f3dc4 -); - -$oc-violet-0: map-get($oc-violet-list, "0"); -$oc-violet-1: map-get($oc-violet-list, "1"); -$oc-violet-2: map-get($oc-violet-list, "2"); -$oc-violet-3: map-get($oc-violet-list, "3"); -$oc-violet-4: map-get($oc-violet-list, "4"); -$oc-violet-5: map-get($oc-violet-list, "5"); -$oc-violet-6: map-get($oc-violet-list, "6"); -$oc-violet-7: map-get($oc-violet-list, "7"); -$oc-violet-8: map-get($oc-violet-list, "8"); -$oc-violet-9: map-get($oc-violet-list, "9"); - - -// Indigo -// ─────────────────────────────────── - -$oc-indigo-list: ( - "0": #edf2ff, - "1": #dbe4ff, - "2": #bac8ff, - "3": #91a7ff, - "4": #748ffc, - "5": #5c7cfa, - "6": #4c6ef5, - "7": #4263eb, - "8": #3b5bdb, - "9": #364fc7 -); - -$oc-indigo-0: map-get($oc-indigo-list, "0"); -$oc-indigo-1: map-get($oc-indigo-list, "1"); -$oc-indigo-2: map-get($oc-indigo-list, "2"); -$oc-indigo-3: map-get($oc-indigo-list, "3"); -$oc-indigo-4: map-get($oc-indigo-list, "4"); -$oc-indigo-5: map-get($oc-indigo-list, "5"); -$oc-indigo-6: map-get($oc-indigo-list, "6"); -$oc-indigo-7: map-get($oc-indigo-list, "7"); -$oc-indigo-8: map-get($oc-indigo-list, "8"); -$oc-indigo-9: map-get($oc-indigo-list, "9"); - - -// Blue -// ─────────────────────────────────── - -$oc-blue-list: ( - "0": #e7f5ff, - "1": #d0ebff, - "2": #a5d8ff, - "3": #74c0fc, - "4": #4dabf7, - "5": #339af0, - "6": #228be6, - "7": #1c7ed6, - "8": #1971c2, - "9": #1864ab -); - -$oc-blue-0: map-get($oc-blue-list, "0"); -$oc-blue-1: map-get($oc-blue-list, "1"); -$oc-blue-2: map-get($oc-blue-list, "2"); -$oc-blue-3: map-get($oc-blue-list, "3"); -$oc-blue-4: map-get($oc-blue-list, "4"); -$oc-blue-5: map-get($oc-blue-list, "5"); -$oc-blue-6: map-get($oc-blue-list, "6"); -$oc-blue-7: map-get($oc-blue-list, "7"); -$oc-blue-8: map-get($oc-blue-list, "8"); -$oc-blue-9: map-get($oc-blue-list, "9"); - - -// Cyan -// ─────────────────────────────────── - -$oc-cyan-list: ( - "0": #e3fafc, - "1": #c5f6fa, - "2": #99e9f2, - "3": #66d9e8, - "4": #3bc9db, - "5": #22b8cf, - "6": #15aabf, - "7": #1098ad, - "8": #0c8599, - "9": #0b7285 -); - -$oc-cyan-0: map-get($oc-cyan-list, "0"); -$oc-cyan-1: map-get($oc-cyan-list, "1"); -$oc-cyan-2: map-get($oc-cyan-list, "2"); -$oc-cyan-3: map-get($oc-cyan-list, "3"); -$oc-cyan-4: map-get($oc-cyan-list, "4"); -$oc-cyan-5: map-get($oc-cyan-list, "5"); -$oc-cyan-6: map-get($oc-cyan-list, "6"); -$oc-cyan-7: map-get($oc-cyan-list, "7"); -$oc-cyan-8: map-get($oc-cyan-list, "8"); -$oc-cyan-9: map-get($oc-cyan-list, "9"); - - -// Teal -// ─────────────────────────────────── - -$oc-teal-list: ( - "0": #e6fcf5, - "1": #c3fae8, - "2": #96f2d7, - "3": #63e6be, - "4": #38d9a9, - "5": #20c997, - "6": #12b886, - "7": #0ca678, - "8": #099268, - "9": #087f5b -); - -$oc-teal-0: map-get($oc-teal-list, "0"); -$oc-teal-1: map-get($oc-teal-list, "1"); -$oc-teal-2: map-get($oc-teal-list, "2"); -$oc-teal-3: map-get($oc-teal-list, "3"); -$oc-teal-4: map-get($oc-teal-list, "4"); -$oc-teal-5: map-get($oc-teal-list, "5"); -$oc-teal-6: map-get($oc-teal-list, "6"); -$oc-teal-7: map-get($oc-teal-list, "7"); -$oc-teal-8: map-get($oc-teal-list, "8"); -$oc-teal-9: map-get($oc-teal-list, "9"); - - -// Green -// ─────────────────────────────────── - -$oc-green-list: ( - "0": #ebfbee, - "1": #d3f9d8, - "2": #b2f2bb, - "3": #8ce99a, - "4": #69db7c, - "5": #51cf66, - "6": #40c057, - "7": #37b24d, - "8": #2f9e44, - "9": #2b8a3e -); - -$oc-green-0: map-get($oc-green-list, "0"); -$oc-green-1: map-get($oc-green-list, "1"); -$oc-green-2: map-get($oc-green-list, "2"); -$oc-green-3: map-get($oc-green-list, "3"); -$oc-green-4: map-get($oc-green-list, "4"); -$oc-green-5: map-get($oc-green-list, "5"); -$oc-green-6: map-get($oc-green-list, "6"); -$oc-green-7: map-get($oc-green-list, "7"); -$oc-green-8: map-get($oc-green-list, "8"); -$oc-green-9: map-get($oc-green-list, "9"); - - -// Lime -// ─────────────────────────────────── - -$oc-lime-list: ( - "0": #f4fce3, - "1": #e9fac8, - "2": #d8f5a2, - "3": #c0eb75, - "4": #a9e34b, - "5": #94d82d, - "6": #82c91e, - "7": #74b816, - "8": #66a80f, - "9": #5c940d -); - -$oc-lime-0: map-get($oc-lime-list, "0"); -$oc-lime-1: map-get($oc-lime-list, "1"); -$oc-lime-2: map-get($oc-lime-list, "2"); -$oc-lime-3: map-get($oc-lime-list, "3"); -$oc-lime-4: map-get($oc-lime-list, "4"); -$oc-lime-5: map-get($oc-lime-list, "5"); -$oc-lime-6: map-get($oc-lime-list, "6"); -$oc-lime-7: map-get($oc-lime-list, "7"); -$oc-lime-8: map-get($oc-lime-list, "8"); -$oc-lime-9: map-get($oc-lime-list, "9"); - - -// Yellow -// ─────────────────────────────────── - -$oc-yellow-list: ( - "0": #fff9db, - "1": #fff3bf, - "2": #ffec99, - "3": #ffe066, - "4": #ffd43b, - "5": #fcc419, - "6": #fab005, - "7": #f59f00, - "8": #f08c00, - "9": #e67700 -); - -$oc-yellow-0: map-get($oc-yellow-list, "0"); -$oc-yellow-1: map-get($oc-yellow-list, "1"); -$oc-yellow-2: map-get($oc-yellow-list, "2"); -$oc-yellow-3: map-get($oc-yellow-list, "3"); -$oc-yellow-4: map-get($oc-yellow-list, "4"); -$oc-yellow-5: map-get($oc-yellow-list, "5"); -$oc-yellow-6: map-get($oc-yellow-list, "6"); -$oc-yellow-7: map-get($oc-yellow-list, "7"); -$oc-yellow-8: map-get($oc-yellow-list, "8"); -$oc-yellow-9: map-get($oc-yellow-list, "9"); - - -// Orange -// ─────────────────────────────────── - -$oc-orange-list: ( - "0": #fff4e6, - "1": #ffe8cc, - "2": #ffd8a8, - "3": #ffc078, - "4": #ffa94d, - "5": #ff922b, - "6": #fd7e14, - "7": #f76707, - "8": #e8590c, - "9": #d9480f -); - -$oc-orange-0: map-get($oc-orange-list, "0"); -$oc-orange-1: map-get($oc-orange-list, "1"); -$oc-orange-2: map-get($oc-orange-list, "2"); -$oc-orange-3: map-get($oc-orange-list, "3"); -$oc-orange-4: map-get($oc-orange-list, "4"); -$oc-orange-5: map-get($oc-orange-list, "5"); -$oc-orange-6: map-get($oc-orange-list, "6"); -$oc-orange-7: map-get($oc-orange-list, "7"); -$oc-orange-8: map-get($oc-orange-list, "8"); -$oc-orange-9: map-get($oc-orange-list, "9"); - - -// Color list -// ─────────────────────────────────── - -$oc-color-spectrum: 9; - -$oc-color-list: ( - $oc-gray-list: "gray", - $oc-red-list: "red", - $oc-pink-list: "pink", - $oc-grape-list: "grape", - $oc-violet-list: "violet", - $oc-indigo-list: "indigo", - $oc-blue-list: "blue", - $oc-cyan-list: "cyan", - $oc-teal-list: "teal", - $oc-green-list: "green", - $oc-lime-list: "lime", - $oc-yellow-list: "yellow", - $oc-orange-list: "orange" -); diff --git a/assets/openColour/open-color.styl b/assets/openColour/open-color.styl deleted file mode 100644 index 260b6b3..0000000 --- a/assets/openColour/open-color.styl +++ /dev/null @@ -1,377 +0,0 @@ -// -// -// 𝗖 𝗒 π—Ÿ 𝗒 π—₯ -// v 1.6.3 -// -// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - -// General -// ─────────────────────────────────── - -oc-white = #ffffff -oc-black = #000000 - - -// Gray -// ─────────────────────────────────── - -oc-gray-list = { - '0': #f8f9fa, - '1': #f1f3f5, - '2': #e9ecef, - '3': #dee2e6, - '4': #ced4da, - '5': #adb5bd, - '6': #868e96, - '7': #495057, - '8': #343a40, - '9': #212529 -} - -oc-gray-0 = oc-gray-list['0'] -oc-gray-1 = oc-gray-list['1'] -oc-gray-2 = oc-gray-list['2'] -oc-gray-3 = oc-gray-list['3'] -oc-gray-4 = oc-gray-list['4'] -oc-gray-5 = oc-gray-list['5'] -oc-gray-6 = oc-gray-list['6'] -oc-gray-7 = oc-gray-list['7'] -oc-gray-8 = oc-gray-list['8'] -oc-gray-9 = oc-gray-list['9'] - - -// Red -// ─────────────────────────────────── - -oc-red-list = { - '0': #fff5f5, - '1': #ffe3e3, - '2': #ffc9c9, - '3': #ffa8a8, - '4': #ff8787, - '5': #ff6b6b, - '6': #fa5252, - '7': #f03e3e, - '8': #e03131, - '9': #c92a2a -} - -oc-red-0 = oc-red-list['0'] -oc-red-1 = oc-red-list['1'] -oc-red-2 = oc-red-list['2'] -oc-red-3 = oc-red-list['3'] -oc-red-4 = oc-red-list['4'] -oc-red-5 = oc-red-list['5'] -oc-red-6 = oc-red-list['6'] -oc-red-7 = oc-red-list['7'] -oc-red-8 = oc-red-list['8'] -oc-red-9 = oc-red-list['9'] - - -// Pink -// ─────────────────────────────────── - -oc-pink-list = { - '0': #fff0f6, - '1': #ffdeeb, - '2': #fcc2d7, - '3': #faa2c1, - '4': #f783ac, - '5': #f06595, - '6': #e64980, - '7': #d6336c, - '8': #c2255c, - '9': #a61e4d -} - -oc-pink-0 = oc-pink-list['0'] -oc-pink-1 = oc-pink-list['1'] -oc-pink-2 = oc-pink-list['2'] -oc-pink-3 = oc-pink-list['3'] -oc-pink-4 = oc-pink-list['4'] -oc-pink-5 = oc-pink-list['5'] -oc-pink-6 = oc-pink-list['6'] -oc-pink-7 = oc-pink-list['7'] -oc-pink-8 = oc-pink-list['8'] -oc-pink-9 = oc-pink-list['9'] - - -// Grape -// ─────────────────────────────────── - -oc-grape-list = { - '0': #f8f0fc, - '1': #f3d9fa, - '2': #eebefa, - '3': #e599f7, - '4': #da77f2, - '5': #cc5de8, - '6': #be4bdb, - '7': #ae3ec9, - '8': #9c36b5, - '9': #862e9c -} - -oc-grape-0 = oc-grape-list['0'] -oc-grape-1 = oc-grape-list['1'] -oc-grape-2 = oc-grape-list['2'] -oc-grape-3 = oc-grape-list['3'] -oc-grape-4 = oc-grape-list['4'] -oc-grape-5 = oc-grape-list['5'] -oc-grape-6 = oc-grape-list['6'] -oc-grape-7 = oc-grape-list['7'] -oc-grape-8 = oc-grape-list['8'] -oc-grape-9 = oc-grape-list['9'] - - -// Violet -// ─────────────────────────────────── - -oc-violet-list = { - '0': #f3f0ff, - '1': #e5dbff, - '2': #d0bfff, - '3': #b197fc, - '4': #9775fa, - '5': #845ef7, - '6': #7950f2, - '7': #7048e8, - '8': #6741d9, - '9': #5f3dc4 -} - -oc-violet-0 = oc-violet-list['0'] -oc-violet-1 = oc-violet-list['1'] -oc-violet-2 = oc-violet-list['2'] -oc-violet-3 = oc-violet-list['3'] -oc-violet-4 = oc-violet-list['4'] -oc-violet-5 = oc-violet-list['5'] -oc-violet-6 = oc-violet-list['6'] -oc-violet-7 = oc-violet-list['7'] -oc-violet-8 = oc-violet-list['8'] -oc-violet-9 = oc-violet-list['9'] - - -// Indigo -// ─────────────────────────────────── - -oc-indigo-list = { - '0': #edf2ff, - '1': #dbe4ff, - '2': #bac8ff, - '3': #91a7ff, - '4': #748ffc, - '5': #5c7cfa, - '6': #4c6ef5, - '7': #4263eb, - '8': #3b5bdb, - '9': #364fc7 -} - -oc-indigo-0 = oc-indigo-list['0'] -oc-indigo-1 = oc-indigo-list['1'] -oc-indigo-2 = oc-indigo-list['2'] -oc-indigo-3 = oc-indigo-list['3'] -oc-indigo-4 = oc-indigo-list['4'] -oc-indigo-5 = oc-indigo-list['5'] -oc-indigo-6 = oc-indigo-list['6'] -oc-indigo-7 = oc-indigo-list['7'] -oc-indigo-8 = oc-indigo-list['8'] -oc-indigo-9 = oc-indigo-list['9'] - - -// Blue -// ─────────────────────────────────── - -oc-blue-list = { - '0': #e7f5ff, - '1': #d0ebff, - '2': #a5d8ff, - '3': #74c0fc, - '4': #4dabf7, - '5': #339af0, - '6': #228be6, - '7': #1c7ed6, - '8': #1971c2, - '9': #1864ab -} - -oc-blue-0 = oc-blue-list['0'] -oc-blue-1 = oc-blue-list['1'] -oc-blue-2 = oc-blue-list['2'] -oc-blue-3 = oc-blue-list['3'] -oc-blue-4 = oc-blue-list['4'] -oc-blue-5 = oc-blue-list['5'] -oc-blue-6 = oc-blue-list['6'] -oc-blue-7 = oc-blue-list['7'] -oc-blue-8 = oc-blue-list['8'] -oc-blue-9 = oc-blue-list['9'] - - -// Cyan -// ─────────────────────────────────── - -oc-cyan-list = { - '0': #e3fafc, - '1': #c5f6fa, - '2': #99e9f2, - '3': #66d9e8, - '4': #3bc9db, - '5': #22b8cf, - '6': #15aabf, - '7': #1098ad, - '8': #0c8599, - '9': #0b7285 -} - -oc-cyan-0 = oc-cyan-list['0'] -oc-cyan-1 = oc-cyan-list['1'] -oc-cyan-2 = oc-cyan-list['2'] -oc-cyan-3 = oc-cyan-list['3'] -oc-cyan-4 = oc-cyan-list['4'] -oc-cyan-5 = oc-cyan-list['5'] -oc-cyan-6 = oc-cyan-list['6'] -oc-cyan-7 = oc-cyan-list['7'] -oc-cyan-8 = oc-cyan-list['8'] -oc-cyan-9 = oc-cyan-list['9'] - - -// Teal -// ─────────────────────────────────── - -oc-teal-list = { - '0': #e6fcf5, - '1': #c3fae8, - '2': #96f2d7, - '3': #63e6be, - '4': #38d9a9, - '5': #20c997, - '6': #12b886, - '7': #0ca678, - '8': #099268, - '9': #087f5b -} - -oc-teal-0 = oc-teal-list['0'] -oc-teal-1 = oc-teal-list['1'] -oc-teal-2 = oc-teal-list['2'] -oc-teal-3 = oc-teal-list['3'] -oc-teal-4 = oc-teal-list['4'] -oc-teal-5 = oc-teal-list['5'] -oc-teal-6 = oc-teal-list['6'] -oc-teal-7 = oc-teal-list['7'] -oc-teal-8 = oc-teal-list['8'] -oc-teal-9 = oc-teal-list['9'] - - -// Green -// ─────────────────────────────────── - -oc-green-list = { - '0': #ebfbee, - '1': #d3f9d8, - '2': #b2f2bb, - '3': #8ce99a, - '4': #69db7c, - '5': #51cf66, - '6': #40c057, - '7': #37b24d, - '8': #2f9e44, - '9': #2b8a3e -} - -oc-green-0 = oc-green-list['0'] -oc-green-1 = oc-green-list['1'] -oc-green-2 = oc-green-list['2'] -oc-green-3 = oc-green-list['3'] -oc-green-4 = oc-green-list['4'] -oc-green-5 = oc-green-list['5'] -oc-green-6 = oc-green-list['6'] -oc-green-7 = oc-green-list['7'] -oc-green-8 = oc-green-list['8'] -oc-green-9 = oc-green-list['9'] - - -// Lime -// ─────────────────────────────────── - -oc-lime-list = { - '0': #f4fce3, - '1': #e9fac8, - '2': #d8f5a2, - '3': #c0eb75, - '4': #a9e34b, - '5': #94d82d, - '6': #82c91e, - '7': #74b816, - '8': #66a80f, - '9': #5c940d -} - -oc-lime-0 = oc-lime-list['0'] -oc-lime-1 = oc-lime-list['1'] -oc-lime-2 = oc-lime-list['2'] -oc-lime-3 = oc-lime-list['3'] -oc-lime-4 = oc-lime-list['4'] -oc-lime-5 = oc-lime-list['5'] -oc-lime-6 = oc-lime-list['6'] -oc-lime-7 = oc-lime-list['7'] -oc-lime-8 = oc-lime-list['8'] -oc-lime-9 = oc-lime-list['9'] - - -// Yellow -// ─────────────────────────────────── - -oc-yellow-list = { - '0': #fff9db, - '1': #fff3bf, - '2': #ffec99, - '3': #ffe066, - '4': #ffd43b, - '5': #fcc419, - '6': #fab005, - '7': #f59f00, - '8': #f08c00, - '9': #e67700 -} - -oc-yellow-0 = oc-yellow-list['0'] -oc-yellow-1 = oc-yellow-list['1'] -oc-yellow-2 = oc-yellow-list['2'] -oc-yellow-3 = oc-yellow-list['3'] -oc-yellow-4 = oc-yellow-list['4'] -oc-yellow-5 = oc-yellow-list['5'] -oc-yellow-6 = oc-yellow-list['6'] -oc-yellow-7 = oc-yellow-list['7'] -oc-yellow-8 = oc-yellow-list['8'] -oc-yellow-9 = oc-yellow-list['9'] - - -// Orange -// ─────────────────────────────────── - -oc-orange-list = { - '0': #fff4e6, - '1': #ffe8cc, - '2': #ffd8a8, - '3': #ffc078, - '4': #ffa94d, - '5': #ff922b, - '6': #fd7e14, - '7': #f76707, - '8': #e8590c, - '9': #d9480f -} - -oc-orange-0 = oc-orange-list['0'] -oc-orange-1 = oc-orange-list['1'] -oc-orange-2 = oc-orange-list['2'] -oc-orange-3 = oc-orange-list['3'] -oc-orange-4 = oc-orange-list['4'] -oc-orange-5 = oc-orange-list['5'] -oc-orange-6 = oc-orange-list['6'] -oc-orange-7 = oc-orange-list['7'] -oc-orange-8 = oc-orange-list['8'] -oc-orange-9 = oc-orange-list['9'] diff --git a/config.toml b/config.toml index 315dd55..c4a3122 100644 --- a/config.toml +++ b/config.toml @@ -1,7 +1,6 @@ baseURL = 'https://cybermonkey.net.au' languageCode = 'en-us' title = 'Code Monkey Cybersecurity' -theme = "" # (Optional β€” only if you're using a theme) # Optional: better URLs canonifyURLs = true @@ -25,12 +24,31 @@ buildExpired = false umami_site_id = "970ff30a-ab5d-4c66-8f77-55cafc76083c" assetDir = "assets" +[sitemap] + changefreq = "monthly" + priority = 0.5 + filename = "sitemap.xml" + # Optional: social links [social] github = "https://github.com/CodeMonkeyCybersecurity" facebook = "https://facebook.com/codemonkeycyber" twitter = "https://x.com/codemonkeycyber" +[outputs] +home = ["HTML", "RSS", "JSON"] + +[outputFormats.Robots] +mediaType = "text/plain" +baseName = "robots" +isPlainText = true +notAlternative = true + +[outputFormats.JSON] +mediaType = "application/json" +baseName = "index" +isPlainText = true + # Optional: default settings for content [markup] [markup.goldmark.renderer] @@ -38,4 +56,4 @@ buildExpired = false # Optional: default frontmatter for new pages [frontmatter] - date = ["lastmod", ":git", "date"] + date = ["lastmod", ":git", "date"] \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 23165dd..e76f96e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,13 +1,19 @@ + {{ partial "head.html" . }} + - {{ partial "header.html" . }} - {{ partial "nav.html" . }} +
+ + + {{ partial "nav.html" . }} +
-
+
+ {{ partial "breadcrumbs.html" . }} {{ block "main" . }}{{ end }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..d42d9ee --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,26 @@ + + +{{ define "main" }} +
+

{{ .Title }}

+ {{ with .Content }} +
{{ . }}
+ {{ end }} + + {{ $pages := .Pages.ByDate.Reverse }} + {{ $paginator := .Paginate $pages 12 }} + +
+ {{ range $paginator.Pages }} + + {{ end }} +
+ + {{ partial "pagination.html" . }} +
+{{ end }} \ No newline at end of file diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..c1d2677 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,13 @@ + + +{{ define "main" }} +
+

{{ .Title }}

+ + + +
{{ .Content }}
+
+{{ end }} \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 9790b38..9f26a1e 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -72,4 +72,4 @@

Public Key

View -{{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/page/single.html b/layouts/page/single.html deleted file mode 100644 index 3b13742..0000000 --- a/layouts/page/single.html +++ /dev/null @@ -1,6 +0,0 @@ -{{ define "main" }} -
-

{{ .Title }}

- {{ .Content }} -
-{{ end }} diff --git a/layouts/partials/breadcrumbs-schema.html b/layouts/partials/breadcrumbs-schema.html new file mode 100644 index 0000000..cd1330f --- /dev/null +++ b/layouts/partials/breadcrumbs-schema.html @@ -0,0 +1,23 @@ + + +{{/* JSON-LD breadcrumb schema – inject in */}} +{{ if not .IsHome }} + {{ $crumbs := .Breadcrumb.Current }} + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html new file mode 100644 index 0000000..db948cf --- /dev/null +++ b/layouts/partials/breadcrumbs.html @@ -0,0 +1,17 @@ + + + +{{/* Visible breadcrumb trail */}} +{{ if not .IsHome }} + {{ $crumbs := .Breadcrumb.Current }} + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 06e78a5..663dcd2 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,3 +1,28 @@ + + + + +

© {{ now.Format "2006" }} Code Monkey Cybersecurity. ABN: 77 177 673 061. All rights reserved.

-
+ \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index bdc332d..c797476 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,9 +1,81 @@ + +{{- /* --------- METADATA ---------- */ -}} +{{- $title := printf "%s | Code Monkey Cybersecurity" .Title -}} +{{- $desc := .Params.description | default "Cybersecurity with Humans" -}} + -{{ .Title }} | Code Monkey Cybersecurity - + + {{/* teal-7, adjust if needed */}} + +{{ $title }} + + + + + + + + + + + + + + + + + + +{{/* ---- CSS bundle ---- */}} +{{- $openColor := resources.Get "openColour/open-color.css" }} +{{- $tokens := resources.Get "css/tokens.css" }} +{{- $styles := resources.Get "css/styles.css" }} +{{- $sidebar := resources.Get "css/sidebar.css" }} +{{- $nav := resources.Get "css/nav.css" }} +{{- $dropdown := resources.Get "css/dropdown.css" }} +{{- $kb := resources.Get "css/components/kb.css" }} + +{{- $css := slice $openColor $tokens $styles $sidebar $nav $dropdown $kb | resources.Concat "css/site.css" | resources.Minify | resources.Fingerprint -}} + + + +{{/* ---- JS ---- */}} + + + + +{{/* Umami Analytics */}} +{{ with .Site.Params.umami_script }} + {{ $umamiID := $.Site.Params.umami_site_id }} + {{ if $umamiID }} + + {{ end }} +{{ end }} + +{{ if not .IsHome }} + {{ partial "breadcrumbs-schema.html" . }} +{{ end }} - - - - \ No newline at end of file + + \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index a9c9960..50a8a4a 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,3 +1,5 @@ + +

diff --git a/layouts/partials/kb-item.html b/layouts/partials/kb-item.html index c012ae5..f0084a1 100644 --- a/layouts/partials/kb-item.html +++ b/layouts/partials/kb-item.html @@ -1,5 +1,10 @@ +

{{ .Title }}

-

{{ .Desc }}

- {{ .Title }} -
+ {{ with .Desc }} +

{{ . }}

+ {{ end }} + + {{ .Title }} + + \ No newline at end of file diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 8887494..a8fdd87 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -1,9 +1,22 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/layouts/partials/single.html b/layouts/partials/single.html index acef7e3..ab4c5a7 100644 --- a/layouts/partials/single.html +++ b/layouts/partials/single.html @@ -1,5 +1,22 @@ + + {{ define "main" }} -
- {{ .Content }} -
+ + +
+ {{ .Content }} +
+{{ end }} + +{{ define "breadcrumb" }} + {{ if .Parent }} + {{ template "breadcrumb" .Parent }} / + {{ end }} + {{ .Title }} {{ end }} \ No newline at end of file diff --git a/layouts/shortcodes/callout.html b/layouts/shortcodes/callout.html new file mode 100644 index 0000000..dc2db3d --- /dev/null +++ b/layouts/shortcodes/callout.html @@ -0,0 +1,5 @@ + + +
+ {{ .Get 0 | title }}: {{ .Inner }} +
\ No newline at end of file diff --git a/static/assets/fonts b/static/assets/fonts deleted file mode 120000 index 862375b..0000000 --- a/static/assets/fonts +++ /dev/null @@ -1 +0,0 @@ -../../assets/fonts \ No newline at end of file From e6ce84fa0557947547b6a687efb9415051ff0d96 Mon Sep 17 00:00:00 2001 From: henry Date: Mon, 26 May 2025 04:15:26 +0800 Subject: [PATCH 02/36] Refactor code structure for improved readability and maintainability --- assets/css/nav.css | 152 ++++-------------- assets/css/tokens.css | 53 +++--- assets/{css => js}/sidebar.js | 21 ++- content/_index.md | 8 + content/contact/_index.md | 10 ++ content/delphi-notify/use-cases.md | 13 ++ content/delphi/_index.md | 68 ++++++++ content/docs/_index.md | 10 ++ content/pricing/roadmap.md | 17 ++ layouts/partials/header.html | 15 +- layouts/partials/nav.html | 9 +- {assets => static}/images/README.md | 0 .../images/favicon-circular-128x128.png | Bin .../images/favicon-circular-16x16.png | Bin .../images/favicon-circular-32x32.png | Bin .../images/favicon-circular-64x64.png | Bin .../images/favicon-circular-apple-touch.png | Bin ...p_oc-teal-9_FILL0_wght400_GRAD0_opsz48.png | Bin 18 files changed, 212 insertions(+), 164 deletions(-) rename assets/{css => js}/sidebar.js (60%) create mode 100644 content/_index.md create mode 100644 content/contact/_index.md create mode 100644 content/delphi-notify/use-cases.md create mode 100644 content/delphi/_index.md create mode 100644 content/docs/_index.md create mode 100644 content/pricing/roadmap.md rename {assets => static}/images/README.md (100%) rename {assets => static}/images/favicon-circular-128x128.png (100%) rename {assets => static}/images/favicon-circular-16x16.png (100%) rename {assets => static}/images/favicon-circular-32x32.png (100%) rename {assets => static}/images/favicon-circular-64x64.png (100%) rename {assets => static}/images/favicon-circular-apple-touch.png (100%) rename {assets => static}/images/fingerprint_flipped_whitebackground_circle_1000dp_oc-teal-9_FILL0_wght400_GRAD0_opsz48.png (100%) diff --git a/assets/css/nav.css b/assets/css/nav.css index ea902ce..a0d6967 100644 --- a/assets/css/nav.css +++ b/assets/css/nav.css @@ -1,128 +1,36 @@ /* assets/css/nav.css */ +.book-nav li a { + display: block; + padding: 0.5rem 1rem; + background-color: var(--color-brand); + color: var(--color-bg); + text-decoration: none; + font-weight: 500; + border-radius: 5px; + transition: background-color 0.3s ease, color 0.3s ease; +} + +.book-nav li a:hover { + background-color: var(--color-accent); + color: var(--color-bg); +} -/* Base nav styles */ -nav { - background-color: var(--primary-hover); - padding: 10px 0; - } - - nav ul { - list-style-type: none; - margin: 0; - padding: 0; - display: flex; - justify-content: center; - } - - nav ul li { - margin: 0 15px; - } - - nav ul li a { - display: inline-block; - padding: 0.5rem 1rem; - background-color: var(--primary); - color: var(--bg); - text-decoration: none; - border-radius: 5px; - font-weight: 500; - font-size: 1rem; - transition: background 0.3s ease; - } - - nav ul li a:hover { - background-color: var(--accent); - color: var(--bg); - } - - /* Desktop nav */ - @media (min-width: 769px) { - nav ul { - gap: 1rem; - } - } - - /* Mobile nav, dropdowns, and hamburger */ - @media (max-width: 768px) { - /* Hamburger menu */ - .hamburger { - display: flex; - flex-direction: column; - cursor: pointer; - padding: 10px; - margin-left: 20px; - gap: 0.5rem; - } - - .hamburger span { - height: 3px; - width: 25px; - background: var(--bg); - border-radius: 2px; - transition: all 0.3s ease; - } - - .hamburger.active span:nth-child(1) { - transform: rotate(45deg) translate(5px, 5px); - } - - .hamburger.active span:nth-child(2) { - opacity: 0; - } - - .hamburger.active span:nth-child(3) { - transform: rotate(-45deg) translate(5px, -5px); - } - - /* Nav collapse behavior */ - nav ul { - flex-direction: column; - align-items: flex-start; - overflow: hidden; - max-height: 0; - transition: max-height 0.3s ease-out; - } - - nav ul.active { - max-height: 500px; - } - - nav li, - nav a { - width: 100%; - } - - /* Dropdown mobile behavior */ - .dropdown-content { - position: static; - } - - .dropdown-content a { - padding: 1rem; - font-size: 1.1rem; - } - - .dropdown:hover .dropdown-content { - display: none; - } - - .dropdown .dropbtn:focus + .dropdown-content, - .dropdown .dropbtn.active + .dropdown-content { - display: block; - } - } +.book-nav li a.active { + border-left: 3px solid var(--color-brand); + background-color: var(--oc-gray-1); + padding-left: 0.5rem; +} -.search-container { - display: flex; - justify-content: center; - margin-top: 10px; +/* Sidebar-specific tweaks */ +.book-menu { + background: var(--color-surface); + color: var(--color-text); + border-right: 1px solid var(--oc-gray-3); } -.search-container input { - padding: 0.5rem 1rem; - font-size: 1rem; - border: 1px solid var(--oc-gray-3); - border-radius: 4px; - width: 300px; - max-width: 80%; +/* Input styling should inherit color tokens */ +.book-search input { + background-color: var(--color-bg); + color: var(--color-text); + border: 1px solid var(--oc-gray-4); } \ No newline at end of file diff --git a/assets/css/tokens.css b/assets/css/tokens.css index 75dbfdc..fb51baa 100644 --- a/assets/css/tokens.css +++ b/assets/css/tokens.css @@ -1,30 +1,39 @@ -/* assets/css/tokens.css – semantic layer on top of Open-Color */ -:root{ - color-scheme: light dark; - --color-bg: var(--oc-gray-0); - --color-surface: var(--oc-gray-1); - --color-text: var(--oc-gray-9); - --color-brand: var(--oc-teal-6); - --color-brand-hover: var(--oc-teal-7); - --color-accent: var(--oc-orange-5); -} +/* assets/css/tokens.css β€” semantic layer on top of Open-Color */ -/* Light (default) */ :root { + /* Explicitly opt into auto color schemes */ + color-scheme: light dark; + + /* Default: Light mode */ --color-bg: var(--oc-gray-0); --color-surface: var(--oc-gray-1); --color-text: var(--oc-gray-9); - --color-brand: var(--oc-teal-6); - --color-brand-hover: var(--oc-teal-7); + + /* Brand colors β€” unified across light/dark */ + --color-brand: var(--oc-teal-8); + --color-brand-hover: var(--oc-teal-6); + --color-accent: var(--oc-orange-5); } -/* Dark mode (manual via .dark class) */ -.dark { - --color-bg: var(--oc-gray-9); - --color-surface: var(--oc-gray-8); - --color-text: var(--oc-gray-0); - --color-brand: var(--oc-teal-3); - --color-brand-hover: var(--oc-teal-2); - --color-accent: var(--oc-orange-4); -} \ No newline at end of file +/* Auto dark mode via system preference */ +@media (prefers-color-scheme: light) { + :root { + --color-bg: var(--oc-gray-9); + --color-surface: var(--oc-gray-8); + --color-text: var(--oc-gray-0); + + /* Brand colors stay the same */ + --color-brand: var(--oc-teal-8); + --color-brand-hover: var(--oc-teal-6); + + --color-accent: var(--oc-orange-4); + } +} + +/* Use consistently themed variables */ +--primary: var(--color-brand); +--primary-hover: var(--color-brand-hover); +--accent: var(--color-accent); +--bg: var(--color-bg); +--text: var(--color-text); \ No newline at end of file diff --git a/assets/css/sidebar.js b/assets/js/sidebar.js similarity index 60% rename from assets/css/sidebar.js rename to assets/js/sidebar.js index 27cd3c7..fd5e2ff 100644 --- a/assets/css/sidebar.js +++ b/assets/js/sidebar.js @@ -1,11 +1,15 @@ -// static/assets/js/sidebar.js +// assets/js/sidebar.js document.addEventListener('DOMContentLoaded', () => { const checkbox = document.getElementById('menu-control'); const sidebar = document.querySelector('.book-menu'); const toggleBtn = document.querySelector('.menu-toggle'); - toggleBtn.setAttribute('aria-expanded', 'false'); + if (!checkbox || !sidebar || !toggleBtn) return; + + toggleBtn.setAttribute('aria-expanded', 'false'); + const closeSidebar = () => { checkbox.checked = false; }; + const openSidebar = () => { checkbox.checked = true; }; // Dismiss on outside click document.addEventListener('click', (e) => { @@ -14,21 +18,22 @@ document.addEventListener('DOMContentLoaded', () => { !sidebar.contains(e.target) && !e.target.closest('.menu-toggle') ) { - checkbox.checked = false; + closeSidebar(); } }); - // (Optional) Hover-to-open only on pointer devices - if (window.matchMedia('(hover: hover)').matches) { + // Hover-to-open (pointer devices only) + const hoverEnabled = window.matchMedia('(hover: hover)').matches; + if (hoverEnabled) { sidebar.addEventListener('mouseenter', () => { - if (!checkbox.checked) checkbox.checked = true; + if (!checkbox.checked) openSidebar(); }); sidebar.addEventListener('mouseleave', () => { - if (window.innerWidth < 1024) checkbox.checked = false; + if (window.innerWidth < 1024) closeSidebar(); }); } - // Accessibility: Update aria-expanded + // Update aria-expanded on toggle checkbox.addEventListener('change', () => { toggleBtn.setAttribute('aria-expanded', checkbox.checked.toString()); }); diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..e94486f --- /dev/null +++ b/content/_index.md @@ -0,0 +1,8 @@ + + +--- +title: "Code Monkey Cybersecurity" +description: "Open-source tools for human-first cybersecurity." +--- + +Welcome to Code Monkey Cybersecurity. We're building Delphi to bring trusted, real-time security alerts to small teams, NGOs, and high-impact organizations. \ No newline at end of file diff --git a/content/contact/_index.md b/content/contact/_index.md new file mode 100644 index 0000000..e46696e --- /dev/null +++ b/content/contact/_index.md @@ -0,0 +1,10 @@ +--- +title: "Contact" +description: "Reach out to us directly." +--- + +We’d love to hear from you. + +- Email: [main@cybermonkey.net.au](mailto:main@cybermonkey.net.au) +- Signal: Ask for our public key +- GitHub: [CodeMonkeyCybersecurity](https://github.com/CodeMonkeyCybersecurity) \ No newline at end of file diff --git a/content/delphi-notify/use-cases.md b/content/delphi-notify/use-cases.md new file mode 100644 index 0000000..20ee0b6 --- /dev/null +++ b/content/delphi-notify/use-cases.md @@ -0,0 +1,13 @@ +--- +title: "Use Cases" +description: "How Delphi Notify helps teams respond smarter." +--- + +### Small IT Team +Receive critical alerts in Mattermost only after a human has confirmed they're not false positives. + +### NGO Field Ops +Route verified alerts to satellite-connected email devices or mobile phones to avoid noisy flapping. + +### MSSP +Allow Tier 1 analysts to verify and forward only the most relevant security events. \ No newline at end of file diff --git a/content/delphi/_index.md b/content/delphi/_index.md new file mode 100644 index 0000000..b72a48a --- /dev/null +++ b/content/delphi/_index.md @@ -0,0 +1,68 @@ +--- +title: "Delphi" +description: "Managed XDR/SIEM platform from Code Monkey Cybersecurity" +date: 2025-05-23 +draft: false +--- + +## 🚨 What Is Delphi? + +**Delphi** is Code Monkey Cybersecurity’s managed **XDR** (Extended Detection and Response) and **SIEM** (Security Information and Event Management) platform β€” built for real-world security, not checkbox compliance. + +At its core, Delphi helps you detect threats, understand what they mean, and act fast. It's built on **Wazuh**, a trusted open-source platform used by security teams worldwide β€” but we’ve hardened it, simplified it, and layered on human-first support. + +--- + +## πŸ” Key Features + +- **Real-Time Threat Detection** + Continuous monitoring of endpoints, servers, cloud resources, and more β€” with detection rules tailored for small business and nonprofit environments. + +- **Human-Curated Alerts** + We don’t just spam you with logs. Each alert is reviewed, categorized, and explained in plain English β€” with recommended next steps. + +- **Custom Dashboards & Reports** + Gain visibility into your security posture with dashboards tailored to your industry and assets. + +- **Self-Hosted or Fully Managed** + Run it yourself with our open-source scripts, or let us handle everything β€” deployment, maintenance, tuning, and updates. + +- **Multi-Tenant Support (Beta)** + Isolate customer environments while maintaining central visibility β€” ideal for MSPs or multi-org setups. + +--- + +## πŸ›  Built on Proven Tools + +Delphi integrates and hardens: +- **Wazuh** for SIEM/XDR core +- **OpenSearch** for log analytics and dashboards +- **Keycloak** for secure identity and access +- **Vault** for secret and token management +- **EOS** and **Hecate** for automated deployment, backup, and reverse proxy setup + +--- + +## πŸ’¬ Who's It For? + +- Small businesses who can’t afford a SOC but still need security. +- Nonprofits and community orgs who value privacy and transparency. +- Managed service providers (MSPs) who want a white-labeled, tenant-aware solution. +- Cybersecurity teams who want full control without full overhead. + +--- + +## βš™οΈ Coming Soon + +- Self-service agent enrollment +- Automatic remediation for common threats +- Secure file collection (e.g. forensic triage) +- Chatbot-integrated alert explanations (LLM-powered) + +--- + +## πŸ“¦ Try Delphi + +Want to test it yourself? +- Visit the live beta: [delphi.cybermonkey.net.au](https://delphi.cybermonkey.net.au) +- Or head to the [Athena Knowledge Base](https://wiki.cybermonkey.net.au/Delphi) for setup guides. \ No newline at end of file diff --git a/content/docs/_index.md b/content/docs/_index.md new file mode 100644 index 0000000..57de97d --- /dev/null +++ b/content/docs/_index.md @@ -0,0 +1,10 @@ +--- +title: "Documentation" +description: "CLI install, API reference, and integrations." +--- + +Welcome to the Delphi Notify docs. + +- [CLI Setup](../docs/cli/) +- [Webhook API](../docs/api/) +- [Wazuh Integration](../docs/integrations/wazuh/) \ No newline at end of file diff --git a/content/pricing/roadmap.md b/content/pricing/roadmap.md new file mode 100644 index 0000000..c554cf7 --- /dev/null +++ b/content/pricing/roadmap.md @@ -0,0 +1,17 @@ +--- +title: "Roadmap" +description: "The path from Notify to full Delphi." +--- + +### βœ… Now: Delphi Notify (MVP) +- Email, Telegram, Mattermost output +- Wazuh and Suricata input +- Verification UI + +### πŸ”œ Next: Delphi Notify Teams +- Audit log, alert history +- Team-based routing + +### πŸš€ Future: Delphi Full +- Dashboard, playbooks, XDR +- Tenant isolation and alert enrichment \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 50a8a4a..2c163fe 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,12 +1,13 @@
-

- - Code Monkey Logo - - {{ .Title }} -

+

+ + Code Monkey Logo + + {{ .Site.Title }} +

Cybersecurity with Humans

\ No newline at end of file diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index a8fdd87..6624249 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -1,9 +1,8 @@ - -