milestoner 18.12.0 → 19.0.0

data/lib/milestoner/templates/public/page.css.erb

@@ -1,7 +1,3 @@
-:root {
-  --font-family: Verdana;
-}
-
 /* Rouge (https://rouge.jneen.net) */
 .rouge.highlight {
   --color-berry: hsl(240, 18%, 40%);
@@ -309,7 +305,7 @@
   color: var(--color-enoki);
 }
 
-.milestone {
+.milestoner {
   --border-width: 0.15rem;
   --color-black: hsl(0, 0%, 0%);
   --color-butter: hsl(52, 100%, 83%);
@@ -331,12 +327,10 @@
   --color-slate: hsl(211, 23%, 41%);
   --color-smoke: hsl(229, 31%, 93%);
   --color-white: hsl(0, 0%, 100%);
+  --font-family: Verdana;
   --shadow-color: 0deg 0% 0%;
 
-  display: flex;
-  flex-direction: column;
   font-family: var(--font-family);
-  margin: 0 12vw;
 
   blockquote {
     background-color: var(--color-silver);
@@ -395,53 +389,11 @@
     object-fit: cover;
   }
 
-  .normal {
-    border-bottom-color: var(--color-ghost);
-    border-color: transparent;
-    border-style: solid;
-    border-width: var(--border-width);
-  }
-
-  .alert {
-    border: var(--border-width) solid var(--color-orange);
-  }
-
-  .error {
-    border: var(--border-width) solid var(--color-red);
-  }
-
   .avatar {
     border-radius: 50%;
     height: fit-content;
   }
 
-  .pill {
-    border-radius: 0.5rem;
-    padding: 0.2rem 0.4rem;
-  }
-
-  .popover {
-    border-color: var(--color-black);
-    border-radius: 0.5rem;
-    padding: 1rem;
-    max-width: calc(100vw - 20%);
-
-    &::backdrop {
-      backdrop-filter: brightness(60%);
-    }
-
-    .label {
-      font-size: 1.5rem;
-      text-align: center;
-      margin: 0 0 1rem 0;
-    }
-
-    .sublabel {
-      font-size: 1rem;
-      margin: 0 0 1rem 0;
-    }
-  }
-
   .button {
     background-size: 200% auto;
     border-radius: 0.5rem;
@@ -452,6 +404,7 @@
       2.6px 2.7px 5.6px hsl(var(--shadow-color) / 0.14);
     cursor: pointer;
     font-size: 0.9rem;
+    justify-self: center;
     margin: 0;
     padding: 0.2rem 0.5rem;
     transition: 0.1s;
@@ -464,53 +417,66 @@
     }
   }
 
-  .secure {
-    background-color: var(--color-green);
-    color: var(--color-white);
+  .dormant {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    &::before {
+      content: "\1F303";
+      font-size: 10rem;
+    }
   }
 
-  .insecure {
-    background-color: var(--color-red);
-    color: var(--color-white);
+  .key {
+    background-color: var(--color-silver);
+    border-radius: 0.2rem;
+    border: 0.1rem solid var(--color-slate);
+    color: var(--color-black);
+    font-size: 1.3rem;
+    font-weight: 600;
+    padding: 0.1rem 0.3rem;
+    white-space: nowrap;
   }
 
-  .header {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    margin: 1rem 0 2rem 0;
+  .list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
 
-    .title {
+    .item {
       align-items: center;
       display: flex;
       gap: 0.5rem;
-      margin: 0;
-    }
-
-    .date {
-      font-size: 1.4rem;
-      font-weight: 600;
-      margin: 0;
     }
   }
 
-  .overview {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    margin-bottom: 0.5rem;
+  .pill {
+    border-radius: 0.5rem;
+    padding: 0.2rem 0.4rem;
   }
 
-  .owner {
-    display: flex;
-    gap: 0.5rem;
-  }
+  .popover {
+    border-color: var(--color-black);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    max-width: calc(100vw - 20%);
 
-  .actions {
-    display: flex;
-    gap: 0.5rem;
+    &::backdrop {
+      backdrop-filter: brightness(60%);
+    }
+
+    .label {
+      font-size: 1.5rem;
+      text-align: center;
+      margin: 0 0 1rem 0;
+    }
+
+    .sublabel {
+      font-size: 1rem;
+      margin: 0 0 1rem 0;
+    }
   }
 
   .toggle {
@@ -520,300 +486,437 @@
     width: 5rem;
   }
 
-  .columns {
-    background-color: var(--color-black);
-    border-top-left-radius: 0.5rem;
-    border-top-right-radius: 0.5rem;
-    color: var(--color-white);
-    display: grid;
-    grid-template: 1fr / 4.7fr 1fr 1fr 1fr 1fr 1fr;
-    padding: 0.3rem 0;
-
-    .label {
-      font-weight: 600;
-      text-align: center;
-    }
+  .page-header {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
   }
 
-  .row {
-    .label {
-      font-weight: 600;
-    }
-  }
+  .milestones {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin: 0 12vw;
 
-  .row[open] > .summary::before {
-    content: "\25BC";
-    width: 0.5rem;
-  }
+    .list {
+      background-color: var(--color-grey);
+      border: 0.1rem solid var(--color-black);
+      border-radius: 0.5rem;
+      display: flex;
+      gap: 0.5rem;
+      flex-direction: column;
+      margin: 1rem 0;
+      padding: 1rem;
 
-  .summary {
-    align-items: center;
-    display: grid;
-    gap: 0 1rem;
-    grid-template: 1fr / auto 5fr 1fr 1fr 1fr 1fr 1fr;
-    padding: 0.15rem 0;
-    margin: 0.25rem 0 0 0;
-
-    &::-webkit-details-marker {
-      display:none;
+      .item {
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
     }
 
-    &::before {
-      color: var(--color-carbon);
-      content: "\25B6";
-      cursor: pointer;
-      width: 0.5rem;
+    .date {
+      color: var(--color-slate);
     }
+  }
 
-    &:has(~ * .major)::before {
-      color: var(--color-major);
+  .milestone {
+    display: flex;
+    flex-direction: column;
+    margin: 0 12vw;
+
+    .normal {
+      border-bottom-color: var(--color-ghost);
+      border-color: transparent;
+      border-style: solid;
+      border-width: var(--border-width);
     }
 
-    &:has(~ * .minor)::before {
-      color: var(--color-minor);
+    .alert {
+      border: var(--border-width) solid var(--color-orange);
     }
 
-    &:has(~ * .patch)::before {
-      color: var(--color-patch);
+    .error {
+      border: var(--border-width) solid var(--color-red);
     }
 
-    &:has(~ * .rebase)::before {
-      color: var(--color-orange);
+    .secure {
+      background-color: var(--color-green);
+      color: var(--color-white);
     }
 
-    &:has(~ * .invalid)::before {
-      color: var(--color-red);
+    .insecure {
+      background-color: var(--color-red);
+      color: var(--color-white);
     }
 
-    &:hover {
-      background-color: var(--color-powder);
+    .columns {
+      background-color: var(--color-black);
+      border-top-left-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
+      color: var(--color-white);
+      display: grid;
+      grid-template: 1fr / 4.7fr 1fr 1fr 1fr 1fr 1fr;
+      padding: 0.3rem 0;
+
+      .label {
+        font-weight: 600;
+        text-align: center;
+      }
     }
 
-    .title {
+    .header {
       align-items: center;
-      display: flex;
-      gap: 0 0.5rem;
-    }
+      display: grid;
+      gap: 0.5rem;
+      grid-template: repeat(auto-fit, minmax(1rem, 1fr)) / 1fr;
+      justify-items: center;
+      margin: 1rem 0 2rem 0;
 
-    .subject {
-      word-break: break-word;
-    }
+      @media (width >= 900px) {
+        grid-template: 1fr / repeat(auto-fit, minmax(1rem, 1fr));
 
-    .author,
-    .files,
-    .lines,
-    .issue,
-    .review {
-      text-align: center;
-    }
+        & > *:first-child {
+          justify-self: start;
+        }
 
-    .avatar {
-      vertical-align: middle;
-    }
+        & > *:last-child {
+          justify-self: end;
+        }
+      }
 
-    .lines {
-      .deletions {
-        color: var(--color-green);
+      .root, .date {
+        font-size: 1.4rem;
+        font-weight: 600;
       }
 
-      .insertions {
-        color: var(--color-red);
+      .title {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        justify-content: center;
+        margin: 0;
       }
     }
-  }
 
-  .details {
-    display: grid;
-    gap: 1rem;
-    grid-template: auto auto auto / auto 1fr;
-    grid-template-areas:
-      "tag message"
-      "tag notes"
-      "tag info";
-
-    @media (width >= 1000px) {
-      grid-template: 1fr auto / auto 2fr 1fr;
-      grid-template-areas:
-        "tag message info"
-        "tag notes info";
-    }
+    .overview {
+      align-items: center;
+      display: grid;
+      gap: 0.5rem;
+      grid-template: repeat(auto-fit, minmax(1rem, 1fr)) / 1fr;
+      margin-bottom: 0.5rem;
 
-    .tag {
-      align-self: stretch;
-      border-radius: 0.3rem;
-      grid-area: tag;
-      margin: 1rem 0;
-      padding: 0 0.2rem;
-      padding: 0.5rem 0.2rem 0.5rem 0.1rem;
-      text-align: center;
-      text-transform: capitalize;
-      writing-mode: vertical-lr;
-    }
+      @media (width >= 900px) {
+        grid-template: 1fr / repeat(auto-fit, minmax(1rem, 1fr));
 
-    .major {
-      background-color: var(--color-major);
-      color: var(--color-white);
-    }
+        & > *:first-child {
+          justify-self: start;
+        }
 
-    .minor {
-      background-color: var(--color-minor);
-      color: var(--color-white);
-    }
+        & > *:last-child {
+          justify-self: end;
+        }
+      }
 
-    .patch {
-      background-color: var(--color-patch);
-      color: var(--color-white);
-    }
+      .owner {
+        display: flex;
+        gap: 0.5rem;
+        justify-content: center;
+      }
 
-    .rebase {
-      background-color: var(--color-orange);
-      color: var(--color-white);
+      .actions {
+        display: flex;
+        gap: 0.5rem;
+        justify-content: center;
+      }
     }
 
-    .invalid {
-      background-color: var(--color-red);
-      color: var(--color-white);
+    .row {
+      .label {
+        font-weight: 600;
+      }
     }
 
-    .unknown {
-      background-color: var(--color-carbon);
-      color: var(--color-white);
+    .row[open] > .summary::before {
+      content: "\25BC";
+      width: 0.5rem;
     }
 
-    .bar {
-      border-radius: 0.5rem 0.5rem 0 0;
-      color: var(--color-black);
-      font-size: 1rem;
-      font-weight: 600;
-      padding: 0 0 0 0.5rem;
-      margin: 0;
-    }
+    .summary {
+      align-items: center;
+      display: grid;
+      gap: 0 1rem;
+      grid-template: 1fr / auto 5fr 1fr 1fr 1fr 1fr 1fr;
+      padding: 0.15rem 0;
+      margin: 0.25rem 0 0 0;
+
+      &::-webkit-details-marker {
+        display:none;
+      }
 
-    .panel {
-      display: flex;
-      flex-direction: column;
-      padding: 0 0.5rem 0.5rem 0.5rem;
-    }
+      &::before {
+        color: var(--color-carbon);
+        content: "\25B6";
+        cursor: pointer;
+        width: 0.5rem;
+      }
 
-    .content {
-      margin: 0 0.5rem;
-      word-break: break-word;
-    }
+      &:has(~ * .major)::before {
+        color: var(--color-major);
+      }
 
-    .message {
-      background-color: var(--color-grey);
-      border-radius: 0.5rem;
-      grid-area: message;
-      margin-top: 1rem;
+      &:has(~ * .minor)::before {
+        color: var(--color-minor);
+      }
 
-      .bar {
-        background-color: var(--color-smoke);
+      &:has(~ * .patch)::before {
+        color: var(--color-patch);
       }
-    }
 
-    .notes {
-      background-color: var(--color-cheese);
-      border-radius: 0.5rem;
-      grid-area: notes;
-      margin-bottom: 1rem;
+      &:has(~ * .rebase)::before {
+        color: var(--color-orange);
+      }
 
-      .bar {
-        background-color: var(--color-butter);
+      &:has(~ * .invalid)::before {
+        color: var(--color-red);
       }
-    }
 
-    .list {
-      list-style: none;
-      padding: 0;
-      margin: 0;
+      &:hover {
+        background-color: var(--color-powder);
+        border-radius: 0.5rem;
+      }
 
-      .item {
+      .title {
         align-items: center;
         display: flex;
-        gap: 0.5rem;
+        gap: 0 0.5rem;
+      }
+
+      .author,
+      .files,
+      .lines,
+      .issue,
+      .review {
+        text-align: center;
+      }
+
+      .avatar {
+        vertical-align: middle;
+      }
+
+      .lines {
+        .deletions {
+          color: var(--color-green);
+        }
+
+        .insertions {
+          color: var(--color-red);
+        }
       }
     }
 
-    .info {
-      grid-area: info;
-      background-color: var(--color-ice);
-      border-radius: 0.5rem;
-      margin: 1rem 0;
+    .details {
+      display: grid;
+      gap: 1rem;
+      grid-template: auto auto auto / auto 1fr;
+      grid-template-areas:
+        "tag message"
+        "tag notes"
+        "tag info";
+
+      @media (width >= 1000px) {
+        grid-template: 1fr auto / auto 2fr 1fr;
+        grid-template-areas:
+          "tag message info"
+          "tag notes info";
+      }
 
-      .bar {
-        background-color: var(--color-cloud);
+      .tag {
+        align-self: stretch;
+        border-radius: 0.3rem;
+        grid-area: tag;
+        margin: 1rem 0;
+        padding: 0 0.2rem;
+        padding: 0.5rem 0.2rem 0.5rem 0.1rem;
+        text-align: center;
+        text-transform: capitalize;
+        writing-mode: vertical-lr;
       }
 
-      .label {
-        font-size: 0.9rem;
+      .major {
+        background-color: var(--color-major);
+        color: var(--color-white);
       }
 
-      .line {
-        align-self: start;
-        display: flex;
-        gap: 0.5rem;
+      .minor {
+        background-color: var(--color-minor);
+        color: var(--color-white);
+      }
+
+      .patch {
+        background-color: var(--color-patch);
+        color: var(--color-white);
+      }
+
+      .rebase {
+        background-color: var(--color-orange);
+        color: var(--color-white);
+      }
+
+      .invalid {
+        background-color: var(--color-red);
+        color: var(--color-white);
+      }
+
+      .unknown {
+        background-color: var(--color-carbon);
+        color: var(--color-white);
+      }
+
+      .bar {
+        border-radius: 0.5rem 0.5rem 0 0;
+        color: var(--color-black);
+        font-size: 1rem;
+        font-weight: 600;
+        padding: 0 0 0 0.5rem;
         margin: 0;
+      }
+
+      .panel {
+        display: flex;
+        flex-direction: column;
+        padding: 0 0.5rem 0.5rem 0.5rem;
+      }
+
+      .content {
+        margin: 0 0.5rem;
         word-break: break-word;
       }
 
-      .at {
-        flex-wrap: wrap;
+      .message {
+        background-color: var(--color-grey);
+        border-radius: 0.5rem;
+        grid-area: message;
+        margin-top: 1rem;
 
-        .weekday {
-          &:before {
-            content: "(";
-          }
+        .bar {
+          background-color: var(--color-smoke);
+        }
+      }
 
-          &:after {
-            content: ")";
-          }
+      .notes {
+        background-color: var(--color-cheese);
+        border-radius: 0.5rem;
+        grid-area: notes;
+        margin-bottom: 1rem;
+
+        .bar {
+          background-color: var(--color-butter);
         }
       }
-    }
-  }
 
-  .dormant {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
+      .info {
+        grid-area: info;
+        background-color: var(--color-ice);
+        border-radius: 0.5rem;
+        margin: 1rem 0;
 
-    &::before {
-      content: "\1F303";
-      font-size: 10rem;
-    }
-  }
+        .bar {
+          background-color: var(--color-cloud);
+        }
 
-  .totals {
-    display: flex;
-    gap: 0 0.5rem;
-    font-weight: 600;
-    justify-content: center;
+        .label {
+          font-size: 0.9rem;
+        }
 
-    .files {
-      color: var(--color-slate);
+        .line {
+          align-self: start;
+          display: flex;
+          gap: 0.5rem;
+          margin: 0;
+          word-break: break-word;
+        }
+      }
     }
 
-    .deletions {
-      color: var(--color-green);
-    }
+    .footer {
+      .totals {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        font-weight: 600;
+        gap: 0.5rem;
+        justify-content: center;
 
-    .insertions {
-      color: var(--color-red);
-    }
-  }
-}
+        @media (width >= 600px) {
+          flex-direction: row;
+        }
 
-.footer {
-  .generator {
-    display: flex;
-    font-family: var(--font-family);
-    font-style: italic;
-    justify-content: center;
-    margin-top: 1rem;
+        .deletions {
+          color: var(--color-green);
+        }
+
+        .insertions {
+          color: var(--color-red);
+        }
+      }
+
+      .help {
+        background: none;
+        border: none;
+        font-size: 1rem;
+      }
+
+      .shortcut {
+        margin: 0.5rem 0;
+      }
+
+      .actions {
+        align-items: center;
+        display: flex;
+        gap: 0.5rem;
+        justify-content: space-between;
+        list-style: none;
+        margin: 2rem 0;
+        padding: 0;
+
+        .action {
+          align-items: center;
+          border-radius: 0.5rem;
+          border: 0.1rem solid var(--color-carbon);
+          color: var(--color-carbon);
+          display: flex;
+          gap: 0.5rem;
+          padding: 0.3rem 0.6rem;
+          text-decoration: none;
+          transition: 0.1s;
+
+          &[data-direction="previous"]::before {
+            content: "\2AA6";
+          }
+
+          &[data-direction="next"]::after {
+            content: "\2AA7";
+          }
+
+          &:hover {
+            transform: scale(0.95);
+          }
+        }
+      }
+    }
   }
 
-  .link {
-    padding-left: 0.3rem;
+  .page-footer {
+    .generator {
+      display: flex;
+      flex-wrap: wrap;
+      font-style: italic;
+      gap: 0.3rem;
+      justify-content: center;
+      margin-top: 1rem;
+    }
   }
 }