diff options
Diffstat (limited to 'css/about-styles.css')
| -rw-r--r-- | css/about-styles.css | 268 |
1 files changed, 268 insertions, 0 deletions
diff --git a/css/about-styles.css b/css/about-styles.css new file mode 100644 index 0000000..0279b2f --- /dev/null +++ b/css/about-styles.css @@ -0,0 +1,268 @@ +/* These main CSS elements were made between 1/27/2025 and 1/28/2025 by Peter Nguyen for peten.ca */ + +/* MAIN */ + +body { + height: 100vh; + width: 100vw; + 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: 66%; + display: flex; +} + +.header h1 { + display: flex; + align-items: center; + height: 50px; + /* Adjust to align with the image */ +} + +main { + display: flex; + flex-direction: column; + /* Stack children vertically */ + align-items: center; + /* Keep content centered */ + justify-content: flex-start; +} + +.about-image { + height: 369px; + width: 369px; + object-fit: cover; + border-radius: 2%; +} + +.about-intro { + width: 66%; + padding-top: 2%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + text-align: left; + padding-bottom: 2%; +} + +.about-section { + padding-top: 2%; + width: 66%; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.about-section h1 { + font-weight: 450 !important; +} + +a { + text-decoration: none !important; + color: inherit !important; + font-size: medium; +} + +.date { + font-size: medium; +} + +h1 { + font-size: 2.5rem !important; + font-weight: normal !important; + margin: 0 !important; + border: 0; +} + +header h1 { + cursor: pointer; +} + +h2 { + font-size: 1.1rem !important; +} + +.about-text { + font-size: 1.6rem; + font-weight: 400; + max-width: 768px; + text-wrap: wrap; +} + +.about-section-text { + padding-top: 1%; + font-size: 1.6rem; + font-weight: 400; + text-wrap: wrap; +} + +/* MOBILE CSS ADAPTATIONS */ + +@media (max-width: 768px) { + body { + overflow-x: hidden; + position: static; + /* Prevents horizontal scrolling */ + } + + main { + display: flex; + flex-direction: column; + /* Stack children vertically */ + align-items: center; + /* Center everything */ + justify-content: flex-start; + } + + .header { + width: 90%; + /* Make header more compact */ + } + + .header h1 { + font-size: 2rem !important; + /* Slightly smaller back button */ + } + + .about-intro { + display: flex; + flex-direction: column; + /* Stack text and image vertically */ + align-items: center; + /* Center everything */ + width: 90%; + /* Ensure it fits within the screen */ + padding-top: 2%; + /* Adjust padding as needed */ + } + + .about-image { + width: 80vw; + /* Make image responsive */ + height: 80vw; + /* Ensure image is square */ + max-width: 300px; + /* Set a max width */ + max-height: 300px; + /* Set a max height */ + object-fit: cover; + /* Ensure image is cropped correctly */ + margin-top: 0; + /* Reset margin-top if it was causing issues */ + } + + .about-text { + font-size: 1.4rem; + word-wrap: break-word; + /* Prevents text overflow */ + } + + .about-section { + width: 90%; + /* Make it more compact */ + text-align: left; + } + + .about-section-text { + font-size: 1.4rem; + /* Slightly smaller text */ + } + + .nav { + flex-direction: column; + /* Stack nav links */ + gap: 5px; + padding: 5px; + } +}
\ No newline at end of file |