diff options
| author | Kamen Mladenov <kamen.d.mladenov@protonmail.com> | 2021-05-16 05:17:37 +0000 |
|---|---|---|
| committer | Kamen Mladenov <kamen.d.mladenov@protonmail.com> | 2021-05-16 05:17:37 +0000 |
| commit | ffd59fcdc11b8b57cab30be090d2775d2b6b1ba3 (patch) | |
| tree | 3e82cb2864aec05505509e1afc01c6843f0a64a9 /ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/styles.css | |
| parent | 2ac139d0854c0f6d1b4cebc1487dd41128f00c60 (diff) | |
| parent | 564209043493c77fd51ac096b5a160bb20c46f12 (diff) | |
| download | it-kariera-exam-template-ffd59fcdc11b8b57cab30be090d2775d2b6b1ba3.tar it-kariera-exam-template-ffd59fcdc11b8b57cab30be090d2775d2b6b1ba3.tar.gz it-kariera-exam-template-ffd59fcdc11b8b57cab30be090d2775d2b6b1ba3.zip | |
Merge branch 'fuckoff' into 'master'
New structure
See merge request Syndamia/it-kariera-exam-template!2
Diffstat (limited to 'ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/styles.css')
| -rw-r--r-- | ExamTemplate/Web/ExamTemplate.Web/wwwroot/css/styles.css | 143 |
1 files changed, 143 insertions, 0 deletions
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; +} |
