Minor design improvements

1 files changed, 32 insertions, 7 deletions

diff --git a/css/main.scss b/css/main.scss
index 7d673f6..72500d2 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -112,7 +112,7 @@ strong {
 
 .header-base {
     display:         flex;
-    flex-flow:       row wrap;
+    flex-direction:  row;
     align-items:     center;
     justify-content: space-between;
     border-bottom:   1px solid $border;
@@ -128,16 +128,26 @@ strong {
 //
 
 .location {
-    color: $text-faint;
+    flex:          0 1 auto;
+    overflow:      hidden;
+    white-space:   nowrap;
+    text-overflow: ellipsis;
+    margin-right:  .5em;
+    color:         $text-faint;
 
     &__prefix {
-        color: $text-faint;
+        margin-right: .3em;
+        color:        $text-faint;
 
         &:hover {
             color: $text-plus;
         }
     }
 
+    &__slash {
+        margin: 0 .3em;
+    }
+
     &__uripart {
         color: $text-plus;
     
@@ -156,6 +166,16 @@ strong {
 
 //
 
+.actions {
+    flex: 0 0 auto;
+
+    :visited {
+        color: $link-idle;
+    }
+}
+
+//
+
 .wrap {
     text-align: center;
 }
@@ -227,9 +247,8 @@ strong {
 
     &::after {
         order:         2;
-        flex:          0 99999 auto;
+        flex:          1 1 auto;
         display:       block;
-        width:         100%;
         height:        0;
         margin:        0 .5em;
         border-bottom: 2px dotted $border;
@@ -258,8 +277,8 @@ strong {
 //
 
 @media screen and (max-width: 800px) {
-    .location__uripart ~ * {
-        display: none;
+    body {
+        font-size: 1em;
     }
 
     .modal {
@@ -270,3 +289,9 @@ strong {
         padding: 1em 1.3em;
     }
 }
+
+@media screen and (max-width: 500px) {
+    .location__prefix {
+        display: none;
+    }
+}