From f35a7aecd313547a6f6478a056fb2d5593f1c07b Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sat, 15 May 2021 22:20:53 +0300
Subject: Big daddy refactor

---
 .../Web/ExamTemplate.Web/wwwroot/css/styles.css    | 143 +++++++++++++++++++++
 1 file changed, 143 insertions(+)
 create mode 100644 ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/styles.css

(limited to 'ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/styles.css')

diff --git a/ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/styles.css b/ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/styles.css
new file mode 100644
index 0000000..e7fc7b3
--- /dev/null
+++ b/ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/styles.css
@@ -0,0 +1,143 @@
+
+/* Change the maximum width of content (stuff inside pages and navbar),
+ * depending on width of browser window.
+ * Configuration copied from default Bootstrap
+ */
+
+@media (min-width: 576px) {
+  :root {
+    --max-content-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  :root {
+    --max-content-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  :root {
+    --max-content-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  :root {
+    --max-content-width: 1140px;
+  }
+}
+
+/* Main */
+
+.main {
+  width: 100%;
+  height: 100%;
+}
+
+  /* Stuff that you need in the middle portion
+   * of the screen (like the stuff inside the
+   * navbar and footer) should be inside
+   * an element with this tag
+   */
+.middle-content-container {
+  max-width: var(--max-content-width);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Navbar and footer */
+
+.navbar, .footer-content {
+  width: 100%;
+  min-height: 45px;
+
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navbar section > :not(*:first-child) {
+  padding-left: 5px;
+}
+
+.navbar section > :not(*:last-child) {
+  padding-right: 5px;
+}
+
+.navbar a {
+  text-decoration: none;
+  color: #343a40;
+}
+
+.navbar a:hover {
+  color: black;
+}
+
+.navbar-contents {
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+}
+
+.navbar-contents > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Forms */
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+}
+
+.main > div > form {
+  margin-top: 10px;
+}
+
+.main > div > form:first-child {
+  width: 100%;
+  max-width: 300px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+form > * {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+input {
+  margin: 5px;
+  padding: 9px;
+  border: 1px solid darkgrey;
+  border-radius: 4px;
+}
+
+input[type="submit"] {
+  color: white;
+  background-color: black;
+}
+
+input[type="submit"]:hover {
+  cursor: pointer;
+}
+
+.form-error {
+  font-size: 0.8em;
+  color: red;
+}
+
+/* Other general stuff */
+
+.flex-spacer {
+  flex: 1;
+}
-- 
cgit v1.2.3