diff options
author | Connor Frank <conjfrnk@gmail.com> | 2024-04-16 00:40:51 -0400 |
---|---|---|
committer | Connor Frank <conjfrnk@gmail.com> | 2024-04-16 00:43:18 -0400 |
commit | 2cc4ec6dd14a299f0d077ca3c51fc71f00f2f108 (patch) | |
tree | 60c3091692889db4a9f97a9d0e3e314ae439981e | |
parent | 65b0dd1d37fcd8ab96fdff155f276a0ce3e95f00 (diff) |
more formatting
-rw-r--r-- | index.html | 8 | ||||
-rw-r--r-- | minigolf.html | 8 | ||||
-rw-r--r-- | style.css | 274 |
3 files changed, 146 insertions, 144 deletions
@@ -36,7 +36,7 @@ </div> <div class="ico"> <div class="entry-dot"></div> - <img src="assets/circana.svg" width=78 height=22 alt="Circana" /> + <img src="assets/circana.svg" width=78 height=22 alt="Circana" class="img-bg" /> </div> <div class="desc"> Summer Intern at Circana @@ -51,7 +51,7 @@ </div> <div class="ico"> <div class="entry-dot"></div> - <img src="assets/schools/princeton.svg" width=78 height=100 alt="Princeton" /> + <img src="assets/schools/princeton.svg" width=78 height=100 alt="Princeton" class="img-bg" /> </div> <div class="desc"> Princeton University -- Princeton, NJ @@ -97,7 +97,7 @@ <div class="darkgroup"> <div class="container"> <div class="ctitle">Projects</div> - <ul class="nodot"> + <ul> <li>March 2024 <a href="minigolf.html">Mini Golf Scorekeeping App</a></li> <li>April 2024 <a href="https://conjfrnk.github.io/website/2024/04/15/my-website">This Website</a></li> </ul> @@ -114,7 +114,7 @@ <div class="darkgroup"> <div class="container"> <div class="ctitle">Other Stuff</div> - <ul class="nodot"> + <ul> <li><a href="https://loftyields.com">LoftYields</a>, the home of Aaron and Connor's projects</li> <li><a href="https://github.com/conjfrnk/configuration">My dotfiles and Linux configurations</a></li> </ul> diff --git a/minigolf.html b/minigolf.html index 4f5ab24..02bdcd8 100644 --- a/minigolf.html +++ b/minigolf.html @@ -26,7 +26,7 @@ </div> <div class="ico"> <div class="entry-dot"></div> - <img src="assets/golf/golf3.svg" /> + <img src="assets/golf/golf3.svg" class="iico" /> </div> <div class="desc"> Ideas: @@ -44,7 +44,7 @@ </div> <div class="ico"> <div class="entry-dot"></div> - <img src="assets/golf/golf2.svg" /> + <img src="assets/golf/golf2.svg" class="iico" /> </div> <div class="desc"> Project Improved @@ -56,7 +56,7 @@ </div> <div class="ico"> <div class="entry-dot"></div> - <img src="assets/golf/golf1.svg" /> + <img src="assets/golf/golf1.svg" class="iico" /> </div> <div class="desc"> Project Started @@ -71,7 +71,7 @@ <div class="darkgroup"> <div class="container"> <div class="ctitle">Links</div> - <ul class="nodot"> + <ul> <li>Repository: <a href="https://www.github.com/conjfrnk/mini-golf-scores">Github</a></li> <li>Repository: <a href="https://git.loftyields.com/mini-golf-scores">Self-hosted on LoftYields.com</a></li> <li><a href="http://www.conjfrnk.com">Apple App Store</a></li> @@ -1,11 +1,14 @@ body { - margin: 0; - padding: 0; - background-color: white; - font-family: sans-serif; - font-size: 16px; - line-height: 1.5; - color: black; + margin: 0; + padding: 0; + background-color: white; + font-family: sans-serif; + font-size: 16px; + line-height: 1.5; + color: black; +} +a:hover { + color: #ff6347; } .responsive-image { @@ -14,19 +17,19 @@ body { } .container { - margin-left: auto; - margin-right: auto; - padding-left: 15px; - padding-right: 15px; + margin-left: auto; + margin-right: auto; + padding-left: 15px; + padding-right: 15px; } @media (min-width: 992px) { - .container { - width: 970px; - } + .container { + width: 970px; + } } .row { - display: grid; - grid-template-columns: repeat(12, 1fr); + display: grid; + grid-template-columns: repeat(12, 1fr); } .darkgroup { @@ -35,161 +38,160 @@ body { margin-top: 20px; padding-bottom: 30px; } - .lightgroup { margin-top: 20px; padding-bottom: 30px; } #dhead { - margin-top: 20px; + margin-top: 20px; } #dpic { - grid-column: span 6; - text-align: right; + grid-column: span 6; + text-align: right; } #ddesc { - padding-top: 40px; - padding-left: 20px; - grid-column: span 6; + padding-top: 40px; + padding-left: 20px; + grid-column: span 6; } @media (max-width: 991px) { - #dpic { - grid-column: span 12; - text-align: center; - } - #ddesc { - grid-column: span 12; - padding-top: 20px; - text-align: center; - } + #dpic { + grid-column: span 12; + text-align: center; + } + #ddesc { + grid-column: span 12; + padding-top: 20px; + text-align: center; + } } h1 { - font-size: 34px; - font-weight: normal; - padding: 0; - margin: 0; + font-size: 34px; + font-weight: normal; + padding: 0; + margin: 0; } h2 { - font-weight: normal; - font-style: italic; - color: #385d24; - font-size: 18px; - padding: 0; - margin: 5px 0 10px 0; + font-weight: normal; + font-style: italic; + color: #385d24; + font-size: 18px; + padding: 0; + margin: 5px 0 10px 0; } @media (min-width: 992px) { - h2 { - max-width: 300px; - } + h2 { + max-width: 300px; + } } #dpic img { - width: 240px; - height: 240px; - border-radius: 120px; + width: 240px; + height: 240px; + border-radius: 120px; } .iico { - width: 40px; - height: 40px; + width: 40px; + height: 40px; +} +.img-bg { + display: block; + max-width: 100%; + height: auto; } hr { - height: 1px; - background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); - background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); - background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); - background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); - padding: 0; - margin: 20px 0px 20px 0px; - border: 0; + height: 1px; + background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); + background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); + background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); + background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); + padding: 0; + margin: 20px 0px 20px 0px; + border: 0; } .ico { - grid-column: span 1; - vertical-align: top; - border-left: 2px solid #385d24; - position: relative; + grid-column: span 1; + vertical-align: top; + border-left: 2px solid #385d24; + position: relative; } .ico img { - border-radius: 5px; - width: 100%; - max-width: 80px; - margin-left: 10px; + border-radius: 5px; + width: 100%; + max-width: 80px; + margin-left: 10px; } .desc { - grid-column: span 10; - vertical-align: top; - font-size: 17px; - padding-left: 20px; - padding-bottom: 20px; -} -.entry { + grid-column: span 10; + vertical-align: top; + font-size: 17px; + padding-left: 20px; + padding-bottom: 20px; } .entry-dot { - position: absolute; - top: 4px; - left: -7px; - width: 8px; - height: 8px; - border-radius: 10px; - background-color: #385d24; - border: 2px solid white; + position: absolute; + top: 5px; + left: -6px; + width: 8px; + height: 8px; + border-radius: 10px; + background-color: #385d24; + border: 1px solid white; } .timespan { - grid-column: span 1; - font-size: 14px; - text-align: right; - padding-right: 5px; - color: #385d24; -} -.hassets { - position: relative; -} -@media (max-width: 991px) { - .hassets { - display: none; - } -} -.hasset { - position: absolute; - margin: 0; - padding: 0; + grid-column: span 1; + font-size: 14px; + text-align: right; + padding-right: 5px; + color: #385d24; } .ctitle { - font-size: 36px; - margin-bottom: 20px; - margin-top: 40px; -} -.card { - grid-column: span 3; - vertical-align: top; - background-color: #385d24; - border: 1px solid #385d24; - border-radius: 3px; - padding: 5px; - background-color: white; - padding-bottom: 10px; + font-size: 36px; + margin-bottom: 20px; + margin-top: 40px; } -@media (max-width: 991px) { - .card { - grid-column: span 6; - } - #featured-talks .row { - grid-column-gap: 5px; - grid-row-gap: 5px; - } -} -.card img { - border-radius: 5px; - width: 100%; -} -.cdesc { - height: 30px; - vertical-align: top; - margin-bottom: 10px; - font-size: 15px; -} -@media (max-width: 768px) { - .cdesc { - font-size: 14px; - padding-bottom: 10px; - } + +@media (prefers-color-scheme: dark) { + body { + background-color: #262a33; + color: white; + } + a { + color: #00ffff; + } + .darkgroup { + background-color: #657595; + color: black; + a { + color: #32CD32 + } + a:hover { + color: #ff6347; + } + } + h1, h2, .timespan, .desc { + color: white; + } + .ico { + border-left: 2px solid #32CD32; + } + .entry-dot { + background-color: #32CD32; + } + .iico { + filter: invert(100%); + } + .img-bg { + background-color: white; + padding: 1px; + border-radius: 2px; + } + .responsive-image { + background-color: white; + padding: 1px; + border-radius: 2px; + } + hr { + background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0)); + } } |