diff --git a/assets/css/main.css b/assets/css/main.css index 240e1f6..88f8b2b 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -206,4 +206,44 @@ s-bottom-sheet>div { width: 100%; height: 100%; object-fit: contain; -} \ No newline at end of file +} + +.developer-list-page { + padding: 20px; + text-align: center; +} + +#developer-list-title { + font-size: xx-large; + font-weight: bold; + color: var(--s-color-primary); + margin-bottom: 20px; +} + +#developer-list { + display: flex; + flex-direction: column; + gap: 15px; + align-items: center; /* Center the content horizontally */ +} + +.developer { + padding: 15px 30px; /* Add padding to ensure space around the text */ + border-radius: 10px; + background-color: var(--s-color-surface-container); + box-shadow: var(--s-elevation-level1, 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)); + width: 80%; /* Ensure that the container doesn't stretch across the entire width */ + max-width: 600px; /* Set a maximum width for larger screens */ + box-sizing: border-box; + text-align: center; /* Center the text within each container */ +} + +.developer .name { + font-size: large; + font-weight: bold; +} + +.developer .role { + font-size: medium; + color: var(--s-color-secondary); +} diff --git a/assets/js/main.js b/assets/js/main.js index 11573bd..9ef019b 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -206,3 +206,7 @@ function coolButtons(buttonsEl) { } } } + +function showDeveloperList() { + gotoPage('developers'); +} diff --git a/index.html b/index.html index 5247096..7388224 100644 --- a/index.html +++ b/index.html @@ -10,17 +10,6 @@