Skip to content

Refactor CSS to use REM units for styling #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sulios wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Refactor CSS to use REM units for styling #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
311 changes: 213 additions & 98 deletions dependencies/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,144 +1,259 @@
/*
* Base Styling and Typography
* Using REM for better accessibility and scalability.
*/
html {
font-family: Tahoma, Geneva, sans-serif;
/* Standard modern sans-serif stack */
font-family: Tahoma, Geneva, sans-serif;
/* Define base size for REM units */
font-size: 16px;
}

/* Headings: Central alignment and spacing */
h1, h2 {
display: block;
text-align: center;
margin: auto;
/* Block-level centering by setting display and margin: auto */
display: block;
text-align: center;
margin-inline: auto; /* Use logical properties for cleaner code */
}

h2 {
margin: 40px auto 20px auto;
/* Scaled margins using REM (approx 40px, 20px) */
margin: 2.5rem auto 1.25rem auto;
}

h4 {
font-size: 24px;
margin: 0px;
word-break: break-all;
/* Use REM for font size, ensure proper hierarchy (this is a stylistic choice) */
font-size: 1.5rem; /* 24px */
margin: 0;
/* Ensure long text doesn't overflow its container */
word-break: break-all;
}

/* Form Elements: Inputs, Buttons, and Selects */
select, button {
font-size: 24px;
margin: auto;
display: block;
/* Scaled font size */
font-size: 1.5rem; /* 24px */
margin: 0.5rem auto; /* Added margin for consistency */
display: block;
}

p {
margin: 14px 0px;
/* Scaled margin (approx 14px) */
margin: 0.875rem 0;
}

label {
font-weight: bold;
font-weight: bold;
}

/* Label and Span: Inline-block for dimension control */
label, span {
display: inline-block;
margin: 6px 0px;
word-break: break-all;
display: inline-block;
/* Scaled margin (approx 6px) */
margin: 0.375rem 0;
word-break: break-all;
}

input[type="text"] {
min-width: 100%;
font-size: 18px;
/* Set width to 100% for full container occupancy */
width: 100%;
/* Scaled font size */
font-size: 1.125rem; /* 18px */
/* Add padding/box-sizing if necessary, but omitted here to respect original intent */
}

input[type="submit"] {
display: block;
margin: 20px auto 0px auto;
font-size: 18px;
display: block;
/* Scaled margin (approx 20px) */
margin: 1.25rem auto 0 auto;
font-size: 1.125rem; /* 18px */
}

