193 lines
4.2 KiB
CSS
193 lines
4.2 KiB
CSS
/* ===== RESPONSIVE DESIGN ===== */
|
||
|
||
/* Large desktop screens (≥ 1400px) */
|
||
@media (min-width: 1400px) {
|
||
.blog-container,
|
||
.editor-container,
|
||
.post-container {
|
||
max-width: 1400px;
|
||
}
|
||
.post-card {
|
||
transition: transform 0.2s;
|
||
}
|
||
.post-card:hover {
|
||
transform: translateY(-6px);
|
||
}
|
||
}
|
||
|
||
/* Tablet landscape and small desktops (768px – 1399px) */
|
||
@media (max-width: 1399px) and (min-width: 768px) {
|
||
.sidebar {
|
||
width: 280px;
|
||
}
|
||
.blog-container,
|
||
.editor-container,
|
||
.post-container {
|
||
padding: 0 var(--size-4);
|
||
}
|
||
.posts-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--size-5);
|
||
}
|
||
}
|
||
|
||
/* Tablet portrait (≤ 768px) */
|
||
@media (max-width: 768px) {
|
||
/* General spacing */
|
||
.blog-container,
|
||
.editor-container,
|
||
.post-container {
|
||
margin: var(--size-4) auto;
|
||
padding: 0 var(--size-3);
|
||
}
|
||
.post-card,
|
||
.editor-form,
|
||
.post-form {
|
||
padding: var(--size-4);
|
||
}
|
||
.post-title {
|
||
font-size: var(--font-size-5);
|
||
}
|
||
|
||
/* Blog list – single column */
|
||
.posts-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: var(--size-4);
|
||
}
|
||
.post-card-image {
|
||
height: 180px;
|
||
}
|
||
|
||
/* Header stacking */
|
||
.site-header .container {
|
||
flex-direction: column;
|
||
gap: var(--size-3);
|
||
}
|
||
.site-header .container > div {
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.filter-tabs {
|
||
order: 2;
|
||
margin-top: var(--size-2);
|
||
}
|
||
.site-nav {
|
||
order: 1;
|
||
}
|
||
.user-menu {
|
||
order: 3;
|
||
margin-left: 0;
|
||
}
|
||
|
||
/* Journey edit page – markers stack */
|
||
.marker-card {
|
||
padding: var(--size-3);
|
||
}
|
||
.marker-header h4 {
|
||
font-size: var(--font-size-2);
|
||
}
|
||
|
||
/* Buttons – full width on mobile for better touch */
|
||
.button-group {
|
||
flex-direction: column;
|
||
}
|
||
.button-group .btn,
|
||
.button-group a.btn {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* Map page adjustments */
|
||
.sidebar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100dvh;
|
||
width: 85%;
|
||
max-width: 300px;
|
||
transform: translateX(-100%);
|
||
transition: transform 0.3s;
|
||
box-shadow: var(--shadow-5);
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
z-index: 10;
|
||
}
|
||
.sidebar:not(.collapsed) {
|
||
transform: translateX(0);
|
||
}
|
||
/* Map controls */
|
||
.map-controls {
|
||
position: absolute;
|
||
top: var(--size-4);
|
||
right: var(--size-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--size-2);
|
||
z-index: 400;
|
||
}
|
||
.mode-indicator {
|
||
top: var(--size-4);
|
||
left: var(--size-4);
|
||
font-size: var(--font-size-0);
|
||
padding: var(--size-1) var(--size-2);
|
||
}
|
||
|
||
/* Blog post – chapters */
|
||
.chapter {
|
||
padding-left: var(--size-3);
|
||
margin-bottom: var(--size-4);
|
||
}
|
||
.chapter-header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: var(--size-1);
|
||
}
|
||
.chapter-header h3 {
|
||
font-size: var(--font-size-3);
|
||
}
|
||
|
||
/* Comments */
|
||
.comment-meta {
|
||
font-size: var(--font-size-0);
|
||
flex-wrap: wrap;
|
||
}
|
||
.delete-comment {
|
||
margin-left: 0;
|
||
margin-top: var(--size-1);
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Login page */
|
||
.login-container {
|
||
width: 90%;
|
||
padding: var(--size-4);
|
||
margin: var(--size-4);
|
||
}
|
||
}
|
||
|
||
/* Extra small devices (≤ 480px) */
|
||
@media (max-width: 480px) {
|
||
.post-title {
|
||
font-size: var(--font-size-4);
|
||
}
|
||
.post-meta {
|
||
font-size: var(--font-size-0);
|
||
}
|
||
.chapter-header h3 {
|
||
font-size: var(--font-size-3);
|
||
}
|
||
.marker-card .form-group label {
|
||
font-size: var(--font-size-0);
|
||
}
|
||
.btn {
|
||
padding: var(--size-2) var(--size-3);
|
||
font-size: var(--font-size-1);
|
||
}
|
||
.toast {
|
||
bottom: var(--size-2);
|
||
right: var(--size-2);
|
||
left: var(--size-2);
|
||
width: auto;
|
||
text-align: center;
|
||
}
|
||
} |