Moved website data to /www/

2026-02-18 19:38:46 +00:00
parent 39e1090b91
commit ec97367b78
9 changed files with 0 additions and 0 deletions
--- a/www/styles.css
+++ b/www/styles.css
@ -0,0 +1,167 @@
+:root {
+    --header-colour: #00000031;
+    --main-colour: #393e41;
+    --footer-colour: #00000031;
+    --text-colour: #f6f7eb;
+    --text-accent-colour: #e94f37;
+    --button-border-colour: var(--text-accent-colour);
+    --button-border-highlight-colour: #f7b3a9;
+
+    --header-size: 50px;
+    --tab-transition-time: 250ms; /* Must be in ms for JS parsing */
+}
+
+
+
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    color: var(--text-colour);
+    font-family: sans-serif;
+    display: flex;
+    flex-flow: column;
+    background-color: var(--main-colour);
+}
+
+
+
+header, main, footer {
+    width: 100%;
+}
+
+header {
+    position: fixed;
+    top: 0;
+    background-color: var(--header-colour);
+}
+
+/* Required to set the width and height of the header, as `fixed` elements can't have their size set. */
+header > div {
+    width: 100vw;
+    height: var(--header-size);
+    backdrop-filter: blur(10px);
+}
+
+header > div > * {
+    height: var(--header-size);
+}
+
+main {
+    flex: 1 1 auto;
+    margin-top: var(--header-size);
+    text-align: center;
+    background-color: var(--main-colour);
+}
+
+main > article {
+    display: unset;
+    transition: filter var(--tab-transition-time), opacity var(--tab-transition-time);
+}
+
+.hiddenTab {
+    filter: blur(10px);
+    opacity: 0;
+}
+
+footer {
+    flex: 0 1 auto;
+    display: flex;
+    padding: 20px 0 20px 0;
+    background-color: var(--footer-colour);
+}
+
+footer > div {
+    width: 50%;
+    height: fit-content;
+    margin: auto 0 auto 0;
+    text-align: center;
+}
+
+footer > div > * {
+    margin: 0 auto 0 auto;
+}
+
+
+
+.mainContent {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 10px;
+    justify-content: center;
+    gap: 10px;
+}
+
+.mainContent > img {
+    max-height: 75vh;
+    max-width: 100%;
+}
+
+.mainContent > div {
+    flex: 1 1 auto;
+    min-width: 25em;
+    width: min-content;
+    text-align: left;
+}
+
+
+
+#tab-pics {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#tab-pics > * {
+    margin: 10px;
+    flex: 1 1 auto;
+    max-width: 50vw;
+    max-height: 50vh;
+    object-fit: scale-down;
+}
+
+
+
+button {
+    display: inline-flex;
+    padding: 5px;
+    border: none;
+    border-bottom: 2px solid var(--text-accent-colour);
+    background-color: #212425;
+    color: var(--text-colour);
+    align-items: center;
+    cursor: pointer;
+    transition: border-bottom-color 0.5s;
+}
+
+button > img {
+    filter: invert();
+    margin-right: 5px;
+}
+
+button:hover, .buttonHighlight {
+    border-bottom-color: var(--button-border-highlight-colour);
+}
+
+
+
+.textHighlight {
+    color: var(--text-accent-colour);
+}
+
+/* Used to make text appear to the right of an image */
+.imgRightText {
+    display: flex;
+    width: fit-content;
+}
+
+.imgRightText > img {
+    height: 100%;
+    margin-right: 5px;
+}
+
+.imgRightText > p {
+    margin: auto;
+}