Whitespace tolerance (#237)

* Use flexbox for centering image blocks

* Fix tab display

* Make tag list wrappable and HTML whitespace tolerant

* Make header navigation HTML whitespace tolerant

assets/css/common/_blocks.scss

@@ -124,6 +124,7 @@ a.block__header--single-item, .block__header a {
 .block__header--js-tabbed {
   @extend .block__header--light;
   background: transparent;
+  display: flex;
 
   border-bottom: $border;
   a {

assets/css/common/_header.scss

@@ -23,6 +23,11 @@
   padding-left: 6px;
 }
 
+.header__navigation {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 a.header__link {
   display: inline-block;
   padding: 0 $header_spacing;

assets/css/views/_images.scss

@@ -92,12 +92,6 @@ div.image-container {
   overflow: hidden;
   /* prevent .media-box__overlay from overflowing the container */
   text-align: center;
-  a::before {
-    content: "";
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-  }
   img,
   video {
     vertical-align: middle;
@@ -105,12 +99,12 @@ div.image-container {
     max-height: 100%;
   }
   /* Make the link cover the whole container if the image is oblong */
-  a {
+  a, picture, video {
     width: 100%;
     height: 100%;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 

assets/css/views/_tags.scss

@@ -70,7 +70,11 @@
 .tag > span {
   padding: 5px;
   display: table-cell;
-  white-space: pre;
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .tag a {

lib/philomena_web/templates/layout/_header_navigation.html.slime

@@ -1,4 +1,4 @@
-.hide-mobile
+.hide-mobile.header__navigation
   .dropdown.header__dropdown
     a.header__link href="/images"
       | Images