NaiJi/write-html-by-hand-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS

Browse Source
This commit is contained in:
NaiJi ✨ 2025-08-02 20:21:55 -04:00
parent ca721d8674
commit b8822e29c9
1 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
themes/lugo/static/style.css
View File

@ -1,61 +1,75 @@
/* Main layout container */ /* Main layout container */
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
overflow: hidden; /* Prevent body scrolling */ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; letter-spacing: 0.03em;
} }
/* Side banners - FIXED (non-scrollable) */ /* Optional: Add to headings for contrast */
.banner-left, .banner-right { h1, h2, h3, h4, h5, h6 {
width: calc((100% - 1000px) / 2); /* Matches content width */ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
background-image: url('./banner-left.jpg'); font-weight: 400; /* Classic book style often uses lighter weights */
background-size: cover; letter-spacing: 0.03em;
background-position: center; }
background-attachment: fixed; /* Keeps image fixed during scroll */
background-repeat: no-repeat; p {
padding: 20px;
line-height: 1.2;
font-size: 20px;
}
/* Side banners */
.banner-left {
position: fixed; position: fixed;
left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: calc((100% - 1100px) / 2);
background-image: url('./banner-left.jpg');
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
} }
.banner-right { .banner-right {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: calc((100% - 1100px) / 2);
background-image: url('./banner-right.jpg'); background-image: url('./banner-right.jpg');
right: 0; /* Position on right side */ background-size: cover;
background-position: center left;
background-repeat: no-repeat;
} }
/* Centered content box - SCROLLABLE */ /* Centered content box */
.content-wrapper { .content-wrapper {
width: 1000px; position: relative;
min-height: 100vh; min-height: 20%;
min-width: 5%;
width: 1100px;
margin: 0 auto;
padding: 20px; padding: 20px;
background: #ffffff; background: #ffffff;
box-shadow: 0 0 30px rgba(0,0,0,0.9); box-shadow: 0 0 30px rgba(0,0,0,0.9);
margin: 0 auto; /* Center horizontally */ z-index: 1;
overflow-y: auto; /* Enable scrolling */ }
position: relative;
z-index: 1; /* Ensure content appears above banners */ .content-wrapper img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
} }
/* Language switcher */ /* Language switcher */
.language-switcher { .language-switcher {
margin-top: auto;
text-align: center; text-align: center;
padding: 40px 0; padding: 20px 0;
background: rgba(255, 255, 255, 0.97); margin-top: 40px;
border-top: 1px solid #eee;
position: sticky;
bottom: 0;
}
/* Mobile responsiveness */
@media (max-width: 1100px) {
.banner-left, .banner-right {
display: none;
}
.content-wrapper {
width: 100%;
}
} }