From a6bec49469adf9d3704e521cab2d4d0464b1a039 Mon Sep 17 00:00:00 2001
From: Kyle Lambert <kyle@calloutcreative.com>
Date: Sun, 30 Oct 2022 16:00:11 -0700
Subject: [PATCH] Add light theme

---
 light-theme-style.css | 283 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 283 insertions(+)
 create mode 100644 light-theme-style.css

diff --git a/light-theme-style.css b/light-theme-style.css
new file mode 100644
index 0000000..9b9ca59
--- /dev/null
+++ b/light-theme-style.css
@@ -0,0 +1,283 @@
+:root {
+  --default-font: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu, Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+  --secondary-font: "Press Start 2P", "IBM Plex Mono", "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu, Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+  --primary-color: rgb(228, 104, 21);
+  --content-lower: rgb(141, 127, 127);
+}
+
+body {  
+  background: rgb(255, 253, 246);
+  color: var(--primary-color);
+  font-family: var(--default-font) !important;
+}
+
+a {
+  color: var(--primary-color) !important;
+}
+
+textarea {
+  font-family: var(--default-font) !important;
+  font-size: 1rem !important;
+  line-height: 1.2rem !important;
+}
+
+input {
+  font-family: var(--default-font);
+  font-size: 1rem !important;
+}
+
+input[type = submit] {
+  background-color: var(--primary-color);
+  color: #fff;
+  font-family: var(--default-font);
+  font-size: 1.2rem;
+  padding: 8px 16px;
+  border: 0;
+  border-radius: 4px;
+  text-transform: capitalize;
+}
+
+input[type = submit]:hover {
+  cursor: pointer;
+}
+
+td {
+  color: var(--primary-color) !important;
+  font-family: var(--default-font) !important;
+  font-size: 10pt;
+  color: #828282;
+}
+
+#hnmain {
+  background: rgb(255, 253, 246);
+}
+
+.pagetop {
+  font-family: var(--default-font) !important;
+  font-size: 1.1rem !important;
+  color: transparent !important;
+  line-height: auto !important;
+}
+
+.pagetop a:link {
+  color: var(--primary-color);
+  text-transform: capitalize !important;
+  padding-right: 10px;
+}
+
+.pagetop a:visited {
+  color: var(--primary-color) !important;
+}
+
+.pagetop .hnname a:link, .pagetop .hnname a:visited {
+  color: var(--primary-color) !important;
+  text-transform: uppercase !important;
+  letter-spacing: .75px !important;
+  font-size: .9rem;
+  line-height: .9rem;
+  font-weight: 6800;
+  font-family: var(--secondary-font);
+  vertical-align: baseline;
+  top: 2px;
+  position: relative;
+}
+
+#hnmain tbody:first-child tr:first-child td:first-child:not(.title) {
+  background: rgba(255, 229, 209, 0.5);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(245, 201, 120, 0.1);
+  padding: 16px;
+  display: inline-block;
+  margin: 20px 0px 10px;
+  width: 100%;
+  border-radius: 8px;
+  box-sizing: border-box;
+  box-shadow: 0px 2px 20px rgba(238, 200, 129, 0.2);
+  -webkit-box-shadow: 0px 2px 20px rgba(238, 200, 129, 0.2);
+}
+
+/* hide logo */
+#hnmain tbody:first-child tr:first-child td:first-child table tbody tr td:first-child {
+  display: none;
+  width: 0;
+}
+
+.subtext {  
+  font-family: var(--default-font) !important;
+  font-size: 1rem !important;
+  color: rgb(180, 188, 208) !important;
+  display: table-cell;
+}
+
+tr .athing {
+  height: 1.45rem !important;
+  width: 100%;
+}
+
+.rank {
+  display: none;
+}
+
+.votelinks {
+  background: rgba(255, 229, 209, 0.384);
+  border: 1px solid rgba(245, 201, 120, 0.1) !important;
+  border-radius: 4px;
+  width: 20px !important;
+  height: 32px !important;
+  display: table-cell;
+}
+
+.votelinks font {
+  top: 4px;
+  font-size: 1.5rem;
+  position: relative;
+}
+
+.votearrow {
+  width: 1px !important;
+  height: 1px !important;
+  border-style: solid !important;
+  border-width: 0 5px 9px 5px !important;
+  border-color: transparent transparent var(--primary-color) transparent !important;
+  transform: rotate(0deg) !important;
+  background-image: none !important;
+  margin: 2px 12px 2px 6px !important;
+  top: 7px !important;
+  left: 3px;
+  position: relative;
+  transition: 50ms ease-in-out;
+}
+
+.votearrow:hover {
+  border-color: transparent transparent var(--primary-color) transparent !important;
+  transform: scale(1.2) !important;
+}
+
+.title {
+  font-family: var(--default-font) !important;
+  font-size: 1.2rem !important;
+  font-weight: 600;
+  color: rgb(124, 109, 109)  !important;
+  overflow: hidden;
+  margin-bottom: 30px !important;
+  padding: 1px;
+}
+
+.titleline {
+  padding-left: 12px;
+}
+
+.titleline a:hover {
+  text-decoration: underline;
+  color: rgb(124, 109, 109)  !important;
+}
+
+.title a {
+  color: rgb(124, 109, 109)  !important;
+  text-decoration: none;
+} 
+
+.title a:visited {
+  color: var(--primary-color) !important;
+}
+
+.subline {
+  color: var(--content-lower) !important;
+}
+
+.subtext {
+  padding-left: 13px;
+  padding-top: 4px;
+  padding-bottom: 8px;
+  font-size: .9rem !important;
+}
+
+.subtext a:link, .subtext a:visited {
+  color: var(--content-lower) !important;
+}
+
+.sitebit.comhead a, .sitebit.comhead {
+  font-size: 1.2rem !important;
+  font-weight: 300;
+  font-family: var(--default-font) !important;
+  color: var(--content-lower) !important;
+}
+
+.morelink {
+  color: var(--primary-color) !important;
+  padding-left: 10px !important;
+}
+
+.morelink::after {
+  content: "→";
+  height: 10px;
+  width: 10px;
+  margin-left: 8px;
+}
+
+.hnmore a, font {
+  color: var(--primary-color) !important;
+}
+
+.comhead {
+  font-family: var(--default-font) !important;
+  font-size: .9rem !important;
+}
+
+.comhead a {
+  color: var(--content-lower) !important;
+}
+
+/* hide footer linke */
+#hnmain tbody tr:nth-child(5) td:first-child table tbody tr td {
+  background-color: transparent;
+}
+
+.yclinks a, .yclinks, form {
+  font-family: var(--default-font) !important;
+  color: var(--content-lower) !important;
+  font-size: .9rem !important;
+}
+
+.comment .c00{
+  color: var(--content-lower) !important;
+  font-size: 1.1rem;
+  line-height: 1.4rem;
+  font-family: var(--default-font) !important;
+}
+
+.hnuser {
+  font-weight: bold;
+}
+
+#karma {
+  color: var(--primary-color) !important;
+}
+
+.itemlist tbody, .itemlist {
+  width: 100% !important;
+}
+
+.athing.comtr td.ind {
+  background-color: transparent !important;
+  border: 0px solid transparent !important;
+  box-shadow: none !important;
+}
+
+.comment-tree tbody:first-child tr.athing.comtr:first-child td:first-child {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  padding: 0px !important;
+}
+
+.comment-tree .votelinks {
+  width: 10px !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
+.comment-tree .votelinks .votearrow {
+  top: 2px !important;
+}