From f35a7aecd313547a6f6478a056fb2d5593f1c07b Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 15 May 2021 22:20:53 +0300 Subject: Big daddy refactor --- .../Web/ExamTemplate.Web/wwwroot/css/site.css | 79 ++++++++++++ .../Web/ExamTemplate.Web/wwwroot/css/styles.css | 143 +++++++++++++++++++++ .../Web/ExamTemplate.Web/wwwroot/favicon.ico | Bin 0 -> 32038 bytes 3 files changed, 222 insertions(+) create mode 100644 ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/site.css create mode 100644 ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/styles.css create mode 100644 ExamTemplate/Web/ExamTemplate.Web/wwwroot/favicon.ico (limited to 'ExamTemplate/Web/ExamTemplate.Web/wwwroot') diff --git a/ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/site.css b/ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/site.css new file mode 100644 index 0000000..5923427 --- /dev/null +++ b/ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/site.css @@ -0,0 +1,79 @@ +/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification +for details on configuring this project to bundle and minify static web assets. */ + +a.navbar-brand { + white-space: normal; + text-align: center; + word-break: break-all; +} + +/* Provide sufficient contrast against white background */ +a { + color: #0366d6; +} + +.btn-primary { + color: #fff; + background-color: #1b6ec2; + border-color: #1861ac; +} + +.nav-pills .nav-link.active, .nav-pills .show > .nav-link { + color: #fff; + background-color: #1b6ec2; + border-color: #1861ac; +} + +/* Sticky footer styles +-------------------------------------------------- */ +html { + font-size: 14px; +} +@media (min-width: 768px) { + html { + font-size: 16px; + } +} + +.border-top { + border-top: 1px solid #e5e5e5; +} +.border-bottom { + border-bottom: 1px solid #e5e5e5; +} + +.box-shadow { + box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); +} + +button.accept-policy { + font-size: 1rem; + line-height: inherit; +} + +/* Sticky footer styles +-------------------------------------------------- */ +html { + position: relative; + min-height: 100%; + line-height: 1.15; +} + +body { + min-height: 100vh; + margin: 0; + font-size: 1.15em; + background-color: white; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +/* The following is kinda dirty, that's why it's separated */ + +body { + display: flex; + flex-direction: column; +} + +body > main { + flex: 1; +} 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; +} diff --git a/ExamTemplate/Web/ExamTemplate.Web/wwwroot/favicon.ico b/ExamTemplate/Web/ExamTemplate.Web/wwwroot/favicon.ico new file mode 100644 index 0000000..a3a7999 Binary files /dev/null and b/ExamTemplate/Web/ExamTemplate.Web/wwwroot/favicon.ico differ -- cgit v1.2.3