46 lines
3.7 KiB
CSS
46 lines
3.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:#16202A; background:#f7fafc; line-height:1.6; }
|
|
.container { max-width:980px; margin:0 auto; padding:24px; }
|
|
.site-header { background:linear-gradient(90deg,#0f172a,#0b1320); color:#fff; padding:20px 0; border-bottom:3px solid #0f62fe; }
|
|
.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:#0f172a; padding-bottom:12px; border-bottom:2px solid #f0f0f0; }
|
|
h3 { margin:0 0 8px 0; font-size:1.1rem; font-weight:600; color:#0f172a; }
|
|
section { margin-bottom:16px; }
|
|
p { margin:0 0 12px 0; }
|
|
ol, ul { margin:12px 0; padding-left:24px; }
|
|
li { margin-bottom:8px; }
|
|
a { color:#0f62fe; text-decoration:none; transition:color 0.2s ease; }
|
|
a:hover { color:#0b47b8; 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:#0f62fe; box-shadow:0 4px 12px rgba(15,98,254,0.15); }
|
|
@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:8px 14px; border-radius:6px; text-decoration:none; transition:all 0.2s ease; display:inline-block; font-size:0.95rem; font-weight:500; }
|
|
.header-links a:hover { background:rgba(255,255,255,0.25); }
|
|
|
|
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:16px; }
|
|
.gallery img { width:100%; height:150px; 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(2,6,23,0.15); border-color:#0f62fe; }
|
|
|
|
.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%); }
|
|
|