v0.4.4

package.json

@@ -1,6 +1,6 @@
 {
   "name": "petithub",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "private": false,
   "description": "PetitHub - Explore obscure GitHub repositories",
   "author": {

public/static/manifest.webmanifest

@@ -7,7 +7,7 @@
   "description": "Explore obscure GitHub repositories.",
   "icons": [
     {
-      "src": "static/favicon.svg",
+      "src": "static/icons/favicon.svg",
       "sizes": "98x96",
       "type": "image/svg+xml"
     }

public/static/style.css

@@ -24,7 +24,7 @@ body {
 }
 .container {
   width: 80%;
-  max-width: 80vmin;
+  max-width: 120vmin;
   padding: 20px;
   background-color: var(--container-bg-color);
   border: 1px solid var(--border-color);
@@ -38,7 +38,7 @@ body {
   margin-bottom: 20px;
 }
 a {
-  color: var(--font-color);
+  color: inherit;
   text-decoration: none;
 }
 a:hover {
@@ -90,31 +90,53 @@ a:hover {
 /* Layout */
 .container-layout {
   max-width: 100%;
-  display: grid;
-  grid-auto-flow: column;
-  gap: 2rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem 2rem;
 }
 .layout-main {
-  grid-column: 1;
+  flex: 1;
   display: flex;
   -moz-box-pack: justify;
   justify-content: space-between;
   align-self: self-start;
   text-align: start;
   -moz-box-flex: 1;
-  flex-grow: 1;
-  padding-bottom: 16px;
-  padding-top: 8px;
+  padding-top: 0.5rem;
 }
 .layout-sidebar {
-  padding: 1rem 0;
-  grid-column: 2;
+  flex: 1;
+  padding-top: .8rem;
+  max-width: 30%;
+}
+.layout-sidebar p a {
+  display: flex;
+}
+.layout-sidebar p a img {
+  bottom: 0;
+  margin-right: 0.6rem !important;
+  filter: var(--svg-font-color-muted);
+}
+@media (max-width: 600px) {
+  .container-layout {
+    flex-direction: column-reverse;
+  }
+  .layout-sidebar {
+    max-width: 100%;
+  }
 }
 .row {
   display: flex;
   flex-direction: row;
   gap: 8px;
 }
+.block {
+  margin-bottom: 1.5rem;
+  color: var(--font-color-muted);
+}
+.block-border {
+  border-bottom: max(1px, 0.0625rem) solid var(--border-color);
+}
 .button {
   display: flex;
   -webkit-appearance: button;
@@ -126,12 +148,15 @@ a:hover {
   font-family: inherit;
   align-items: center;
   align-self: center;
+  font-size: 14px;
+  gap: 6px;
+  padding: 0.25rem 0.75rem;
 }
 .button a {
   display: flex;
   align-items: center;
   align-self: center;
-  margin: 5px 0 4px;
+  gap: 6px;
 }
 .button a:hover {
   text-decoration: none;
@@ -146,7 +171,7 @@ a:hover {
   height: 1rem;
 }
 .code-button {
-  font-size: 14px;
+  color: var(--font-color);
   background-color: var(--code-bg-color);
   border-color: var(--border-color);
   text-decoration: none;
@@ -156,9 +181,16 @@ a:hover {
   background-color: var(--code-bg-hover-color);
 }
 .code-button img {
-  margin: 0 3px;
   filter: var(--svg-font-color);
 }
+.sidebar-link:hover .icon {
+  filter: var(--svg-sidebar-hover-color);
+}
+.sidebar-link:hover {
+  text-decoration: none;
+  color: var(--sidebar-hover-color);
+  filter: grayscale(0);
+}
 
 /* FOOTER */
 .footer {
@@ -270,12 +302,17 @@ a:hover {
     --border-color: #30363d;
     --code-bg-color: #238636;
     --code-bg-hover-color: #29903b;
+    --sidebar-hover-color: #4493f8;
     --svg-font-color: brightness(0) saturate(100%) invert(95%) sepia(9%)
       saturate(196%) hue-rotate(174deg) brightness(99%) contrast(92%); /* #e6edf3 */
+    --svg-font-color-muted: invert(64%) sepia(20%) saturate(178%)
+      hue-rotate(171deg) brightness(89%) contrast(87%); /* #8d96a0 */
     --svg-icon-color: invert(61%) sepia(6%) saturate(595%) hue-rotate(171deg)
       brightness(95%) contrast(87%); /* #8b949e */
     --svg-icon-color-hover: invert(81%) sepia(5%) saturate(357%)
-      hue-rotate(168deg) brightness(106%) contrast(86%); /* c9d1d9 */
+      hue-rotate(168deg) brightness(106%) contrast(86%); /* #c9d1d9 */
+    --svg-sidebar-hover-color: invert(45%) sepia(75%) saturate(526%)
+      hue-rotate(175deg) brightness(105%) contrast(95%); /* #4493f8 */
 
     --p-color: #8b949e; /* TODO */
     --a-color: #58a6ff; /* TODO */