Fix flexbox issues with Safari

themes/hugodocs/layouts/_default/single.html

@@ -1,15 +1,16 @@
 {{ define "main" }}
 {{$base := .Site.BaseURL}}
 <main class="main">
-	<a role="button" target="_blank" class="edit-link" href="{{.Site.Params.ghdocsrepo}}edit/master/content/{{.File.Path}}"><span class="edit-text">Edit</span> <i class="icon-pencil" aria-hidden="true"></i></a>
 	<header class="content-header">
-		<h1 class="page-title {{.Section}}">{{with .LinkTitle}}{{ . |markdownify}}{{else}}{{ .Title | markdownify }}{{end}}
+		<h1 class="page-title {{.Section}}">{{with .LinkTitle}}{{ . |markdownify}}{{else}}{{ .Title | markdownify }}{{end}}</h1>
+		<div class="content-header-links">
+		<a target="_blank" class="edit-link" href="{{.Site.Params.ghdocsrepo}}edit/master/content/{{.File.Path}}"><span class="edit">Edit Page</span><i class="icon-pencil" aria-hidden="true"></i></a>
 		{{- with .Params.godocref -}}
-		<a class="godoc-link" target="_blank" href="{{.}}" title="See the corresponding Golang Documentation for {{$.Title}}, {{$.Section}}.">
+		<a target="_blank" class="godoc-link" href="{{.}}" title="See the corresponding Golang Documentation for {{$.Title}}, {{$.Section}}."><span class="godocs">GoDocs</span>
 			{{ partial "svg-icons/godoc-icon.svg" .}}
 		</a>
 		{{- end -}}
-		</h1>
+		</div>
 		{{with .Params.tags}}
 		<ul class="tags">
 			<li><i class="icon-tags"></i></li>

themes/hugodocs/layouts/index.html

@@ -3,24 +3,21 @@
 	<div class="homepage-image">
 		<img src="{{"images/hugo-h-only.png" | relURL}}" alt="">
 	</div>
-	<div class="testing">
-		{{range $section,$content := .Site.Sections}}
-
-		{{end}}
-	</div>
-	<div class="homepage-cards">
+	<ul class="homepage-cards">
 		{{range $key,$params := sort ($.Site.Data.sitenavigation) "order" }}
-		<a href="{{ $params.url }}" class="homepage-card">
-			<section>
-				<header>
-					<h2>{{ $params.title }}</h2>
-				</header>
-				<div class="homepage-card-copy">
-				<p>{{ with $.Site.GetPage "section" $params.url }}{{ .Description | markdownify }}{{ end }}</p>
-				</div>
-			</section>
-		</a>
+			<li class="homepage-card">
+			<a href="{{ $params.url }}"">
+				<section>
+					<header>
+						<h2>{{ $params.title }}</h2>
+					</header>
+					<div class="homepage-card-copy">
+					<p>{{ with $.Site.GetPage "section" $params.url }}{{ .Description | markdownify }}{{ end }}</p>
+					</div>
+				</section>
+			</a>
+			</li>
 		{{end}}
-	</div>
+	</ul>
 </main>
 {{ end }}

themes/hugodocs/pipeline/scss/layout/_site-content.scss

@@ -46,61 +46,54 @@ header.content-header {
   }
 }
 
-a.godoc-link {
-  // position: absolute;
-  // display:flex;
-  // position:relative;
-  display: inline-block;
-  // flex-direction: column;
-  // justify-content: center;
-  // align-items: center;
-  width:auto;
-  position:relative;
-  margin-bottom:0px;
-  vertical-align:bottom;
-  svg {
-    height:1em;
-    width:.7em;
+.content-header-links {
+  display: none;
+  @include MQ(M) {
+    display: block;
   }
-  // @include MQ(M) {
-  //   max-width: 30px;
-  // }
-  // svg {
-  //   display: inline;
-  // // }
-  // span {
-  //   display: none;
-  //   text-align: center;
-  //   text-transform: uppercase;
-  //   font-size: 12px;
-  //   color: $hugo-white;
-  //   background-color: brown;
-  //   padding: .2em .5em;
-  //   margin-top: -5px;
-  //   @include MQ(M) {
-  //     font-size: 14px;
-  //     margin-top: -8px;
-  //   }
-  // }
-}
-
-a.edit-link {
-  font-size: 1.2em;
   position: absolute;
-  top: -40px;
   right: 0px;
-  @include MQ(L) {
-    font-size: .7em;
-    position: fixed;
-    top: $site-header-height + 40px;
-    right: 2em;
-  }
-  .edit-text {
-    display: none;
-    @include MQ(L) {
-      display: inline;
-      margin-right: .15em;
+  top: 0px;
+  text-transform:uppercase;
+  width:110px;
+  // text-align:center;
+  a {
+    position: relative;
+    @include card(1, 3);
+    display: inline-block;
+    width: 100%;
+    color: $base-font-color;
+    padding: 4px 6px;
+    vertical-align: middle;
+    height: 36px;
+    line-height: 36px;
+    &:hover {
+      color: $default-anchor-color;
+    }
+    span {
+      font-size: 12px;
+      height: 36px;
+      position: relative;
+      bottom: 4px;
+      line-height: 36px;
+      vertical-align: middle;
       text-transform: uppercase;
+      &.edit {
+        bottom:6px;
+      }
+      &.godocs {
+        margin-right:10px;
+      }
+    }
+    i.icon-pencil {
+      font-size:24px;
+      position:relative;
+      bottom:4px;
+    }
+    svg {
+      height: 24px;
+      width: 24px;
+      display:inline;
     }
   }
 }

themes/hugodocs/pipeline/scss/pages/_homepage.scss

@@ -30,6 +30,7 @@ main#homepage {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+  flex-shrink: 0;
   .homepage-card {
     @include card(1, 3);
     color: inherit;
@@ -37,13 +38,16 @@ main#homepage {
     background-color: $body-bg-color;
     margin-bottom: .5em;
     padding: 16px 8px;
+    flex-shrink: 0;
     @include MQ(M) {
+      flex: 1 0 #{$M * .9 * .48};
       max-width: $M * .9 * .48;
       margin-bottom: 1em;
     }
     @include MQ(L) {
-     max-width: 860px * .9 * .31;
-     margin-left:.2em;
+      flex: 1 0 #{860px * .9 * .31};
+      max-width: 860px * .9 * .31;
+      margin-left: .2em;
     }
     h2 {
       font-size: 1em;