Work around tiny gap in curved cards on Chrome

SirBogman · Nov 1, 2020 · 64a3678 · 64a3678
1 parent f76da78
commit 64a3678
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/views/about.html b/views/about.html
@@ -34,7 +34,7 @@ <h1>About</h1>
                     <h2>{{ .Name }}</h2>
                     {{ .Size }}
                 </header>
-                {{ .Version }}
+                <div>{{ .Version }}</div>
                 <a href="{{ .Website }}">
                     {{ trimPrefix (trimPrefix .Website "//") "www." }}
                 </a>

diff --git a/views/css/about.css b/views/css/about.css
@@ -12,10 +12,13 @@ main p:not(:first-child) { margin-top: 1rem }
 
 #langs a {
     overflow: hidden;
+    padding: 0 .5rem .25rem;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+#langs div { padding: .25rem .5rem 0 }
+
 #langs h2 {
     flex: 1;
     font-size: 1.25rem;
@@ -24,11 +27,8 @@ main p:not(:first-child) { margin-top: 1rem }
 
 #langs header {
     align-items: center;
-    background: var(--color);
-    border-bottom: 1px solid var(--color);
     color: var(--background);
     display: flex;
-    margin: -.5rem -.5rem 0;
     padding: .25rem .5rem;
 }
 
@@ -38,15 +38,16 @@ main p:not(:first-child) { margin-top: 1rem }
 }
 
 #langs section {
-    background: var(--light-grey);
+    background: var(--color);
     border: 1px solid var(--color);
     border-radius: .5rem;
-    display: grid;
-    gap: .25rem;
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
-    padding: .5rem;
 }
 
+#langs section > :not(:first-child) { background: var(--light-grey) }
+
 #langs svg {
     max-height: 1.25rem;
     width: 1.25rem;