start homepage design, add languages and themes

src/views/home/home.module.css

@@ -1,13 +1,24 @@
 .content {
-  color: var(--color);
-  font-size: 20px;
+  color: var(--color-primary);
   width: 100%;
   height: 100%;
+  margin: auto;
   text-align: left;
   width: 57.69em;
   min-width: 750px;
 }
 
+.debug {
+  position: fixed;
+  top: 0;
+  right: 0;
+  padding: 0.5em;
+}
+
+.debug select {
+  margin: 2px;
+}
+
 .logo img {
   width: 300px;
   height: 120px;
@@ -15,6 +26,67 @@
 
 .logo {
   margin: 0px auto;
+  text-align: center;
+}
+
+.box {
+  background: var(--text-background);
+  color: var(--text-black);
+  border: 1px solid;
+  margin-bottom: 0.5em;
+  padding-bottom: 0.5em;
+}
+
+.boxBar {
+  background: var(--color-primary);
+  color: var(--text-primary);
+  padding-left: 0.5em;
+  line-height: 2em;
+}
+
+.boxBar h2 {
+  font-size: 131%;
+  font-weight: 700;
+}
+
+.boxContent {
+  line-height: 1.5em;
+  font-size: 93%;
+  padding: 0.5em;
+  padding-top: 0.25em;
+  padding-bottom: 0;
+}
+
+.boxContent a, .boxContent a:visited{
+  color: var(--text-link);
+}
+
+.searchBar {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.searchBar input, .searchBar button {
+  font-size: 18px;
+  height: 30px;
+  box-sizing: border-box;
+  appearance: none;
+  border-radius: 0px;
+  border: 1px solid rgb(170, 170, 170);
+  outline: none;
+}
+
+.searchBar input {
+  width: 400px;
+  padding: 3px 10px;
+}
+
+.searchBar button {
+  font-size: 15px;
+  margin-left: 4px;
+  padding: 3px 10px;
+  background-color: rgb(239, 239, 239);
+  position: absolute;
 }
 
 @media (max-width: 768px) {