Skip to content

Commit

Permalink
Update main.css
Browse files Browse the repository at this point in the history
  • Loading branch information
@sri-dsa
sri-dsa authored Feb 11, 2025
1 parent a9e89f6 commit 4e03699
Showing 1 changed file with 52 additions and 238 deletions.
290 changes: 52 additions & 238 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4005,265 +4005,79 @@ h1{
}

/* Footer */

/* Footer Container */
#footer {
color: #717981;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
background-color: #f5f5f5;
color: #909498;
cursor: default;
position: relative;
margin: 0 auto;
width: calc(100% - 4rem);
max-width: 72rem;
z-index: 2;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 3% 5%;
width: 100%;
background-color: #1e252d; /* Matches site theme */
}

#footer input, #footer select, #footer textarea {
color: #717981;
}

#footer a {
color: #717981;
border-bottom-color: rgba(113, 121, 129, 0.5);
}

#footer a:hover {
border-bottom-color: transparent;
color: #18bfef !important;
}

#footer strong, #footer b {
color: #717981;
}

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
color: #717981;
}

#footer blockquote {
border-left-color: #e2e2e2;
}

#footer code {
background: rgba(220, 220, 220, 0.5);
border-color: #e2e2e2;
}

#footer hr {
border-bottom-color: #e2e2e2;
}

#footer .box {
border-color: #e2e2e2;
}

#footer input[type="submit"],
#footer input[type="reset"],
#footer input[type="button"],
#footer button,
#footer .button {
background-color: transparent;
box-shadow: inset 0 0 0 2px #717981;
color: #717981 !important;
}

#footer input[type="submit"]:hover,
#footer input[type="reset"]:hover,
#footer input[type="button"]:hover,
#footer button:hover,
#footer .button:hover {
box-shadow: inset 0 0 0 2px #18bfef;
color: #18bfef !important;
}

#footer input[type="submit"].primary,
#footer input[type="reset"].primary,
#footer input[type="button"].primary,
#footer button.primary,
#footer .button.primary {
background-color: #717981;
box-shadow: none;
color: #f5f5f5 !important;
}

#footer input[type="submit"].primary:hover,
#footer input[type="reset"].primary:hover,
#footer input[type="button"].primary:hover,
#footer button.primary:hover,
#footer .button.primary:hover {
background-color: #18bfef;
}

#footer label {
color: #717981;
}

#footer input[type="text"],
#footer input[type="password"],
#footer input[type="email"],
#footer select,
#footer textarea {
border-color: #e2e2e2;
}

#footer input[type="text"]:focus,
#footer input[type="password"]:focus,
#footer input[type="email"]:focus,
#footer select:focus,
#footer textarea:focus {
border-color: #18bfef;
}

/* ========================= */
/* 🔹 Optimized Footer Layout (Percentage-Based) */
/* ========================= */

#footer {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 2% 5%;
width: 100%;
background-color: #1e252d; /* Match your site theme */
}

/* Footer Sections */
/* Footer Layout */
#footer .split.contact {
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* Allows responsiveness */
gap: 2%;
width: 100%;
max-width: 90%; /* Ensures optimal width relative to screen */
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
width: 100%;
max-width: 1200px; /* Restricts to a readable width */
margin: 0 auto;
}

/* Individual Footer Sections */
#footer .split.contact section {
flex: 1;
width: 23%; /* Distributes evenly within available space */
padding: 1%;
box-sizing: border-box;
flex: 1;
min-width: 250px; /* Prevents sections from shrinking too much */
padding: 10px;
text-align: left;
}

/* Social Icons */
/* Social Icons Styling */
#footer .icons {
display: flex;
gap: 2%;
list-style: none;
padding: 0;
display: flex;
gap: 10px;
list-style: none;
padding: 0;
}

/* Fix Alignment Issues */
#footer > section.split.contact {
flex-direction: row !important; /* ✅ Ensures side-by-side layout */
/* Social Icon Sizing */
#footer .icons a {
font-size: 1.5rem;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Responsive Fix for Smaller Screens */
@media screen and (max-width: 768px) {
#footer .split.contact {
flex-direction: column; /* Stacks sections vertically */
align-items: center; /* Centers content */
#footer .icons a:hover {
transform: scale(1.3);
opacity: 0.8;
}

#footer .split.contact section {
width: 90%; /* Use a percentage instead of full width */
text-align: center;
/* Links Styling */
#footer a {
text-decoration: none;
color: #007bff;
transition: color 0.3s ease-in-out;
}
}




@media screen and (max-width: 980px) {

#footer {
display: block;
}

#footer > section {
border-top: solid 2px #e2e2e2;
}

#footer > section:first-child {
border-top: 0;
}

#footer > section.split > section {
padding: 4rem 4rem 2rem 4rem ;
}

#footer > section.split > section:first-child {
padding: 4rem 4rem 2rem 4rem ;
}

#footer > section.split > section:last-child {
padding: 4rem 4rem 2rem 4rem ;
}

#footer > section.split.contact > section {
padding: 4rem;
}

#footer > section.split.contact > section:first-child {
padding: 4rem;
}

#footer > section.split.contact > section:last-child {
padding: 4rem;
}

#footer form label,
#footer h3,
#footer p {
font-size: 0.9rem;
}

}

@media screen and (max-width: 736px) {

#footer > section {
padding: 2rem 2rem 0.1rem 2rem ;
}

#footer > section.split > section {
padding: 2rem 2rem 0.1rem 2rem ;
}

#footer > section.split > section:first-child {
padding: 2rem 2rem 0.1rem 2rem ;
}

#footer > section.split > section:last-child {
padding: 2rem 2rem 0.1rem 2rem ;
}

#footer > section.split.contact > section {
padding: 2rem;
}

#footer > section.split.contact > section:first-child {
padding: 2rem;
}

#footer > section.split.contact > section:last-child {
padding: 2rem;
}

}

@media screen and (max-width: 480px) {
#footer a:hover {
color: #00ff00;
}

#footer {
width: 100%;
}
/* ✅ RESPONSIVENESS: Mobile Optimization */
@media screen and (max-width: 768px) {
#footer .split.contact {
flex-direction: column;
align-items: center;
text-align: center;
}

#footer .split.contact section {
width: 100%;
}
}

}

#copyright {
color: #ffffff;
Expand Down

0 comments on commit 4e03699

Please sign in to comment.