diff options
Diffstat (limited to 'css/blog-post.css')
| -rw-r--r-- | css/blog-post.css | 234 |
1 files changed, 234 insertions, 0 deletions
diff --git a/css/blog-post.css b/css/blog-post.css new file mode 100644 index 0000000..93b15ec --- /dev/null +++ b/css/blog-post.css @@ -0,0 +1,234 @@ +/* These main CSS elements were made between 1/27/2025 and 1/28/2025 by Peter Nguyen for peten.ca */ + +/* MAIN */ + +body { + height: 100vh; + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + overflow-x: hidden; + overflow-y: scroll; + position: relative; + background-color: #f9f9f9; +} + +/* FONTS */ + +.font-ubuntu { + font-family: "Ubuntu Sans", serif; + font-optical-sizing: auto; + font-weight: bold; + font-style: normal; + font-variation-settings: "wdth" 100; +} + +.font-montserrat { + font-family: "Montserrat", serif; + font-optical-sizing: auto; + font-weight: normal; + font-style: normal; +} + +/* ANIMS */ + +.fade-in { + opacity: 1; + animation-name: fadeInOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: 0.5s; +} + +@keyframes fadeInOpacity { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +/* TEXT */ + +.element { + font-size: 1.5rem; + font-weight: 300; +} + +.typed-cursor { + font-size: 1.5rem; +} + +/* NAV */ + +.nav { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + padding: 10px; +} + +.nav-link { + font-size: 1.5rem !important; +} + +/* BOTTOM OF PAGE */ + +.footer { + width: 100%; + text-align: center; + font-size: 0.75rem; + padding: 10px; + margin-top: auto; + opacity: 0.5; +} + +/* PAGE-SPECIFIC */ + +header { + padding-top: 2%; + width: 100vw; + display: flex; + justify-content: center; +} + +.header { + width: 768px; + display: flex; + justify-content: space-between; + /* Center horizontally */ + align-items: center; + /* Center vertically */ + text-align: center; + font-weight: 450; + border-bottom: 1px solid black; +} + +.blog-post { + padding-top: 1%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + width: 100vw; + text-align: justify; +} + +.blog-post h1 { + padding-bottom: 1%; +} + +.project-post { + padding-top: 1%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + width: 100vw; + text-align: justify; +} + +a { + text-decoration: none !important; + color: inherit !important; + font-size: medium; +} + +.date { + font-size: medium; +} + +h1 { + font-size: 2.5rem !important; + font-weight: bold; + margin: 0 !important; + border: 0; +} + +h2 { + padding-top: 0.5%; + font-size: 1.1rem !important; + padding-bottom: 1%; +} + +p { + font-size: 1.1rem; + font-weight: 400; + max-width: 768px; + text-wrap: wrap; +} + +img { + padding-bottom: 1%; +} + +/* MOBILE CSS ADAPTATIONS */ + +@media (max-width: 768px) { + body { + overflow-x: hidden; + position: static; + } + + header { + padding-top: 10px; + width: 100vw; + display: flex; + justify-content: center; + /* Center header content */ + align-items: center; + } + + .header { + width: 90%; + /* Make the header width smaller on mobile */ + display: flex; + flex-direction: row; + /* Stack items vertically */ + justify-content: space-between; + align-items: center; + border-bottom: 1px solid black; + padding-bottom: 2%; + } + + /* Blog Post */ + .blog-post { + padding-top: 3%; + width: 90%; + /* Set width to 90% of the screen */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: justify; + margin: 0 auto; + /* Center the blog post horizontally */ + } + + h1 { + font-size: 1.75rem !important; + /* Reduce h1 font size on mobile */ + font-weight: 500 !important; + text-align: center; + } + + h2 { + text-align: center; + } + + a { + text-decoration: none !important; + color: inherit !important; + } + + p { + font-size: 1.15rem; + /* Reduce paragraph font size */ + margin-bottom: 10px; + /* Add some margin between paragraphs */ + } +}
\ No newline at end of file |