major features update

static/contact.css

@@ -0,0 +1,48 @@
+main {
+  padding-top: 1em;
+}
+
+#fields {
+  display: grid;
+  grid-template-columns: min-content auto;
+  gap: 0.5em;
+
+  label {
+    color: var(--line-color);
+    text-align: right;
+
+    &::after {
+      content: ":"
+    }
+  }
+}
+
+#names {
+  display: flex;
+  flex-direction: column;
+  width: min-content;
+
+  div {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+#addresses {
+  display: grid;
+  grid-template-columns: min-content auto;
+  row-gap: 0.5em;
+
+  .label {
+    color: var(--line-color);
+    text-align: right;
+  }
+}
+
+.hint {
+  font-size: small;
+}
+
+code {
+  font-family: monospace;
+}

static/home.css

@@ -0,0 +1,68 @@
+h2 {
+  font-weight: bold;
+}
+
+#freshness {
+  padding: 1em 0;
+}
+
+#freshness .grid {
+  display: grid;
+  grid-template-columns: fit-content(50%) min-content auto;
+  width: fit-content;
+
+  /* do this instead of grid gap so we can use
+   * borders/backgrounds for rows */
+  span {
+    padding: 0.3em 0;
+    border-bottom: 1px solid var(--line-color);
+
+    &:nth-child(3n+1),
+    &:nth-child(3n+2) {
+      padding-right: 0.5em;
+    }
+
+    &:nth-child(3n+2),
+    &:nth-child(3n+3) {
+      padding-left: 0.5em;
+    }
+  }
+
+  .th {
+    font-size: small;
+    font-weight: bold;
+    border-bottom: 1px solid navy;
+  }
+}
+
+#birthdays {
+  display: flex;
+  flex-direction: column;
+  padding: 1em 0;
+  width: fit-content;
+
+  h2 {
+    width: 100%;
+  }
+
+  #birthday-sections {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1em;
+  }
+
+  .datelist {
+    flex: 1;
+    display: grid;
+    grid-template-columns: fit-content min-content;
+    column-gap: 0.5em;
+    row-gap: 0.3em;
+
+    h3 {
+      grid-column: span 2;
+      font-weight: bold;
+      font-size: small;
+    }
+  }
+}

static/index.css

@@ -0,0 +1,101 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{box-sizing:border-box;margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
+
+:root {
+  --main-bg-color: #f2f3f6;
+  --line-color: #8b687f;
+  --link-color: #3e7543;
+}
+
+body {
+  width: 100%;
+  min-height: 100vh;
+  font-size: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1em;
+  background-color: var(--main-bg-color);
+}
+
+body > header {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5em;
+  border-bottom: 1px solid var(--line-color);
+  padding-bottom: 0.5em;
+  width: 100%;
+  @media only screen and (min-width: 651px) {
+    #sidebar-show-hide { display: none; }
+  }
+  h1 {
+    flex: 1;
+  }
+}
+
+section#content {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  @media only screen and (max-width: 650px) {
+    position: relative;
+  }
+}
+
+#contacts-sidebar {
+  display: flex;
+  flex-direction: column;
+  padding-right: 1em;
+  @media only screen and (max-width: 650px) {
+    position: absolute;
+    float: left;
+    z-index: 1;
+    left: 0;
+    width: 100%;
+    background-color: #0003;
+    height: 100%;
+
+    &.hide {
+      display: none;
+    }
+  }
+
+  ul {
+    flex: 1;
+    width: fit-content;
+    background-color: var(--main-bg-color);
+    padding: 0.5em 1em 0 0;
+    @media only screen and (min-width: 651px) {
+      border-right: 1px solid var(--line-color);
+    }
+
+    button {
+      width: 100%;
+    }
+  }
+
+  li {
+    border-bottom: 1px solid var(--line-color);
+    padding: 0.5em 0;
+    &:last-of-type {
+      border-bottom: none;
+    }
+  }
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+  overflow: visible;
+}
+
+a, a:visited {
+  color: var(--link-color);
+  text-decoration: underline dotted;
+}

static/journal.css

@@ -0,0 +1,77 @@
+#journal {
+  padding: 1em 0;
+
+  header {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: 0.5em;
+
+    a {
+      font-size: x-small;
+    }
+  }
+
+  .disclaimer {
+    font-size: x-small;
+    margin: 0.5em 0;
+  }
+
+  &>form {
+    display: grid;
+    gap: 0.25em;
+    grid-template-columns: 6em auto;
+    width: 100%;
+
+    input {
+      height: 1.4lh;
+    }
+
+    textarea {
+      grid-row: span 2;
+    }
+  }
+
+  .entries {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+    margin: 0.25em 0;
+
+    .entry .view,
+    .entry .edit {
+      display: grid;
+      grid-template-columns: fit-content(6em) auto;
+      gap: 0.25em;
+      align-items: stretch;
+    }
+
+    .date {
+      font-weight: bold;
+
+      &:after {
+        content: ": ";
+        font-weight: normal;
+      }
+    }
+
+    .entry .hide {
+      display: none;
+      border: 2px solid red;
+    }
+
+    input {
+      min-width: 5em;
+    }
+
+    .controls {
+      display: grid;
+      grid-template-columns: auto min-content;
+      gap: 0.1em;
+
+      textarea {
+        grid-row: span 3;
+      }
+    }
+  }
+}

static/login.css

@@ -0,0 +1,26 @@
+body {
+  max-width: min-content;
+  margin: auto;
+}
+
+h1 {
+  align-self: flex-start;
+  font-size: large;
+  font-weight: bold;
+  margin: 2em 0;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  input {
+    margin-bottom: 1em;
+  }
+
+  input[type="submit"] {
+    margin-top: 1em;
+    grid-column: span 2;
+  }
+}

static/settings.css

@@ -0,0 +1,31 @@
+h2 {
+  font-size: large;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+#cal-link {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+
+  button {
+    max-width: 10em;
+  }
+}
+
+form {
+  display: grid;
+  grid-template-columns: fit-content(50%) min-content;
+  gap: 0.5em;
+
+  label {
+    text-align: right;
+  }
+
+  .error {
+    color: darkred;
+    font-size: small;
+    grid-column: span 2;
+  }
+}