diff --git a/development/styles/base.css b/development/styles/base.css
new file mode 100644
index 00000000..fb1725b2
--- /dev/null
+++ b/development/styles/base.css
@@ -0,0 +1,16 @@
+:root {
+ --square-size: 5vw;
+ --board-squares-per-side: 8;
+ --piece-resource-padding: 0.75vw;
+ --notation-padding: 1vw;
+ --inventory-squares-per-side: 4;
+ --shop-squares: 2;
+}
+
+body {
+ overflow: hidden;
+ margin: 0;
+ font-family: system-ui, sans-serif;
+ display: flex;
+ flex-direction: row;
+}
diff --git a/development/styles/styles.css b/development/styles/components.css
similarity index 61%
rename from development/styles/styles.css
rename to development/styles/components.css
index dad3f2d9..40f08cf1 100644
--- a/development/styles/styles.css
+++ b/development/styles/components.css
@@ -1,35 +1,3 @@
-:root {
- --square-size: 5vw;
- --board-squares-per-side: 8;
- --piece-resource-padding: 0.75vw;
- --notation-padding: 1vw;
- --inventory-squares-per-side: 4;
- --shop-squares: 2;
-}
-
-body {
- overflow: hidden;
- margin: 0;
- font-family: system-ui, sans-serif;
- display: flex;
- flex-direction: row;
-}
-
-#left-column {
- flex: 1;
- height: 100vh;
-}
-
-#center-column {
- flex: 2;
- height: 100vh;
-}
-
-#right-column {
- flex: 1;
- height: 100vh;
-}
-
#boards-container {
height: calc(var(--square-size) * var(--board-squares-per-side));
width: calc(var(--square-size) * var(--board-squares-per-side));
@@ -66,16 +34,6 @@ body {
z-index: 1;
}
-.disabled {
- cursor: not-allowed !important;
- pointer-events: none !important;
- background-color: lightgray !important;
-}
-
-.collapsed {
- display: none !important;
-}
-
.square {
height: var(--square-size);
width: var(--square-size);
@@ -110,16 +68,6 @@ body {
text-align: end;
}
-path {
- position: relative;
- z-index: -10;
-}
-
-.outline {
- stroke: black;
- stroke-width: 1em;
-}
-
.piece {
z-index: 10;
}
@@ -255,111 +203,3 @@ path {
flex-direction: row;
justify-content: center;
}
-
-@media screen and (max-width: 1200px) {
- .notation {
- font-size: 0.6em;
- }
-
- #info-container p {
- font-size: 0.8em;
- }
-
- #logs-container p {
- font-size: 0.8em;
- }
-
- #boards-buttons-container button {
- font-size: 0.6em;
- }
-}
-
-@media screen and (max-width: 768px) {
- .notation {
- font-size: 0.4em;
- }
-
- #info-container p {
- font-size: 0.6em;
- }
-
- #logs-container p {
- font-size: 0.6em;
- }
-
- #boards-buttons-container button {
- font-size: 0.4em;
- }
-}
-
-.beige-background {
- background-color: burlywood;
-}
-
-.brown-background {
- background-color: brown;
-}
-
-.dark-red-background {
- background-color: #5f0505;
-}
-
-.blue-background {
- background-color: #0da5ce;
-}
-
-.water-background {
- background-color: #cef0f9;
-}
-
-.dark-orange-background {
- background-color: #7f3b08;
-}
-
-.highlight-background::before {
- content: '';
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: rgb(255, 222, 100, 0.5);
-}
-
-.highlight-legal-move::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 25%;
- height: 25%;
- border-radius: 50%;
- background-color: rgb(0, 0, 0, 0.25);
- z-index: 100;
- pointer-events: none;
-}
-
-.black {
- fill: #333333;
-}
-
-.white {
- fill: #f5f5f5;
-}
-
-.log-color-general {
- color: black;
-}
-
-.log-color-kill {
- color: red;
-}
-
-.log-color-rule {
- color: plum;
-}
-
-.log-color-movement {
- color: gray;
-}
diff --git a/development/styles/layout.css b/development/styles/layout.css
new file mode 100644
index 00000000..38c2cd19
--- /dev/null
+++ b/development/styles/layout.css
@@ -0,0 +1,14 @@
+#left-column {
+ flex: 1;
+ height: 100vh;
+}
+
+#center-column {
+ flex: 2;
+ height: 100vh;
+}
+
+#right-column {
+ flex: 1;
+ height: 100vh;
+}
diff --git a/development/styles/responsive.css b/development/styles/responsive.css
new file mode 100644
index 00000000..dc97d134
--- /dev/null
+++ b/development/styles/responsive.css
@@ -0,0 +1,35 @@
+@media screen and (max-width: 1200px) {
+ .notation {
+ font-size: 0.6em;
+ }
+
+ #info-container p {
+ font-size: 0.8em;
+ }
+
+ #logs-container p {
+ font-size: 0.8em;
+ }
+
+ #boards-buttons-container button {
+ font-size: 0.6em;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .notation {
+ font-size: 0.4em;
+ }
+
+ #info-container p {
+ font-size: 0.6em;
+ }
+
+ #logs-container p {
+ font-size: 0.6em;
+ }
+
+ #boards-buttons-container button {
+ font-size: 0.4em;
+ }
+}
diff --git a/development/styles/states.css b/development/styles/states.css
new file mode 100644
index 00000000..f42d569b
--- /dev/null
+++ b/development/styles/states.css
@@ -0,0 +1,9 @@
+.disabled {
+ cursor: not-allowed !important;
+ pointer-events: none !important;
+ background-color: lightgray !important;
+}
+
+.collapsed {
+ display: none !important;
+}
diff --git a/development/styles/themes.css b/development/styles/themes.css
new file mode 100644
index 00000000..3e1b6d7d
--- /dev/null
+++ b/development/styles/themes.css
@@ -0,0 +1,76 @@
+.outline {
+ stroke: black;
+ stroke-width: 1em;
+}
+
+.highlight-background::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: rgb(255, 222, 100, 0.5);
+}
+
+.highlight-legal-move::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 25%;
+ height: 25%;
+ border-radius: 50%;
+ background-color: rgb(0, 0, 0, 0.25);
+ z-index: 100;
+ pointer-events: none;
+}
+
+.beige-background {
+ background-color: burlywood;
+}
+
+.brown-background {
+ background-color: brown;
+}
+
+.dark-red-background {
+ background-color: #5f0505;
+}
+
+.blue-background {
+ background-color: #0da5ce;
+}
+
+.water-background {
+ background-color: #cef0f9;
+}
+
+.dark-orange-background {
+ background-color: #7f3b08;
+}
+
+.black {
+ fill: #333333;
+}
+
+.white {
+ fill: #f5f5f5;
+}
+
+.log-color-general {
+ color: black;
+}
+
+.log-color-kill {
+ color: red;
+}
+
+.log-color-rule {
+ color: plum;
+}
+
+.log-color-movement {
+ color: gray;
+}
diff --git a/development/views/index.html b/development/views/index.html
index 143c9ff3..74dbd530 100644
--- a/development/views/index.html
+++ b/development/views/index.html
@@ -3,7 +3,12 @@
Chess But Better
-
+
+
+
+
+
+