From 629b15529792ae8a12de61004abb728163d4e86b Mon Sep 17 00:00:00 2001 From: Parker Date: Sat, 25 Jan 2025 23:28:04 -0600 Subject: reupload --- css/index.css | 210 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 210 insertions(+) create mode 100644 css/index.css (limited to 'css/index.css') diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..1409763 --- /dev/null +++ b/css/index.css @@ -0,0 +1,210 @@ +html { + font-family: "Open Sans", Arial; + color: #9F9FAA; + scroll-behavior: smooth; + background-color: #242528; +} + +html.light * { + color: #444; + background-color: #F0F0F0; +} + +html.light svg, +html.light #about a { + color: #444; + fill: #444; +} + +body { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + min-height: 200vh; +} + +nav { + width: 100vw; + font-weight: 600; + position: absolute; + top: 30px; + left: 50%; + transform: translateX(-50%); + font-size: 1rem; + text-align: center; +} + +nav a { + margin: 0 1rem; + text-decoration: none; + color: #9F9FAA; +} + +nav a:hover { + text-decoration: underline; + cursor: pointer; + opacity: 0.6; + transition: opacity 0.25s ease-in-out; +} + +/* Nav media query for mobile */ +@media only screen and (max-width: 600px) { + nav a { + display: none; + text-align: right; + } + + nav #toggle { + display: block; + } +} + +#toggle { + /* Move to the top right of the screen */ + position: absolute; + top: 0; + right: 100px; + cursor: pointer; +} + +/* Toggle media query for mobile */ +@media only screen and (max-width: 600px) { + #toggle { + right: 50px; + } +} + +#moon, #sun { + position: absolute; + transition: opacity 0.1s ease; +} + +#moon { + opacity: 1; +} + +#sun { + opacity: 0; +} + +/* Header styles */ +header { + position: absolute; + top: 45%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + +header h1 { + font-size: 45px; + width: 500px; +} + +header h2 { + font-size: 25px; + width: 500px; +} + +/* Header media query for mobile */ +@media only screen and (max-width: 600px) { + header h1 { + font-size: 33px; + width: 300px; + } + + header h2 { + font-size: 23px; + width: 300px; + } +} + +header a { + text-decoration: none; +} + +svg { + margin: 0 15px; + height: 50px; + width: 50px; +} + +/* Icons media query for mobile */ +@media only screen and (max-width: 600px) { + svg { + height: 40px; + width: 40px; + margin: 0 5px; + } +} + +svg:hover { + cursor: pointer; + opacity: 0.6; + transition: opacity 0.25s ease-in-out; +} + +#down-arrow { + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + font-size: 2rem; +} + +#about { + margin-top: 100vh; + width: 1000px; +} + +#about h1 { + font-size: 25px; +} + +#about h2 { + font-size: 20px; +} + +#about p{ + font-size: 18px; +} + +#about ul li { + font-size: 18px; + margin-top: 7px; +} + +/* About media query for mobile */ +@media only screen and (max-width: 600px) { + #about { + width: 90%; + } + + #about h1 { + font-size: 1.5rem; + } + + #about h2 { + font-size: 1.25rem; + } + + #about p, #about ul li { + font-size: 1rem; + } + + #about ul li { + margin-top: 10px; + } +} + +#about a { + text-decoration: underline; + color: #9F9FAA; +} + +#about a:hover { + cursor: pointer; + opacity: 0.6; + transition: opacity 0.25s ease-in-out; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2