Browse Source

fix responsiveness

imwald
Silberengel 5 days ago
parent
commit
46460e7828
  1. 40
      assets/styles/layout.css

40
assets/styles/layout.css

@ -16,6 +16,7 @@ @@ -16,6 +16,7 @@
.layout {
max-width: 100%;
width: 1200px;
min-width: 0; /* flex child of body: allow shrink so children don’t force page width */
margin: 0 auto;
display: flex;
flex-grow: 1;
@ -51,9 +52,11 @@ nav a:hover { @@ -51,9 +52,11 @@ nav a:hover {
header {
position: fixed;
width: 100vw;
top: 0;
/* Use inset instead of 100vw: 100vw includes the vertical scrollbar and causes horizontal overflow on many viewports. */
left: 0;
right: 0;
top: 0;
width: auto;
box-sizing: border-box;
}
@ -228,7 +231,9 @@ dt { @@ -228,7 +231,9 @@ dt {
/* Responsive adjustments */
@media (max-width: 1024px) {
nav, aside {
/* Only the main column nav, not <nav> in the footer (Sitemap and feeds, etc.) */
.layout > nav,
aside {
display: none; /* Hide the sidebars on small screens */
}
main {
@ -244,6 +249,8 @@ footer { @@ -244,6 +249,8 @@ footer {
padding: 1.25rem 1rem 1.5rem;
position: relative;
width: 100%;
min-width: 0; /* flex child of body column: avoid min-content width wider than the viewport */
box-sizing: border-box;
border-top: 1px solid var(--color-border);
}
@ -255,6 +262,9 @@ footer { @@ -255,6 +262,9 @@ footer {
align-items: stretch;
gap: 1.75rem;
text-align: left;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
.site-footer__syndication-title {
@ -272,7 +282,13 @@ footer { @@ -272,7 +282,13 @@ footer {
}
.site-footer__nav {
max-width: 44rem;
max-width: min(44rem, 100%);
min-width: 0;
}
.site-footer__syndication {
min-width: 0;
max-width: 100%;
}
.site-footer__syndication-list {
@ -285,6 +301,8 @@ footer { @@ -285,6 +301,8 @@ footer {
padding: 0;
font-size: 0.95rem;
line-height: 1.5;
min-width: 0;
max-width: 100%;
}
.site-footer__syndication-list > li {
@ -292,6 +310,8 @@ footer { @@ -292,6 +310,8 @@ footer {
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.45rem;
min-width: 0;
max-width: 100%;
}
.site-footer__syndication-list > li + li::before {
@ -320,11 +340,21 @@ footer { @@ -320,11 +340,21 @@ footer {
/* RSS + category feed links in one cell */
.site-footer__syndication-list__feeds {
display: inline-flex;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 0.45rem;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere; /* long category names / URLs can’t keep the page wider than the screen */
word-break: break-word;
}
/* Narrow viewports: put feeds on their own row with full line width so links wrap inside the viewport, not off-screen. */
@media (max-width: 700px) {
.site-footer__syndication-list__feeds {
flex-basis: 100%;
}
}
/* Dots between feed links (skip first <a> = "All articles"). */

Loading…
Cancel
Save