Added optional dark theme, removed unused styling, tidied CSS

1 files changed, 99 insertions, 85 deletions

diff --git a/style.css b/style.css
index d1de0a0..10ab126 100644
--- a/style.css
+++ b/style.css
@@ -1,165 +1,179 @@
 * {
-    margin: 0;
-    padding: 0;
+margin: 0;
+padding: 0;
 }
 
 body {
-    max-width: 40em;
-    margin: 5% auto;
-    font-family: 'Helvetica', sans-serif;
-    line-height: 1.5;
-    font-size: 0.9em;
+max-width: 40em;
+margin: 5% auto;
+font-family: 'Helvetica', sans-serif;
+line-height: 1.5;
+font-size: 0.9em;
 }
 
 main {
-    margin-top: 2.5em;
+margin-top: 2.5em;
 }
 
 a {
-    color: red;
-    text-decoration: none;
+color: red;
+text-decoration: none;
 }
 
 h1 {
-    font-family: 'Baskerville', serif;
-    font-weight: normal;
-    text-align: center;
-    line-height: 1;
+font-family: 'Baskerville', serif;
+font-weight: normal;
+text-align: center;
+line-height: 1;
 }
 
 h1 + blockquote {
-    display: block;
-    font-family: 'Baskerville', serif;
-    font-size: 1.1em;
-    font-style: italic;
-    text-align: center;
-    quotes: none;
+display: block;
+font-family: 'Baskerville', serif;
+font-size: 1.1em;
+font-style: italic;
+text-align: center;
+quotes: none;
 }
 
 main blockquote {
-  border-left: 2px solid #ccc;  /* Adds a vertical line */
-  color: #555;                  /* Optional: changes the text color */
-  font-size: 12px;
-font-style: italic;           /* Optional: italicizes the text */
+border-left: 2px solid #ccc;
+color: #555;
+font-size: 12px;
+font-style: italic;
 padding-left: 1.5em;
 }
 
 h2:first-of-type {
-    margin-top: 0em;
+margin-top: 0em;
 }
 
 h2 {
-    display: inline-block;
-    text-transform: uppercase;
-    font-size: 1.1em;
-    margin-top: 0.5em;
+display: inline-block;
+text-transform: uppercase;
+font-size: 1.1em;
+margin-top: 0.5em;
 }
 
 h3 {
-    font-size: 1em;
-    font-weight: bold;
+font-size: 1em;
+font-weight: bold;
 }
 
 li {
-    list-style-position: inside;
+list-style-position: inside;
 }
 
 q {
-    font-style: italic;
+font-style: italic;
 }
 
 #ornament {
-    display: block;
-    width: 75%;
-    margin: 0.5em auto;
+display: block;
+width: 75%;
+margin: 0.5em auto;
 }
 
 .avatar {
-    width: 9em;
-    margin: 0 1em 1em 0;
-    float: left;
+width: 9em;
+margin: 0 1em 1em 0;
+float: left;
 }
 
 .person {
-    margin-bottom: 2em;
-    clear: both;
-    padding-bottom: 1em;
-    min-height: 10em;
+margin-bottom: 2em;
+clear: both;
+padding-bottom: 1em;
+min-height: 10em;
 }
 
 .person > ul {
-    float: right;
-    list-style-type: none;
-    margin-left: 0;
-    padding-left: 0;
+float: right;
+list-style-type: none;
+margin-left: 0;
+padding-left: 0;
 }
 
 .person ul > li {
-    display: inline-block;
-    font-style: italic;
+display: inline-block;
+font-style: italic;
 }
 
 .person ul > li::after {
-    content: " ~ ";
+content: " ~ ";
 }
 
 .person ul > li:last-child::after {
-    content: "";
+content: "";
 }
 
 .person li {
-    list-style: none;
+list-style: none;
 }
 
 #projects {
-    margin-top: 1em;
+margin-top: 1em;
 }
 
 .uses-container {
-    margin-bottom: 3em;
+margin-bottom: 3em;
 }
 
 footer {
-    margin-top: 2em;
-    text-align: center;
+margin-top: 2em;
+text-align: center;
 }
 
 @media screen and (max-width: 750px) {
-    body {
-        margin: 7% 10%;
-    }
-    
-    .person {
-        margin-bottom: 1em;
-    }
-    
-    .person h2, .person > ul, .person > p {
-        display: block;
-        float: none;
-    }
-    
-    #ornament, .avatar {
-        display: none;
-    }
+body {
+margin: 7% 10%;
+}
+
+.person {
+margin-bottom: 1em;
+}
+
+.person h2, .person > ul, .person > p {
+display: block;
+float: none;
+}
+
+#ornament, .avatar {
+display: none;
+}
 }
 
 summary {
-  list-style-position: outside;
-  margin-left: 30px;
-  padding: 10px 10px 10px 20px;
-  border-radius: 5px;
-  font-weight: bold;
-    text-transform: uppercase;
-    font-size: 1.1em;
-    margin-top: 0.5em;
+list-style-position: outside;
+margin-left: 30px;
+padding: 10px 10px 10px 20px;
+border-radius: 5px;
+font-weight: bold;
+font-size: 1.1em;
+margin-top: 0.5em;
 }
+
 summary::marker {
-  color: red;
-  font-size: 1.2em;
+color: red;
+font-size: 1.2em;
 }
 
 time {
-	font-family: monospace ;
-	color: #888 ;
-	font-size: 10pt ;
+font-family: monospace ;
+color: #888 ;
+font-size: 10pt ;
+}
+
+@media (prefers-color-scheme: dark) {
+body {
+background-color: #131213;
+color: #bdbdbd
+}
+blockquote, pre, code {
+background-color: #111;
+border-color: #222
+}
+#main img[src$=svg] {
+filter: invert(1)
+}
 }