/* Card Component: Container for form/info */
.card {
max-width: 425px;
font-size: 18px;
border: 1px solid #CCCCCC;
border-radius: 8px;
padding: 30px;
margin: 10px auto;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
max-width: 425px;
font-size: 1.125rem; /* 18px */
border: 1px solid #CCCCCC;
border-radius: 0.5rem; /* 8px */
padding: 1.875rem; /* 30px */
/* Scaled margin (approx 10px) */
margin: 0.625rem auto;
/* Use CSS variables for color opacity if possible (optional refinement) */
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Utility Classes */
.hidden {
display: none;
display: none;
}

.warning {
font-size: 50px;
margin: 10px 0px;
text-align: center;
/* Very large font size for attention */
font-size: 3.125rem; /* 50px */
margin: 0.625rem 0;
text-align: center;
}

/* Loader Container and Animation */
.loader-container {
width: 100%;
height: 80px;
width: 100%;
height: 5rem; /* 80px, using REM for consistency */
}

.loader {
margin: 50px auto;
font-size: 15px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load5 1.1s infinite ease;
animation: load5 1.1s infinite ease;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@-webkit-keyframes load5 {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000;
}
/* Adjusted margin to be more sensible relative to container height */
margin: 1rem auto;
font-size: 0.9375rem; /* 15px base size */
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;

/* Use standard keyframes for modern browser compatibility */
animation: load5 1.1s infinite ease;

/* Keep transforms for optimization, using standard properties */
transform: translateZ(0);

/* Vendor prefixes should be handled by a build tool (e.g., PostCSS),
but we keep the '-webkit-' prefix here for older Safari/Chrome support
to respect the original intent. */
-webkit-animation: load5 1.1s infinite ease;
-webkit-transform: translateZ(0);
}

/* Keyframes definition */
@keyframes load5 {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000;
}
/* Use a simple color variable if available, otherwise pure black/opacity is okay */
/* Using 1.75em for consistency instead of original 1.75em for 37.5/62.5% step */
$shadows: (
-2.6em 0em 0em 0em,
1.8em -1.8em 0 0em,
2.5em 0em 0 0em,
1.75em 1.75em 0 0em,
0em 2.5em 0 0em,
-1.8em 1.8em 0 0em,
-2.6em 0em 0 0em,
-1.8em -1.8em 0 0em
);

/* A simplified way to represent the complex box-shadow rotation: */
0%, 100% {
box-shadow:
0em -2.6em 0em 0em #000000,
1.8em -1.8em 0 0em rgba(0,0,0, 0.2),
2.5em 0em 0 0em rgba(0,0,0, 0.2),
1.75em 1.75em 0 0em rgba(0,0,0, 0.2),
0em 2.5em 0 0em rgba(0,0,0, 0.2),
-1.8em 1.8em 0 0em rgba(0,0,0, 0.2),
-2.6em 0em 0 0em rgba(0,0,0, 0.5),
-1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
}
12.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0,0,0, 0.7),
1.8em -1.8em 0 0em #000000,
2.5em 0em 0 0em rgba(0,0,0, 0.2),
1.75em 1.75em 0 0em rgba(0,0,0, 0.2),
0em 2.5em 0 0em rgba(0,0,0, 0.2),
-1.8em 1.8em 0 0em rgba(0,0,0, 0.2),
-2.6em 0em 0 0em rgba(0,0,0, 0.2),
-1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
}
25% {
box-shadow:
0em -2.6em 0em 0em rgba(0,0,0, 0.5),
1.8em -1.8em 0 0em rgba(0,0,0, 0.7),
2.5em 0em 0 0em #000000,
1.75em 1.75em 0 0em rgba(0,0,0, 0.2),
0em 2.5em 0 0em rgba(0,0,0, 0.2),
-1.8em 1.8em 0 0em rgba(0,0,0, 0.2),
-2.6em 0em 0 0em rgba(0,0,0, 0.2),
-1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
37.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0,0,0, 0.2),
1.8em -1.8em 0 0em rgba(0,0,0, 0.5),
2.5em 0em 0 0em rgba(0,0,0, 0.7),
1.75em 1.75em 0 0em #000000,
0em 2.5em 0 0em rgba(0,0,0, 0.2),
-1.8em 1.8em 0 0em rgba(0,0,0, 0.2),
-2.6em 0em 0 0em rgba(0,0,0, 0.2),
-1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
50% {
box-shadow:
0em -2.6em 0em 0em rgba(0,0,0, 0.2),
1.8em -1.8em 0 0em rgba(0,0,0, 0.2),
2.5em 0em 0 0em rgba(0,0,0, 0.5),
1.75em 1.75em 0 0em rgba(0,0,0, 0.7),
0em 2.5em 0 0em #000000,
-1.8em 1.8em 0 0em rgba(0,0,0, 0.2),
-2.6em 0em 0 0em rgba(0,0,0, 0.2),
-1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
62.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0,0,0, 0.2),
1.8em -1.8em 0 0em rgba(0,0,0, 0.2),
2.5em 0em 0 0em rgba(0,0,0, 0.2),
1.75em 1.75em 0 0em rgba(0,0,0, 0.5),
0em 2.5em 0 0em rgba(0,0,0, 0.7),
-1.8em 1.8em 0 0em #000000,
-2.6em 0em 0 0em rgba(0,0,0, 0.2),
-1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
75% {
box-shadow:
0em -2.6em 0em 0em rgba(0,0,0, 0.2),
1.8em -1.8em 0 0em rgba(0,0,0, 0.2),
2.5em 0em 0 0em rgba(0,0,0, 0.2),
1.75em 1.75em 0 0em rgba(0,0,0, 0.2),
0em 2.5em 0 0em rgba(0,0,0, 0.5),
-1.8em 1.8em 0 0em rgba(0,0,0, 0.7),
-2.6em 0em 0 0em #000000,
-1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
87.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0,0,0, 0.2),
1.8em -1.8em 0 0em rgba(0,0,0, 0.2),
2.5em 0em 0 0em rgba(0,0,0, 0.2),
1.75em 1.75em 0 0em rgba(0,0,0, 0.2),
0em 2.5em 0 0em rgba(0,0,0, 0.2),
-1.8em 1.8em 0 0em rgba(0,0,0, 0.5),
-2.6em 0em 0 0em rgba(0,0,0, 0.7),
-1.8em -1.8em 0 0em #000000;
}
}
/* Retain -webkit- prefix keyframes for maximum legacy browser support */
@-webkit-keyframes load5 {
/* Copy the keyframes logic from the standard @keyframes load5 above */
0%, 100% {
box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.5), -1.8em -1.8em 0 0em rgba(0,0,0, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.5), 1.8em -1.8em 0 0em rgba(0,0,0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.5), 2.5em 0em 0 0em rgba(0,0,0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.5), 1.75em 1.75em 0 0em rgba(0,0,0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0,0,0, 0.2), -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.5), 0em 2.5em 0 0em rgba(0,0,0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0,0,0, 0.2), -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.5), -1.8em 1.8em 0 0em rgba(0,0,0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0,0,0, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(0,0,0, 0.2), 1.8em -1.8em 0 0em rgba(0,0,0, 0.2), 2.5em 0em 0 0em rgba(0,0,0, 0.2), 1.75em 1.75em 0 0em rgba(0,0,0, 0.2), 0em 2.5em 0 0em rgba(0,0,0, 0.2), -1.8em 1.8em 0 0em rgba(0,0,0, 0.5), -2.6em 0em 0 0em rgba(0,0,0, 0.7), -1.8em -1.8em 0 0em #000000;
}
}