body { margin: 0; font-family: Manrope, sans-serif; /* Personal note: Other Google fonts to try include Inconsolata, Syne Handgloves,Space Grotesk */ transition: background-color 0.3s ease; /*this was for dark mode toggle*/ background-color: #fdfdfd; } body.light-mode { background-color: #f8f8f8; color: #333; } body.dark-mode { background-color: #181818; color: #f8f8f8; } #theme-toggle{ color: #000; background-color: transparent; border: 2px solid #000; border-radius: 5px; padding: 10px 20px; cursor: pointer; font-family: Manrope, sans-serif; /* Personal note: Other Google fonts to try include Inconsolata, Syne Handgloves,Space Grotesk */ } body.light-mode #theme-toggle { color: #fff; border-color: #fff; font-family: Manrope, sans-serif; /* Personal note: Other Google fonts to try include Inconsolata, Syne Handgloves,Space Grotesk */ font-weight: 500; } mark { /*This CSS is for the highlighting thing!*/ --color1: #BCE7E7; --color2: #BCE7E7; --bg-height: 40%; all: unset; background-image: linear-gradient(var(--color1), var(--color2)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 var(--bg-height); animation: highlight 800ms 1 ease-out; animation-fill-mode: forwards; animation-play-state: paused; } @keyframes highlight {/*This CSS is for the highlighting thing!*/ to { background-size: 100% var(--bg-height); } } h2, h3 { font-weight: 500; } h4 { font-weight: 400; color: #5c5c5c; letter-spacing: 1px; margin-top: -15px; } p{ font-size: 16px; line-height: 24px; } /*.textWidth { max-width: 75ch; margin-left: auto; margin-right: auto; text-align: justify; padding: 0 20px; } .textWidth { max-width: 80ch; }*/ /* .cursor { position: fixed; width: 15px; height: 15px; border-radius: 50%; background-color: black; transform: translate(-50%, -50%); To put it on the center of the cursor transition: width 0.3s, height 0.3s; pointer-events: none; /* So the JS can work properly } * { cursor: none; /*Cursor is now invisible! ahhhh!! } .hover-cursor { width: 20px; height: 20px; background-color: white; transition: width 0.5s height 0.5s; }*/ /* #navbar { position:fixed; top:0; left:0; width:100%; text-align:right; height:80px; transition: 0.5s; padding-top: 35px; z-index: 1; } #navbar-logo { position: absolute; top: 15px; left: 50px; padding-bottom: 0px; } #navbar a { text-decoration: none; transition: 0.5s; font-size: 17px; } #navbar a:hover{ color: #5c5c5c; } .navlink { margin-right: 70px; }*/ /* header */ #navbar { position:fixed; top:0; left:0; width:100%; transition: 0.5s; padding-top: 15px; z-index: 1; background-color: #fdfdfd; box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); /*position: fixed; width: 100%; z-index: 1; */ } #navbar ul { margin: 0; padding: 0; list-style: none; overflow: hidden; } #navbar li a { display: block; padding: 20px 20px; text-decoration: none; margin-right: 30px; font-size: 17px; color: #181818; } #navbar a:hover, #navbar .menu-btn:hover { color: #5c5c5c; } #navbar-logo { position: absolute; top: 15px; left: 50px; padding-bottom: 0px; } /* menu */ #navbar .menu { clear: both; max-height: 0; transition: max-height .2s ease-out; text-align: right; z-index: 1; background-color: #fdfdfd; } /* menu icon */ #navbar .menu-icon { cursor: pointer; display: inline-block; float: right; padding: 28px 20px; position: relative; user-select: none; } #navbar .menu-icon .navicon { background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 30px; margin-bottom: 3px; margin-right: 25px; } #navbar .menu-icon .navicon:before, #navbar .menu-icon .navicon:after { background: #333; content: ''; display: block; height: 100%; position: absolute; transition: all .2s ease-out; width: 100%; } #navbar .menu-icon .navicon:before { top: 5px; } #navbar .menu-icon .navicon:after { top: -5px; } /* menu btn */ #navbar .menu-btn { display: none; } #navbar .menu-btn:checked ~ .menu { max-height: 240px; } #navbar .menu-btn:checked ~ .menu-icon .navicon { background: transparent; } #navbar .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); } #navbar .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); } #navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, #navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { top: 0; } /*48em = 768px */ @media (min-width: 480px) { #navbar li { float: left; } #navbar li a { padding: 20px 30px; } #navbar .menu { clear: none; float: right; max-height: none; } #navbar .menu-icon { display: none; } #navbar-logo { height: 20px; } } #movingText1 span { /* This is for animated hero section text */ opacity: 0; position: relative; top: -20px; display: inline-block; animation: floatIn 0.5s forwards; } #movingText2 span { /* This is for animated hero section text */ opacity: 0; position: relative; top: -20px; display: inline-block; animation: floatIn 0.5s forwards; } @keyframes floatIn { /* This is for animated hero section text */ from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .hero-section { /*background-color: #f0f0f0; Background color */ padding: 170px 0; /* Adjust top and bottom padding. Was 170px or 230px */ text-align: center; max-width: 100%; /* Full-width hero section */ } .hero-content { max-width: 80ch; margin: 0 auto; padding-bottom: 100px; text-align: left; } .hero-section h1 { font-size: 90px; line-height: 100px; margin-top: 150px; margin-bottom: -10px; } .hero-section h2 { padding-top: 20px; font-size: 21px; line-height: 33px; } .email-button { color: #000; background-color: transparent; border: 2px solid #000; border-radius: 5px; padding: 10px 25px; cursor: pointer; font-family: Manrope, sans-serif; /* Personal note: Other Google fonts to try include Inconsolata, Syne Handgloves,Space Grotesk */ font-size: 16px; } .email-button:hover { background-color: #f8f8f8; /* Button background color on hover */ border: 2px solid #808080; color: #808080; } .animation { /* This is for the portfolio-section animation as you scroll down */ opacity: 0; transform: translateY(400px); transition: all 0.2s ease-out; transition-delay: 0.2s; } .scroll-animation {/* This is for the portfolio-section animation as you scroll down */ opacity: 1; transform: translateY(0); } #portfolio { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 40px auto; max-width: 1400px; /*!!OLD SPACING FOR UX PORTFOLIO WAS 1200PX!!!*/ } .tag { /* This is for the portfolio tags on home page */ display: inline-block; padding: 5px 10px; background-color: #F0F0F0; /* Tag background color */ color: #303030; /* Tag text color */ border-radius: 5px; /* Rounded corners */ font-size: 14px; /* Tag text size */ margin-top: 10px; /* Spacing between tag and img */ margin-right: 7px; margin-bottom: 3px; letter-spacing: 1px; font-weight: 400; } .portfolio-item { width: calc(50% - 20px); /*maybe this can count as a calculation lol?*/ margin-bottom: 40px; text-align: left; margin: 0 10px; /* Add margin to all sides */ } .portfolio-item img { width: 100%; border-radius: 5px; transition: box-shadow .3s; position: relative; top: 0; transition: top ease 0.5s; } .portfolio-item img:hover{ box-shadow: 0 0 11px rgba(33,33,33,.2); top: -10px; } .portfolio-item h2 { text-align: left; font-weight: 700; } .portfolio-item p { text-align: left; margin-top: -10px; padding-bottom: 55px; line-height: 25px; } .body-wrapper-fade { opacity:0; /*This is for the portfolio pages body fade-in anaimation*/ } .body-wrapper /*!!!THIS GIVES SPACING AROUND ALL BODY CONTENT!!!*/ { /*margin: auto; THIS IS OLD SPACING WITH MORE MARGIN ACCORDING TO UX PORTFOLIOS max-width: 950px; padding-left: 70px; padding-right: 70px;*/ margin: auto; max-width: 1200px; padding-left: 50px; padding-right: 50px; } .about-page-text{ margin-top: 100px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding-top: 110px; padding-left: 70px; padding-right: 70px; margin-bottom: 310px; } .top-page-text { /*For the title texts at top portfolio pages*/ /* ORIGINAL CODE margin-top: 150px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: justify; padding-top: 30px; padding-left: 70px; padding-right: 70px; margin-bottom: -5px;*/ margin-top: 150px; margin-bottom: -5px; max-width: 80ch; text-align: left; } /* #third-detail-column { margin-right: 0px; } .detail-column { float: left; width: 25%; padding-right: 15px; margin-right: 23px; } .detail-row::after { content: ""; clear: both; display: table; } .detailsBlock { margin-top: 25px; margin-left: auto; margin-right: auto; max-width: 80ch; padding-top: 30px; margin-bottom: 25px; } .detail-content { margin-bottom: 20px; }*/ /*NEW RESPONSIVE 3 COLUMNS!*/ .detail-column { padding-right: 15px; margin-right: 23px; } .detailsBlock { margin-top: 25px; margin-left: auto; margin-right: auto; max-width: 80ch; padding-top: 30px; margin-bottom: 25px; } .detail-content { margin-bottom: 40px; } /* Use Flexbox for the row */ .detail-row { display: flex; flex-wrap: wrap; /* Allow wrapping */ } .detail-column { flex: 1; min-width: 200px; /* Minimum width for columns */ box-sizing: border-box; } #third-detail-column { order: 2; /* Move the third column to the end */ } .detail-headline { font-weight: 700; color: #5c5c5c; letter-spacing: 1px; margin-bottom: 10px; } .detail-subtitle { color: #5c5c5c; } .content-wrapper{ /*This is the wrapper around portfolio page content/text/pics except header area*/ margin-top: 50px; margin-bottom: 100px; } .body-label { font-weight: 700; color: #157E7D; letter-spacing: 1px; margin-bottom: 10px; } .body-h1 { margin-top: 0px; margin-bottom: 25px; font-size: 25px; } .introTextBlock { margin-top: 25px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding-top: 30px; /*padding-left: 70px; padding-right: 70px;*/ margin-bottom: 120px; } .introTextBlock p { line-height: 25px; } .centeredTextBlock { margin-top: 25px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding-top: 30px; /*padding-left: 70px; padding-right: 70px;*/ margin-bottom: 90px; } .centeredTextBlock { line-height: 25px; } .textBlock { /*LEFT ALIGNED TEXT BLOCK IN BODY PORTFOLIO PAGES*/ margin-top: 25px; max-width: 80ch; text-align: left; padding-top: 30px; /*padding-left: 70px; padding-right: 70px; margin-bottom: 90px;*/ } .textBlock p { line-height: 25px; } .body-br{ /*compatible
edits with all browsers???*/ content: ""; display: block; font-size: 80%; height: 1em; } .image { /*This gives the spacing around the image*/ /*padding-top: 10px; Removing this fixed spacing issues with 2 column idk why*/ /*text-align: justify; THIS WAS ONLY THING FOR OLD CODE UX PORTFOLIO*/ text-align: justify; } .image img, .body-image img { /*This makes the image fit inside the div, for header + body images*/ width: 100%; height: 100%; /* Make images fill the container height */ object-fit: cover; /* Maintain aspect ratio and cover the container */ display: block; /* Remove any extra space at the bottom */ } .body-image { /*This gives the spacing around the body image*/ padding-top: 13px; margin-bottom: 90px; text-align: center; } .body-image img { /*The image inside the div, for body images*/ margin-bottom: 25px; /*USED TO BE 10PX FOR UX PORTFOLIO*/ } .inner-body-image-2col { display: flex; justify-content: space-between; gap: 30px; /*USED TO BE 15PX FOR UX PORTFOLIO*/ } .inner-body-image-2col .image { flex: 1; /* Ensure both images take equal width */ overflow: hidden; /* Hide any overflow caused by object-fit: cover */ } /* Responsive styles */ @media (max-width: 1281px), (max-width: 1025px), (max-width: 801px), (max-width: 792px), (max-width: 600px), (max-width: 480px), (max-width: 320px) { .inner-body-image-2col { flex-direction: column; align-items: center; gap: 0px; } } .contact-form { margin-bottom: 150px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding: 30px 70px; /* 30px top/bottom padding!!! */ /*max-width: 800px; Makes text abt 65~70ch smaller width margin: 0 auto; */ } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; } .contact-form input[type="submit"] { background-color: #333; color: #fff; border: none; padding: 15px 20px; border-radius: 5px; cursor: pointer; } .contact-form input[type="submit"]:hover { background-color: #555; } .pagination { display: flex; justify-content: center; /* Center the buttons horizontally */ align-items: center; /* Center the buttons vertically */ flex-wrap: nowrap; /* Ensure the buttons stay on the same line */ margin-bottom: 20px; /* Adjust as needed */ } .pagination button { border: none; background-color: transparent; cursor: pointer; margin-left: 25px; margin-right: 25px;/* Remove margin to use gap instead */ padding: 10px 20px; /* Add padding for better touch target on mobile */ } .pagination h1 { margin: 0; font-size: 24px; /* Adjust font size as needed */ display: flex; align-items: center; /* Center the text and arrows vertically */ color: inherit; /* Inherit color from parent */ } /* TO GET RID OF UGLY DEFAULT BLUE BUTTONS IN MOBILE VIEW */ .pagination button h1 { color: #000; /* Set the text color explicitly to black or any desired color */ font-family: inherit; /* Inherit font family from parent */ text-decoration: none; } .pagination span { font-weight: bold; font-size: 24px; margin: 0 5px; /* Add space between text and arrow */ } /* TO GET RID OF UGLY DEFAULT BLUE BUTTONS IN MOBILE VIEW */ .pagination button:focus, .pagination button:active { outline: none; /* Remove the default focus outline */ } .pagination button:focus h1, .pagination button:active h1 { color: #000; /* Set focus/active state color explicitly */ text-decoration: none; /* Remove underline on focus/active */ } /* .pagination { text-align: center; } .pagination button { border: none; background-color: transparent; cursor: pointer; margin-left: 10px; Add margin between the buttons margin-right: 10px; margin-bottom: 20px; used to be 100px } .pagination h1 { margin: 0; } .pagination span { font-weight: bold; font-size: 24px; }*/ #footer { margin-top: 0px; /*used to be 25px*/ margin-left: auto; margin-right: auto; max-width: 950px; text-align: center; padding-top: 10px; padding-left: 70px; padding-right: 70px; margin-bottom: 55px; } #footer p{ color: #5c5c5c; line-height: 25px; } #footer a { text-decoration: none; color: #5c5c5c; } #footer a:visited { text-decoration: none; color: #5c5c5c; } /*--------------------------------- Responsive styles --------------------------------- */ @media (max-width: 1281px) { /* hi-res laptops and desktops */ .hero-content { padding: 0 75px; } #portfolio { width: 90%; } .body-wrapper { /*margin: auto; THIS IS OLD SPACING WITH MORE MARGIN ACCORDING TO UX PORTFOLIOS max-width: 950px; padding-left: 70px; padding-right: 70px;*/ margin: auto; max-width: 1200px; padding-left: 50px; padding-right: 50px; } } /*------------------------------------------------------------------ */ @media (max-width: 1025px) { /* big landscape tablets, laptops, and desktops */ .hero-content { padding: 0 65px; } #portfolio { width: 90%; } .body-wrapper { /* margin: auto; THIS IS OLD SPACING WITH MORE MARGIN ACCORDING TO UX PORTFOLIOS padding-left: 40px; padding-right: 40px;*/ margin: auto; padding-left: 20px; padding-right: 20px; } } /*------------------------------------------------------------------ */ @media (max-width: 801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ .hero-content { padding: 0 55px; } #portfolio { } .about-page-text { margin-top: 100px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding-top: 110px; padding-left: 100px; padding-right: 100px; margin-bottom: 310px; } .body-wrapper /*!!! body wrapping around portfolio pages content !!!*/ { /*margin: auto; THIS IS OLD SPACING WITH MORE MARGIN ACCORDING TO UX PORTFOLIOS max-width: 950px; padding-left: 40px; padding-right: 40px;*/ margin: auto; max-width: 950px; padding-left: 20px; padding-right: 20px; } } /*------------------------------------------------------------------ */ @media (max-width: 792px) { /* Smallest browser size!!! I made this lol */ .hero-content { padding: 0 60px; } #portfolio { } .portfolio-item { width: 100%; margin-left: 20px; /* Remove left margin for smaller screens */ margin-right: 20px; /* Remove right margin for smaller screens */ } .about-page-text { margin-top: 100px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding-top: 110px; padding-left: 40px; padding-right: 40px; margin-bottom: 310px; } .body-wrapper /*!!! body wrapping around portfolio pages content !!!*/ { /*margin: auto; THIS IS OLD SPACING WITH MORE MARGIN ACCORDING TO UX PORTFOLIOS max-width: 950px; padding-left: 40px; padding-right: 40px;*/ margin: auto; max-width: 950px; padding-left: 20px; padding-right: 20px; } .pagination button { padding: 10px 20px; } } /*------------------------------------------------------------------ */ @media (max-width: 600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ .hero-content { padding: 0 50px; } portfolio { width: 90%; } .portfolio-item { width: 100%; margin-left: 20px; /* Remove left margin for smaller screens */ margin-right: 20px; /* Remove right margin for smaller screens */ } .about-page-text { margin-top: 100px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding-top: 110px; padding-left: 5px; padding-right: 5px; margin-bottom: 310px; } .body-wrapper /*!!! body wrapping around portfolio pages content !!!*/ { /*margin: auto; THIS IS OLD SPACING WITH MORE MARGIN ACCORDING TO UX PORTFOLIOS max-width: 950px; padding-left: 40px; padding-right: 40px;*/ margin: auto; max-width: 950px; padding-left: 20px; padding-right: 20px; } } /*------------------------------------------------------------------ */ @media (max-width: 480px) { /* smartphones, Android phones, landscape iPhone */ .hero-content { padding: 0 40px; } .hero-section h1 { font-size: 70px; line-height: 80px; } .hero-section h2 { font-size: 19px; line-height: 31px; } #portfolio { width: 100%; } .portfolio-item { width: 100%; margin-left: 20px; /* Remove left margin for smaller screens */ margin-right: 20px; /* Remove right margin for smaller screens */ } .about-page-text { margin-top: 100px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding-top: 110px; padding-left: 0px; padding-right: 0px; margin-bottom: 310px; } .body-wrapper /*!!! body wrapping around portfolio pages content !!!*/ { /*margin: auto; THIS IS OLD SPACING WITH MORE MARGIN ACCORDING TO UX PORTFOLIOS max-width: 950px; padding-left: 40px; padding-right: 40px;*/ margin: auto; max-width: 950px; padding-left: 20px; padding-right: 20px; } .pagination button { padding: 10px 20px; } #footer { margin-top: 0px; /*used to be 25px*/ margin-left: auto; margin-right: auto; max-width: 950px; text-align: center; padding-top: 10px; padding-left: 70px; padding-right: 70px; margin-bottom: 55px; } } /*------------------------------------------------------------------ */ @media (max-width: 320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ .hero-content { padding: 0 20px; } .hero-section h1 { font-size: 70px; line-height: 80px; } .hero-section h2 { font-size: 19px; line-height: 31px; } #portfolio { width: 100%; } .portfolio-item { width: 100%; margin-left: 20px; /* Remove left margin for smaller screens */ margin-right: 20px; /* Remove right margin for smaller screens */ } .about-page-text { margin-top: 100px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding-top: 110px; padding-left: 0px; padding-right: 0px; margin-bottom: 310px; } .body-wrapper /*!!! body wrapping around portfolio pages content !!!*/ { /*margin: auto; THIS IS OLD SPACING WITH MORE MARGIN ACCORDING TO UX PORTFOLIOS max-width: 950px; padding-left: 30px; padding-right: 30px;*/ margin: auto; max-width: 950px; padding-left: 10px; padding-right: 10px; } .pagination button { padding: 0px 0px; } #footer { margin-top: 0px; /*used to be 25px*/ margin-left: auto; margin-right: auto; max-width: 950px; text-align: center; padding-top: 10px; padding-left: 70px; padding-right: 70px; margin-bottom: 55px; } } /*------------------------------------------------------------------ */ /* Responsive layout ?????????????????? i think for details columns----------------- @media screen and (max-width: 768px) { .column { width: 50%; } } @media screen and (max-width: 480px) { .column { width: 100%; } } Responsive layout ?????????????????? ----------------- */ /* ORIGINAL STUFF @media (max-width: 875px) { .hero-content { padding: 0 45px; } #portfolio { } .about-page-text { margin-top: 100px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding-top: 110px; padding-left: 10px; padding-right: 10px; margin-bottom: 310px; } } @media (max-width: 768px) { .hero-content { padding: 0 45px; } .portfolio-item { width: 100%; margin-left: 20px; margin-right: 20px; } .about-page-text { margin-top: 100px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding-top: 110px; padding-left: 15px; padding-right: 15px; margin-bottom: 310px; } } @media (max-width: 624px) { Smallest web browser window .about-page-text { margin-top: 100px; margin-left: auto; margin-right: auto; max-width: 80ch; text-align: left; padding-top: 110px; padding-left: 15px; padding-right: 15px; margin-bottom: 310px; } } */