More styling

2021-08-20 16:23:12 -07:00
parent 5851d738f8
commit 43c0ed193e
13 changed files with 423 additions and 201 deletions
--- a/src/Layout.module.css
+++ b/src/Layout.module.css
@@ -0,0 +1,69 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  margin: 0 20px;
+  flex: 1;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  flex: 1;
+  min-width: 200px;
+  width: auto;
+  max-width: none;
+  padding: 12px;
+  background-color: rgba(33,38,44,.9);
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.sidebar h5 {
+  color: rgb(142, 153, 164);
+  font-size: 13px;
+  margin: 0 0 8px 0;
+}
+
+.center {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  color: #232f32;
+  border-radius: 8px;
+  padding: 25px 60px;
+  max-width: 400px;
+  background-color: white;
+  flex: 1;
+  margin-bottom: 20px;
+}
+
+.modal h2 {
+  margin: 0 0 20px 0;
+}
+
+.info {
+  font-size: 13px;
+  text-align: center;
+}
+
+@media (min-width: 600px) { 
+  .sidebar {
+    height: 100%;
+    overflow-y: auto;
+    max-width: 320px;
+    margin-bottom: 0;
+  }
+
+  .content {
+    flex-direction: row;
+  }
+
+  .modal {
+    margin-bottom: 0;
+  }
+}