From 07a102bcf7dabae0e65ceb30c9f80c3c5cdb8667 Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Fri, 16 May 2025 14:37:27 +0100 Subject: [PATCH] Add all current work --- css/.gitignore | 0 css/grid.css | 208 ++++++++++++++++++++ css/mvp.css | 503 ++++++++++++++++++++++++++++++++++++++++++++++++ css/reset.css | 76 ++++++++ img/.gitignore | 0 js/.gitignore | 0 js/clipboard.js | 51 +++++ js/tabs.js | 76 ++++++++ 8 files changed, 914 insertions(+) create mode 100644 css/.gitignore create mode 100644 css/grid.css create mode 100644 css/mvp.css create mode 100644 css/reset.css create mode 100644 img/.gitignore create mode 100644 js/.gitignore create mode 100644 js/clipboard.js create mode 100644 js/tabs.js diff --git a/css/.gitignore b/css/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/css/grid.css b/css/grid.css new file mode 100644 index 0000000..c0121da --- /dev/null +++ b/css/grid.css @@ -0,0 +1,208 @@ +/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */ +/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */ +/* https://stackoverflow.com/a/45059944 */ +/* Flex grid, done similarly to a float: left. So content needs to be within the grid */ +/* -ms-grid-columns: 1fr (20px 1fr)[3]; */ +/* grid-template-columns: 1fr repeat(3, 20px 1fr); */ +/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */ + +html{ + font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */ +} + +:root { + --sm: 0; + --md: 0; + --lg: 0; +} +:root { + --active-brightness: 0.85; + --border-radius: 8px; + --box-shadow: 0px 2px 8px; + --color-accent: #dae9f6; + --color-bg: #fff; + --color-bg-secondary: #e9e9e9; + --color-link: #118bee; + --color-secondary: #508ce2; + --color-secondary-accent: #dee9fa; + --color-shadow: #f4f4f4; + --color-table: #118bee; + --color-text: #000; + --color-text-secondary: #999; + --color-scrollbar: #cacae8; + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + --hover-brightness: 1.2; + --justify-important: center; + --justify-normal: left; + --line-height: 1.5; + --width-card: 285px; + --width-card-medium: 460px; + --width-card-wide: 800px; + --width-content: 1080px; +} +@media (prefers-color-scheme: dark) { + :root[color-mode="user"] { + --color-accent: #0097fc; + --color-bg: #333; + --color-bg-secondary: #555; + --color-link: #0097fc; + --color-secondary: #e20de9; + --color-secondary-accent: #e20de9; + --color-shadow: #bbbbbb20; + --color-table: #0097fc; + --color-text: #f7f7f7; + --color-text-secondary: #aaa; + } +} + +.container{ + margin: 0 auto; + max-width: var(--width-content); + padding: 1.4rem 1rem; + /* overflow: auto; */ +} +.container--no-topgap{ + padding-top: 0; +} +.container--no-botgap{ + padding-bottom: 0; +} +.container--no-gap{ + /* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */ + padding-bottom: 0; + padding-top: 0; +} + + +.row { + position: relative; + width: 100%; + + display: flex; + flex-wrap: wrap; + align-items: flex-start; + flex-direction: row; + row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */ +} + +.row+.row{ + margin-top: 1.4rem; +} + +/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */ +/* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */ +/* .col>*{ */ +.col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption, +.col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main, +.col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{ + width: 100%; +} +/* inline elements */ +.col img{ + max-width: 100%; + height: auto; + margin-right: auto; + margin-left: auto; +} + + +/* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */ +/* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */ +.row [class^="col"]{ + padding-right: 0.625rem; /* ~20px gap = 20/16(html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */ + padding-left: 0.625rem; /* In place of gap, so it can be full width rows */ + + /* display: flex; */ + /* flex-wrap: wrap; */ + min-height: 0.125rem; +} + + +.row--scroll{ + flex-wrap: nowrap; + overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */ + justify-content: left; + /* Scrollbar stuff */ + scrollbar-color: #444 transparent; + scrollbar-width: thin; + padding-bottom: .5rem; +} +.row--scroll [class^="col"]{ + +} + +.col{ + flex: 0 0 auto; +} + +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-12 { + flex: 0 0 100%; +} + +/* (100/12) * x = the flex % */ +.col-sm-1 { flex: 0 0 8.33%; } +.col-sm-2 { flex: 0 0 16.66%; } +.col-sm-3 { flex: 0 0 25%; } +.col-sm-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */ +.col-sm-4 { flex: 0 0 33.33%; } +.col-sm-5 { flex: 0 0 41.66%; } +.col-sm-6 { flex: 0 0 50%; } +.col-sm-7 { flex: 0 0 58.33%; } +.col-sm-8 { flex: 0 0 66.66%; } +.col-sm-9 { flex: 0 0 75%; } +.col-sm-10 { flex: 0 0 83.33%; } +.col-sm-11 { flex: 0 0 91.66%; } +.col-sm-12 { flex: 0 0 100%; } + +.hidden-sm { + display: none; +} + +@media only screen and (min-width: 33.75rem) { /* ~540px */ +} + +@media only screen and (min-width: 45rem) { /* ~720px */ + .col-1 { flex: 0 0 8.33%; } + .col-2 { flex: 0 0 16.66%; } + .col-3 { flex: 0 0 25%; } + .col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */ + .col-4 { flex: 0 0 33.33%; } + .col-5 { flex: 0 0 41.66%; } + .col-6 { flex: 0 0 50%; } + .col-7 { flex: 0 0 58.33%; } + .col-8 { flex: 0 0 66.66%; } + .col-9 { flex: 0 0 75%; } + .col-10 { flex: 0 0 83.33%; } + .col-11 { flex: 0 0 91.66%; } + .col-12 { flex: 0 0 100%; } + + .hidden-sm { display: block; } +} + +@media only screen and (min-width: 60em) { /* ~960px */ +} + +/* Try to avoid !important, have each rule set to keep track of */ +.no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{ + padding: 0; /* In-case elements want to be full-width, touching, etc */ +} + +.row--align-center{ align-items: center;} +.col--align-center{ align-self: center; align-self: anchor-center} + +/* Sort into col/sm areas with media queries */ +.col-grow, .col-grow-sm +,.col-fill, .col-fill-sm{ + flex-grow: 1; +} diff --git a/css/mvp.css b/css/mvp.css new file mode 100644 index 0000000..7c110ab --- /dev/null +++ b/css/mvp.css @@ -0,0 +1,503 @@ +/* Based on MVP.css v1.15 - https://github.com/andybrewer/mvp */ +/* Altered to BEM, with other changes, and my own flex-box grid system */ + +*{ + box-sizing: border-box; +} + +html{scroll-behavior: smooth} +@media (prefers-reduced-motion: reduce){ + html{scroll-behavior: auto} +} + +/* Footer fixed to bottom */ +html,body{height: 100%} +body{display: flex;flex-direction: column;} +main, .main{ flex: 1 0 auto } + + +/* Layout */ +body { + background: var(--color-bg); + color: var(--color-text); + font-family: var(--font-family); + line-height: var(--line-height); + margin: 0; + overflow-x: hidden; + padding: 0; +} + + +/* Alerts */ +.alert{ + background: var(--color-secondary-accent); + border-left: 4px solid var(--color-secondary); + border-right: 4px solid var(--color-secondary); + padding: .1rem .8rem; + margin-bottom:.5rem; +} +.alert--error{ + background: #f05870; + border-color: #e90d30; +} +.alert--warning{ + background: #e8e85b; + border-color: #ddde11; +} +.alert--success{ + background: #60c572; + border-color: #18ab34; +} +/* /Alerts */ +hr{ + background-color: var(--color-bg-secondary); + border: none; + height: 1px; + width: 100%; + max-width: var(--width-content); + margin: .5rem auto; +} + +section img, +article img { + max-width: 100%; +} + +section pre { + overflow: auto; +} + +/* Cards is a row */ +/* Best to do this with grid, but there's less browser support... */ +.card{ + /* As not using grid atm, no solution to keep cards the same size when flex-wrapped */ + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + padding: 1.25rem; + /* flex: 0 0 var(--width-card); */ + background: #FFF; + + display: block !important; /* Unset row/col default */ +} +.card:hover { + box-shadow: var(--box-shadow) var(--color-bg-secondary); +} +.row--cards{ + align-items: stretch; /* For cards to be "same height", requires the height 100% on card */ +} +.row--cards .card{ + height: 100%; /* To make multiple cards next to each other 'same' height */ +} + + +/* Nav */ +.nav a{ + text-decoration: none; +} +.nav a{ + color: #CCC; +} + + +/* Lists */ +ol li, +ul li { + padding: 0.2rem 0; +} + +.no-bullet-point{ + list-style: none; +} +/* Inline lists */ +.inline-list { + list-style: none; + padding: 0; + margin-left: -0.5rem; /* To offset the start of li margin. Little jank */ +} + +.inline-list li { + display: inline-block; + margin: 0 0.5rem; + position: relative; + text-align: left; +} +.inline-list>li{ /* Only affects first level li */ + padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */ +} + + +/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */ +/* Nav/inline-list Dropdown */ +.inline-list li:hover ul { + display: block; +} + +/* ?? maybe change */ +.inline-list li ul { + background: var(--color-bg); + border: 1px solid var(--color-bg-secondary); + border-top: 10px solid transparent; + border-radius: var(--border-radius); + display: none; + height: auto; + padding: .5rem 1rem; + position: absolute; + top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */ + white-space: nowrap; + width: auto; + z-index: 1; + + /* Centre */ + /* left: 50%; + transform: translate(-50%, 0); */ + /* Left */ + left: 0; + /* Right */ + /* transform: translate(-50%, 0); */ +} + +.inline-list li ul::before { + /* fill gap above to make mousing over them easier */ + /* background-color: green; */ + content: ""; + position: absolute; + left: 0; + right: 0; + top: -0.5rem; + height: 0.5rem; +} + +.inline-list li ul li, +.inline-list li ul li a { + display: block; +} + + +/* Typography */ +p { + padding: 0; + width: 100%; +} +p+p, h1+p{ /* Para after para should space out */ + margin-top: .75rem; +} + +mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */ + padding: 0.1rem; + background: #ff8c00; +} + +small { + color: var(--color-text-secondary); +} + +code,samp { + font-family: monospace; + background-color: var(--color-accent); + border-radius: var(--border-radius); + color: var(--color-text); + display: inline-block; + margin: 0 0.1rem; + padding: 0 0.5rem; +} +pre { + margin: .5rem 0; + padding: 0.5rem 2rem; + display: block; + font-size: .9rem; + line-height: 1.3rem; + + background-color: var(--color-accent); + border-radius: var(--border-radius); + color: var(--color-text); + overflow-x: auto; + + white-space: pre-wrap; + border: 1px solid #c1cfda; +} + + +details { + margin: .7rem 0; +} +details summary { + margin-bottom: .8rem; + font-weight: bold; + cursor: pointer; +} + + +/* Links */ +a{ + color: var(--color-link); + display: inline-block; + font-weight: bold; + text-decoration: underline; +} + +a:hover { + filter: brightness(var(--hover-brightness)); +} + +a:active { + filter: brightness(var(--active-brightness)); +} + +/* Buttons/Inputs */ +.button, +button, +input[type="submit"] +{ + background: #FEFEFE; + border: 2px solid var(--color-link); + border-radius: var(--border-radius); + display: inline-block; + font-size: .9rem; + font-weight: bold; + line-height: var(--line-height); + margin-top: 0.5rem; + padding: .6rem 1.2rem; + text-decoration: none; +} + +.button + .button, +button + button{ + margin-left: 6px; +} + +.button--small, +button.button--small, +input[type="submit"].button--small{ + padding: .2rem 1.6rem; +} + +.button, +button, +input[type="submit"] +{ + font-family: var(--font-family); +} + +.button:hover, +button:hover, +input[type="submit"]:hover +{ + cursor: pointer; + filter: brightness(var(--hover-brightness)); +} + +.button:active, +button:active, +input[type="submit"]:active +{ + filter: brightness(var(--active-brightness)); +} + +.button--blue, +button.button--blue, +input[type="submit"].button--blue +{ + background-color: var(--color-link); + color: var(--color-bg); +} + + +/* Images */ +figure { + margin: 0; + padding: 0; +} + +figure img { + max-width: 100%; +} + +figure figcaption { + color: var(--color-text-secondary); +} + + +/* Forms */ +button:disabled, +input:disabled { + background: var(--color-bg-secondary); + border-color: var(--color-bg-secondary); + color: var(--color-text-secondary); + cursor: not-allowed; +} + +button[disabled]:hover, +input[type="submit"][disabled]:hover { + filter: none; +} + +form { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + display: block; + max-width: var(--width-card-wide); + min-width: var(--width-card); + padding: 1.5rem; + text-align: var(--justify-normal); + margin: 0 auto; +} + +form header { + margin: 1.5rem 0; + padding: 1.5rem 0; +} + +input, +label, +select, +textarea { + display: block; + font-size: inherit; + max-width: var(--width-card-wide); +} + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; +} + +input[type="checkbox"]+label, +input[type="radio"]+label { + display: inline-block; + font-weight: normal; + position: relative; + top: 1px; +} + +input[type="range"] { + padding: 0.4rem 0; +} + +input, +select, +textarea { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + margin-bottom: 1rem; + padding: 0.4rem 0.8rem; +} + +input[type="text"], +input[type="password"] +textarea { + width: calc(100% - 1.6rem); +} + +input[readonly], +textarea[readonly] { + background-color: var(--color-bg-secondary); +} + +label { + font-weight: bold; + margin-bottom: 0.2rem; +} + +/* Popups */ +.modal{ + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + box-shadow: var(--box-shadow) var(--color-shadow); + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 50%; + z-index: 999; +} + +/* Tables */ +.table-container{ + overflow-x: auto; +} +table { + border: 1px solid var(--color-bg-secondary); + border-radius: var(--border-radius); + border-spacing: 0; + max-width: 100%; + white-space: nowrap; + + text-align: left; + border-collapse: collapse; + overflow-wrap: normal; +} + +table td, +table th, +table tr { + padding: 0.4rem 0.8rem; + text-align: var(--justify-important); +} + +table thead tr { + background-color: var(--color-table); + /* border-radius: var(--border-radius); */ + color: var(--color-bg); + margin: 0; + padding: 0; +} + +table thead tr { + border-top-left-radius: var(--border-radius); +} + +tbody tr:nth-child(even) { + background-color: var(--color-accent); +} +tbody tr:nth-child(odd) { + background-color: #FFF; +} + +/* Quotes */ +blockquote { + display: block; + font-size: x-large; + line-height: var(--line-height); + margin: 1rem auto; + max-width: var(--width-card-medium); + padding: 1.5rem 1rem; + text-align: var(--justify-important); +} + +blockquote footer{ + color: var(--color-text-secondary); + display: block; + font-size: small; + line-height: var(--line-height); + padding: 1.5rem 0; +} + +/* Misc helpers */ +.tar{ text-align: right; } + +.no-padd{ padding: 0; } + +/* Tags */ +.tag{ + background-color: var(--color-secondary); + border-radius: var(--border-radius); + color: var(--color-bg); + font-size: xx-small; + font-weight: bold; + padding: 0.2rem 1rem; + position: relative; + top:-2px; + display: inline-block; + vertical-align: middle; +} + +.banner{ + background: #eee; +} + + +.hide{ + display: none; +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..e73893c --- /dev/null +++ b/css/reset.css @@ -0,0 +1,76 @@ +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Prevent font size inflation */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Remove default margin in favour of better control in authored CSS */ +body, h1, h2, h3, h4, p, +figure, blockquote, dl, dd { + margin: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul, +ol { + margin:0; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + line-height: 1.5; +} + +/* Set shorter line heights on headings and interactive elements */ +h1, h2, h3, h4, h5, h6, +button, input, label { + line-height: 1.35; +} + +/* Balance text wrapping on headings */ +h1, h2, h3, h4, h5, h6 { + text-wrap: balance; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, button, +textarea, select { + font-family: inherit; + font-size: inherit; +} + +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; +} + +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; +} + +ul, ol{ + padding: 0; + list-style-position: inside; +} diff --git a/img/.gitignore b/img/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/js/.gitignore b/js/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/js/clipboard.js b/js/clipboard.js new file mode 100644 index 0000000..b8b9c5d --- /dev/null +++ b/js/clipboard.js @@ -0,0 +1,51 @@ +// clip-area = Where the clip will occur (when clicked) +// clip-tooltip = The tooltip, may pre post? clip-tooltip-pre clip-tooltip-post +// clip-copy = What (element) content will be copied to clipboard + + +function copyToClipboard(elementId) { + + /* Get the text field */ + var copyText = document.getElementById(elementId); + + /* Select the text field */ + copyText = copyText.textContent; + + /* Copy the text inside the text field */ + navigator.clipboard.writeText(copyText); + + var tooltip = document.getElementsByClassName('tooltiptext'); + for (var i = 0; i < tooltip.length; i++) { + tooltip[i].innerHTML = "Copied"; + } + +} + +function resetCopy() { + + var tooltip = document.getElementsByClassName('tooltiptext'); + for (var i = 0; i < tooltip.length; i++) { + tooltip[i].innerHTML = "Copy to clipboard"; + } + +} + +// Event Listeners + +//const clipboard = querySelector('.tooltiptext'); +const minecraft = document.getElementById('minecraft-clip'); +minecraft.addEventListener('click', function (event) { copyToClipboard('minecraft-server'); }); + +const terraria = document.getElementById('terraria-clip'); +terraria.addEventListener('click', function (event) { copyToClipboard('terraria-server'); }); + +const factorio = document.getElementById('factorio-clip'); +factorio.addEventListener('click', function (event) { copyToClipboard('factorio-server'); }); + +var tooltipped = document.getElementsByClassName('tooltipped'); +for (var i = 0; i < tooltipped.length; i++) { + //tooltipped[i].addEventListener('click', function (event) { copyToClipboard(); }); + // this clipboard + tooltipped[i].addEventListener('mouseout', function (event) { resetCopy(); }); +} + diff --git a/js/tabs.js b/js/tabs.js new file mode 100644 index 0000000..7bbeead --- /dev/null +++ b/js/tabs.js @@ -0,0 +1,76 @@ +// data-tabs-group = The group +// data-tabs-id = The item number (id) of the tab within the group +// data-tabs-tab = If the element is a tab object (to be toggled) +// data-tabs-button = An element that will toggle the tabs of its group/id + +// Make each 'tab' have a click event. +let tabButtons = document.querySelectorAll('[data-tabs-button]'); +// document.querySelectorAll('[data-foo="1"]'); +// let tabs = document.getElementsByClassName('tab'); +for (let i = 0; i < tabButtons.length; i++) { + tabButtons[i].addEventListener('click', function (event) { + + let tabGroup = this.dataset.tabsGroup; + let tabId = this.dataset.tabsId; + let tabToShow = document.querySelector('[data-tabs-tab][data-tabs-group="'+tabGroup+'"][data-tabs-id="'+tabId+'"]'); + + hideTabs(this.dataset.tabsId, this.dataset.tabsGroup); /* Hide all other tabs in the group */ + tabToShow.classList.remove("hide"); /* Show the tab that's been selected */ + otherTabTasks(tabToShow, tabGroup, tabId); /* Do anything else that's needed, as to keep the main loop clean(ish) */ + + }); +} + +// When id=0 it's the default, so tab=1, OR tabs-active +// group=0 also default to ALL the tabgroups, not just one specified +function hideTabs(id=0, group=0){ + // Hide all tabs but those I don't wanna + let query = '[data-tabs-tab][data-tabs-id]'; + if(group == 0){ + // Tabs that aren't default + query +=':not([data-tabs-default])'; + }else{ + // Tabs in group (filtered in loop via their id) + query +='[data-tabs-group="'+group+'"]'; + } + let tabs = document.querySelectorAll(query); + for (let i = 0; i < tabs.length; i++) { + if(id == 0){ + tabs[i].classList.add("hide"); + } + if(id != 0 && tabs[i].dataset.tabsId != id){ + tabs[i].classList.add("hide"); + } + } +} + +// On page load, display:none all the tabs that shouldn't be shown +// Done in JS, so if it's disabled, etc. users will see all the data (despite how ugly) +hideTabs(); + +function otherTabTasks(tabToShow, tabGroup, tabId){ + // This should be streamlined I reckon + if(tabGroup == 'servers'){ + + document.getElementById('servers').classList.remove('servers-bg--mc', 'servers-bg--factorio'); + + if(tabId == 'minecraft'){ + document.getElementById('servers').classList.add('servers-bg--mc'); + } + else if(tabId == 'factorio'){ + document.getElementById('servers').classList.add('servers-bg--factorio'); + } + + // Uh oh, loop each 'button' in the ul and have only the current one be 'selected' + // Will need to unjank this, but it works on the design in HTML. Will likely want to do some changes + let query = '.button[data-tabs-button][data-tabs-group="'+tabGroup+'"]'; + let buttons = document.querySelectorAll(query); + for (let i = 0; i < buttons.length; i++) { + if(buttons[i].dataset.tabsId == tabId){ + buttons[i].classList.add("button--blue"); + }else{ + buttons[i].classList.remove("button--blue"); + } + } + } +}