Block out landing layout

This commit is contained in:
mDuo13
2019-04-29 20:28:46 -07:00
parent c123696a1e
commit eae231789a
4 changed files with 368 additions and 384 deletions

View File

@@ -425,7 +425,7 @@ mark,
padding: 0.25rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
border-radius: 0;
max-width: 100%;
height: auto; }
@@ -452,7 +452,7 @@ kbd {
font-size: 87.5%;
color: #fff;
background-color: #212529;
border-radius: 0.2rem; }
border-radius: 0; }
kbd kbd {
padding: 0;
font-size: 100%;
@@ -1344,7 +1344,7 @@ pre {
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
border-radius: 0;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.form-control {
@@ -1413,14 +1413,14 @@ select.form-control:focus::-ms-value {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem; }
border-radius: 0; }
.form-control-lg {
height: calc(1.5em + 1rem + 2px);
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem; }
border-radius: 0; }
select.form-control[size], select.form-control[multiple] {
height: auto; }
@@ -1490,7 +1490,7 @@ textarea.form-control {
line-height: 1.5;
color: #fff;
background-color: rgba(43, 203, 150, 0.9);
border-radius: 0.25rem; }
border-radius: 0; }
.was-validated .form-control:valid, .form-control.is-valid {
border-color: #2BCB96;
@@ -1587,7 +1587,7 @@ textarea.form-control {
line-height: 1.5;
color: #fff;
background-color: rgba(220, 53, 69, 0.9);
border-radius: 0.25rem; }
border-radius: 0; }
.was-validated .form-control:invalid, .form-control.is-invalid {
border-color: #dc3545;
@@ -1722,7 +1722,7 @@ textarea.form-control {
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
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) {
.btn {
@@ -2154,13 +2154,13 @@ fieldset:disabled a.btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem; }
border-radius: 0; }
.btn-sm, .btn-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem; }
border-radius: 0; }
.btn-block {
display: block;
@@ -2230,7 +2230,7 @@ input[type="button"].btn-block {
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem; }
border-radius: 0; }
.dropdown-menu-left {
right: auto;
@@ -2573,7 +2573,7 @@ input[type="button"].btn-block {
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 0.25rem; }
border-radius: 0; }
.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
margin-top: 0; }
@@ -2591,7 +2591,7 @@ input[type="button"].btn-block {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem; }
border-radius: 0; }
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
@@ -2606,7 +2606,7 @@ input[type="button"].btn-block {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem; }
border-radius: 0; }
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
@@ -2687,7 +2687,7 @@ input[type="button"].btn-block {
background: no-repeat 50% / 50% 50%; }
.custom-checkbox .custom-control-label::before {
border-radius: 0.25rem; }
border-radius: 0; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); }
@@ -2751,7 +2751,7 @@ input[type="button"].btn-block {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem;
border-radius: 0;
appearance: none; }
.custom-select:focus {
border-color: #5f5454;
@@ -2821,7 +2821,7 @@ input[type="button"].btn-block {
color: #495057;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem; }
border-radius: 0; }
.custom-file-label::after {
position: absolute;
top: 0;
@@ -2836,7 +2836,7 @@ input[type="button"].btn-block {
content: "Browse";
background-color: #e9ecef;
border-left: inherit;
border-radius: 0 0.25rem 0.25rem 0; }
border-radius: 0 0 0 0; }
.custom-range {
width: 100%;
@@ -2972,8 +2972,8 @@ input[type="button"].btn-block {
margin-bottom: -1px; }
.nav-tabs .nav-link {
border: 1px solid transparent;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem; }
border-top-left-radius: 0;
border-top-right-radius: 0; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
border-color: #e9ecef #e9ecef #dee2e6; }
.nav-tabs .nav-link.disabled {
@@ -2991,7 +2991,7 @@ input[type="button"].btn-block {
border-top-right-radius: 0; }
.nav-pills .nav-link {
border-radius: 0.25rem; }
border-radius: 0; }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
@@ -3067,7 +3067,7 @@ input[type="button"].btn-block {
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0.25rem; }
border-radius: 0; }
.navbar-toggler:hover, .navbar-toggler:focus {
text-decoration: none; }
@@ -3280,16 +3280,16 @@ input[type="button"].btn-block {
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem; }
border-radius: 0; }
.card > hr {
margin-right: 0;
margin-left: 0; }
.card > .list-group:first-child .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem; }
border-top-left-radius: 0;
border-top-right-radius: 0; }
.card > .list-group:last-child .list-group-item:last-child {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem; }
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
.card-body {
flex: 1 1 auto;
@@ -3317,7 +3317,7 @@ input[type="button"].btn-block {
background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
.card-header:first-child {
border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; }
border-radius: calc(0 - 1px) calc(0 - 1px) 0 0; }
.card-header + .list-group .list-group-item:first-child {
border-top: 0; }
@@ -3326,7 +3326,7 @@ input[type="button"].btn-block {
background-color: rgba(0, 0, 0, 0.03);
border-top: 1px solid rgba(0, 0, 0, 0.125); }
.card-footer:last-child {
border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }
border-radius: 0 0 calc(0 - 1px) calc(0 - 1px); }
.card-header-tabs {
margin-right: -0.625rem;
@@ -3348,17 +3348,17 @@ input[type="button"].btn-block {
.card-img {
width: 100%;
border-radius: calc(0.25rem - 1px); }
border-radius: calc(0 - 1px); }
.card-img-top {
width: 100%;
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px); }
border-top-left-radius: calc(0 - 1px);
border-top-right-radius: calc(0 - 1px); }
.card-img-bottom {
width: 100%;
border-bottom-right-radius: calc(0.25rem - 1px);
border-bottom-left-radius: calc(0.25rem - 1px); }
border-bottom-right-radius: calc(0 - 1px);
border-bottom-left-radius: calc(0 - 1px); }
.card-deck {
display: flex;
@@ -3448,7 +3448,7 @@ input[type="button"].btn-block {
margin-bottom: 1rem;
list-style: none;
background-color: #e9ecef;
border-radius: 0.25rem; }
border-radius: 0; }
.breadcrumb-item + .breadcrumb-item {
padding-left: 0.5rem; }
@@ -3471,7 +3471,7 @@ input[type="button"].btn-block {
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem; }
border-radius: 0; }
.page-link {
position: relative;
@@ -3495,12 +3495,12 @@ input[type="button"].btn-block {
.page-item:first-child .page-link {
margin-left: 0;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem; }
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.page-item:last-child .page-link {
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem; }
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.page-item.active .page-link {
z-index: 1;
@@ -3521,12 +3521,12 @@ input[type="button"].btn-block {
line-height: 1.5; }
.pagination-lg .page-item:first-child .page-link {
border-top-left-radius: 0.3rem;
border-bottom-left-radius: 0.3rem; }
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.pagination-lg .page-item:last-child .page-link {
border-top-right-radius: 0.3rem;
border-bottom-right-radius: 0.3rem; }
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.pagination-sm .page-link {
padding: 0.25rem 0.5rem;
@@ -3534,12 +3534,12 @@ input[type="button"].btn-block {
line-height: 1.5; }
.pagination-sm .page-item:first-child .page-link {
border-top-left-radius: 0.2rem;
border-bottom-left-radius: 0.2rem; }
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.pagination-sm .page-item:last-child .page-link {
border-top-right-radius: 0.2rem;
border-bottom-right-radius: 0.2rem; }
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.badge {
display: inline-block;
@@ -3550,7 +3550,7 @@ input[type="button"].btn-block {
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
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) {
.badge {
@@ -3663,7 +3663,7 @@ input[type="button"].btn-block {
padding: 2rem 1rem;
margin-bottom: 2rem;
background-color: #e9ecef;
border-radius: 0.3rem; }
border-radius: 0; }
@media (min-width: 576px) {
.jumbotron {
padding: 4rem 2rem; } }
@@ -3678,7 +3678,7 @@ input[type="button"].btn-block {
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem; }
border-radius: 0; }
.alert-heading {
color: inherit; }
@@ -3788,7 +3788,7 @@ input[type="button"].btn-block {
overflow: hidden;
font-size: 0.75rem;
background-color: #e9ecef;
border-radius: 0.25rem; }
border-radius: 0; }
.progress-bar {
display: flex;
@@ -3847,12 +3847,12 @@ input[type="button"].btn-block {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125); }
.list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem; }
border-top-left-radius: 0;
border-top-right-radius: 0; }
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem; }
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
.list-group-item.disabled, .list-group-item:disabled {
color: #6c757d;
pointer-events: none;
@@ -3869,13 +3869,13 @@ input[type="button"].btn-block {
margin-right: -1px;
margin-bottom: 0; }
.list-group-horizontal .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0; }
.list-group-horizontal .list-group-item:last-child {
margin-right: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
@media (min-width: 576px) {
@@ -3885,13 +3885,13 @@ input[type="button"].btn-block {
margin-right: -1px;
margin-bottom: 0; }
.list-group-horizontal-sm .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0; }
.list-group-horizontal-sm .list-group-item:last-child {
margin-right: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; } }
@media (min-width: 768px) {
@@ -3901,13 +3901,13 @@ input[type="button"].btn-block {
margin-right: -1px;
margin-bottom: 0; }
.list-group-horizontal-md .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0; }
.list-group-horizontal-md .list-group-item:last-child {
margin-right: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; } }
@media (min-width: 992px) {
@@ -3917,13 +3917,13 @@ input[type="button"].btn-block {
margin-right: -1px;
margin-bottom: 0; }
.list-group-horizontal-lg .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0; }
.list-group-horizontal-lg .list-group-item:last-child {
margin-right: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; } }
@media (min-width: 1200px) {
@@ -3933,13 +3933,13 @@ input[type="button"].btn-block {
margin-right: -1px;
margin-bottom: 0; }
.list-group-horizontal-xl .list-group-item:first-child {
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0; }
.list-group-horizontal-xl .list-group-item:last-child {
margin-right: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; } }
.list-group-flush .list-group-item {
@@ -4180,7 +4180,7 @@ a.close.disabled {
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
border-radius: 0;
outline: 0; }
.modal-backdrop {
@@ -4202,8 +4202,8 @@ a.close.disabled {
justify-content: space-between;
padding: 1rem 1rem;
border-bottom: 1px solid #dee2e6;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem; }
border-top-left-radius: 0;
border-top-right-radius: 0; }
.modal-header .close {
padding: 1rem 1rem;
margin: -1rem -1rem -1rem auto; }
@@ -4223,8 +4223,8 @@ a.close.disabled {
justify-content: flex-end;
padding: 1rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: 0.3rem;
border-bottom-left-radius: 0.3rem; }
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
.modal-footer > :not(:first-child) {
margin-left: .25rem; }
.modal-footer > :not(:last-child) {
@@ -4342,7 +4342,7 @@ a.close.disabled {
color: #fff;
text-align: center;
background-color: #000;
border-radius: 0.25rem; }
border-radius: 0; }
.popover {
position: absolute;
@@ -4370,13 +4370,13 @@ a.close.disabled {
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem; }
border-radius: 0; }
.popover .arrow {
position: absolute;
display: block;
width: 1rem;
height: 0.5rem;
margin: 0 0.3rem; }
margin: 0 0; }
.popover .arrow::before, .popover .arrow::after {
position: absolute;
display: block;
@@ -4403,7 +4403,7 @@ a.close.disabled {
left: calc((0.5rem + 1px) * -1);
width: 0.5rem;
height: 1rem;
margin: 0.3rem 0; }
margin: 0 0; }
.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before {
left: 0;
border-width: 0.5rem 0.5rem 0.5rem 0;
@@ -4441,7 +4441,7 @@ a.close.disabled {
right: calc((0.5rem + 1px) * -1);
width: 0.5rem;
height: 1rem;
margin: 0.3rem 0; }
margin: 0 0; }
.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before {
right: 0;
border-width: 0.5rem 0 0.5rem 0.5rem;
@@ -4457,8 +4457,8 @@ a.close.disabled {
font-size: 1rem;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-top-left-radius: calc(0.3rem - 1px);
border-top-right-radius: calc(0.3rem - 1px); }
border-top-left-radius: calc(0 - 1px);
border-top-right-radius: calc(0 - 1px); }
.popover-header:empty {
display: none; }
@@ -4812,29 +4812,29 @@ button.bg-caution:focus {
border-color: #fff !important; }
.rounded-sm {
border-radius: 0.2rem !important; }
border-radius: 0 !important; }
.rounded {
border-radius: 0.25rem !important; }
border-radius: 0 !important; }
.rounded-top {
border-top-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important; }
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important; }
.rounded-right {
border-top-right-radius: 0.25rem !important;
border-bottom-right-radius: 0.25rem !important; }
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important; }
.rounded-bottom {
border-bottom-right-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important; }
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important; }
.rounded-left {
border-top-left-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important; }
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important; }
.rounded-lg {
border-radius: 0.3rem !important; }
border-radius: 0 !important; }
.rounded-circle {
border-radius: 50% !important; }
@@ -7160,3 +7160,27 @@ a.text-caution:hover, a.text-caution:focus {
h1, h2, h3, h4, h5 {
font-family: 'Space Mono', monospace;
font-weight: 700; }
.card-grid {
display: grid;
gap: 1px;
background-color: #dedede;
padding: 0;
border-bottom: 1px solid #dedede; }
.card-grid.card-grid-2x2 {
/* left half is a hero area; right half is a 2x2 grid. Total grid is 4x2 */
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr; }
.card-grid.card-grid-2x2 .section-hero {
grid-row-end: span 2; }
.card-grid.card-grid-2x4 {
/* left half is a hero area; right half is a 2x4 grid. Total grid is 4x4 */
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr; }
.card-grid.card-grid-2x4 .section-hero {
grid-row-end: span 4; }
.card-grid .align-bottom {
justify-content: flex-end; }
.card-grid .card {
padding: 40px;
border: 0; }