summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--index.html8
-rw-r--r--minigolf.html8
-rw-r--r--style.css274
3 files changed, 146 insertions, 144 deletions
diff --git a/index.html b/index.html
index df9888c..eeb9f83 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/style.css b/style.css
index 06d4796..ca2f022 100644
--- a/style.css
+++ b/style.css
@@ -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));
+ }
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-12 16:53:48 +0000