first commit

1 files changed, 213 insertions, 0 deletions

diff --git a/static/css/styles.css b/static/css/styles.css
new file mode 100644
index 0000000..e6b02a1
--- /dev/null
+++ b/static/css/styles.css
@@ -0,0 +1,213 @@
+:root {
+  --color-0: #f38ba8;
+  --color-1: #eba0ac;
+
+  --bg-0: #1e1e2e;
+  --fg-0: #cdd6f4;
+
+  --bg-1: #313244;
+  --fg-1: #a6adc8;
+
+  --selection-bg: #45475a;
+  --selection-fg: #bac2de;
+
+  --content-width: 600px;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-0: #dd7878;
+    --color-1: #dc8a78;
+
+    --bg-0: #eff1f5;
+    --fg-0: #4c4f69;
+
+    --bg-1: #ccd0da;
+    --fg-1: #5c5f77;
+
+    --selection-bg: #bcc0cc;
+    --selection-fg: #5c5f77;
+  }
+}
+
+* { box-sizing: border-box; }
+
+html { 
+  scroll-behavior: smooth; 
+  scrollbar-color: var(--color-0) var(--bg-0); 
+}
+
+body {
+  color: var(--fg-0);
+  background-color: var(--bg-0);
+  font-size: 1.1em;
+  line-height: 1.4;
+  font-family: sans-serif;
+  max-width: var(--content-width);
+  width: 90%;
+  margin: 2em auto;
+  overflow-y: scroll;
+}
+
+::-moz-selection {
+  background-color: var(--selection-bg);
+  color: var(--selection-fg);
+}
+
+::selection {
+  background-color: var(--selection-bg);
+  color: var(--selection-fg);
+}
+
+a { color: var(--color-0); }
+a:hover { color: var(--color-1); }
+
+hr {
+  border: none;
+  border-top: 1px solid var(--color-0);
+  margin: 1.2em auto 1.6em auto;
+}
+
+blockquote {
+  padding: 0.2em 0.6em;
+  margin-left: 1em;
+  border-left: 0.2em solid var(--color-0);
+  display:inline-flex;
+}
+
+blockquote p { margin: 0; }
+
+figure { margin: 2em auto; }
+
+figure figcaption { text-align: center; }
+
+img {
+  display: block;
+  margin: 1em auto;
+  max-width: 100%;
+  height: auto;
+  max-height: var(--content-width);
+}
+
+h1, h2, h3, h4, h5, h6 { color: var(--color-1); }
+
+header h1 { color: var(--color-0); }
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.2em;
+  margin: 1.5em auto;
+}
+
+input::placeholder, textarea::placeholder { color: var(--fg-1); }
+
+input, textarea {
+  background-color: var(--bg-0);
+  color: var(--fg-0);
+  border: 1px solid var(--color-0);
+  padding: 0.6em 0.6em;
+  font-size: 1rem;
+  width: 100%;
+}
+
+textarea {
+  resize: none;
+}
+
+input[type=submit] {
+  width: 12em;
+  font-size: 0.8em;
+  padding: 1em;
+  cursor: pointer;
+}
+
+input:hover, textarea:hover {border: 1px solid var(--color-1);}
+
+#top {
+  position: absolute;
+  top: 0;
+}
+
+#site-header { margin-bottom: 2em; }
+
+#site-header h1 { font-size: 1.2em; }
+#site-header h1 a { 
+  background-color: var(--color-0);
+  color: var(--bg-0);
+  padding: 0.2em 0.4em;
+  text-decoration: none;
+}
+#site-header h1 a:hover { background-color: var(--color-1); }
+
+#nav-active-link { color: var(--fg-0); }
+nav ul {
+  width: 100%;
+  list-style-type: none;
+  font-size: 1em;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6em;
+}
+
+main {
+  border: 1px solid var(--color-0);
+  padding: 0.4em 1.2em;
+}
+
+#site-footer { 
+  font-size: 0.85em; 
+  margin-top: 2em;
+  margin-bottom: 5em;
+}
+
+p#top-link { 
+  text-align: center; 
+  padding-top: 1em;
+}
+
+ol#post-index {
+  list-style-type: none;
+  padding: 0;
+}
+
+ol#post-index a {
+  display: grid;
+  grid-template-columns: 6.7em 1fr;
+  width: 100%;
+  text-decoration: none;
+  color: var(--fg-0);
+  margin-bottom: 1em;
+}
+
+ol#post-index time { color: var(--color-1); }
+
+ol#post-index a:visited { color: var(--fg-1); }
+
+.form-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4em;
+}
+
+.form-entry:has(input[type=submit]) {
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.guestbook-entry {
+  background-color: var(--bg-1);
+  border-radius: 1em;
+  padding: 0.1em 0.8em;
+  margin: 2em auto;
+}
+
+.guestbook-entry-name {
+  font-size: 1.4em;
+  color: var(--color-1);
+}
+
+.guestbook-entry time {
+  font-size: 0.9em;
+}