134 lines
3.8 KiB
CSS
Executable file
134 lines
3.8 KiB
CSS
Executable file
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center; /* Center the main-screen horizontally */
|
|
align-items: stretch; /* Ensure full height */
|
|
min-height: 100vh; /* Ensure the body takes up the full viewport height */
|
|
}
|
|
.main-screen {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between; /* Ensure side-screens are adjacent to main-content */
|
|
width: auto; /* Allow the width to adjust based on content */
|
|
max-width: 100%; /* Prevent overflow */
|
|
gap: 0;
|
|
text-align: left;
|
|
}
|
|
.side-screen {
|
|
height: 100vh;
|
|
overflow-y: auto; /* Allow scrolling if content overflows */
|
|
flex: 0 0 280; /* Fixed width of 400px */
|
|
}
|
|
.main-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1; /* Take up the remaining space between side-screens */
|
|
max-width: 900px; /* Optional: Limit max width */
|
|
margin: 0 25px;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between; /* Space between the title and navigation */
|
|
align-items: center; /* Align items vertically in the center */
|
|
width: 100%;
|
|
padding-right: 0px; /* Dont make room for hamburger icon since the menu is displayed no matter what */
|
|
}
|
|
.title-wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
.site-title {
|
|
flex-grow: 0;
|
|
flex-shrink: 1;
|
|
margin: 0;
|
|
font-size: 2.5rem;
|
|
word-break: normal;
|
|
}
|
|
.site-logo {
|
|
flex-grow: 0; /* Change from 1 to 0 */
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.site-logo img {
|
|
height: 50px;
|
|
}
|
|
.navigation {
|
|
flex-grow: 3;
|
|
display: flex;
|
|
}
|
|
.presentation, .side-content-column > * {
|
|
background-color: var(--entry);
|
|
padding: 10px;
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.center-content, .side-content-column {
|
|
display: flex;
|
|
flex-grow: 1; /* Allow it to grow */
|
|
gap: 20px; /* Optional: Add spacing between child elements */
|
|
}
|
|
.presentation, .side-content-column {
|
|
flex: 1; /* Make both elements take up equal width */
|
|
}
|
|
.presentation {
|
|
max-width: 100%; /* Ensure it doesn't exceed its container */
|
|
}
|
|
.presentation a {
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1.5px;
|
|
text-underline-offset: 3px;
|
|
}
|
|
.side-content-column {
|
|
max-width: 100%; /* Ensure it doesn't exceed its container */
|
|
flex-direction: column;
|
|
}
|
|
.excerpt {
|
|
display: flex;
|
|
align-items: center; /* Align items vertically in the center */
|
|
gap: 10px; /* Add spacing between text and image */
|
|
}
|
|
.excerpt-text {
|
|
flex: 1; /* Allow text to take up remaining space */
|
|
}
|
|
.excerpt img {
|
|
flex-shrink: 0; /* Prevent the image from shrinking */
|
|
max-width: 150px; /* Ensure the image doesn't exceed its intended size */
|
|
height: auto; /* Maintain aspect ratio */
|
|
border-radius: var(--radius);
|
|
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
@media (max-width: 1400px) {
|
|
.side-screen {
|
|
display: none; /* Hide side-screens on smaller screens */
|
|
}
|
|
.main-screen {
|
|
justify-content: center; /* Center main-content when side-screens are hidden */
|
|
}
|
|
}
|
|
/* Media query for when main-content is less than 700px wide */
|
|
@media (max-width: 700px) {
|
|
.center-content, .header{
|
|
flex-direction: column; /* Stack elements vertically */
|
|
}
|
|
.presentation, .side-content-column, .site-title, .navigation{
|
|
flex: none; /* Reset flex property */
|
|
width: 100%; /* Make them take full width */
|
|
}
|
|
.header {
|
|
padding: 10px 0; /* Reduce padding on mobile */
|
|
}
|
|
.title-wrapper {
|
|
width: 100%;
|
|
justify-content: space-between; /* Change from space-between to flex-start */
|
|
}
|
|
.site-title {
|
|
font-size: 2.5rem; /* Reduce title size on mobile */
|
|
max-width: 65%; /* Further limit width on mobile */
|
|
|
|
}
|
|
}
|