/** ------------------------------- -- Bulma ------------------------------- **/ @-moz-keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @-webkit-keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @-o-keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } @keyframes spinAround { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .column { display: block; flex-basis: 0; flex-grow: 1; flex-shrink: 1; padding: 0.75rem; } .columns.is-mobile > .column.is-narrow { flex: none; } .columns.is-mobile > .column.is-full { flex: none; width: 100%; } .columns.is-mobile > .column.is-three-quarters { flex: none; width: 75%; } .columns.is-mobile > .column.is-two-thirds { flex: none; width: 66.6666%; } .columns.is-mobile > .column.is-half { flex: none; width: 50%; } .columns.is-mobile > .column.is-one-third { flex: none; width: 33.3333%; } .columns.is-mobile > .column.is-one-quarter { flex: none; width: 25%; } .columns.is-mobile > .column.is-one-fifth { flex: none; width: 20%; } .columns.is-mobile > .column.is-two-fifths { flex: none; width: 40%; } .columns.is-mobile > .column.is-three-fifths { flex: none; width: 60%; } .columns.is-mobile > .column.is-four-fifths { flex: none; } .columns.is-mobile > .column.is-offset-three-quarters { margin-left: 75%; } .columns.is-mobile > .column.is-offset-two-thirds { margin-left: 66.6666%; } .columns.is-mobile > .column.is-offset-half { margin-left: 50%; } .columns.is-mobile > .column.is-offset-one-third { margin-left: 33.3333%; } .columns.is-mobile > .column.is-offset-one-quarter { margin-left: 25%; } .columns.is-mobile > .column.is-offset-one-fifth { margin-left: 20%; } .columns.is-mobile > .column.is-offset-two-fifths { margin-left: 40%; } .columns.is-mobile > .column.is-offset-three-fifths { margin-left: 60%; } .columns.is-mobile > .column.is-offset-four-fifths { margin-left: 80%; } .columns.is-mobile > .column.is-1 { flex: none; width: 8.333333333333332%; } .columns.is-mobile > .column.is-offset-1 { margin-left: 8.333333333333332%; } .columns.is-mobile > .column.is-2 { flex: none; width: 16.666666666666664%; } .columns.is-mobile > .column.is-offset-2 { margin-left: 16.666666666666664%; } .columns.is-mobile > .column.is-3 { flex: none; width: 25%; } .columns.is-mobile > .column.is-offset-3 { margin-left: 25%; } .columns.is-mobile > .column.is-4 { flex: none; width: 33.33333333333333%; } .columns.is-mobile > .column.is-offset-4 { margin-left: 33.33333333333333%; } .columns.is-mobile > .column.is-5 { flex: none; width: 41.66666666666667%; } .columns.is-mobile > .column.is-offset-5 { margin-left: 41.66666666666667%; } .columns.is-mobile > .column.is-6 { flex: none; width: 50%; } .columns.is-mobile > .column.is-offset-6 { margin-left: 50%; } .columns.is-mobile > .column.is-7 { flex: none; width: 58.333333333333336%; } .columns.is-mobile > .column.is-offset-7 { margin-left: 58.333333333333336%; } .columns.is-mobile > .column.is-8 { flex: none; width: 66.66666666666666%; } .columns.is-mobile > .column.is-offset-8 { margin-left: 66.66666666666666%; } .columns.is-mobile > .column.is-9 { flex: none; width: 75%; } .columns.is-mobile > .column.is-offset-9 { margin-left: 75%; } .columns.is-mobile > .column.is-10 { flex: none; width: 83.33333333333334%; } .columns.is-mobile > .column.is-offset-10 { margin-left: 83.33333333333334%; } .columns.is-mobile > .column.is-11 { flex: none; width: 91.66666666666666%; } .columns.is-mobile > .column.is-offset-11 { margin-left: 91.66666666666666%; } .columns.is-mobile > .column.is-12 { flex: none; width: 100%; } .columns.is-mobile > .column.is-offset-12 { margin-left: 100%; } @media screen and (max-width: 768px) { .column.is-narrow-mobile { flex: none; } .column.is-full-mobile { flex: none; width: 100%; } .column.is-three-quarters-mobile { flex: none; width: 75%; } .column.is-two-thirds-mobile { flex: none; width: 66.6666%; } .column.is-half-mobile { flex: none; width: 50%; } .column.is-one-third-mobile { flex: none; width: 33.3333%; } .column.is-one-quarter-mobile { flex: none; width: 25%; } .column.is-one-fifth-mobile { flex: none; width: 20%; } .column.is-two-fifths-mobile { flex: none; width: 40%; } .column.is-three-fifths-mobile { flex: none; width: 60%; } .column.is-four-fifths-mobile { flex: none; width: 80%; } .column.is-offset-three-quarters-mobile { margin-left: 75%; } .column.is-offset-two-thirds-mobile { margin-left: 66.6666%; } .column.is-offset-half-mobile { margin-left: 50%; } .column.is-offset-one-third-mobile { margin-left: 33.3333%; } .column.is-offset-one-quarter-mobile { margin-left: 25%; } .column.is-offset-one-fifth-mobile { margin-left: 20%; } .column.is-offset-two-fifths-mobile { margin-left: 40%; } .column.is-offset-three-fifths-mobile { margin-left: 60%; } .column.is-offset-four-fifths-mobile { margin-left: 80%; } .column.is-1-mobile { flex: none; width: 8.333333333333332%; } .column.is-offset-1-mobile { margin-left: 8.333333333333332%; } .column.is-2-mobile { flex: none; width: 16.666666666666664%; } .column.is-offset-2-mobile { margin-left: 16.666666666666664%; } .column.is-3-mobile { flex: none; width: 25%; } .column.is-offset-3-mobile { margin-left: 25%; } .column.is-4-mobile { flex: none; width: 33.33333333333333%; } .column.is-offset-4-mobile { margin-left: 33.33333333333333%; } .column.is-5-mobile { flex: none; width: 41.66666666666667%; } .column.is-offset-5-mobile { margin-left: 41.66666666666667%; } .column.is-6-mobile { flex: none; width: 50%; } .column.is-offset-6-mobile { margin-left: 50%; } .column.is-7-mobile { flex: none; width: 58.333333333333336%; } .column.is-offset-7-mobile { margin-left: 58.333333333333336%; } .column.is-8-mobile { flex: none; width: 66.66666666666666%; } .column.is-offset-8-mobile { margin-left: 66.66666666666666%; } .column.is-9-mobile { flex: none; width: 75%; } .column.is-offset-9-mobile { margin-left: 75%; } .column.is-10-mobile { flex: none; width: 83.33333333333334%; } .column.is-offset-10-mobile { margin-left: 83.33333333333334%; } .column.is-11-mobile { flex: none; width: 91.66666666666666%; } .column.is-offset-11-mobile { margin-left: 91.66666666666666%; } .column.is-12-mobile { flex: none; width: 100%; } .column.is-offset-12-mobile { margin-left: 100%; } } @media screen and (min-width: 769px), print { .column.is-narrow, .column.is-narrow-tablet { flex: none; } .column.is-full, .column.is-full-tablet { flex: none; width: 100%; } .column.is-three-quarters, .column.is-three-quarters-tablet { flex: none; width: 75%; } .column.is-two-thirds, .column.is-two-thirds-tablet { flex: none; width: 66.6666%; } .column.is-half, .column.is-half-tablet { flex: none; width: 50%; } .column.is-one-third, .column.is-one-third-tablet { flex: none; width: 33.3333%; } .column.is-one-quarter, .column.is-one-quarter-tablet { flex: none; width: 25%; } .column.is-one-fifth, .column.is-one-fifth-tablet { flex: none; width: 20%; } .column.is-two-fifths, .column.is-two-fifths-tablet { flex: none; width: 40%; } .column.is-three-fifths, .column.is-three-fifths-tablet { flex: none; width: 60%; } .column.is-four-fifths, .column.is-four-fifths-tablet { flex: none; width: 80%; } .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet { margin-left: 75%; } .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet { margin-left: 66.6666%; } .column.is-offset-half, .column.is-offset-half-tablet { margin-left: 50%; } .column.is-offset-one-third, .column.is-offset-one-third-tablet { margin-left: 33.3333%; } .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet { margin-left: 25%; } .column.is-offset-one-fifth, .column.is-offset-one-fifth-tablet { margin-left: 20%; } .column.is-offset-two-fifths, .column.is-offset-two-fifths-tablet { margin-left: 40%; } .column.is-offset-three-fifths, .column.is-offset-three-fifths-tablet { margin-left: 60%; } .column.is-offset-four-fifths, .column.is-offset-four-fifths-tablet { margin-left: 80%; } .column.is-1, .column.is-1-tablet { flex: none; width: 8.333333333333332%; } .column.is-offset-1, .column.is-offset-1-tablet { margin-left: 8.333333333333332%; } .column.is-2, .column.is-2-tablet { flex: none; width: 16.666666666666664%; } .column.is-offset-2, .column.is-offset-2-tablet { margin-left: 16.666666666666664%; } .column.is-3, .column.is-3-tablet { flex: none; width: 25%; } .column.is-offset-3, .column.is-offset-3-tablet { margin-left: 25%; } .column.is-4, .column.is-4-tablet { flex: none; width: 33.33333333333333%; } .column.is-offset-4, .column.is-offset-4-tablet { margin-left: 33.33333333333333%; } .column.is-5, .column.is-5-tablet { flex: none; width: 41.66666666666667%; } .column.is-offset-5, .column.is-offset-5-tablet { margin-left: 41.66666666666667%; } .column.is-6, .column.is-6-tablet { flex: none; width: 50%; } .column.is-offset-6, .column.is-offset-6-tablet { margin-left: 50%; } .column.is-7, .column.is-7-tablet { flex: none; width: 58.333333333333336%; } .column.is-offset-7, .column.is-offset-7-tablet { margin-left: 58.333333333333336%; } .column.is-8, .column.is-8-tablet { flex: none; width: 66.66666666666666%; } .column.is-offset-8, .column.is-offset-8-tablet { margin-left: 66.66666666666666%; } .column.is-9, .column.is-9-tablet { flex: none; width: 75%; } .column.is-offset-9, .column.is-offset-9-tablet { margin-left: 75%; } .column.is-10, .column.is-10-tablet { flex: none; width: 83.33333333333334%; } .column.is-offset-10, .column.is-offset-10-tablet { margin-left: 83.33333333333334%; } .column.is-11, .column.is-11-tablet { flex: none; width: 91.66666666666666%; } .column.is-offset-11, .column.is-offset-11-tablet { margin-left: 91.66666666666666%; } .column.is-12, .column.is-12-tablet { flex: none; width: 100%; } .column.is-offset-12, .column.is-offset-12-tablet { margin-left: 100%; } } @media screen and (max-width: 1023px) { .column.is-narrow-touch { flex: none; } .column.is-full-touch { flex: none; width: 100%; } .column.is-three-quarters-touch { flex: none; width: 75%; } .column.is-two-thirds-touch { flex: none; width: 66.6666%; } .column.is-half-touch { flex: none; width: 50%; } .column.is-one-third-touch { flex: none; width: 33.3333%; } .column.is-one-quarter-touch { flex: none; width: 25%; } .column.is-one-fifth-touch { flex: none; width: 20%; } .column.is-two-fifths-touch { flex: none; width: 40%; } .column.is-three-fifths-touch { flex: none; width: 60%; } .column.is-four-fifths-touch { flex: none; width: 80%; } .column.is-offset-three-quarters-touch { margin-left: 75%; } .column.is-offset-two-thirds-touch { margin-left: 66.6666%; } .column.is-offset-half-touch { margin-left: 50%; } .column.is-offset-one-third-touch { margin-left: 33.3333%; } .column.is-offset-one-quarter-touch { margin-left: 25%; } .column.is-offset-one-fifth-touch { margin-left: 20%; } .column.is-offset-two-fifths-touch { margin-left: 40%; } .column.is-offset-three-fifths-touch { margin-left: 60%; } .column.is-offset-four-fifths-touch { margin-left: 80%; } .column.is-1-touch { flex: none; width: 8.333333333333332%; } .column.is-offset-1-touch { margin-left: 8.333333333333332%; } .column.is-2-touch { flex: none; width: 16.666666666666664%; } .column.is-offset-2-touch { margin-left: 16.666666666666664%; } .column.is-3-touch { flex: none; width: 25%; } .column.is-offset-3-touch { margin-left: 25%; } .column.is-4-touch { flex: none; width: 33.33333333333333%; } .column.is-offset-4-touch { margin-left: 33.33333333333333%; } .column.is-5-touch { flex: none; width: 41.66666666666667%; } .column.is-offset-5-touch { margin-left: 41.66666666666667%; } .column.is-6-touch { flex: none; width: 50%; } .column.is-offset-6-touch { margin-left: 50%; } .column.is-7-touch { flex: none; width: 58.333333333333336%; } .column.is-offset-7-touch { margin-left: 58.333333333333336%; } .column.is-8-touch { flex: none; width: 66.66666666666666%; } .column.is-offset-8-touch { margin-left: 66.66666666666666%; } .column.is-9-touch { flex: none; width: 75%; } .column.is-offset-9-touch { margin-left: 75%; } .column.is-10-touch { flex: none; width: 83.33333333333334%; } .column.is-offset-10-touch { margin-left: 83.33333333333334%; } .column.is-11-touch { flex: none; width: 91.66666666666666%; } .column.is-offset-11-touch { margin-left: 91.66666666666666%; } .column.is-12-touch { flex: none; width: 100%; } .column.is-offset-12-touch { margin-left: 100%; } } @media screen and (min-width: 1024px) { .column.is-narrow-desktop { flex: none; } .column.is-full-desktop { flex: none; width: 100%; } .column.is-three-quarters-desktop { flex: none; width: 75%; } .column.is-two-thirds-desktop { flex: none; width: 66.6666%; } .column.is-half-desktop { flex: none; width: 50%; } .column.is-one-third-desktop { flex: none; width: 33.3333%; } .column.is-one-quarter-desktop { flex: none; width: 25%; } .column.is-one-fifth-desktop { flex: none; width: 20%; } .column.is-two-fifths-desktop { flex: none; width: 40%; } .column.is-three-fifths-desktop { flex: none; width: 60%; } .column.is-four-fifths-desktop { flex: none; width: 80%; } .column.is-offset-three-quarters-desktop { margin-left: 75%; } .column.is-offset-two-thirds-desktop { margin-left: 66.6666%; } .column.is-offset-half-desktop { margin-left: 50%; } .column.is-offset-one-third-desktop { margin-left: 33.3333%; } .column.is-offset-one-quarter-desktop { margin-left: 25%; } .column.is-offset-one-fifth-desktop { margin-left: 20%; } .column.is-offset-two-fifths-desktop { margin-left: 40%; } .column.is-offset-three-fifths-desktop { margin-left: 60%; } .column.is-offset-four-fifths-desktop { margin-left: 80%; } .column.is-1-desktop { flex: none; width: 8.333333333333332%; } .column.is-offset-1-desktop { margin-left: 8.333333333333332%; } .column.is-2-desktop { flex: none; width: 16.666666666666664%; } .column.is-offset-2-desktop { margin-left: 16.666666666666664%; } .column.is-3-desktop { flex: none; width: 25%; } .column.is-offset-3-desktop { margin-left: 25%; } .column.is-4-desktop { flex: none; width: 33.33333333333333%; } .column.is-offset-4-desktop { margin-left: 33.33333333333333%; } .column.is-5-desktop { flex: none; width: 41.66666666666667%; } .column.is-offset-5-desktop { margin-left: 41.66666666666667%; } .column.is-6-desktop { flex: none; width: 50%; } .column.is-offset-6-desktop { margin-left: 50%; } .column.is-7-desktop { flex: none; width: 58.333333333333336%; } .column.is-offset-7-desktop { margin-left: 58.333333333333336%; } .column.is-8-desktop { flex: none; width: 66.66666666666666%; } .column.is-offset-8-desktop { margin-left: 66.66666666666666%; } .column.is-9-desktop { flex: none; width: 75%; } .column.is-offset-9-desktop { margin-left: 75%; } .column.is-10-desktop { flex: none; width: 83.33333333333334%; } .column.is-offset-10-desktop { margin-left: 83.33333333333334%; } .column.is-11-desktop { flex: none; width: 91.66666666666666%; } .column.is-offset-11-desktop { margin-left: 91.66666666666666%; } .column.is-12-desktop { flex: none; width: 100%; } .column.is-offset-12-desktop { margin-left: 100%; } } @media screen and (min-width: 1216px) { .column.is-narrow-widescreen { flex: none; } .column.is-full-widescreen { flex: none; width: 100%; } .column.is-three-quarters-widescreen { flex: none; width: 75%; } .column.is-two-thirds-widescreen { flex: none; width: 66.6666%; } .column.is-half-widescreen { flex: none; width: 50%; } .column.is-one-third-widescreen { flex: none; width: 33.3333%; } .column.is-one-quarter-widescreen { flex: none; width: 25%; } .column.is-one-fifth-widescreen { flex: none; width: 20%; } .column.is-two-fifths-widescreen { flex: none; width: 40%; } .column.is-three-fifths-widescreen { flex: none; width: 60%; } .column.is-four-fifths-widescreen { flex: none; width: 80%; } .column.is-offset-three-quarters-widescreen { margin-left: 75%; } .column.is-offset-two-thirds-widescreen { margin-left: 66.6666%; } .column.is-offset-half-widescreen { margin-left: 50%; } .column.is-offset-one-third-widescreen { margin-left: 33.3333%; } .column.is-offset-one-quarter-widescreen { margin-left: 25%; } .column.is-offset-one-fifth-widescreen { margin-left: 20%; } .column.is-offset-two-fifths-widescreen { margin-left: 40%; } .column.is-offset-three-fifths-widescreen { margin-left: 60%; } .column.is-offset-four-fifths-widescreen { margin-left: 80%; } .column.is-1-widescreen { flex: none; width: 8.333333333333332%; } .column.is-offset-1-widescreen { margin-left: 8.333333333333332%; } .column.is-2-widescreen { flex: none; width: 16.666666666666664%; } .column.is-offset-2-widescreen { margin-left: 16.666666666666664%; } .column.is-3-widescreen { flex: none; width: 25%; } .column.is-offset-3-widescreen { margin-left: 25%; } .column.is-4-widescreen { flex: none; width: 33.33333333333333%; } .column.is-offset-4-widescreen { margin-left: 33.33333333333333%; } .column.is-5-widescreen { flex: none; width: 41.66666666666667%; } .column.is-offset-5-widescreen { margin-left: 41.66666666666667%; } .column.is-6-widescreen { flex: none; width: 50%; } .column.is-offset-6-widescreen { margin-left: 50%; } .column.is-7-widescreen { flex: none; width: 58.333333333333336%; } .column.is-offset-7-widescreen { margin-left: 58.333333333333336%; } .column.is-8-widescreen { flex: none; width: 66.66666666666666%; } .column.is-offset-8-widescreen { margin-left: 66.66666666666666%; } .column.is-9-widescreen { flex: none; width: 75%; } .column.is-offset-9-widescreen { margin-left: 75%; } .column.is-10-widescreen { flex: none; width: 83.33333333333334%; } .column.is-offset-10-widescreen { margin-left: 83.33333333333334%; } .column.is-11-widescreen { flex: none; width: 91.66666666666666%; } .column.is-offset-11-widescreen { margin-left: 91.66666666666666%; } .column.is-12-widescreen { flex: none; width: 100%; } .column.is-offset-12-widescreen { margin-left: 100%; } } @media screen and (min-width: 1408px) { .column.is-narrow-fullhd { flex: none; } .column.is-full-fullhd { flex: none; width: 100%; } .column.is-three-quarters-fullhd { flex: none; width: 75%; } .column.is-two-thirds-fullhd { flex: none; width: 66.6666%; } .column.is-half-fullhd { flex: none; width: 50%; } .column.is-one-third-fullhd { flex: none; width: 33.3333%; } .column.is-one-quarter-fullhd { flex: none; width: 25%; } .column.is-one-fifth-fullhd { flex: none; width: 20%; } .column.is-two-fifths-fullhd { flex: none; width: 40%; } .column.is-three-fifths-fullhd { flex: none; width: 60%; } .column.is-four-fifths-fullhd { flex: none; width: 80%; } .column.is-offset-three-quarters-fullhd { margin-left: 75%; } .column.is-offset-two-thirds-fullhd { margin-left: 66.6666%; } .column.is-offset-half-fullhd { margin-left: 50%; } .column.is-offset-one-third-fullhd { margin-left: 33.3333%; } .column.is-offset-one-quarter-fullhd { margin-left: 25%; } .column.is-offset-one-fifth-fullhd { margin-left: 20%; } .column.is-offset-two-fifths-fullhd { margin-left: 40%; } .column.is-offset-three-fifths-fullhd { margin-left: 60%; } .column.is-offset-four-fifths-fullhd { margin-left: 80%; } .column.is-1-fullhd { flex: none; width: 8.333333333333332%; } .column.is-offset-1-fullhd { margin-left: 8.333333333333332%; } .column.is-2-fullhd { flex: none; width: 16.666666666666664%; } .column.is-offset-2-fullhd { margin-left: 16.666666666666664%; } .column.is-3-fullhd { flex: none; width: 25%; } .column.is-offset-3-fullhd { margin-left: 25%; } .column.is-4-fullhd { flex: none; width: 33.33333333333333%; } .column.is-offset-4-fullhd { margin-left: 33.33333333333333%; } .column.is-5-fullhd { flex: none; width: 41.66666666666667%; } .column.is-offset-5-fullhd { margin-left: 41.66666666666667%; } .column.is-6-fullhd { flex: none; width: 50%; } .column.is-offset-6-fullhd { margin-left: 50%; } .column.is-7-fullhd { flex: none; width: 58.333333333333336%; } .column.is-offset-7-fullhd { margin-left: 58.333333333333336%; } .column.is-8-fullhd { flex: none; width: 66.66666666666666%; } .column.is-offset-8-fullhd { margin-left: 66.66666666666666%; } .column.is-9-fullhd { flex: none; width: 75%; } .column.is-offset-9-fullhd { margin-left: 75%; } .column.is-10-fullhd { flex: none; width: 83.33333333333334%; } .column.is-offset-10-fullhd { margin-left: 83.33333333333334%; } .column.is-11-fullhd { flex: none; width: 91.66666666666666%; } .column.is-offset-11-fullhd { margin-left: 91.66666666666666%; } .column.is-12-fullhd { flex: none; width: 100%; } .column.is-offset-12-fullhd { margin-left: 100%; } } .columns { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -0.75rem; } .columns:last-child { margin-bottom: -0.75rem; } .columns:not(:last-child) { margin-bottom: calc(1.5rem - 0.75rem); } .columns.is-centered { justify-content: center; } .columns.is-gapless { margin-left: 0; margin-right: 0; margin-top: 0; } .columns.is-gapless > .column { margin: 0; padding: 0 !important; } .columns.is-gapless:not(:last-child) { margin-bottom: 1.5rem; } .columns.is-gapless:last-child { margin-bottom: 0; } .columns.is-mobile { display: flex; } .columns.is-multiline { flex-wrap: wrap; } .columns.is-vcentered { align-items: center; } @media screen and (min-width: 769px), print { .columns:not(.is-desktop) { display: flex; } } @media screen and (min-width: 1024px) { .columns.is-desktop { display: flex; } } .columns.is-variable { --columnGap: 0.75rem; margin-left: calc(-1 * var(--columnGap)); margin-right: calc(-1 * var(--columnGap)); } .columns.is-variable .column { padding-left: var(--columnGap); padding-right: var(--columnGap); } .columns.is-variable.is-0 { --columnGap: 0rem; } .columns.is-variable.is-1 { --columnGap: 0.25rem; } .columns.is-variable.is-2 { --columnGap: 0.5rem; } .columns.is-variable.is-3 { --columnGap: 0.75rem; } .columns.is-variable.is-4 { --columnGap: 1rem; } .columns.is-variable.is-5 { --columnGap: 1.25rem; } .columns.is-variable.is-6 { --columnGap: 1.5rem; } .columns.is-variable.is-7 { --columnGap: 1.75rem; } .columns.is-variable.is-8 { --columnGap: 2rem; } /** ------------------------------- -- Colors ------------------------------- **/ /** ------------------------------- -- Mixins ------------------------------- **/ /** ------------------------------- -- Normalize ------------------------------- **/ html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: inherit; font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 60%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.55em; background: #c1cdd7; color: #374857; border-radius: 2px; padding: 0 2px 0 2px; margin: 0 2px 0 0; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; } [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template { display: none; } [hidden] { display: none; } /** ------------------------------- -- Typography ------------------------------- **/ @font-face { font-weight: 300; font-style: normal; font-family: 'Apercu'; src: url("fonts/Apercu-Light.eot"), url("fonts/Apercu-Light.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-Light.woff2") format('woff2'), url("fonts/Apercu-Light.woff") format('woff'), url("fonts/Apercu-Light.ttf") format('truetype'), url("fonts/Apercu-Light.svg?#Apercu") format('svg'); } @font-face { font-weight: 300; font-style: italic; font-family: 'Apercu'; src: url("fonts/Apercu-LightItalic.eot"), url("fonts/Apercu-LightItalic.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-LightItalic.woff2") format('woff2'), url("fonts/Apercu-LightItalic.woff") format('woff'), url("fonts/Apercu-LightItalic.ttf") format('truetype'), url("fonts/Apercu-LightItalic.svg?#Apercu") format('svg'); } @font-face { font-weight: 400; font-style: normal; font-family: 'Apercu'; src: url("fonts/Apercu.eot"), url("fonts/Apercu.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu.woff2") format('woff2'), url("fonts/Apercu.woff") format('woff'), url("fonts/Apercu.ttf") format('truetype'), url("fonts/Apercu.svg?#Apercu") format('svg'); } @font-face { font-weight: 400; font-style: italic; font-family: 'Apercu'; src: url("fonts/Apercu-Italic.eot"), url("fonts/Apercu-Italic.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-Italic.woff2") format('woff2'), url("fonts/Apercu-Italic.woff") format('woff'), url("fonts/Apercu-Italic.ttf") format('truetype'), url("fonts/Apercu-Italic.svg?#Apercu") format('svg'); } @font-face { font-weight: 500; font-style: normal; font-family: 'Apercu'; src: url("fonts/Apercu-Medium.eot"), url("fonts/Apercu-Medium.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-Medium.woff2") format('woff2'), url("fonts/Apercu-Medium.woff") format('woff'), url("fonts/Apercu-Medium.ttf") format('truetype'), url("fonts/Apercu-Medium.svg?#Apercu") format('svg'); } @font-face { font-weight: 500; font-style: italic; font-family: 'Apercu'; src: url("fonts/Apercu-MediumItalic.eot"), url("fonts/Apercu-MediumItalic.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-MediumItalic.woff2") format('woff2'), url("fonts/Apercu-MediumItalic.woff") format('woff'), url("fonts/Apercu-MediumItalic.ttf") format('truetype'), url("fonts/Apercu-MediumItalic.svg?#Apercu") format('svg'); } @font-face { font-weight: 600; font-style: normal; font-weight: bold; font-family: 'Apercu'; src: url("fonts/Apercu-Bold.eot"), url("fonts/Apercu-Bold.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-Bold.woff2") format('woff2'), url("fonts/Apercu-Bold.woff") format('woff'), url("fonts/Apercu-Bold.ttf") format('truetype'), url("fonts/Apercu-Bold.svg?#Apercu") format('svg'); } @font-face { font-weight: 600; font-style: italic; font-weight: bold; font-family: 'Apercu'; src: url("fonts/Apercu-BoldItalic.eot"), url("fonts/Apercu-BoldItalic.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-BoldItalic.woff2") format('woff2'), url("fonts/Apercu-BoldItalic.woff") format('woff'), url("fonts/Apercu-BoldItalic.ttf") format('truetype'), url("fonts/Apercu-Bold.svg?#Apercu") format('svg'); } @font-face { font-weight: 400; font-style: normal; font-family: 'Apercu-Mono'; src: url("fonts/Apercu-Mono.eot"), url("fonts/Apercu-Mono.eot?#iefix") format('embedded-opentype'), url("fonts/Apercu-Mono.woff2") format('woff2'), url("fonts/Apercu-Mono.woff") format('woff'), url("fonts/Apercu-Mono.ttf") format('truetype'), url("fonts/Apercu-Mono.svg?#Apercu") format('svg'); } h1, h2, h3 { color: #b2cce5; } h1 { font-size: 2em; font-weight: 500; } h2 { font-size: 1.75em; font-weight: 500; } h3 { font-size: 1.5em; font-weight: 500; } /** ------------------------------- -- Main Structure ------------------------------- **/ html, body { background-color: #374857; font: 400 1em 'Apercu', Helvetica, Arial, sans-serif; height: 100%; } a { font: 300 1em $titleType; color: #b2cce5; text-decoration: underline; -moz-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -o-transition: all 0.1s linear; transition: all 0.1s linear; } a:hover { color: #bad1e8; } svg.icons { width: 30px; fill: #b2cce5; } #loader { position: fixed; z-index: 2000; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; display: none; visibility: hidden; } #loader i { color: #f5ab35; } .blog-container { width: 100%; } .main-container { margin: 0 auto; z-index: 10; position: relative; } .main-container section header { width: 100%; height: 100px; background-color: #161d23; margin: 0; padding: 0; } .main-container section header #header-wrapper { width: 100%; max-width: 900px; margin: 0 auto; } .main-container section header #header-wrapper #header-one, .main-container section header #header-wrapper #header-two { z-index: 10; position: relative; } .main-container section header #header-wrapper #header-one label#the-title, .main-container section header #header-wrapper #header-two label#the-title { font-family: 'Apercu-Mono'; font-size: 1.5em; color: #f5ab35; text-decoration: none; display: block; } ::-moz-selection { background-color: #fc6399; color: #f2f1ef; } ::selection { background-color: #fc6399; color: #f2f1ef; } ::-o-selection { background-color: #fc6399; color: #f2f1ef; } ::-ms-selection { background-color: #fc6399; color: #f2f1ef; } ::-webkit-selection { background-color: #fc6399; color: #f2f1ef; } @media only screen and (max-width: 640px) { .main-container .content #the-intro { font-size: 31px; line-height: 35px; } } @media only screen and (max-width: 480px) { .main-container .content #the-intro { font-size: 25px; line-height: 33px; } .main-container .content #index-display span, .main-container .content #index-display a { font: 400 1.2em $bodyType; } } @media only screen and (max-width: 375px) { .main-container .header { width: 90%; } .main-container .header .header-desc h1 { line-height: 1rem; font-size: 3.3rem; } .main-container .header .header-desc span a { color: #f2f1ef; width: 250px; font-weight: 300; display: inline-block; word-break: break-all; font: 300 7em/1em $titleType; text-decoration: none; margin: 0 0 50px 0; } .main-container .header .header-desc #the-intro { color: #b2cce5; opacity: 0; font: 400 1.8em $titleType; display: inline-block; width: 95%; } .main-container .header .header-desc #item-intro { width: 95%; } .main-container .header .header-desc #item-intro label { font-size: 2em; } .main-container .content #the-intro { font-size: 24px; line-height: 33px; } .main-container .content #index-display label { font-size: 7em; } .main-container .content #index-display #recent-work, .main-container .content #index-display #recent-blog { float: none; display: block; margin: 0 auto; text-align: left; padding-bottom: 30px; } } @media only screen and (max-width: 320px) { .main-container .header .header-desc h1 { line-height: 1rem; font-size: 2.9rem; } .main-container .content #the-intro { font-size: 19px; line-height: 28px; } } /** ------------------------------- -- Index ------------------------------- **/ #dash-index-content { width: 100%; height: 100%; margin: 0 auto; } #dash-index-content #dash-index { width: 100%; height: 100%; z-index: 10; position: relative; } #dash-index-content #dash-index #dash-index-wrapper { width: 100%; height: 100%; margin: 0 auto; } #dash-index-content #dash-index #dash-index-wrapper #dash-login { width: 100%; max-width: 900px; margin: 0 auto; } #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-one #dash-form, #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-two #dash-form { width: 300px; } #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-one #dash-index-title, #dash-index-content #dash-index #dash-index-wrapper #dash-login #dash-index-two #dash-index-title { color: #f2f1ef; font: 400 2em $titleType; vertical-align: top; } #dash-index-content #dash-index #dash-index-wrapper #dash-menu { padding: 10px; width: 90%; max-width: 900px; margin: 50px auto; } #dash-index-content #dash-index #dash-index-wrapper #dash-menu a { display: inline-block; vertical-align: top; background: #161d23; width: 30%; padding: 5px; border-radius: 3px; color: #f2f1ef; margin: 0 10px 10px 0; } #dash-index-content #dash-index #dash-index-wrapper #dash-menu a:hover { background: #1c242c; } #dash-index-content #dash-index #dash-index-wrapper #dash-menu a svg { display: inline-block; vertical-align: top; fill: #f2f1ef; } #dash-index-content #dash-index #dash-index-wrapper #dash-menu a label { display: inline-block; margin-top: 5px; width: 85%; text-align: center; cursor: pointer; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent { background: #455b6e; width: 100%; height: 100%; padding: 5px 0 0 0; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list { width: 90%; margin: 50px auto; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list h3 { color: #32414e; } #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a { font-size: 1.5em; font-weight: 300; } .folio-project-form { display: inline-block; width: 56%; } .folio-project-form input[type=email], .folio-project-form input[type=password], .folio-project-form input[type=text], .folio-project-form select { width: 400px; } .folio-project-form select { margin: 10px 0 0 0; } .folio-project-form textarea { width: 400px; height: 133px; } .folio-hub { padding: 20px; } .folio-hub span { margin: 10px 10px 0 0; } .folio-hub .btn-add-project span { font: 20px $bodyType; margin: -35px 0 0 40px; display: block; height: 50px; } .folio-hub .project-list { width: 95%; } .folio-hub .project-list span.drag-handle { padding: 10px; color: #f5ab35; cursor: pointer; } .folio-hub .project-list .project-item { width: 100%; display: inline-block; background: #28343e; padding: 5px; margin-bottom: 10px; border-radius: 5px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .folio-hub .project-list .project-item:hover { background: #3b4e5e; } .upload-list { color: #c1cdd7; display: inline-block; vertical-align: top; width: 260px; height: 330px; margin: 45px 0 0; } .thumb { height: 50px; overflow: hidden; border-radius: 3px; margin: 10px 5px 0 0; } .upload-drop { width: 400px; height: 70px; background: $form-background; color: #c1cdd7; text-align: center; padding: 40px 0 0; font-size: 12px; text-transform: uppercase; border-radius: 3px; } /** ------------------------------- -- Settings ------------------------------- **/ #site-background { margin: 0 0 10px 0; } #site-background img { width: 100%; border-radius: 0; overflow: hidden; cursor: pointer; } #site-background label { position: absolute; color: #f2f1ef; margin: 5px; background: #161d23; padding: 5px; border-radius: 3px; } #site-background input { visibility: hidden; display: none; } #settings-index { width: 100%; max-width: 900px; margin: 0 auto; } #settings-index #settings-index-wrapper { padding: 0.75rem; } #settings-index #settings-index-wrapper button { margin-top: 5px; width: 320px; height: 45px; } #settings-index #settings-index-wrapper #member-settings, #settings-index #settings-index-wrapper #site-settings, #settings-index #settings-index-wrapper #theme-settings, #settings-index #settings-index-wrapper #mail-settings { width: 100%; margin-bottom: 40px; } #settings-index #settings-index-wrapper #member-settings label, #settings-index #settings-index-wrapper #site-settings label, #settings-index #settings-index-wrapper #theme-settings label, #settings-index #settings-index-wrapper #mail-settings label { font-family: 'Apercu-Mono'; color: #f2f1ef; } #settings-index #settings-index-wrapper #member-settings input, #settings-index #settings-index-wrapper #site-settings input, #settings-index #settings-index-wrapper #theme-settings input, #settings-index #settings-index-wrapper #mail-settings input { width: 44%; margin-right: 5px; height: 30px; padding: 10px; } #settings-index #settings-index-wrapper #member-settings #member-avatar-drop, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop, #settings-index #settings-index-wrapper #theme-settings #member-avatar-drop, #settings-index #settings-index-wrapper #mail-settings #member-avatar-drop { display: inline-block; } #settings-index #settings-index-wrapper #member-settings #member-avatar-drop img, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop img, #settings-index #settings-index-wrapper #theme-settings #member-avatar-drop img, #settings-index #settings-index-wrapper #mail-settings #member-avatar-drop img { width: 110px; border-radius: 10px; overflow: hidden; cursor: pointer; } #settings-index #settings-index-wrapper #member-settings #member-avatar-drop input, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop input, #settings-index #settings-index-wrapper #theme-settings #member-avatar-drop input, #settings-index #settings-index-wrapper #mail-settings #member-avatar-drop input { visibility: hidden; display: none; } #settings-index #settings-index-wrapper #member-settings #member-info, #settings-index #settings-index-wrapper #site-settings #member-info, #settings-index #settings-index-wrapper #theme-settings #member-info, #settings-index #settings-index-wrapper #mail-settings #member-info { vertical-align: top; display: inline-block; margin: 0 0 0 10px; width: 79%; } #settings-index #settings-index-wrapper #member-settings #member-info input, #settings-index #settings-index-wrapper #site-settings #member-info input, #settings-index #settings-index-wrapper #theme-settings #member-info input, #settings-index #settings-index-wrapper #mail-settings #member-info input { width: 94%; margin: 0 5px 10px 0; } #settings-index #settings-index-wrapper #member-settings textarea, #settings-index #settings-index-wrapper #site-settings textarea, #settings-index #settings-index-wrapper #theme-settings textarea, #settings-index #settings-index-wrapper #mail-settings textarea { background: #161d23; width: 91.5%; height: 100px; color: #b2cce5; margin-top: 10px; padding: 10px; } #settings-index #settings-index-wrapper #theme-settings a[data-enabled='false'] { width: 310px; margin: 0 5px 5px 0; height: 25px; padding: 10px; display: inline-block; background: #161d23; color: #b2cce5; border-radius: 3px; } #settings-index #settings-index-wrapper #theme-settings a[data-enabled='true'] { width: 310px; margin: 0 5px 5px 0; height: 25px; padding: 10px; display: inline-block; background: #b2cce5; color: #374857; border-radius: 3px; } #settings-index #settings-index-wrapper #theme-settings a[data-enabled='true'] svg { fill: #374857; display: inline-block; float: right; } #settings-index #settings-index-wrapper #mail-settings { height: 100px; } #settings-index #settings-index-wrapper #mail-settings a.mail-option { float: right; font-family: 'Apercu-Mono'; font-size: 0.9em; border-radius: 3px; text-decoration: none; margin: 0 0 0 5px; } #settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled='true'] { color: #fc6399; } #settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled='false'] { color: #f2f1ef; } #settings-index #settings-index-wrapper #mail-settings input { margin: 0 5px 5px 0; vertical-align: top; } #settings-index #settings-index-wrapper #mail-settings div[data-enabled='false'] { display: none; visibility: hidden; } /** ------------------------------- -- Navigation ------------------------------- **/ #nav-index { width: 100%; max-width: 900px; margin: 0 auto; } #nav-index #nav-index-wrapper { padding: 0.75rem; } #nav-index #nav-index-wrapper #nav-pages div.nav-item { display: block; width: 100%; background: #161d23; border-radius: 3px; color: #b2cce5; height: 30px; padding: 10px; margin: 0 0 10px 0; font-size: 1.5em; cursor: move; } #nav-index #nav-index-wrapper #nav-pages label { display: inline-block; vertical-align: middle; padding: 0; margin: -15px 0 0 10px; cursor: move; } #nav-index #nav-index-wrapper #nav-pages #nav-btns { float: right; } #nav-index #nav-index-wrapper #nav-pages #nav-btns button { font-size: 0.8em; margin: 0 0 0 10px; } /** ------------------------------- -- Forms ------------------------------- **/ form { display: inline-block; } input[type=email], input[type=password], input[type=text] { border: 0; border-radius: 3px; padding: 5px; font: 1em 'Apercu-Mono'; display: inline-block; background-color: #161d23; color: #b2cce5; } textarea { border: 0; border-radius: 3px; color: $type02; font: 15px 'Apercu-Mono'; } button, input[type=submit] { background: #fc6399; color: #161d23; font: 1em 'Apercu-Mono'; border-radius: 3px; position: relative; cursor: pointer; border: 0; } select { font: 1em 'Apercu-Mono'; border: 1px solid #b2cce5; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #374857; } ::-webkit-input-placeholder { font: 1em 'Apercu-Mono'; color: #546d84; } :-moz-placeholder { /* Firefox 18- */ font: 1em 'Apercu-Mono'; color: #546d84; } ::-moz-placeholder { /* Firefox 19+ */ font: 1em 'Apercu-Mono'; color: #546d84; } :-ms-input-placeholder { font: 1em 'Apercu-Mono'; color: #546d84; } /** ------------------------------- -- Blog ------------------------------- **/ #post-index { width: 100%; max-width: 900px; margin: 0 auto; } #post-index #post-index-wrapper { padding: 0.75rem; } #post-index #post-index-wrapper a { display: inline-block; vertical-align: top; padding: 3px; } #post-index #post-index-wrapper a.add-new-post { background: #fc6399; border-radius: 3px; padding: 3px; color: #f2f1ef; width: 115px; text-align: center; margin-bottom: 10px; } #post-index #post-index-wrapper a.add-new-post svg { display: inline-block; vertical-align: top; } #post-index #post-index-wrapper a.add-new-post label { padding: 5px; } #post-index #post-index-wrapper a.add-new-post span { font-size: 0.8em; color: #62809b; } #post-index #post-index-wrapper a.add-new-post:hover { background: #344453; } #post-index #post-index-wrapper #posts-list { color: #f2f1ef; } #post-index #post-index-wrapper #posts-list a.post-list-link { display: inline-block; vertical-align: top; padding: 3px; width: 48%; font-size: 1.2em; text-decoration: none; line-height: 0.8em; margin: 0 0 20px 0; } #post-index #post-index-wrapper #posts-list a.post-list-link span { font-size: 0.7em; font-family: 'Apercu-Mono'; } #post-edit-index { width: 100%; } #post-edit-index #post-edit-index-wrapper { width: 100%; } #post-edit-index #post-edit-index-wrapper #post-header { max-width: 900px; margin: 0 auto; padding: 0.75rem; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post_title { background: #354554; font-family: 'Apercu'; width: 97.6%; height: 140px; font-size: 1.5em; color: #f2f1ef; padding: 5px; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date { background: #32414e; border-radius: 0 3px 3px 0; width: 105px; font-family: 'Apercu'; color: #fc6399; height: 30px; vertical-align: top; text-align: center; } #post-edit-index #post-edit-index-wrapper #post-header #post-title label { background: #2f3d4a; border-radius: 3px 0 0 3px; display: inline-block; padding: 5px; color: #b2cce5; line-height: 30px; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options { display: inline-block; vertical-align: top; width: 49%; padding: 0 0 0 3px; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options button:nth-child(1) { border-radius: 3px 0 0 3px; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options button:nth-child(4) { border-radius: 0 3px 3px 0; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options button { width: 25%; height: 39px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; margin: 0; border-radius: 0; display: inline-block; vertical-align: top; text-align: center; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options button[data-active='false'] { background: #b2cce5; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options button[data-active='false'] svg { fill: #374857; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options button[data-active='true'] { background: #f5ab35; } #post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options button[data-active='true'] svg { fill: #553604; } #post-edit-index #post-edit-index-wrapper #post-header #post-meta #post_tags { background: #354554; font-family: 'Apercu'; width: 97.6%; height: 140px; color: #b2cce5; padding: 5px; } #post-edit-index #post-edit-index-wrapper #post-header #post-meta #featured-image-upload, #post-edit-index #post-edit-index-wrapper #post-header #post-meta #post-image-upload { display: none; } #post-edit-index #post-edit-index-wrapper #post-feature { width: 100%; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-image-drop { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; background: #1c242c; color: #374857; vertical-align: middle; font-family: 'Apercu-Mono'; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-image-drop label { cursor: pointer; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-image-drop img { width: 100%; margin: 0; padding: 0; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn { position: absolute; margin: 20px; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn #new-feature-upload { padding-top: 4px; background: #f2f1ef; } #post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn #new-feature-upload svg { fill: #fc6399; } #post-edit-index #post-edit-index-wrapper #edit-post { width: 100%; max-width: 900px; margin: 0 auto; } #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper { width: 98%; max-width: 900px; margin: 0 auto; border-radius: 5px; background: #32414e; } #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper pre code { padding: 5px; border-radius: 5px; line-height: 1.6em; font-size: 1.25em; color: #bebebe; word-wrap: normal; white-space: pre-wrap; line-break: normal; -webkit-line-break: normal; -o-line-break: normal; -moz-line-break: normal; display: inline-block; overflow-wrap: break-word; width: 100%; max-width: 900px; } .dp-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17,22,26,0.75); z-index: 2000; } .dp { position: relative; background: #374857; box-shadow: 2px 2px 16px rgba(0,0,0,0.25); line-height: 1.4; border-radius: 4px; max-height: 400px; z-index: 5000; padding-top: 6px; overflow: hidden; -webkit-tap-highlight-color: transparent; } .dp:before { content: ' '; height: 6px; position: absolute; top: 0; left: 0; right: 0; background: #fc6399; } .dp-permanent .dp { padding-top: 0; border: 1px solid #eee; box-shadow: none; } .dp-permanent .dp:before { display: none; } .dp-cal { min-height: 300px; } .dp-below { position: absolute; font-size: 0.8em; width: 400px; max-width: 100vw; } .dp-permanent { position: relative; font-size: 0.8em; width: 400px; max-width: 100vw; } .dp-permanent .dp { z-index: 0; } .dp-modal .dp { position: absolute; top: 50%; left: 50%; max-width: 600px; width: calc(100% - 4em); transform: translate(-50%, -50%); animation: slide-up 0.3s forwards; } .dp-months { padding: 24px; } .dp-years { box-sizing: border-box; max-height: 400px; padding: 8px 0; overflow: auto !important /* HACK for Chrome on Android */; } .dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year { box-sizing: border-box; text-align: center; text-decoration: none; position: relative; color: #f2f1ef; border-radius: 2px; border: 0; background: transparent; } .dp-cal-header { position: relative; text-align: center; padding-bottom: 16px; background: #32414e; } .dp-next, .dp-prev { position: absolute; width: 30px; height: 30px; overflow: hidden; top: 14px; color: #1c242c; border-radius: 2px; border: 0; background: transparent; } .dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover { outline: none; color: inherit; } .dp-prev { left: 24px; } .dp-next { right: 24px; } .dp-prev:before, .dp-next:before { content: ''; border: 2px solid; width: 10px; height: 10px; display: inline-block; transform: rotate(-45deg); transition: border-color 0.2s; margin: 9px 0 40px 4px; } .dp-prev:before { border-right: 0; border-bottom: 0; } .dp-next:before { border-left: 0; border-top: 0; margin-left: 0; margin-right: 4px; } .dp-cal-month, .dp-cal-year { display: inline-block; font-size: 1.4em; padding: 16px 8px 8px; outline: none; } .dp-cal-footer { text-align: center; background: #32414e; } .dp-day-today:after { content: ''; height: 0; width: 0; border: 7px solid #fc6399; border-bottom-color: transparent; border-left-color: transparent; position: absolute; top: 0; right: 0; } .dp-close, .dp-clear, .dp-today { box-sizing: border-box; display: inline-block; width: 33%; padding: 8px; text-decoration: none; color: #1c242c; border: 0; background: transparent; } .dp-permanent .dp-close, .dp-permanent .dp-clear { display: none; } .dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active { background: #fc6399; color: #f2f1ef; } @media screen and (min-device-width: 1200px) { .dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus { background: #fc6399; color: #f2f1ef; } } .dp-col-header, .dp-day { width: 14.28571429%; display: inline-block; padding: 8px; text-align: center; } .dp-col-header { color: #aaa; text-transform: uppercase; font-weight: 300; font-size: 0.8em; padding: 8px 0; } .dp-month { width: 33%; display: inline-block; padding: 8px; } .dp-year { display: block; padding: 8px 40px; width: 100%; } .dp-edge-day { color: #aaa; } .dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus { outline: none; background: #bad1e8; color: #f2f1ef; } .dp-selected:hover, .dp-selected:focus, .dp-selected { background: #b2cce5; color: #f2f1ef; } .dp-day-disabled { background: transparent; color: #ddd; } .dp-day-disabled:focus, .dp-day-disabled:hover { background: #ddd; } .dp-focuser { position: absolute; z-index: 0; top: 50%; left: 50%; } @media (max-width: 480px), (max-height: 480px) { .dp-modal .dp { font-size: 0.9em; width: auto; width: 100%; } .dp-day-of-week, .dp-day { padding: 8px; } } @-moz-keyframes slide-up { 0% { transform: translate(-50%, 100%); } 100% { transform: translate(-50%, -50%); } } @-webkit-keyframes slide-up { 0% { transform: translate(-50%, 100%); } 100% { transform: translate(-50%, -50%); } } @-o-keyframes slide-up { 0% { transform: translate(-50%, 100%); } 100% { transform: translate(-50%, -50%); } } @keyframes slide-up { 0% { transform: translate(-50%, 100%); } 100% { transform: translate(-50%, -50%); } } /** ------------------------------- -- Editor ------------------------------- **/ #edit-control { top: 1px; border-radius: 3px; width: 100%; max-width: 425px; z-index: 2000; } #edit-control button:nth-child(1) { border-radius: 3px 0 0 3px; } #edit-control button:nth-child(10) { border-radius: 0 3px 3px 0; } #edit-control button { background: #b2cce5; width: 10%; height: 39px; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; margin: 0; border-radius: 0; display: inline-block; vertical-align: top; text-align: center; } #edit-control button:hover { background: #75a4d0; } #edit-control #option-update { padding: 5px 5px 1px 5px; display: inline-block; vertical-align: top; text-align: center; } #edit-control .icon-hide { display: none; visibility: hidden; } #edit-control .submit-start { background: #f2f1ef; } #edit-control .submit-start svg { fill: #32cd32; } #edit-control .submit-cool { background: #32cd32; } #edit-control .submit-cool svg { fill: #f2f1ef; } #edit-control .submit-delete { background: #ce483b !important; } #edit-control .submit-delete svg { fill: #f2f1ef !important; } #edit-control #option-date { height: 30px; padding-top: 6px; } #edit-control #option-date svg { margin: -13px 5px 0 0; display: inline-block; vertical-align: top; fill: #f2f1ef; } #edit-control .content-editor-btn-icon { padding: 5px 5px 1px 5px; color: #374857; } #edit-control .content-editor-btn-icon svg { fill: #374857; } #edit-control .content-editor-btn-text { padding: 5px; color: #374857; } #edit-control #option-bold { font-weight: bold; text-decoration: none; } #edit-control #option-italic { font-weight: bold; text-decoration: none; font-style: italic; } #edit-control #option-strikethrough { font-weight: bold; text-decoration: line-through; font-style: italic; } .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #344453; } .hljs, .hljs-subst { color: #ebdbb2; } .hljs-deletion, .hljs-formula, .hljs-keyword .hljs-selector-tag { color: #bebebe; font-style: italic; } .hljs-link { color: #fc6399; } .hljs-built_in, .hljs-emphasis, .hljs-name, .hljs-quote, .hljs-strong, .hljs-title, .hljs-variable { color: #ffa07a; } .hljs-attr, .hljs-params, .hljs-template-tag, .hljs-type { color: #89c4f4; } .hljs-builtin-name, .hljs-doctag, .hljs-literal, .hljs-number { color: #8f3f71; } .hljs-code, .hljs-meta, .hljs-regexp, .hljs-selector-id, .hljs-template-variable { color: #f5ab35; } .hljs-addition, .hljs-meta-string, .hljs-section, .hljs-selector-attr, .hljs-selector-class, .hljs-string, .hljs-symbol { color: #f6dd74; } .hljs-attribute, .hljs-bullet, .hljs-class, .hljs-function, .hljs-function .hljs-keyword, .hljs-meta-keyword, .hljs-selector-pseudo, .hljs-tag { color: #8ea4b8; } .hljs-comment { color: #928374; } .hljs-link_label, .hljs-literal, .hljs-number { color: #d3869b; } .hljs-comment, .hljs-emphasis { font-style: italic; } .hljs-section, .hljs-strong, .hljs-tag { font-weight: normal; } /*# sourceMappingURL=dash.css.map */