diff options
| -rw-r--r-- | index.css | 85 | ||||
| -rw-r--r-- | index.html | 42 |
2 files changed, 63 insertions, 64 deletions
@@ -1,49 +1,48 @@ body { - width: 60vw; - height: 100vh; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 16px; - background-color: transparent; - color: black; - padding: 0; - margin: auto; - + width: 60vw; + height: 100vh; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 16px; + background-color: transparent; + color: black; + padding: 0; + margin: auto; } header { - width: 100%; + width: 100%; } header > h1 { font-weight: bold; - font-size: 2rem; - padding-top: 1rem; + font-size: 2rem; + padding-top: 1rem; padding-bottom: 0.5rem; - margin: 0; + margin: 0; } header > nav { - margin-top: 0.5rem; - margin-bottom: 1rem; - padding-left: 0.25rem; + margin-top: 0.5rem; + margin-bottom: 1rem; + padding-left: 0.25rem; } header > nav > ul { - display: flex; - flex-direction: row; - list-style-type: none; - margin: 0; - padding: 0; + display: flex; + flex-direction: row; + list-style-type: none; + margin: 0; + padding: 0; } header > nav > ul > li { - padding-right: 1rem; + padding-right: 1rem; } header > nav > ul a { - text-decoration: none; - color: blue; - font-size: 18px; + text-decoration: none; + color: blue; + font-size: 18px; border-bottom: 1px solid transparent; } @@ -53,43 +52,43 @@ header > nav > ul a:hover { } h2 { - font-size: 1.5rem; + font-size: 1.5rem; } section { - width: 100%; + width: 100%; } p { - text-align: left; + text-align: left; } section a { - color: blueviolet; + color: blueviolet; } section a:hover { - opacity: 0.7; + opacity: 0.7; } /* Image styling */ #image_container { - display: flex; - flex-direction: row; - transition: transform 100ms ease-in-out; + display: flex; + flex-direction: row; + transition: transform 100ms ease-in-out; flex: 0 1 auto; width: 100%; overflow: auto; } #image_container .image_item { - width: 240px; - transition: opacity 100ms ease-in-out; - padding: 0; - margin: 0; - padding-right: 12px; - cursor: pointer; - position: relative; + width: 240px; + transition: opacity 100ms ease-in-out; + padding: 0; + margin: 0; + padding-right: 12px; + cursor: pointer; + position: relative; } #image_container .image_item:hover > img { @@ -97,12 +96,12 @@ section a:hover { } .image_item > figcaption { - font-size: 10px; - font-style: italic; + font-size: 10px; + font-style: italic; } .image_item > img { - width: inherit; + width: inherit; border-radius: 3px; border: 2px solid rgba(0, 0, 0, 0.3); } @@ -15,15 +15,15 @@ </div> <header> - <h1>Matthew Kosarek</h1> - <nav> - <ul> - <li><a href='/'>🏡 Home</a></li> - <li><a href='/resume.html'>📘 CV</a></li> - <li><a href="https://www.linkedin.com/in/matthew-kosarek/">🏢 LinkedIn</a></li> - <li style="display: none;"><a href='/posts.html'>📝 Posts</a></li> - </ul> - </nav> + <h1>Matthew Kosarek</h1> + <nav> + <ul> + <li><a href='/'>🏡 Home</a></li> + <li><a href='/resume.html'>📘 CV</a></li> + <li><a href="https://www.linkedin.com/in/matthew-kosarek/">🏢 LinkedIn</a></li> + <li style="display: none;"><a href='/posts.html'>📝 Posts</a></li> + </ul> + </nav> </header> <section id='image_container'> <figure class='image_item'> @@ -44,15 +44,15 @@ Hanging with my friends, circa July 2019. </figcaption> </figure> - + </section> - <section> - <h2>About Me</h2> + <section> + <h2>About Me</h2> <p> My name is Matthew Kosarek. - I am a computer programmer from northern New Jersey and I currently live and work in Montreal, Quebec. - I keep my CV up to date on this website, and I also provide some links to the extracurriculars that I am up to. + I am a computer programmer from northern New Jersey and I currently live and work in Montreal, Quebec. + I keep my CV up to date on this website, and I also provide some links to the extracurriculars that I am up to. </p> </section> <section> @@ -64,16 +64,16 @@ </ul> </section> - <section> + <section> <h2>Theme</h2> <div id="theme_selector" class="hidden"> - <button id="theme_button_default">Default</button> - <button id="theme_button_autumn">🍁 Autumn</button> - <button id="theme_button_winter">⛄ Winter</button> - <button id="theme_button_spring">🐦 Spring</button> - <button id="theme_button_summer">🌻 Summer</button> + <button id="theme_button_default">Default</button> + <button id="theme_button_autumn">🍁 Autumn</button> + <button id="theme_button_winter">⛄ Winter</button> + <button id="theme_button_spring">🐦 Spring</button> + <button id="theme_button_summer">🌻 Summer</button> </div> - </section> + </section> </body> <script src='/index.js'></script> |