mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2025-01-16 03:23:59 +01:00
144 lines
2.6 KiB
CSS
144 lines
2.6 KiB
CSS
/* General link styles */
|
|
a {
|
|
text-decoration: none;
|
|
color: #000000;
|
|
}
|
|
|
|
/* Header styles */
|
|
.header img {
|
|
float: right;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.header h1 {
|
|
position: relative;
|
|
}
|
|
|
|
/* Equal-height container using flexbox */
|
|
.equal-height {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Card styles */
|
|
.card {
|
|
flex: 1; /* Ensures cards fill the height of their container */
|
|
border-radius: 5px; /* Rounded corners */
|
|
border: 1px solid #ccc; /* Optional border color */
|
|
padding: 10px; /* Inner spacing */
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow effect */
|
|
color: #000000 !important;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.card-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* Center content horizontally */
|
|
text-align: center; /* Center text alignment */
|
|
}
|
|
|
|
.card-icon {
|
|
display: flex;
|
|
justify-content: center; /* Center the icon horizontally */
|
|
}
|
|
|
|
.card-text,
|
|
.card ul {
|
|
text-align: left; /* Align text to the left */
|
|
}
|
|
|
|
.card-column {
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.card .stretched-link {
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
h3.card-title {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
/* Footer styles */
|
|
.footer {
|
|
margin-top: 12px;
|
|
text-align: center;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.footer p,
|
|
.footer h3 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h3.footer-title {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
/* Dropdown menu styles */
|
|
.dropdown-menu {
|
|
position: absolute !important;
|
|
}
|
|
|
|
.dropdown-menu-footer {
|
|
position: absolute !important;
|
|
top: auto !important;
|
|
bottom: 100%; /* Positions the menu above the trigger */
|
|
transform: translateY(-10px); /* Optional spacing for smoother appearance */
|
|
}
|
|
|
|
/* Dropdown submenu styles */
|
|
.dropdown-submenu {
|
|
position: relative;
|
|
list-style: none;
|
|
}
|
|
|
|
.dropdown-submenu > .dropdown-menu {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%; /* Default position: open to the right */
|
|
margin-top: -1px;
|
|
z-index: 1050;
|
|
transition: opacity 0.3s ease-in-out; /* Smooth opacity transition */
|
|
}
|
|
|
|
/* Handle collapse behavior for dropdowns */
|
|
.dropdown-menu.collapse {
|
|
display: none;
|
|
}
|
|
|
|
.dropdown-menu.collapse.show {
|
|
display: block;
|
|
}
|
|
|
|
/* Ensure submenus are hidden by default */
|
|
.dropdown-submenu .dropdown-menu {
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease-in-out;
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 0;
|
|
}
|
|
|
|
/* Show submenu on hover */
|
|
.dropdown-submenu:hover > .dropdown-menu {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Ensure submenu remains visible when hovered over */
|
|
.dropdown-submenu:hover > .dropdown-menu:hover {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Handle dynamic submenu positioning */
|
|
.dropdown-submenu > .dropdown-menu[style*="right: 100%"] {
|
|
left: auto; /* Override left position for leftward opening */
|
|
}
|