This commit is contained in:
Bye 2023-06-07 20:40:38 +01:00
parent 3f9d442a85
commit 8a247a3b23
No known key found for this signature in database
43 changed files with 19424 additions and 155 deletions

7955
bcid_prototyping/fontawesome/css/all.css vendored Normal file

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,19 @@
/*!
* Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2023 Fonticons, Inc.
*/
:root, :host {
--fa-style-family-classic: 'Font Awesome 6 Free';
--fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; }
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
.far,
.fa-regular {
font-weight: 400; }

View file

@ -0,0 +1,6 @@
/*!
* Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2023 Fonticons, Inc.
*/
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}

View file

@ -0,0 +1,19 @@
/*!
* Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2023 Fonticons, Inc.
*/
:root, :host {
--fa-style-family-classic: 'Font Awesome 6 Free';
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
.fas,
.fa-solid {
font-weight: 900; }

View file

@ -0,0 +1,6 @@
/*!
* Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2023 Fonticons, Inc.
*/
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

View file

@ -0,0 +1,639 @@
/*!
* Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2023 Fonticons, Inc.
*/
:root, :host {
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Solid';
--fa-font-regular: normal 400 1em/1 'Font Awesome 6 Regular';
--fa-font-light: normal 300 1em/1 'Font Awesome 6 Light';
--fa-font-thin: normal 100 1em/1 'Font Awesome 6 Thin';
--fa-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
--fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
--fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp';
--fa-font-sharp-light: normal 300 1em/1 'Font Awesome 6 Sharp';
--fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; }
svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
overflow: visible;
box-sizing: content-box; }
.svg-inline--fa {
display: var(--fa-display, inline-block);
height: 1em;
overflow: visible;
vertical-align: -.125em; }
.svg-inline--fa.fa-2xs {
vertical-align: 0.1em; }
.svg-inline--fa.fa-xs {
vertical-align: 0em; }
.svg-inline--fa.fa-sm {
vertical-align: -0.07143em; }
.svg-inline--fa.fa-lg {
vertical-align: -0.2em; }
.svg-inline--fa.fa-xl {
vertical-align: -0.25em; }
.svg-inline--fa.fa-2xl {
vertical-align: -0.3125em; }
.svg-inline--fa.fa-pull-left {
margin-right: var(--fa-pull-margin, 0.3em);
width: auto; }
.svg-inline--fa.fa-pull-right {
margin-left: var(--fa-pull-margin, 0.3em);
width: auto; }
.svg-inline--fa.fa-li {
width: var(--fa-li-width, 2em);
top: 0.25em; }
.svg-inline--fa.fa-fw {
width: var(--fa-fw-width, 1.25em); }
.fa-layers svg.svg-inline--fa {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0; }
.fa-layers-text, .fa-layers-counter {
display: inline-block;
position: absolute;
text-align: center; }
.fa-layers {
display: inline-block;
height: 1em;
position: relative;
text-align: center;
vertical-align: -.125em;
width: 1em; }
.fa-layers svg.svg-inline--fa {
-webkit-transform-origin: center center;
transform-origin: center center; }
.fa-layers-text {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform-origin: center center;
transform-origin: center center; }
.fa-layers-counter {
background-color: var(--fa-counter-background-color, #ff253a);
border-radius: var(--fa-counter-border-radius, 1em);
box-sizing: border-box;
color: var(--fa-inverse, #fff);
line-height: var(--fa-counter-line-height, 1);
max-width: var(--fa-counter-max-width, 5em);
min-width: var(--fa-counter-min-width, 1.5em);
overflow: hidden;
padding: var(--fa-counter-padding, 0.25em 0.5em);
right: var(--fa-right, 0);
text-overflow: ellipsis;
top: var(--fa-top, 0);
-webkit-transform: scale(var(--fa-counter-scale, 0.25));
transform: scale(var(--fa-counter-scale, 0.25));
-webkit-transform-origin: top right;
transform-origin: top right; }
.fa-layers-bottom-right {
bottom: var(--fa-bottom, 0);
right: var(--fa-right, 0);
top: auto;
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
transform: scale(var(--fa-layers-scale, 0.25));
-webkit-transform-origin: bottom right;
transform-origin: bottom right; }
.fa-layers-bottom-left {
bottom: var(--fa-bottom, 0);
left: var(--fa-left, 0);
right: auto;
top: auto;
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
transform: scale(var(--fa-layers-scale, 0.25));
-webkit-transform-origin: bottom left;
transform-origin: bottom left; }
.fa-layers-top-right {
top: var(--fa-top, 0);
right: var(--fa-right, 0);
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
transform: scale(var(--fa-layers-scale, 0.25));
-webkit-transform-origin: top right;
transform-origin: top right; }
.fa-layers-top-left {
left: var(--fa-left, 0);
right: auto;
top: var(--fa-top, 0);
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
transform: scale(var(--fa-layers-scale, 0.25));
-webkit-transform-origin: top left;
transform-origin: top left; }
.fa-1x {
font-size: 1em; }
.fa-2x {
font-size: 2em; }
.fa-3x {
font-size: 3em; }
.fa-4x {
font-size: 4em; }
.fa-5x {
font-size: 5em; }
.fa-6x {
font-size: 6em; }
.fa-7x {
font-size: 7em; }
.fa-8x {
font-size: 8em; }
.fa-9x {
font-size: 9em; }
.fa-10x {
font-size: 10em; }
.fa-2xs {
font-size: 0.625em;
line-height: 0.1em;
vertical-align: 0.225em; }
.fa-xs {
font-size: 0.75em;
line-height: 0.08333em;
vertical-align: 0.125em; }
.fa-sm {
font-size: 0.875em;
line-height: 0.07143em;
vertical-align: 0.05357em; }
.fa-lg {
font-size: 1.25em;
line-height: 0.05em;
vertical-align: -0.075em; }
.fa-xl {
font-size: 1.5em;
line-height: 0.04167em;
vertical-align: -0.125em; }
.fa-2xl {
font-size: 2em;
line-height: 0.03125em;
vertical-align: -0.1875em; }
.fa-fw {
text-align: center;
width: 1.25em; }
.fa-ul {
list-style-type: none;
margin-left: var(--fa-li-margin, 2.5em);
padding-left: 0; }
.fa-ul > li {
position: relative; }
.fa-li {
left: calc(var(--fa-li-width, 2em) * -1);
position: absolute;
text-align: center;
width: var(--fa-li-width, 2em);
line-height: inherit; }
.fa-border {
border-color: var(--fa-border-color, #eee);
border-radius: var(--fa-border-radius, 0.1em);
border-style: var(--fa-border-style, solid);
border-width: var(--fa-border-width, 0.08em);
padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }
.fa-pull-left {
float: left;
margin-right: var(--fa-pull-margin, 0.3em); }
.fa-pull-right {
float: right;
margin-left: var(--fa-pull-margin, 0.3em); }
.fa-beat {
-webkit-animation-name: fa-beat;
animation-name: fa-beat;
-webkit-animation-delay: var(--fa-animation-delay, 0s);
animation-delay: var(--fa-animation-delay, 0s);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
animation-timing-function: var(--fa-animation-timing, ease-in-out); }
.fa-bounce {
-webkit-animation-name: fa-bounce;
animation-name: fa-bounce;
-webkit-animation-delay: var(--fa-animation-delay, 0s);
animation-delay: var(--fa-animation-delay, 0s);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }
.fa-fade {
-webkit-animation-name: fa-fade;
animation-name: fa-fade;
-webkit-animation-delay: var(--fa-animation-delay, 0s);
animation-delay: var(--fa-animation-delay, 0s);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
.fa-beat-fade {
-webkit-animation-name: fa-beat-fade;
animation-name: fa-beat-fade;
-webkit-animation-delay: var(--fa-animation-delay, 0s);
animation-delay: var(--fa-animation-delay, 0s);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
.fa-flip {
-webkit-animation-name: fa-flip;
animation-name: fa-flip;
-webkit-animation-delay: var(--fa-animation-delay, 0s);
animation-delay: var(--fa-animation-delay, 0s);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
animation-timing-function: var(--fa-animation-timing, ease-in-out); }
.fa-shake {
-webkit-animation-name: fa-shake;
animation-name: fa-shake;
-webkit-animation-delay: var(--fa-animation-delay, 0s);
animation-delay: var(--fa-animation-delay, 0s);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, linear);
animation-timing-function: var(--fa-animation-timing, linear); }
.fa-spin {
-webkit-animation-name: fa-spin;
animation-name: fa-spin;
-webkit-animation-delay: var(--fa-animation-delay, 0s);
animation-delay: var(--fa-animation-delay, 0s);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 2s);
animation-duration: var(--fa-animation-duration, 2s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, linear);
animation-timing-function: var(--fa-animation-timing, linear); }
.fa-spin-reverse {
--fa-animation-direction: reverse; }
.fa-pulse,
.fa-spin-pulse {
-webkit-animation-name: fa-spin;
animation-name: fa-spin;
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
animation-timing-function: var(--fa-animation-timing, steps(8)); }
@media (prefers-reduced-motion: reduce) {
.fa-beat,
.fa-bounce,
.fa-fade,
.fa-beat-fade,
.fa-flip,
.fa-pulse,
.fa-shake,
.fa-spin,
.fa-spin-pulse {
-webkit-animation-delay: -1ms;
animation-delay: -1ms;
-webkit-animation-duration: 1ms;
animation-duration: 1ms;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-duration: 0s;
transition-duration: 0s; } }
@-webkit-keyframes fa-beat {
0%, 90% {
-webkit-transform: scale(1);
transform: scale(1); }
45% {
-webkit-transform: scale(var(--fa-beat-scale, 1.25));
transform: scale(var(--fa-beat-scale, 1.25)); } }
@keyframes fa-beat {
0%, 90% {
-webkit-transform: scale(1);
transform: scale(1); }
45% {
-webkit-transform: scale(var(--fa-beat-scale, 1.25));
transform: scale(var(--fa-beat-scale, 1.25)); } }
@-webkit-keyframes fa-bounce {
0% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0); }
10% {
-webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
30% {
-webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
50% {
-webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
57% {
-webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
64% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0); }
100% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0); } }
@keyframes fa-bounce {
0% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0); }
10% {
-webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
30% {
-webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
50% {
-webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
57% {
-webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
64% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0); }
100% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0); } }
@-webkit-keyframes fa-fade {
50% {
opacity: var(--fa-fade-opacity, 0.4); } }
@keyframes fa-fade {
50% {
opacity: var(--fa-fade-opacity, 0.4); } }
@-webkit-keyframes fa-beat-fade {
0%, 100% {
opacity: var(--fa-beat-fade-opacity, 0.4);
-webkit-transform: scale(1);
transform: scale(1); }
50% {
opacity: 1;
-webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
@keyframes fa-beat-fade {
0%, 100% {
opacity: var(--fa-beat-fade-opacity, 0.4);
-webkit-transform: scale(1);
transform: scale(1); }
50% {
opacity: 1;
-webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
@-webkit-keyframes fa-flip {
50% {
-webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
@keyframes fa-flip {
50% {
-webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
@-webkit-keyframes fa-shake {
0% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg); }
4% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg); }
8%, 24% {
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg); }
12%, 28% {
-webkit-transform: rotate(18deg);
transform: rotate(18deg); }
16% {
-webkit-transform: rotate(-22deg);
transform: rotate(-22deg); }
20% {
-webkit-transform: rotate(22deg);
transform: rotate(22deg); }
32% {
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg); }
36% {
-webkit-transform: rotate(12deg);
transform: rotate(12deg); }
40%, 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); } }
@keyframes fa-shake {
0% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg); }
4% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg); }
8%, 24% {
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg); }
12%, 28% {
-webkit-transform: rotate(18deg);
transform: rotate(18deg); }
16% {
-webkit-transform: rotate(-22deg);
transform: rotate(-22deg); }
20% {
-webkit-transform: rotate(22deg);
transform: rotate(22deg); }
32% {
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg); }
36% {
-webkit-transform: rotate(12deg);
transform: rotate(12deg); }
40%, 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); } }
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.fa-rotate-90 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.fa-rotate-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.fa-rotate-270 {
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
.fa-flip-horizontal {
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1); }
.fa-flip-vertical {
-webkit-transform: scale(1, -1);
transform: scale(1, -1); }
.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
-webkit-transform: scale(-1, -1);
transform: scale(-1, -1); }
.fa-rotate-by {
-webkit-transform: rotate(var(--fa-rotate-angle, none));
transform: rotate(var(--fa-rotate-angle, none)); }
.fa-stack {
display: inline-block;
vertical-align: middle;
height: 2em;
position: relative;
width: 2.5em; }
.fa-stack-1x,
.fa-stack-2x {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
z-index: var(--fa-stack-z-index, auto); }
.svg-inline--fa.fa-stack-1x {
height: 1em;
width: 1.25em; }
.svg-inline--fa.fa-stack-2x {
height: 2em;
width: 2.5em; }
.fa-inverse {
color: var(--fa-inverse, #fff); }
.sr-only,
.fa-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0; }
.sr-only-focusable:not(:focus),
.fa-sr-only-focusable:not(:focus) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0; }
.svg-inline--fa .fa-primary {
fill: var(--fa-primary-color, currentColor);
opacity: var(--fa-primary-opacity, 1); }
.svg-inline--fa .fa-secondary {
fill: var(--fa-secondary-color, currentColor);
opacity: var(--fa-secondary-opacity, 0.4); }
.svg-inline--fa.fa-swap-opacity .fa-primary {
opacity: var(--fa-secondary-opacity, 0.4); }
.svg-inline--fa.fa-swap-opacity .fa-secondary {
opacity: var(--fa-primary-opacity, 1); }
.svg-inline--fa mask .fa-primary,
.svg-inline--fa mask .fa-secondary {
fill: black; }
.fad.fa-inverse,
.fa-duotone.fa-inverse {
color: var(--fa-inverse, #fff); }

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,26 @@
/*!
* Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2023 Fonticons, Inc.
*/
@font-face {
font-family: 'FontAwesome';
font-display: block;
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
@font-face {
font-family: 'FontAwesome';
font-display: block;
src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
@font-face {
font-family: 'FontAwesome';
font-display: block;
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype");
unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; }
@font-face {
font-family: 'FontAwesome';
font-display: block;
src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype");
unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F27A; }

View file

@ -0,0 +1,6 @@
/*!
* Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2023 Fonticons, Inc.
*/
@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,22 @@
/*!
* Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2023 Fonticons, Inc.
*/
@font-face {
font-family: 'Font Awesome 5 Brands';
font-display: block;
font-weight: 400;
src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
@font-face {
font-family: 'Font Awesome 5 Free';
font-display: block;
font-weight: 900;
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
@font-face {
font-family: 'Font Awesome 5 Free';
font-display: block;
font-weight: 400;
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }

View file

@ -0,0 +1,6 @@
/*!
* Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2023 Fonticons, Inc.
*/
@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}

Binary file not shown.

View file

@ -0,0 +1,15 @@
<!-- This is a testing file for the header used on BCID. Copy of header on ByeCorps.com -->
<link rel="stylesheet" href="./styles/global.css">
<link rel="stylesheet" href="./fontawesome/css/all.css">
<header>
<div class="start">
<a href="/" id="sitetitle"><span class="bc-1">Bye</span><span class="bc-2">Corps</span><span class="bc-3"> ID</span></a></div>
<div class="end">
<div class="loggedin">
<a href="/account" class="account">Hey there, Bye! <i class="fa-solid fa-fw fa-angle-down"></i></a>
</div>
</div>
</header>

View file

@ -1,55 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BCID visual styles and testing</title>
<link rel="stylesheet" href="./styles/base.css">
<title>ByeCorps ID</title>
<link rel="stylesheet" href="./styles/global.css">
<link rel="stylesheet" href="./fontawesome/css/all.css">
</head>
<body>
<p>This page is for testing styling for <code>id</code>. Nothing on this page is funcitonal, but please be wary of password managers trying to autofill information.</p>
<header>
<div class="start">
<a href="/" id="sitetitle"><span class="bc-1">Bye</span><span class="bc-2">Corps</span><span class="bc-3"> ID</span></a></div>
<h2>Types</h2>
<p>This section tests the fonts that may be used, including in context.</p>
<h3>ByeCorps ID</h3>
<div class="bcid-container">
123-ABC4
<div class="end">
<!-- <div class="accountnav">
<a href="/account" class="account">Hey there, Bye! <i class="fa-solid fa-fw fa-angle-down"></i></a>
</div> -->
<div class="accountnav">
<a href="/login" class="account"><i class="fa-solid fa-key"></i> Sign in</a>
<a href="/register" class="account"><i class="fa-solid fa-arrow-right-to-bracket"></i> Create an account</a>
</div>
<p>Randomly generated on page load:</p>
<div class="bcid-container">
<script>
function generateBCID() {
// Alphanumeric characters, prefer uppercase
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let result = "";
for (let i = 0; i < 3; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
result += "-";
for (let i = 0; i < 4; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}
document.write(generateBCID());
</script>
</div>
</header>
<h3>Paragraph</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi sed ipsam at quas odit? Harum aut itaque earum natus officia reprehenderit, a totam magni, vero at modi blanditiis iusto voluptate!</p>
<h3>Logo</h3>
<p>very important</p>
<h1 class="bc-font">
<span class="bc-logo">
<span class="weight1">Bye</span><span class="weight2">Corps</span>
<span class="weight3"> ID</span>
</span>
</h1>
<main>
<div class="hero">
<div class="hero-text">
<h1><span class="bc-1">Bye</span><span class="bc-2">Corps</span><span class="bc-3"> ID</span></h1>
<p>Log into ByeCorps and beyond with a single ID.</p>
<a href="/login" class="button">Sign in</a>
<a href="/register" class="button">Create an account</a>
</div>
</div>
</main>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BCID visual styles and testing</title>
<link rel="stylesheet" href="./styles/base.css">
</head>
<body>
<main>
<div id="content">
<p>This page is for testing styling for <code>id</code>. Nothing on this page is funcitonal, but please be wary of password managers trying to autofill information.</p>
<h2>Types</h2>
<p>This section tests the fonts that may be used, including in context.</p>
<h3>ByeCorps ID</h3>
<div class="bcid-container">
123 ABC4
</div>
<p>Randomly generated on page load:</p>
<div class="bcid-container">
<script>
function generateBCID() {
// Alphanumeric characters, prefer uppercase
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let result = "";
for (let i = 0; i < 3; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
result += " ";
for (let i = 0; i < 4; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}
document.write(generateBCID());
</script>
</div>
<h3>Paragraph</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi sed ipsam at quas odit? Harum aut itaque earum natus officia reprehenderit, a totam magni, vero at modi blanditiis iusto voluptate!</p>
<h3>Logo</h3>
<p>very important</p>
<h1 class="bc-font">
<span class="bc-logo">
<span class="weight1">Bye</span><span class="weight2">Corps</span>
<span class="weight3"> ID</span>
</span>
</h1>
</div>
</main>
</body>
</html>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>your id // byecorps id</title>
<link rel="stylesheet" href="./styles/base.css">
<link rel="stylesheet" href="./styles/profile.css">
</head>
<body>
<main>
<h1 class="center">Your <span class="bc-logo"><span class="weight1">Bye</span><span class="weight2">Corps</span><span class="weight3"> ID</span></span></h1>
<div class="flex flex-row flex-justify-center" style="gap: 10px">
<div class="card">
<div class="bc-font card-header">
<h1 class="bc-logo"><span class="weight1">Bye</span><span class="weight2">Corps</span><span class="weight3"> ID</span></h1>
</div>
<img class="avatar" src="https://avatars.githubusercontent.com/u/77801870?v=4" alt="">
<h2>Bye</h2>
<p><span class="bcid-container">BYE 1010</span></p>
</div>
<div class="settings" style="flex: 1">
<h2>Settings</h2>
<form class="flex flex-column" style="gap: 5px;" action="#">
<div class="input">
<label class="hasborder" for="name">Name</label>
<input type="text" name="name" id="name" value="Bye">
</div>
<div class="input">
<label class="hasborder" for="id">ID</label>
<input type="text" disabled name="id" id="id" value="BYE 1010">
</div>
<button type="submit" class="bc-btn-primary">Save</button>
</form>
</div>
</div>
</main>
</body>
</html>

View file

@ -41,7 +41,7 @@
<div class="password-strength">
<p style="margin: 0;">Password requirements:</p>
<ul>
<li><i class="fa-fw fa-solid fa-circle-xmark"></i> At least 8 characters</li>
<li><i style="color: var(--oc-red-5);" class="fa-fw fa-solid fa-circle-xmark"></i> At least 8 characters</li>
</ul>
<script>
@ -63,8 +63,33 @@
passwordStrengthList[0].querySelector("i").classList.add("fa-circle-xmark");
}
});
</script>
</div>
<div class="input password-confirm">
<label for="password-confirm"><i aria-hidden="true" class="fa-solid fa-fw fa-lock" title="Password"></i><span class="fa-sr-only">Confirm password</span></label>
<input type="password" name="password-confirm" id="password-confirm" required placeholder="Confirm password" />
</div>
<div class="password-confirm-requirements">
<i class="fa-fw fa-solid fa-circle-xmark"></i> Passwords match
<script>
let passwordConfirm = document.getElementById("password-confirm");
passwordConfirm.addEventListener("input", function() {
let passwordConfirmValue = passwordConfirm.value;
let passwordConfirmLength = passwordConfirmValue.length;
let passwordConfirmRequirements = document.querySelector(".password-confirm-requirements");
if (passwordConfirmValue == password.value) {
passwordConfirmRequirements.querySelector("i").classList.remove("fa-circle-xmark");
passwordConfirmRequirements.querySelector("i").classList.add("fa-circle-check");
} else {
passwordConfirmRequirements.querySelector("i").classList.remove("fa-circle-check");
passwordConfirmRequirements.querySelector("i").classList.add("fa-circle-xmark");
}
});
</script>
</div>

View file

@ -5,6 +5,10 @@
@import url(./opencolor.css);
@import url(./font-awesome/css/all.css);
:root {
color-scheme: light dark;
}
body {
margin: 0;
@ -19,6 +23,25 @@ body {
justify-content: center;
}
main {
width: 100%;
max-width: 600px;
margin:auto;
/* align vertically */
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex: 0 1 auto;
background-color: var(--oc-white);
box-shadow: 0 0 10px var(--oc-gray-4);
border-radius: calc(0.5em + 10px + 1em);
padding: 1em;
}
.center {
text-align: center;
}
@ -46,6 +69,15 @@ body {
color: var(--oc-gray-3);
}
code, .code {
font-family: var(--bcid-font);
background-color: var(--oc-gray-3);
color: var(--oc-gray-9);
padding: .1em; border-radius: .2em;
}
.bc-font, h1, h2, h3, h4, h5, h6 {
font-family: var(--bc-font);
}
@ -61,3 +93,34 @@ body {
.bc-logo .weight3 {
font-weight: var(--bc-weight-3);
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.flex-align-center {
align-items: center;
}
.flex-justify-center {
justify-content: center;
}
@media screen and (prefers-color-scheme: dark) {
body {
background-color: var(--oc-gray-9);
}
main {
background-color: var(--oc-gray-8);
box-shadow: 0 0 10px var(--oc-gray-9);
}
}

View file

@ -0,0 +1,115 @@
.bc-btn, button {
all: unset;
cursor: pointer;
display: inline-block;
padding: 0.5em 1em;
border-radius: 0.5em;
font-weight: 600;
text-align: center;
text-decoration: none;
transition: all 0.2s ease-in-out;
font-family: var(--font);
}
.bc-btn:hover, button:hover {
background-color: var(--oc-gray-4);
}
.bc-btn-primary {
background-color: var(--oc-blue-5);
color: var(--oc-white);
}
.bc-btn-primary:hover {
background-color: var(--oc-blue-6);
}
input[type="checkbox"] {
all: unset;
cursor: pointer;
display: inline-block;
background-color: var(--oc-gray-4);
border-radius: 0.25em;
width: 1em;
height: 1em;
transition: all 0.2s ease-in-out;
}
input[type="checkbox"]:checked {
background-color: var(--oc-blue-5);
color: var(--oc-white);
}
input[type="checkbox"]:checked:hover {
background-color: var(--oc-blue-6);
}
.input:has(input[data-com-onepassword-filled="dark"]) {
background-color: rgb(36, 107, 179) !important;
}
.input:has(input[data-com-onepassword-filled="light"]) {
background-color: rgb(219, 237, 255) !important;
}
input[data-com-onepassword-filled="dark"] {
color: var(--oc-blue-0) !important;
}
input[data-com-onepassword-filled="light"] {
color: var(--oc-blue-8) !important;
}
.input {
padding: 0.5em;
/* width: 100%; */
flex-grow: 1;
border: none;
border-radius: 0.5em;
background-color: var(--oc-gray-4);
display: flex;
flex-direction: row;
gap: 5px;
}
.input label.hasborder {
border-right: 1px solid var(--oc-gray-5);
padding-right: .3rem;
}
.input input {
all: unset;
flex: 1 0 auto;
}
.input button {
all: unset;
cursor: pointer;
border-left: 1px solid var(--oc-gray-5);
}
@media screen and (prefers-color-scheme: dark) {
.input {
background-color: var(--oc-gray-8);
}
.input input {
color: var(--oc-gray-0);
}
.input label.hasborder {
border-right: 1px solid var(--oc-gray-9);
}
}

View file

@ -1,22 +1,5 @@
main {
width: 100%;
max-width: 600px;
margin:auto;
/* align vertically */
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex: 0 1 auto;
background-color: var(--oc-white);
box-shadow: 0 0 10px var(--oc-gray-4);
border-radius: calc(0.5em + 10px + 1em);
padding: 1em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
@ -37,36 +20,6 @@ form {
gap: 0.5em;
}
form .input {
padding: 0.5em;
/* width: 100%; */
flex-grow: 1;
border: none;
border-radius: 0.5em;
background-color: var(--oc-gray-4);
display: flex;
flex-direction: row;
gap: 5px;
}
form .input input {
all: unset;
flex: 1 0 auto;
}
form .input button {
all: unset;
cursor: pointer;
border-left: 1px solid var(--oc-gray-5);
}
.password-strength ul {
list-style: none;
margin: 0;
@ -144,3 +97,15 @@ form .input button {
background-color: var(--oc-gray-2);
color: var(--oc-gray-9);
}
@media screen and (prefers-color-scheme: dark) {
form {
background-color: var(--oc-gray-9);
}
.sso-buttons {
background-color: var(--oc-gray-9);
}
}

View file

@ -0,0 +1,49 @@
.card {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 10px var(--oc-gray-4);
padding: 20px;
width: 150px;
display: flex;
flex-direction: column;
font-size: .9em;
margin-bottom: 21.440px;
color: var(--oc-gray-9);
}
.card-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.card-header > h1 {
font-size: 1.3em;
margin: auto;
}
.card > .avatar {
/* img */
margin: auto;
width: 100px;
}
.card > h2 {
font-size: 1.2em;
font-weight: 600;
margin: auto
}
.card p {
margin: auto;
margin-top: 10px;
}

View file

@ -0,0 +1,16 @@
/* Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap'); /* for BCIDs */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;800;900&display=swap'); /* For title, byecorps logo, headers, etc */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); /* For body text */
:root {
--bcid-font: 'Courier Prime', monospace;
--bc-font: 'Montserrat', sans-serif;
--font: 'IBM Plex Sans', sans-serif;
--bc-weight-1: 700;
--bc-weight-2: 600;
--bc-weight-3: 900;
}

View file

@ -0,0 +1,45 @@
:root {
--black: #000000;
--white: #ffffff;
/* ByeCorps colour scheme. Use sparsely on this site. */
--byecorps-blue: #1b5652;
--byecorps-white: #e6feff;
/* ByeCorps ID colour scheme. Use on this site. */
--black-bean: #330f0a;
--dark-slate-gray: #394f49;
--fern-green: #65743a;
--flax: #efdd8d;
--mindaro: #f4fdaf;
}
button, .button {
color: var(--black-bean);
background-color: var(--flax);
}
header {
background-color: var(--flax);
color: var(--dark-slate-gray);
}
header a {
color: var(--dark-slate-gray);
}
@media screen and (prefers-color-scheme: dark) {
button, .button {
color: var(--flax);
background-color: var(--dark-slate-gray);
}
header {
background-color: var(--dark-slate-gray);
color: var(--flax);
}
header a {
color: var(--flax);
}
}

View file

@ -0,0 +1,20 @@
/* This file holds the look and feel for ByeCorps products.
(c) 2023 ByeCorps. All rights reserved.
*/
button, .button {
border: none;
padding: 15px 32px;
margin: 4px 2px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
}
header a {
text-decoration: none;
}

View file

@ -0,0 +1,12 @@
@import url(./colours.css);
@import url(./types.css);
@import url(./design.css);
@import url(./layout.css);
:root {
color-scheme: light dark;
}
* {
box-sizing: border-box;
}

View file

@ -1,48 +0,0 @@
.bc-btn, button {
all: unset;
cursor: pointer;
display: inline-block;
padding: 0.5em 1em;
border-radius: 0.5em;
font-weight: 600;
text-align: center;
text-decoration: none;
transition: all 0.2s ease-in-out;
font-family: var(--font);
}
.bc-btn:hover, button:hover {
background-color: var(--oc-gray-4);
}
.bc-btn-primary {
background-color: var(--oc-blue-5);
color: var(--oc-white);
}
.bc-btn-primary:hover {
background-color: var(--oc-blue-6);
}
input[type="checkbox"] {
all: unset;
cursor: pointer;
display: inline-block;
background-color: var(--oc-gray-4);
border-radius: 0.25em;
width: 1em;
height: 1em;
transition: all 0.2s ease-in-out;
}
input[type="checkbox"]:checked {
background-color: var(--oc-blue-5);
color: var(--oc-white);
}
input[type="checkbox"]:checked:hover {
background-color: var(--oc-blue-6);
}

View file

@ -0,0 +1,69 @@
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
header {
display: flex;
align-items: center;
padding: 1rem 1rem;
}
header .start {
margin-right: auto;
display: flex;
gap: 1rem;
}
header .middle {
margin: 0 16px;
display: flex;
}
header .end {
margin-left: auto;
display: flex;
}
main {
flex: 1;
padding: 1rem 1rem;
}
footer {
display: flex;
align-items: start;
justify-content: center;
padding: 1rem 1rem;
gap: 1rem;
}
footer h2 {
margin: 0;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
padding: 1rem 1rem;
gap: 1rem;
}
.accountnav {
display: flex;
gap: 1rem;
}

View file

@ -1,16 +1,23 @@
/* This file deals with font types and font families. */
/* Fonts. */
@import url(https://fonts.bunny.net/css?family=montserrat:400,400i,600,600i,700,700i,900,900i);
@import url(/fontawesome/css/all.css);
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap'); /* for BCIDs */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;800;900&display=swap'); /* For title, byecorps logo, headers, etc */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); /* For body text */
:root {
--bcid-font: 'Courier Prime', monospace;
--bc-font: 'Montserrat', sans-serif;
--font: 'IBM Plex Sans', sans-serif;
--bc-weight-1: 700;
--bc-weight-2: 600;
--bc-weight-3: 900;
html {
font-family: 'montserrat', sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bc-1 {
font-weight: 700;
}
.bc-2 {
font-weight: 600;
}
.bc-3 {
font-weight: 400;
}