From c6beacf7f562a212888c45f921460d2e7db95078 Mon Sep 17 00:00:00 2001 From: HackerNCoder Date: Tue, 22 Nov 2022 21:52:47 +0000 Subject: [PATCH] attempt to use a minimal css --- assets/css/styles.min.css | 1127 +++++++++++++++++++++++++++++++++++++ templates/layout.html | 2 +- 2 files changed, 1128 insertions(+), 1 deletion(-) create mode 100644 assets/css/styles.min.css diff --git a/assets/css/styles.min.css b/assets/css/styles.min.css new file mode 100644 index 0000000..0ae82bf --- /dev/null +++ b/assets/css/styles.min.css @@ -0,0 +1,1127 @@ +@charset "UTF-8"; +/*! +* Start Bootstrap - Grayscale v7.0.3 (https://startbootstrap.com/theme/grayscale) +* Copyright 2013-2021 Start Bootstrap +* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-grayscale/blob/master/LICENSE) +*/ +/*! + * Bootstrap v5.1.0 (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */ +:root { + --bs-blue: #0d6efd; + --bs-indigo: #6610f2; + --bs-purple: #7464a1; + --bs-pink: #d63384; + --bs-red: #a16468; + --bs-orange: #fd7e14; + --bs-yellow: #e4c662; + --bs-green: #67c29c; + --bs-teal: #64a19d; + --bs-cyan: #1cabc4; + --bs-white: #fff; + --bs-gray: #6c757d; + --bs-gray-dark: #343a40; + --bs-gray-100: #f8f9fa; + --bs-gray-200: #e9ecef; + --bs-gray-300: #dee2e6; + --bs-gray-400: #ced4da; + --bs-gray-500: #adb5bd; + --bs-gray-600: #6c757d; + --bs-gray-700: #495057; + --bs-gray-800: #343a40; + --bs-gray-900: #212529; + --bs-primary: #64a19d; + --bs-secondary: #7464a1; + --bs-success: #67c29c; + --bs-info: #1cabc4; + --bs-warning: #e4c662; + --bs-danger: #a16468; + --bs-light: #f8f9fa; + --bs-dark: #212529; + --bs-black: #000; + --bs-white: #fff; + --bs-primary-rgb: 100, 161, 157; + --bs-secondary-rgb: 116, 100, 161; + --bs-success-rgb: 103, 194, 156; + --bs-info-rgb: 28, 171, 196; + --bs-warning-rgb: 228, 198, 98; + --bs-danger-rgb: 161, 100, 104; + --bs-light-rgb: 248, 249, 250; + --bs-dark-rgb: 33, 37, 41; + --bs-black-rgb: 0, 0, 0; + --bs-white-rgb: 255, 255, 255; + --bs-white-rgb: 255, 255, 255; + --bs-black-rgb: 0, 0, 0; + --bs-body-rgb: 33, 37, 41; + --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); + --bs-body-font-family: Nunito, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; + --bs-body-font-size: 1rem; + --bs-body-font-weight: 400; + --bs-body-line-height: 1.5; + --bs-body-color: #212529; + --bs-body-bg: #fff; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +@media (prefers-reduced-motion: no-preference) { + :root { + scroll-behavior: smooth; + } +} + +body { + margin: 0; + font-family: var(--bs-body-font-family); + font-size: var(--bs-body-font-size); + font-weight: var(--bs-body-font-weight); + line-height: var(--bs-body-line-height); + color: var(--bs-body-color); + text-align: var(--bs-body-text-align); + background-color: var(--bs-body-bg); + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +h3, h2, h1 { + margin-top: 0; + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; +} + +h1 { + font-size: calc(1.375rem + 1.5vw); +} +@media (min-width: 1200px) { + h1 { + font-size: 2.5rem; + } +} + +h2 { + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { + h2 { + font-size: 2rem; + } +} + +h3 { + font-size: calc(1.3rem + 0.6vw); +} +@media (min-width: 1200px) { + h3 { + font-size: 1.75rem; + } +} + +p { + margin-top: 0; + margin-bottom: 1rem; +} + +.small { + font-size: 0.875em; +} + +a { + color: #64a19d; + text-decoration: underline; +} +a:hover { + color: #50817e; +} + +img { + vertical-align: middle; +} + +button { + border-radius: 0; +} + +button:focus:not(:focus-visible) { + outline: 0; +} + +button { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +button { + text-transform: none; +} + +button, +[type=button] { + -webkit-appearance: button; +} +button:not(:disabled), +[type=button]:not(:disabled), +[type=reset]:not(:disabled), +[type=submit]:not(:disabled) { + cursor: pointer; +} + +::-moz-focus-inner { + padding: 0; + border-style: none; +} + +::-webkit-datetime-edit-fields-wrapper, +::-webkit-datetime-edit-text, +::-webkit-datetime-edit-minute, +::-webkit-datetime-edit-hour-field, +::-webkit-datetime-edit-day-field, +::-webkit-datetime-edit-month-field, +::-webkit-datetime-edit-year-field { + padding: 0; +} + +::-webkit-inner-spin-button { + height: auto; +} + +/* rtl:raw: +[type="tel"], +[type="url"], +[type="email"], +[type="number"] { + direction: ltr; +} +*/ +::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-color-swatch-wrapper { + padding: 0; +} + +::-webkit-file-upload-button { + font: inherit; +} + +::file-selector-button { + font: inherit; +} + +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; +} + +.display-3 { + font-size: calc(1.525rem + 3.3vw); + font-weight: 300; + line-height: 1.2; +} +@media (min-width: 1200px) { + .display-3 { + font-size: 4rem; + } +} + +.display-5 { + font-size: calc(1.425rem + 2.1vw); + font-weight: 300; + line-height: 1.2; +} +@media (min-width: 1200px) { + .display-5 { + font-size: 3rem; + } +} + +.img-fluid { + max-width: 100%; + height: auto; +} + +.container { + width: 100%; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +@media (min-width: 1400px) { + .container { + max-width: 1320px; + } +} +.row { + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + margin-top: calc(var(--bs-gutter-y) * -1); + margin-right: calc(var(--bs-gutter-x) * -.5); + margin-left: calc(var(--bs-gutter-x) * -.5); +} +.row > * { + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * .5); + padding-left: calc(var(--bs-gutter-x) * .5); + margin-top: var(--bs-gutter-y); +} + +.col-8 { + flex: 0 0 auto; + width: 66.66666667%; +} + +.g-0, +.gx-0 { + --bs-gutter-x: 0; +} + +.g-0, +gy-0 { + --bs-gutter-y: 0; +} + +.gx-4 { + --bs-gutter-x: 1.5rem; +} + +@media (min-width: 768px) { + + .col-md-4 { + flex: 0 0 auto; + width: 33.33333333%; + } + + .col-md-8 { + flex: 0 0 auto; + width: 66.66666667%; + } +} + +@media (min-width: 992px) { + + .col-lg-3 { + flex: 0 0 auto; + width: 25%; + } + + .col-lg-6 { + flex: 0 0 auto; + width: 50%; + } + + .gx-lg-5 { + --bs-gutter-x: 3rem; + } +} + +.form-control[type=file]:not(:disabled):not([readonly]) { + cursor: pointer; +} +.form-control::file-selector-button { + padding: 0.375rem 0.75rem; + margin: -0.375rem -0.75rem; + -webkit-margin-end: 0.75rem; + margin-inline-end: 0.75rem; + color: #212529; + background-color: #e9ecef; + pointer-events: none; + border-color: inherit; + border-style: solid; + border-width: 0; + border-inline-end-width: 1px; + border-radius: 0; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .form-control::file-selector-button { + transition: none; + } +} +.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { + background-color: #dde0e3; +} +.form-control:hover:not(:disabled):not([readonly])::file-selector-button { + background-color: #dde0e3; +} +.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { + background-color: #dde0e3; +} +.form-control-sm::file-selector-button { + padding: 0.25rem 0.5rem; + margin: -0.25rem -0.5rem; + -webkit-margin-end: 0.5rem; + margin-inline-end: 0.5rem; +} +.form-control-lg::file-selector-button { + padding: 0.5rem 1rem; + margin: -0.5rem -1rem; + -webkit-margin-end: 1rem; + margin-inline-end: 1rem; +} +.form-control-color:not(:disabled):not([readonly]) { + cursor: pointer; +} +.form-floating > .form-control:not(:-moz-placeholder-shown) { + padding-top: 1.625rem; + padding-bottom: 0.625rem; +} +.form-floating > .form-control:not(:-ms-input-placeholder) { + padding-top: 1.625rem; + padding-bottom: 0.625rem; +} +.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label { + opacity: 0.65; + transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +} +.form-floating > .form-control:not(:-ms-input-placeholder) ~ label { + opacity: 0.65; + transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); +} + +.btn { + display: inline-block; + font-weight: 400; + line-height: 1.5; + color: #212529; + text-align: center; + text-decoration: none; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: 0.375rem 0.75rem; + font-size: 1rem; + border-radius: 0.25rem; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .btn { + transition: none; + } +} +.btn:hover { + color: #212529; +} +.btn:focus { + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(100, 161, 157, 0.25); +} +.btn:disabled { + pointer-events: none; + opacity: 0.65; +} + +.btn-primary { + color: #fff; + background-color: #64a19d; + border-color: #64a19d; +} +.btn-primary:hover { + color: #fff; + background-color: #558985; + border-color: #50817e; +} +.btn-primary:focus { + color: #fff; + background-color: #558985; + border-color: #50817e; + box-shadow: 0 0 0 0.25rem rgba(123, 175, 172, 0.5); +} +.btn-primary:active { + color: #fff; + background-color: #50817e; + border-color: #4b7976; +} +.btn-primary:active:focus { + box-shadow: 0 0 0 0.25rem rgba(123, 175, 172, 0.5); +} +.btn-primary:disabled { + color: #fff; + background-color: #64a19d; + border-color: #64a19d; +} + +.btn-lg { + padding: 1.75rem 2.5rem !important; + font-size: 1.25rem !important; + border-radius: 0.3rem; +} + +.btn-sm { + padding: 0.75rem 1.25rem !important; + border-radius: 0.2rem; +} + +.dropdown { + position: relative; +} + +.dropdown-toggle { + white-space: nowrap; +} +.dropdown-toggle::after { + display: inline-block; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; +} + +.dropdown-menu { + position: absolute; + z-index: 1000; + display: none; + min-width: 10rem; + padding: 0.5rem 0; + margin: 0; + font-size: 1rem; + color: #212529; + text-align: left; + list-style: none; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; +} + +.dropdown-item { + display: block; + width: 100%; + padding: 0.25rem 1rem; + clear: both; + font-weight: 400; + color: #212529; + text-align: inherit; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border: 0; +} +.dropdown-item:hover, .dropdown-item:focus { + color: #1e2125; + background-color: #e9ecef; +} +.dropdown-item:active { + color: #fff; + text-decoration: none; + background-color: #64a19d; +} +.dropdown-item:disabled { + color: #adb5bd; + pointer-events: none; + background-color: transparent; +} + +.btn-group { + position: relative; + display: inline-flex; + vertical-align: middle; +} +.btn-group > .btn { + position: relative; + flex: 1 1 auto; +} +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active { + z-index: 1; +} + +.navbar { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.navbar > .container { + display: flex; + flex-wrap: inherit; + align-items: center; + justify-content: space-between; +} +.navbar-brand { + padding-top: 0.3125rem; + padding-bottom: 0.3125rem; + margin-right: 1rem; + font-size: 1.25rem; + text-decoration: none; + white-space: nowrap; +} +@media (min-width: 992px) { + .navbar-expand-lg { + flex-wrap: nowrap; + justify-content: flex-start; + } +} + +.navbar-light .navbar-brand { + color: rgba(0, 0, 0, 0.9); +} +.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { + color: rgba(0, 0, 0, 0.9); +} + +.card { + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: #fff; + background-clip: border-box; + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0.25rem; +} + +.card-body { + flex: 1 1 auto; + padding: 1rem 1rem; +} + +.card-title { + margin-bottom: 0.5rem; +} + +.badge { + display: inline-block; + padding: 0.35em 0.65em; + font-size: 0.75em; + font-weight: 700; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25rem; +} + +/* rtl:begin:ignore */ + +/* rtl:end:ignore */ + +/* rtl:options: { + "autoRename": true, + "stringMap":[ { + "name" : "prev-next", + "search" : "prev", + "replace" : "next" + } ] +} */ + +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} + +.visually-hidden-focusable:not(:focus):not(:focus-within) { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +.d-grid { + display: grid !important; +} + +.d-flex { + display: flex !important; +} + +.position-relative { + position: relative !important; +} + +@media (min-width: 768px) { + .position-absolute-md { + position: absolute !important; + } +} + +.bottom-0 { + bottom: 0 !important; +} + +.end-0 { + right: 0 !important; +} + +.w-100 { + width: 100% !important; +} + +.h-100 { + height: 100% !important; +} + +.gap-2 { + gap: 0.5rem !important; +} + +.justify-content-center { + justify-content: center !important; +} + +.align-items-center { + align-items: center !important; +} + +.mx-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; +} + +.mx-auto { + margin-right: auto !important; + margin-left: auto !important; +} + +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.my-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} + +.my-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} + +.my-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} + +.mt-2 { + margin-top: 0.5rem !important; +} + +.mt-3 { + margin-top: 1rem !important; +} + +.mb-0 { + margin-bottom: 0 !important; +} + +.mb-2 { + margin-bottom: 0.5rem !important; +} + +.mb-3 { + margin-bottom: 1rem !important; +} + +.mb-4 { + margin-bottom: 1.5rem !important; +} + +.mb-5 { + margin-bottom: 3rem !important; +} + +.px-0 { + padding-right: 0 !important; + padding-left: 0 !important; +} + +.px-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; +} + +.pt-0 { + padding-top: 0 !important; +} + +.pt-5 { + padding-top: 3rem !important; +} + +.p-5 { + padding: 3rem !important; +} + +.pb-3 { + padding-bottom: 1rem !important; +} + +.pb-4 { + padding-bottom: 1.5rem !important; +} + +.text-center { + text-align: center !important; +} + +.text-uppercase { + text-transform: uppercase !important; +} + +/* rtl:begin:remove */ + +/* rtl:end:remove */ + +.text-black { + --bs-text-opacity: 1; + color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; +} + +.text-white { + --bs-text-opacity: 1; + color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important; +} +.text-white-50 { + --bs-text-opacity: 1; + color: rgba(255, 255, 255, 0.5) !important; +} + +.text-white-80 { + --bs-text-opacity: 1; + color: rgba(255, 255, 255, 0.8) !important; +} + +.bg-success { + --bs-bg-opacity: 1; + background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important; +} + +.bg-light { + --bs-bg-opacity: 1; + background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; +} + +.bg-black { + --bs-bg-opacity: 1; + background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; +} + +.rounded-start { + border-bottom-left-radius: 0.25rem !important; + border-top-left-radius: 0.25rem !important; +} + +@media (min-width: 576px) { + + .my-sm-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + +} +@media (min-width: 768px) { + + .mb-md-0 { + margin-bottom: 0 !important; + } + + .d-md-inline-block { + display: inline-block !important; + } + + .me-md-2 { + margin-right: 0.5rem !important; + } + + .mb-md-2 { + margin-bottom: 0.5rem !important; + } +} +@media (min-width: 992px) { + + .order-lg-first { + order: -1 !important; + } + + .my-lg-auto { + margin-top: auto !important; + margin-bottom: auto !important; + } + + .px-lg-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; + } +} +html { + scroll-padding-top: calc(4.5rem - 1px); +} + +body { + letter-spacing: 0.0625em; +} + +#mainNav { + min-height: 3.5rem; + background-color: #fff; +} +#mainNav .navbar-brand { + color: #000; + font-weight: 700; + padding: 0.9rem 0; +} +@media (min-width: 992px) { + #mainNav { + padding-top: 0; + padding-bottom: 0; + border-bottom: none; + } + #mainNav .navbar-brand { + padding: 0.5rem 0; + color: #000; + } +} + +.btn { + box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important; + padding: 1.25rem 2rem; + font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 100%; + text-transform: uppercase; + letter-spacing: 0.15rem; + border: 0; +} + +.masthead { + position: relative; + width: 100%; + height: auto; + min-height: 35rem; + padding: 15rem 0; + background: linear-gradient(rgba(0,77,255,0.8), rgba(0,77,255,0.5)); + background-position: center; + background-repeat: no-repeat; + background-attachment: scroll; + background-size: cover; +} +.masthead h1 { + font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 2rem; + line-height: 2.5rem; + letter-spacing: 0.2rem; + background: linear-gradient( + #fd004c 16.7%, + #fe9000 16.7%, + #fe9000 33.4%, + #fff020 33.4%, + #fff020 50.1%, + #3edf4b 50.1%, + #3edf4b 66.8%, + #3363ff 66.8%, + #3363ff 83.5%, + #b102b7 83.5% + ); + -webkit-text-stroke: 0.02em #fff; + /*background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));*/ + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + background-clip: text; + animation: rainbow 100s linear infinite; +} +@keyframes rainbow{ + 100%{ + background-position: 0 30em; + } +} +.masthead h2 { + max-width: 30rem; + font-size: 1rem; +} +@media (min-width: 768px) { + .masthead h1 { + font-size: 4rem; + line-height: 4rem; + } +} +@media (min-width: 992px) { + .masthead { + height: 100vh; + padding: 0; + } + .masthead h1 { + font-size: 6.5rem; + line-height: 6.5rem; + letter-spacing: 0.8rem; + } + .masthead h2 { + max-width: 40rem; + font-size: 1.25rem; + } +} + +.about-section { + padding-top: 2rem; + padding-bottom: 2.5rem; + background: linear-gradient(rgba(0,77,255,0.5), rgba(var(--bs-light-rgb))); + z-index: 1; +} +.about-section-text { /* Hack to not darken text */ + z-index: 2; +} + +.projects-section { + padding: 10rem 0; +} + +.contact-section { + padding-top: 5rem; +} +.contact-section .social a { + text-align: center; + height: 3rem; + width: 3rem; + background: rgba(255, 255, 255, 0.1); + border-radius: 100%; + line-height: 3rem; + color: rgba(255, 255, 255, 0.3); +} +.contact-section .social a:hover { + color: rgba(255, 255, 255, 0.5); +} +.contact-section .social a:active { + color: #fff; +} + +.footer { + padding: 5rem 0; +} + +.dropdown { + position: relative; +} + +.dropdown-toggle { + padding: 0.375rem 0.75rem; + background-color: white; + color: black; + box-shadow: none !important; + text-transform: none; +} +.dropdown-toggle::after { + display: inline-block; + width: 0; + height: 0; + margin-left: 0.255em; + vertical-align: 0.255em; + content: ""; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; + border-bottom: 0; + border-left: 0.3em solid transparent; +} +.dropdown-toggle:hover { + border-color: black; +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1030; + display: none; + float: left; + min-width: 10rem; + padding: 0.5rem 0; + margin: 0 0 0; + font-size: 1rem; + color: #212529; + text-align: left; + list-style: none; + background-color: #FFFFFF; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; +} + +.dropdown-item { + display: block; + width: 100%; + padding: 0.25rem 1.5rem; + clear: both; + font-weight: 400; + color: #212529; + text-align: inherit; + white-space: nowrap; + background: none; + border: 0; +} +.dropdown-item:focus, .dropdown-item:hover { + color: #16181b; + text-decoration: none; + background-color: #F8F9FA; +} +.dropdown-item:active { + color: #FFFFFF; + text-decoration: none; + background-color: #7D4698; +} +.dropdown-item:disabled { + color: #848E97; + background-color: transparent; +} + +.dropdown:hover .dropdown-menu { + display: block; + overflow-y: scroll; + max-height: 350px; +} diff --git a/templates/layout.html b/templates/layout.html index e3c186c..81749fb 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -27,7 +27,7 @@ - + {% block page %}{% endblock %}