READING
A Wizard of Earthsea — Ursula K. Le Guin
What's New
1.23 New layout!
Interests
- music
- cats
- art
- vintage vibe
/* ============ 0) Mặc định chung ============ */
* { box-sizing: border-box; }
body {
margin: 0;
/* nền ngoài khung */
background: #e6d9c8;
font-family: Georgia, "Times New Roman", serif;
color: #3b2a22;
}
/* ============ 1) Khung chính (frame) ============ */
.frame {
/* chiều rộng giống 1 tấm card lớn */
width: min(1100px, 92vw);
margin: 32px auto;
/* nhìn như giấy */
background: #f3efe6;
border: 2px solid rgba(60, 40, 30, 0.35);
border-radius: 18px;
/* bóng đổ nhẹ */
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
/* chia 3 cột: trái - giữa - phải */
display: grid;
grid-template-columns: 240px 1fr 380px;
overflow: hidden;
}
/* ============ 2) Sidebar (cột trái) ============ */
.sidebar {
padding: 22px 18px;
border-right: 1px solid rgba(60, 40, 30, 0.25);
/* texture giấy (nếu bạn có paper.png) */
background-image: url("images/paper.png");
background-size: cover;
}
.site-title {
margin: 0 0 14px;
font-size: 34px;
letter-spacing: 0.5px;
}
/* menu xếp dọc */
.menu {
display: grid;
gap: 14px;
margin: 18px 0 22px;
}
/* nút bầu dục như hình 2 */
.pill {
display: block;
text-align: center;
padding: 14px 10px;
border: 3px solid #4b2e25;
border-radius: 999px;
color: #4b2e25;
text-decoration: none;
font-size: 22px;
background: rgba(255, 255, 255, 0.35);
}
/* hover = rê chuột */
.pill:hover {
background: rgba(255, 255, 255, 0.7);
}
/* phần nhỏ dưới menu */
.mini {
margin-top: 26px;
padding-top: 16px;
border-top: 1px solid rgba(60, 40, 30, 0.25);
}
.small-title {
margin: 0 0 8px;
font-weight: bold;
}
.small-link {
color: #6b2f2a;
text-decoration: underline;
}
/* ============ 3) Content (cột giữa) ============ */
.content {
padding: 26px 26px 30px;
background: #f7f3ea;
}
.content-header h2 {
margin: 0 0 16px;
font-size: 28px;
}
.subtle {
font-size: 14px;
opacity: 0.65;
font-style: italic;
}
/* mỗi block có khoảng cách giống layout hình 2 */
.block {
margin: 18px 0;
}
.block h3 {
margin: 0 0 6px;
font-size: 16px;
letter-spacing: 1px;
text-decoration: underline;
text-underline-offset: 6px;
}
.block p {
margin: 0;
line-height: 1.6;
}
.rule {
border: none;
border-top: 1px solid rgba(60, 40, 30, 0.35);
margin: 22px 0;
}
.date {
display: inline-block;
min-width: 52px;
opacity: 0.7;
text-decoration: underline;
text-underline-offset: 4px;
}
/* list interests cho đẹp */
.pretty-list {
margin: 8px 0 0 18px;
}
.pretty-list a {
color: #6b2f2a;
}
/* ============ 4) Hero image (cột phải) ============ */
.hero {
/* ảnh nền bên phải */
background-image: url("images/landscape.jpg");
background-size: cover;
background-position: center;
/* lớp phủ nhẹ để ảnh hợp “vintage” */
position: relative;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: rgba(245, 238, 226, 0.10);
}
/* ============ 5) Responsive (màn hình nhỏ) ============ */
@media (max-width: 980px) {
.frame {
grid-template-columns: 1fr;
}
.sidebar {
border-right: none;
border-bottom: 1px solid rgba(60, 40, 30, 0.25);
}
.hero {
height: 260px;
}
}