fix #104

Author: tayloraswift

Assets/css/Admin.css.map

@@ -121,7 +121,7 @@ extension Swiftinit.VersionedPage
             }
             $0[.div] { $0.class = "sidebar" } = sidebar.map { _ in "" }
         }
-        body[.div]
+        body[.div, { $0.class = "app" }]
         {
             $0[.main, { $0.class = "content" }] { self.main(&$0, format: format) }
             $0[.div] { $0.class = "sidebar" } = sidebar

Assets/css/Main.css

@@ -68,7 +68,7 @@ extension Swiftinit.ApplicationPage
                 }
             }
         }
-        body[.div]
+        body[.div, { $0.class = "app" }]
         {
             $0[.main, { $0.class = "content" }] { self.main(&$0, format: format) }
         }

Assets/css/Main.css.map

@@ -39,17 +39,16 @@ body
         }
     }
 
-    header.app div.content,
-    main.content
+    > *.app > *.content
     {
         flex: 0 1 48rem;
 
         overflow: hidden;
         overflow-wrap: break-word;
     }
 
-    header.app div.content > *,
-    main.content
+    > header.app > div.content > *,
+    > div.app > main.content
     {
         padding-left: 1rem;
         padding-right: 1rem;
@@ -67,23 +66,20 @@ body
         margin-top: 6rem;
     }
 
-    body > *
+    body > *.content > *.sidebar
     {
-        > *.sidebar
-        {
-            display: block;
-            flex: 0 0 16rem;
-            width: 16rem;
-        }
+        display: block;
+        flex: 0 0 16rem;
+        width: 16rem;
     }
 
-    body header.app div.content
+    body > header.app > div.content
     {
         //  48rem + 4 rem + 1 rem = 53rem
         flex: 0 1 53rem;
     }
-    body header.app div.content > *,
-    body main.content
+    body > header.app > div.content > *,
+    body > div.app > main.content
     {
         padding-left: 4rem;
     }

Sources/SwiftinitPages/Swiftinit.VersionedPage.swift

@@ -18,6 +18,7 @@ $light-snippet-line-number: rgb(192, 192, 192);
 
 $light-swift: rgb(134, 134, 134);
 $light-accent-comment: $light-foreground-semi;
+$light-accent-barbie-pink-semi: rgb(255, 136, 176);
 $light-accent-barbie-pink: rgb(255, 86, 158);
 $light-accent-barbie-pink-shadow: rgb(209, 23, 104);
 

Sources/SwiftinitRender/Pages/Swiftinit.ApplicationPage.swift

@@ -147,7 +147,14 @@ section.details
         list-style: none;
         padding: 0;
         display: grid;
-        grid-gap: 0.5rem;
+
+        grid-gap: 0.25rem;
+
+        @media only screen and (min-width: 50rem)
+        {
+            grid-gap: 0.5rem;
+        }
+
         grid-template-columns: repeat(7, 1fr);
 
         li
@@ -160,7 +167,12 @@ section.details
                 justify-content: space-between;
 
                 background-color: rgb(233, 233, 233);
-                padding: 0.35rem 0.5rem 0.5rem 0.5rem;
+
+                @media only screen and (min-width: 50rem)
+                {
+                    padding: 0.35rem 0.5rem 0.5rem 0.5rem;
+                }
+
                 border-radius: 0.25rem;
 
                 p:first-child
@@ -191,26 +203,50 @@ section.details
                 }
             }
 
+            > *
+            {
+                span.m
+                {
+                    color: $light-foreground-faint;
+                }
+                span.d
+                {
+                    color: $light-foreground;
+                }
+            }
+
             > a:hover, a:focus
             {
                 background-color: $light-background-pink;
                 text-decoration: none;
-            }
 
-            span.m
-            {
-                color: $light-foreground-faint;
-            }
-            span.d
-            {
-                color: $light-foreground;
+                span.m
+                {
+                    color: $light-accent-barbie-pink-semi;
+                }
+                span.d
+                {
+                    color: $light-accent-barbie-pink;
+                }
             }
+
         }
         li.first
         {
-            span.m
+            > *
             {
-                color: $light-foreground;
+                span.m
+                {
+                    color: $light-foreground;
+                }
+            }
+
+            > a:hover, a:focus
+            {
+                span.m
+                {
+                    color: $light-accent-barbie-pink;
+                }
             }
         }
     }