diff --git a/2 b/2 deleted file mode 100644 index 3c880e4..0000000 --- a/2 +++ /dev/null @@ -1,279 +0,0 @@ -.pageContainer { - margin: 5% 20% 5% 20%; -} -@media (max-width: 1100px) { - .pageContainer { - margin: 2%; - } -} -/*input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -input[type=number] { - -moz-appearance: textfield; -}*/ -.contactBox { - color: grey; -} -#container { - margin-top: 5%; - margin-bottom: 5%; -} -.tabText { - font-size: 2rem; -} -.mb-1 { - margin-bottom: 1rem; -} -.mb-half { - margin-bottom: 0.5rem; -} -.pb-1 { - padding-bottom: 1rem; -} -.pl-1 { - padding-left: 1rem; -} -.mr-1 { - margin-right: 1rem; -} -.ml-1 { - margin-left: 1rem; -} -.mb-2 { - margin-bottom: 2rem; -} -.mt-half { - margin-top: 0.5rem; -} -.inv-codearea { - /*width: 40%;*/ -} -.al { - text-align: left; -} -.inline-block { - display: inline-block; -} -.ar { - text-align: right; -} -.monospace { - background-color: inherit; -} -.mt-half { - margin-top: 0.5rem; -} -.table-header { - padding-left: 0.5rem; - padding-bottom: 0.2rem; -} -.inv { - overflow: hidden; -} -.inv-header { - display: flex; - justify-content: space-between; -} -.button-input { - display: flex; - justify-content: space-between; -} -/*.inv-details { - display: flex; - justify-content: space-between; -}*/ -/*.invites { - transition: max-height 1s cubic-bezier(0.550, 0.055, 0.675, 0.190); -}*/ -.inv-details { -} -.inv-row { - display: flex; - justify-content: space-between; - align-items: top; -} -/*.inv-profilearea { - align-items: top; -}*/ -.ib { - display: inline-block; -} -.inv-profileselect { - min-width: 100%; -} -.inv-table { - font-size: 0.8rem; -} -.no-lp { - padding-left: 0px; -} -.block { display: block; } -.hiding { - animation: slide-out 0.1s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards; -} -.hidden { - display: none; -} -.visible { - display: block; - /*animation: fade-in 0.2s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;*/ -} -@keyframes fade-in { - from { - opacity: 0; - visibility: hidden; - } - to { - opacity: 1; - visibility: visible; - } -} -@keyframes slide-out { - from { - opacity: 1; - visibility: visible; - } - to { - opacity: 0; - visibility: hidden; - } -} -.toggle-details { - display: none; -} -.rotated { - transform: rotate(180deg); --webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92); --moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92); - -o-transition: all 0.3s cubic-bezier(0,.89,.27,.92); - transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */ -} - -.not-rotated { - transform: rotate(0deg); --webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92); --moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92); - -o-transition: all 0.3s cubic-bezier(0,.89,.27,.92); - transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */ -} -.row { - display: flex; - flex-wrap: wrap; -} -.col { - flex: 1; - margin: 0.5rem; -} -@media screen and (max-width: 400px) { - .row { - flex-direction: column; - } - .col { - flex: 45%; - } -} -.input { - box-sizing: border-box; -} -.button-lg { - height: 3rem; -} -.full-width { - box-sizing: border-box; - width: 100%; - justify-content: center; -} -.unfocused { - display: none; -} -.fr { - float: right; -} -.stealth-input-hidden { - border-style: none; - --fallback-box-shadow: none; - --field-hover-box-shadow: none; - --field-focus-box-shadow: none; - padding-top: 0.1rem; - padding-bottom: 0.1rem; -} -.stealth-input { - font-size: 1rem; - padding-top: 0.1rem; - padding-bottom: 0.1rem; - margin-left: 0.5rem; - margin-right: 1rem; - max-width: 50%; - -} -.settings-section-button { - box-sizing: border-box; - width: 100%; - height: 2.5rem; - --button-filter-brightness: 90%; -} -.settings-section-button.selected { - --button-filter-brightness: 85%; - filter: brightness(85%); -} -.text-critical { - color: var(--color-critical-normal-content); -} -.aside.small { - font-size: 0.8rem; - padding: 0.8rem; -} -.setting { - margin-bottom: 0.25rem; -} -.support.large { - font-size: 1rem; -} - -.modal { - display: none; - position: fixed; - z-index: 1; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(0,0,0,40%); -} - -.shown { - display: block; -} - - -@keyframes modal-show { - from { - top: -5rem; - opacity: 0; - } - to { - top: 0; - opacity: 1; - } -} - -.modal-content { - position: relative; - margin: 10% auto; - width: 60%; -} - -.shown .modal-content { - animation: modal-show 0.5s cubic-bezier(.41,.47,0,.91); -} - -@media screen and (max-width: 400px) { - .modal-content { - width: 90%; - } -} diff --git a/base.css b/base.css index 1d467b7..ce08189 100644 --- a/base.css +++ b/base.css @@ -1,3 +1,5 @@ +@import "modal.css"; + .pageContainer { margin: 5% 20% 5% 20%; } @@ -240,54 +242,3 @@ input[type=number] { font-size: 1rem; } -.modal { - display: none; - position: fixed; - z-index: 1; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(0,0,0,40%); -} - -.modal-shown { - display: block; -} - -@keyframes modal-hide { - from { opacity: 1; } - to { opacity: 0; } -} - -.modal-hiding { - animation: modal-hide 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -@keyframes modal-content-show { - from { - opacity: 0; - top: -6rem; - } - to { - opacity: 1; - top: 0; - } -} - -.modal-content { - position: relative; - margin: 10% auto; - width: 30%; -} - -.modal-shown .modal-content { - animation: modal-content-show 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -@media screen and (max-width: 400px) { - .modal-content { - width: 90%; - } -} diff --git a/images/banner.svg b/images/banner.svg new file mode 100644 index 0000000..627a830 --- /dev/null +++ b/images/banner.svg @@ -0,0 +1,283 @@ + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 2b41dfd..0e5ce15 100644 --- a/index.html +++ b/index.html @@ -7,14 +7,32 @@ jfa-no -