/* Add this to your HTML for Google Fonts:
*/
/* ========== Base Styles ========== */
body {
font-family: 'Times New Roman', Times, serif;
font-size: 11pt;
margin-top: 2em;
margin-left: 1.5em;
margin-bottom: 2em;
}
/* ========== Layout Containers ========== */
.container, .content {
max-width: 450px;
}
.info {
padding-top: 20px;
}
/* ========== Links ========== */
a {
color: #06402B;
text-decoration: none !important;
}
a:hover {
position: relative;
left: 2px;
}
a:hover,
a:visited,
a:link {
color: #06402B !important;
text-decoration: none !important;
}
a.active-nav {
font-weight: bold;
}
/* ========== Back Link ========== */
.back-link-container {
display: block;
margin-top: 1.5em;
}
/* ========== Typography ========== */
h1 {
font-size: 24pt;
font-weight: normal;
}
h1 .site-title-link {
color: black !important;
text-decoration: none !important;
}
h2 {
font-weight:bold;
}
h3 {
color: #06402B;
}
h4 {
text-decoration: none;
color: black;
}
ul, ol {
margin-left: 0;
padding-left: 0;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
li {
list-style-type: none;
margin-bottom: 1em;
margin-top: 1em;
margin-left: 0;
padding-left: 0;
}
/* ========== Project Images ========== */
img {
max-width: 100%;
height: auto;
display: block;
margin: 2em auto 1em auto;
padding-left: 0;
}
/* ========== Blog Post Styles ========== */
.post-listing {
margin-top: 3em;
}
.post-preview {
display: flex;
align-items: center;
gap: 1em;
margin-bottom: 1.5em;
text-decoration: none !important;
}
.post-thumbnail {
width: 160px;
height: 180px;
object-fit: cover;
margin: 0;
flex-shrink: 0;
}
.post-info {
display: flex;
flex-direction: column;
}
.post-title {
color: #06402B;
}
.post-date {
color: #999;
font-style: italic;
font-size: 0.9em;
margin-top: 0.2em;
}
.post-list li {
margin-bottom: 1.5em;
}
/* ========== Post Image Carousel ========== */
.carousel {
position: relative;
overflow: hidden;
margin-bottom: 1.5em;
}
.carousel-track {
display: flex;
transition: transform 0.3s ease;
}
.carousel-track img {
width: 100%;
height: auto;
flex-shrink: 0;
margin: 0;
}
.carousel-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
margin-top: 0.3em;
}
.carousel-btn {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
padding: 0 0.3em;
line-height: 1;
color: #999;
}
.carousel-btn:hover {
color: #333;
}
.carousel-counter {
font-size: 0.85em;
color: #999;
}