Welcome to my hidey-hole.
this is just an everything-me dump to make me more conscious of all the things in my life
/* ============================================
1. RESET — removes default browser spacing
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* makes width/padding math predictable */
}
/* ============================================
2. PAGE BACKGROUND
This is where you set your background image.
Swap "background.jpg" for your own photo's filename.
============================================ */
.page {
position: relative; /* lets us place boxes on top freely with "absolute" */
width: 100%;
min-height: 100vh; /* fills the whole browser window height */
background-image: url("background.jpg");
background-size: cover; /* fills the screen without stretching */
background-position: center; /* keeps the image centered */
background-repeat: no-repeat;
font-family: 'EB Garamond', serif; /* default body font */
color: #1a1a4d; /* dark navy blue, used a lot in the mockup */
}
/* ============================================
3. SITE TITLE ("renee's rambles")
============================================ */
.site-title {
position: absolute;
top: 40px;
left: 40px;
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 3rem; /* "rem" = relative size, easy to scale everything */
letter-spacing: 4px; /* spaced-out lettering like the mockup */
color: #1a1a6e; /* navy blue — change this hex code for a different color */
line-height: 1.1;
}
/* ============================================
4. WELCOME BOX (grayish box, left of Navigate)
============================================ */
.welcome-box {
position: absolute;
top: 90px;
left: 480px;
width: 420px;
background-color: rgba(160, 160, 175, 0.75); /* gray, semi-transparent so photo shows through */
border: 2px solid #000;
padding: 24px;
}
.welcome-box h2 {
font-family: 'Playfair Display', serif;
font-style: italic;
margin-bottom: 16px;
font-size: 1.6rem;
}
.welcome-box p {
font-size: 1.1rem;
line-height: 1.4;
}
/* ============================================
5. NAVIGATE BOX (purple/lavender box, right side)
============================================ */
.nav-box {
position: absolute;
top: 90px;
right: 40px;
width: 260px;
background-color: rgba(158, 149, 190, 0.85); /* lavender-purple, change hex for a new color */
border: 2px solid #000;
padding: 20px;
}
.nav-box h2 {
font-family: 'Playfair Display', serif;
font-style: italic;
text-align: center;
margin-bottom: 16px;
font-size: 1.6rem;
}
.nav-box ul {
list-style: none; /* removes default bullet points */
}
.nav-box li {
margin-bottom: 20px;
}
.nav-box a {
color: #1a1a6e;
text-decoration: none; /* removes the underline */
font-size: 1.1rem;
}
.nav-box a:hover {
text-decoration: underline; /* underline only appears on mouse-hover */
}
/* ============================================
6. MASCOT + SPEECH BUBBLE (bottom of page)
============================================ */
.mascot-area {
position: absolute;
bottom: 60px;
left: 45%;
text-align: center;
}
.mascot-img {
width: 90px; /* resize your mascot image here */
}
.speech-bubble {
position: relative;
background: #f2ede0;
border: 2px solid #000;
border-radius: 50%;
padding: 14px 18px;
font-size: 0.85rem;
width: 130px;
margin: 0 auto 8px auto;
}