LuggageTracker/static/style.css
2025-07-08 23:55:20 -04:00

104 lines
2.1 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

:root {
--dark: #1f363dff;
--mid-dark: #40798cff;
--mid: #70a9a1ff;
--mid-light: #9ec1a3ff;
--light: #cfe0c3ff;
font-family: Verdana,sans-serif;
}
body {
margin: 0;
}
.header {
display: flex;
align-items: center; /* vertical centering */
justify-content: space-between; /* icon left, spacer right */
background-color: var(--mid-dark);
padding: 0 1rem;
height: 80px;
}
.spacer {
flex: 0 0 64px; /* or your icons width */
}
.header-icon {
display: block; /* remove inline whitespace */
flex: 0 0 64px; /* or your icons width */
width: 15vw; /* fill the 64px container */
height: auto; /* keep aspect ratio */
max-height: 80px; /* never exceed 80px bar height */
}
.title {
flex: 1; /* take up all the space between */
text-align: center; /* center text within that space */
color: var(--light);
}
.footer {
background-color: var(--dark);
display: flex;
height: 80px;
}
.footer-text {
display: inherit;
align-content: center;
justify-content: center;
margin: auto;
background-color: inherit;
border: none;
outline: none;
text-align: center;
color: white;
}
.footer-text a {
cursor: pointer;
text-decoration: none;
color: var(--mid-light);
padding-left: 5px;
}
.footer-text a:hover {
color: var(--mid);
}
.contact-link {
cursor: pointer;
color: var(--mid-dark);
text-decoration: none;
}
.contact-link a:hover {
color: var(--mid);
}
.container {
padding: 20vh 0 calc(80vh - 303px) 0;
background-image: linear-gradient(
to bottom right,
var(--mid-light),
var(--mid-dark)
);
}
.content {
margin: 0 auto;
width: 90vw; /* takes 90% of viewport (or container) width */
max-width: 800px; /* but never wider than 800px */
padding: 1.5rem; /* give it some breathing room inside */
background: white;
border-radius: 5px;
}
.content h3 {
text-align: center;
}
.content p {
text-align: center;
}