eddie/stellaamor.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
edsea
2024-12-25 17:05:50 +01:00
commit 1f76a04566
43 changed files with 2542 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1127
rss/css/main.css Normal file
View File

File diff suppressed because it is too large Load Diff

1
rss/css/main.css.map Normal file
View File

File diff suppressed because one or more lines are too long

657
rss/css/main.scss Normal file
View File

@@ -0,0 +1,657 @@
@import url('https://fonts.googleapis.com/css2?family=Arima:wght@100..700&display=swap');
*,
*::before,
*::after {
box-sizing: border-box;
font-family: "Arima", system-ui;
}
body {
margin: 0;
padding: 0;
}
$gutter-width: 30px;
$breakpoints: (
"s": 320px,
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
"xxl": 1400px
);
// Define max-width for each breakpoint
$max-widths: (
"sm": 540px, // Set a specific max-width for small screens
"md": 720px, // Set a specific max-width for medium screens
"lg": 960px, // Set a specific max-width for large screens
"xl": 1140px, // Existing value for extra large screens
"xxl": 1320px // Existing value for extra large screens
);
.container {
width: 100%;
padding-right: $gutter-width / 2;
padding-left: $gutter-width / 2;
margin-right: auto;
margin-left: auto;
@each $breakpoint, $value in $breakpoints {
@media (min-width: #{$value}) {
max-width: map-get($max-widths, $breakpoint); // Use the defined max-widths
}
}
}
/**
Margins
**/
.mt-10{
margin-top:100px;
}
// Padding
.p-0{
padding: 0;
}
.p-20{
padding:20px;
}
// Text
.text-center{
text-align: center;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -$gutter-width / 2;
margin-left: -$gutter-width / 2;
}
// Default column classes (no media queries)
@for $i from 1 through 12 {
.col-#{$i} {
flex: 0 0 #{(100% / 12) * $i};
max-width: #{(100% / 12) * $i};
padding-right: $gutter-width / 2;
padding-left: $gutter-width / 2;
}
}
.col-auto {
flex: 0 0 auto;
width: auto;
}
// Media queries for specific breakpoints
@each $breakpoint, $value in $breakpoints {
@media (min-width: #{$value}) {
.col-#{$breakpoint}-auto {
flex: 0 0 auto;
width: auto;
}
@for $i from 1 through 12 {
.col-#{$breakpoint}-#{$i} {
flex: 0 0 #{(100% / 12) * $i};
max-width: #{(100% / 12) * $i};
padding-right: $gutter-width / 2;
padding-left: $gutter-width / 2;
}
}
}
}
.blue-banner{
background-color: #5a7489;
color: #fff;
}
.col {
flex: 1;
padding-right: $gutter-width / 2;
padding-left: $gutter-width / 2;
}
.justify-content-center{
justify-content: center;
}
.align-items-center{
align-items: center;
}
.align-self-center{
align-self: center;
}
.d-flex{
display:flex;
}
.h-auto{
height:auto !important;
min-height: auto !important;
max-height: auto !important;
}
.image-container{
width: 100%;
position: relative;
@media(max-width:768px){
padding:10px;
}
img{
width: 100%;
border-radius: 12px;
.shadow{
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
}
}
// Menu
.navbar {
background-color: #fff;
padding: 5px 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 10;
.container {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
}
.logo {
img {
width: 125px;
}
}
.nav-links {
list-style: none;
display: flex;
gap: 1.5rem;
li {
a {
text-decoration: none;
color: #333;
font-size: 1rem;
font-weight: 500;
padding: 0.3rem 0.8rem;
border-radius: 4px;
transition: background-color 0.3s ease, color 0.3s ease;
&:hover {
background-color: #f0f0f0;
color: #6d6d6d;
}
}
}
}
.burger {
display: none;
cursor: pointer;
flex-direction: column;
gap: 0.3rem;
span {
width: 28px;
height: 2px;
background-color: #333;
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
}
@media screen and (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
right: 0;
background-color: #fff;
width: 100%;
padding: 0rem 0.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
border-radius: 0px 0px 8px 8px;
margin: 0;
gap: 15px;
padding: 10px 0px;
li {
// margin-bottom: 0.1rem;
text-align: left;
a {
font-size: 1.1rem;
font-weight: 500;
color: #333;
// padding: 0.8rem;
text-align: center;
border-radius: 4px;
display: block;
margin: 0;
padding:0;
text-align: left;
padding: 0px 20px;
&:hover {
background-color: #f0f0f0;
}
}
}
&.nav-active {
display: flex;
opacity: 1;
transform: translateY(0);
}
}
.burger {
display: flex;
&.toggle span:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
&.toggle span:nth-child(2) {
opacity: 0;
}
&.toggle span:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
}
}
}
// Home banner
.landing-banner {
background: url('/rss/img/people.jpg') no-repeat center center/cover;
background-attachment: fixed;
min-height: 100vh;
position: relative;
color: #fff;
.overlay {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
text-align: center;
padding: 1.5rem;
position: absolute;
top:0;
left: 0;
width: 100%;
min-height:100vh;
@media(max-width: 768px){
padding-bottom:150px;
}
@media(max-width:768px){
height:unset;
position: relative;
}
@media(max-width:768px) {
padding: 0.5rem;
}
&.login{
padding-top:100px;
@media(max-width:768px){
padding: 0;
}
}
.container {
@media(max-width:768px) {
max-width: unset;
}
h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
line-height: 1.2;
}
p {
font-size: 1.2rem;
margin-bottom: 2rem;
line-height: 1.5;
}
.home-container {
background: #fff; // Added missing semicolon
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
h2 {
margin-bottom: 1rem;
font-size: 1.5rem; // Size for the signup heading
color: #333; // Dark text color for contrast
}
form {
display: flex;
flex-direction: column;
.form-field {
margin-bottom: 1rem; // Space between fields
display: flex;
flex-direction: column;
justify-content: flex-start;
text-align: left;
@media(max-width:768px) {
margin-bottom: 0.5rem;
}
label {
margin-bottom: 0.5rem; // Space between label and input/select
color: #333; // Dark text color for labels
}
input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
select {
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
color: #333; // Dark text color for inputs/selects
background-color: #fff; // White background for inputs/selects
&:focus {
border-color: #007bff; // Focus effect
outline: none;
}
&.invalid{
border: 1px solid #ef3c3c
}
}
}
.form-row {
display: flex; // Display the selects in a row
justify-content: space-between; // Space between selects
margin-bottom: 1rem; // Space below the row
@media(max-width:768px) {
flex-direction: column;
}
.gender-select,
.country-select {
width: 48%; // Set width to 48% for two select elements side by side
@media(max-width:768px) {
width: 100%;
}
}
}
.checkbox-container {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
label {
font-size: 0.9rem; // Slightly smaller font for checkboxes
display: flex;
align-items: center; // Align checkbox and text
color: #333; // Dark text color for checkbox labels
input[type="checkbox"] {
margin-right: 0.5rem; // Space between checkbox and label text
}
}
}
button {
padding: 0.75rem;
border: none;
border-radius: 4px;
background-color: #007bff; // Primary button color
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
&:hover {
background-color: #0056b3; // Darker on hover
}
}
.link{
font-weight: bold;
color: inherit;
margin-left: 3px;
}
}
}
}
}
.errors{
background-color: rgba(239, 60, 60, 0.93);
border-radius: 4px;
color: #fff;
margin-top: 5px;
}
@media screen and (max-width: 768px) {
h1 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
.home-container {
padding: 1.5rem;
h2 {
font-size: 1.3rem;
}
}
}
}
.login-page {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #E7E7E7;
.login {
width: 400px;
padding: 4rem 2rem;
background-color: #fff;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.2);
@media(max-width:768px){
width: calc(100% - 40px);
}
@media(min-width:769px){
margin-top: -125px;
}
.logo {
width: 84px;
margin-bottom: 1.5rem;
}
form {
display: flex;
flex-direction: column;
align-items: center;
.input {
width: 100%;
padding: 0.75rem;
margin: 0.5rem 0;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.login-button {
width: 100%;
padding: 0.75rem;
margin-top: 1rem;
background-color: #0073aa;
color: #fff;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
&:hover {
background-color: #006799;
}
}
}
.forgot-password {
display: block;
margin-top: 1rem;
font-size: 0.875rem;
color: #0073aa;
text-decoration: none;
transition: color 0.3s ease;
&:hover {
text-decoration: underline;
}
}
}
}
footer{
width: 100%;
background-color:#333;
display: flex;
justify-content: center;
margin-top: 45px;
.footer-inner{
width: 80%;
padding: 20px 40px;
display:flex;
flex-direction: row;
color:#fff;
margin: 0 -20px;
@media(max-width:768px){
padding: 5px;
flex-direction: column;
width: 100%;
}
.footer-col{
width: 20%;
max-width: 20%;
padding: 0 20px;
@media(max-width:768px){
width: 100%;
max-width: unset;
padding: 10px;
}
.image-container{
width: 180px;
}
&.img{
display: flex;
align-items: center;
justify-self: flex-end;
margin-left: auto;
@media(max-width: 768px){
justify-content: center;
}
}
}
}
}
.footer-menu{
.link-title{
margin:5px 0px;
padding:0;
line-height: 1;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
a{
color:inherit;
text-decoration: none;
}
}
.mdi{
color:#0056b3;
font-size: 1.8rem;
&.mdi-loading{
animation: rotate 1s linear infinite;
display: none;
&.show{
display:block
}
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}