Languages update and some better organization and optimization

2025-11-04 13:08:25 +01:00
parent 72e83a3c30
commit 44b349dbca
14 changed files with 770 additions and 1034 deletions
--- a/html/vixenchroma.css
+++ b/html/vixenchroma.css
@@ -0,0 +1,156 @@
+:root {
+    --header-image: url('/img/LINE_TXT_REVERSE.png');
+    --body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
+
+    /* colors */
+    --content: #43256E;
+}
+
+@font-face {
+    font-family: ADDSBP;
+    src: url('/ADDSBP.TTF');
+}
+
+body {
+    cursor: url('/img/cursor.png')6 0, auto;
+    font-family: 'ADDSBP';
+    margin: 0;
+    background-color: #08031A;
+    background-size: 960px;
+    color: #fceaff;
+    background-image: var(--body-bg-image);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+#container {
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+#headerArea {
+    text-align: center;
+    height: 40px;
+}
+
+#container a {
+    color: #1E74FD;
+    font-weight: bold;
+}
+
+#header {
+    width: 100%;
+    background-size: 100%;
+    background-color: #241445;
+    height: 400px;
+    background-image: var(--header-image);
+}
+
+#flex {
+    display: flex;
+}
+
+a {
+    text-decoration: none;
+}
+
+li a {
+    color: #1E74FD;
+    font-weight: 800;
+    text-decoration: none;
+    cursor: url('/img/cursor_click.png')6 0, auto;
+}
+
+li a:hover {
+    color: #a49cba;
+    text-decoration: underline;
+}
+
+aside {
+    background-color: #241445;
+    width: 200px;
+    padding: 20px;
+    font-size: smaller;
+}
+
+main {
+    background-color: #43256E;
+    flex: 1;
+    padding: 20px;
+    order: 2;
+}
+
+/* what's this "order" stuff about??
+allow me to explain!
+if you're using both sidebars, the "order" value
+tells the CSS the order in which to display them.
+left sidebar is 1, content is 2, and right sidebar is 3! */
+
+*/ #leftSidebar {
+    order: 1;
+}
+
+#rightSidebar {
+    order: 3;
+}
+
+footer {
+    background-color: #13092D;
+    width: 100%;
+    height: 40px;
+    padding: 8px;
+    text-align: center;
+}
+
+h1,
+h2,
+h3,
+pre {
+    color: #1E74FD;
+}
+
+h1 {
+    font-size: 25px;
+}
+
+strong {
+    color: #1E74FD;
+}
+
+.box {
+    background-color: #13092D;
+    border: 1px solid #1E74FD;
+    padding: 8px;
+}
+
+#topBar {
+    width: 100%;
+    height: 30px;
+    padding: 8px;
+    font-size: smaller;
+    background-color: #13092D;
+}
+
+@media only screen and (max-width: 800px) {
+    #flex {
+        flex-wrap: wrap;
+    }
+
+    aside {
+        width: 100%;
+    }
+    
+    main {
+        order: 1;
+    }
+
+    #leftSidebar {
+        order: 2;
+    }
+
+    #rightSidebar {
+        order: 3;
+    }
+}