Moved nabvar to it's own cshtml and simplified it a lot; Removed most of the default css and js from wwwroot; Implemented a very simple custom styling that mimmics the default asp.net bootstrap one

1 files changed, 89 insertions, 0 deletions

diff --git a/ExamTemplate/Web/wwwroot/css/styles.css b/ExamTemplate/Web/wwwroot/css/styles.css
new file mode 100644
index 0000000..51631c0
--- /dev/null
+++ b/ExamTemplate/Web/wwwroot/css/styles.css
@@ -0,0 +1,89 @@
+
+/* 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 {
+  width: 100%;
+  background-color: white;
+}
+
+.navbar, footer {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.navbar a {
+  padding-left: 5px;
+  padding-right: 5px;
+  text-decoration: none;
+  color: #343a40;
+}
+
+.navbar a:hover {
+  color: black;
+}
+
+.navbar-contents {
+  width: 100%;
+  display: flex;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.navbar-contents > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Other general stuff */
+
+.flex-spacer {
+  flex: 1;
+}