107 lines
5.7 KiB
CSS
107 lines
5.7 KiB
CSS
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:#2b0f0f; background:#fff5f5; line-height:1.6; }
|
|
.container { max-width:980px; margin:0 auto; padding:24px; }
|
|
.site-header { background:linear-gradient(90deg,#7f1d1d,#4b1111); color:#fff; padding:20px 0; border-bottom:3px solid #dc2626; }
|
|
.site-header .container { padding:20px 24px; }
|
|
.site-header h1 { margin:0; font-size:2.2rem; font-weight:700; letter-spacing:-0.5px; }
|
|
.tag { margin-top:6px; opacity:0.9; font-size:0.95rem; }
|
|
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:16px; }
|
|
.card { background:#fff; padding:20px; border-radius:8px; box-shadow:0 1px 3px rgba(2,6,23,0.06); transition:all 0.3s ease; border:1px solid #e5e7eb; }
|
|
.card:hover { transform:translateY(-2px); box-shadow:0 8px 16px rgba(2,6,23,0.1); }
|
|
.site-footer { text-align:center; padding:24px; margin-top:40px; font-size:0.9rem; color:#6b7280; border-top:1px solid #e5e7eb; background:#fafafa; }
|
|
h2 { margin:32px 0 16px 0; font-size:1.8rem; font-weight:700; color:#7f1d1d; padding-bottom:12px; border-bottom:2px solid #fee2e2; }
|
|
h3 { margin:0 0 8px 0; font-size:1.1rem; font-weight:600; color:#7f1d1d; }
|
|
section { margin-bottom:16px; }
|
|
.lab-photo { display:block; width:100%; max-width:420px; margin-top:16px; border-radius:10px; border:1px solid #e5e7eb; box-shadow:0 8px 24px rgba(139,18,18,0.12); }
|
|
p { margin:0 0 12px 0; }
|
|
ol, ul { margin:12px 0; padding-left:24px; }
|
|
li { margin-bottom:8px; }
|
|
a { color:#dc2626; text-decoration:none; transition:color 0.2s ease; }
|
|
a:hover { color:#991b1b; text-decoration:underline; }
|
|
|
|
#links ul { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:16px 0; }
|
|
#links li { margin:0; }
|
|
#links a { display:block; padding:12px 16px; background:#fff; border:1px solid #e5e7eb; border-radius:6px; transition:all 0.3s ease; }
|
|
#links a:hover { border-color:#dc2626; box-shadow:0 4px 12px rgba(220,38,38,0.15); }
|
|
|
|
.blog-feed { display:grid; gap:24px; margin-top:16px; }
|
|
.blog-post { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:24px; box-shadow:0 1px 6px rgba(139,18,18,0.08); }
|
|
.blog-post + .blog-post { border-top:4px solid #dc2626; margin-top:32px; padding-top:32px; }
|
|
.blog-title { margin:0 0 8px 0; font-size:1.5rem; }
|
|
.blog-meta { margin:0 0 16px 0; color:#7f1d1d; font-size:0.95rem; }
|
|
|
|
/* ----- Blog body with fade-out ----- */
|
|
.blog-body-wrapper {
|
|
position: relative;
|
|
margin-bottom: 0.5rem;
|
|
/* No max-height by default (full) */
|
|
}
|
|
|
|
.blog-body {
|
|
white-space: pre-line;
|
|
margin: 0;
|
|
}
|
|
.blog-body p { margin:0 0 1em 0; }
|
|
.blog-body p:last-child { margin-bottom:0; }
|
|
|
|
/* When collapsed, limit height and show gradient fade */
|
|
.blog-body-wrapper.collapsed {
|
|
max-height: 300px; /* ~6 lines, adjust as needed */
|
|
overflow: hidden;
|
|
/* The gradient overlay is done via ::after */
|
|
}
|
|
|
|
.blog-body-wrapper.collapsed::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 80px; /* fade height */
|
|
background: linear-gradient(to bottom, transparent, #fff);
|
|
pointer-events: none; /* allow clicking through to the button */
|
|
/* If your blog background is not white, change #fff to match */
|
|
}
|
|
|
|
/* Toggle button */
|
|
.blog-toggle {
|
|
background: none;
|
|
border: none;
|
|
color: #dc2626;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
padding: 0.25rem 0;
|
|
font-size: 0.95rem;
|
|
display: inline-block;
|
|
}
|
|
.blog-toggle:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Other existing styles (photography, modal, etc.) */
|
|
.blog-attachment-list { margin:16px 0 0 0; padding:0; list-style:none; }
|
|
.blog-attachment-list li { margin:0.5em 0; }
|
|
.blog-attachment-list a { color:#dc2626; text-decoration:none; }
|
|
.blog-attachment-list a:hover { text-decoration:underline; }
|
|
|
|
@media (max-width:520px){ h2 { font-size:1.4rem; } .site-header h1 { font-size:1.6rem; } .container { padding:16px; } }
|
|
|
|
.header-links { margin-top:12px; }
|
|
.header-links a { color:#fff; background:rgba(255,255,255,0.12); padding:0 14px; border-radius:6px; text-decoration:none; transition:all 0.2s ease; display:inline-flex; align-items:center; justify-content:center; height:36px; font-size:0.95rem; font-weight:500; line-height:1; }
|
|
.header-links a:hover { background:rgba(255,255,255,0.25); }
|
|
.header-links a + a { margin-left:10px; }
|
|
|
|
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 8px; margin-top: 8px; }
|
|
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; cursor: pointer; display: block; transition: all 0.3s ease; border: 2px solid transparent; }
|
|
.gallery img:hover { transform: scale(1.04); box-shadow: 0 4px 12px rgba(139,18,18,0.15); border-color: #dc2626; }
|
|
|
|
.modal { position:fixed; inset:0; background:rgba(2,6,23,0.95); display:flex; align-items:center; justify-content:center; z-index:60; backdrop-filter:blur(2px); }
|
|
.modal.hidden { display:none; }
|
|
.modal img { max-width:95%; max-height:90%; border-radius:8px; box-shadow:0 16px 48px rgba(2,6,23,0.4); animation:fadeInScale 0.3s ease; }
|
|
@keyframes fadeInScale { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
|
|
.modal-close, .modal-prev, .modal-next { position:fixed; background:rgba(255,255,255,0.1); color:#fff; border:0; font-size:36px; cursor:pointer; transition:all 0.2s ease; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:6px; }
|
|
.modal-close:hover, .modal-prev:hover, .modal-next:hover { background:rgba(255,255,255,0.2); }
|
|
.modal-close { right:20px; top:20px; }
|
|
.modal-prev { left:20px; top:50%; transform:translateY(-50%); }
|
|
.modal-next { right:20px; top:50%; transform:translateY(-50%); } |