Fix flexbox issues with Safari

This commit is contained in:
Ryan Watters committed 2017-02-07 18:56:43 -06:00
1 parent 99ee283bba
commit b8de89b402
5 files changed
+70 -75

No files matched your search

+5 -4
View File
@@ -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>
+14 -17
View File
@@ -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 }}
@@ -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;
}
}
}
@@ -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;
+1 -1
View File
@@ -1 +1 @@
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{margin:0px;padding:0px;outline:none;border:none;font-size:18px;font-family:"muli","Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;color:#333;line-height:1.6;font-weight:300}body{font-size:90%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media only screen and (min-width: 760px){body{font-size:95%}}@media only screen and (min-width: 960px){body{font-size:100%}}p{margin-top:0px;margin-bottom:1.5em;line-height:1.6}@font-face{font-family:'fontello';src:url("/fonts/fontello/fontello.eot");src:url("/fonts/fontello/fontello.woff2") format("woff2"),url("/fonts/fontello/fontello.woff") format("woff"),url("/fonts/fontello/fontello.ttf") format("truetype"),url("/fonts/fontello/fontello.svg?78165468#fontello") format("svg");font-weight:normal;font-style:normal}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"fontello";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-alert:before{content:'\e810'}.icon-angle-double-right:before{content:'\f101'}.icon-attach:before{content:'\e820'}.icon-attention:before{content:'\e80f'}.icon-bell:before{content:'\e80d'}.icon-cancel:before{content:'\e81e'}.icon-caution:before{content:'\e80f'}.icon-chrome:before{content:'\e841'}.icon-clipboard:before{content:'\e817'}.icon-code:before{content:'\f121'}.icon-cog-alt:before{content:'\e814'}.icon-css3:before{content:'\f13c'}.icon-docs:before{content:'\f15c'}.icon-download:before{content:'\e815'}.icon-facebook-official:before{content:'\f230'}.icon-firefox:before{content:'\e840'}.icon-flag:before{content:'\e813'}.icon-forum:before{content:'\f03d';margin-right:.3em}.icon-github:before{content:'\f09b'}.icon-gitter:before{content:'\e819'}.icon-go:before{content:'\e801'}.icon-golang:before{content:'\e801'}.icon-heart:before{content:'\e81d'}.icon-help:before{content:'\e81b'}.icon-home:before{content:'\e812'}.icon-html.input:before{content:'\e81f'}.icon-html5:before{content:'\e800'}.icon-html:before{content:'\e800'}.icon-hugo:before{content:'\e81f'}.icon-ie:before{content:'\e843'}.icon-info:before{content:'\e811'}.icon-instagram:before{content:'\f32d'}.icon-javascript:before{content:'\e802'}.icon-js:before{content:'\e802'}.icon-json:before{content:'\e81c'}.icon-link:before{content:'\e816'}.icon-linkedin:before{content:'\f30c'}.icon-love:before{content:'\e81d'}.icon-mail:before{content:'\e821'}.icon-markdown:before{content:'\e80e'}.icon-note:before{content:'\e80d'}.icon-opera:before{content:'\e842'}.icon-pdf:before{content:'\f1c1'}.icon-pencil:before{content:'\e80c'}.icon-picture:before{content:'\e808'}.icon-quote-left:before{content:'\e809'}.icon-quote-right:before{content:'\e80a'}.icon-sass:before{content:'\e803'}.icon-search:before{content:'\e80b'}.icon-share:before{content:'\f1e0'}.icLine truncated
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{margin:0px;padding:0px;outline:none;border:none;font-size:18px;font-family:"muli","Helvetica Neue","Helvetica","Roboto","Arial",sans-serif;color:#333;line-height:1.6;font-weight:300}body{font-size:90%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media only screen and (min-width: 760px){body{font-size:95%}}@media only screen and (min-width: 960px){body{font-size:100%}}p{margin-top:0px;margin-bottom:1.5em;line-height:1.6}@font-face{font-family:'fontello';src:url("/fonts/fontello/fontello.eot");src:url("/fonts/fontello/fontello.woff2") format("woff2"),url("/fonts/fontello/fontello.woff") format("woff"),url("/fonts/fontello/fontello.ttf") format("truetype"),url("/fonts/fontello/fontello.svg?78165468#fontello") format("svg");font-weight:normal;font-style:normal}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"fontello";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-alert:before{content:'\e810'}.icon-angle-double-right:before{content:'\f101'}.icon-attach:before{content:'\e820'}.icon-attention:before{content:'\e80f'}.icon-bell:before{content:'\e80d'}.icon-cancel:before{content:'\e81e'}.icon-caution:before{content:'\e80f'}.icon-chrome:before{content:'\e841'}.icon-clipboard:before{content:'\e817'}.icon-code:before{content:'\f121'}.icon-cog-alt:before{content:'\e814'}.icon-css3:before{content:'\f13c'}.icon-docs:before{content:'\f15c'}.icon-download:before{content:'\e815'}.icon-facebook-official:before{content:'\f230'}.icon-firefox:before{content:'\e840'}.icon-flag:before{content:'\e813'}.icon-forum:before{content:'\f03d';margin-right:.3em}.icon-github:before{content:'\f09b'}.icon-gitter:before{content:'\e819'}.icon-go:before{content:'\e801'}.icon-golang:before{content:'\e801'}.icon-heart:before{content:'\e81d'}.icon-help:before{content:'\e81b'}.icon-home:before{content:'\e812'}.icon-html.input:before{content:'\e81f'}.icon-html5:before{content:'\e800'}.icon-html:before{content:'\e800'}.icon-hugo:before{content:'\e81f'}.icon-ie:before{content:'\e843'}.icon-info:before{content:'\e811'}.icon-instagram:before{content:'\f32d'}.icon-javascript:before{content:'\e802'}.icon-js:before{content:'\e802'}.icon-json:before{content:'\e81c'}.icon-link:before{content:'\e816'}.icon-linkedin:before{content:'\f30c'}.icon-love:before{content:'\e81d'}.icon-mail:before{content:'\e821'}.icon-markdown:before{content:'\e80e'}.icon-note:before{content:'\e80d'}.icon-opera:before{content:'\e842'}.icon-pdf:before{content:'\f1c1'}.icon-pencil:before{content:'\e80c'}.icon-picture:before{content:'\e808'}.icon-quote-left:before{content:'\e809'}.icon-quote-right:before{content:'\e80a'}.icon-sass:before{content:'\e803'}.icon-search:before{content:'\e80b'}.icon-share:before{content:'\f1e0'}.icLine truncated