Add fluid type to showcase details box

The fluid type, which has a safe backup, will help longer titles stay
within the constrained div on a variety of screens
This commit is contained in:
budparr 2018-02-14 09:43:20 -05:00 committed by Bjørn Erik Pedersen
parent 4ef59e0082
commit 78790fcb18
4 changed files with 13 additions and 2 deletions

View File

@ -53,7 +53,7 @@ Showcase: {{ .Title }}
{{define "sc-details"}} {{define "sc-details"}}
<div class="mt4 mt0-ns nested-links"> <div class="mt4 mt0-ns nested-links">
<div class="ba b--light-gray bg-white pa3"> <div class="ba b--light-gray bg-white pa3">
<h1 class="f3 mt0">{{.Title}}</h1> <h1 class="f2-fluid mt0">{{.Title}}</h1>
{{ with .Params.siteURL }} {{ with .Params.siteURL }}
<a href="{{ . }}" class="db f5 mb1">{{ . | replaceRE "^https?://(www\\.)?([^/]+).*" "$2"}} {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a> <a href="{{ . }}" class="db f5 mb1">{{ . | replaceRE "^https?://(www\\.)?([^/]+).*" "$2"}} {{ partial "svg/link-ext.svg" (dict "size" "10") }}</a>
{{ end }} {{ end }}

View File

@ -0,0 +1,10 @@
.f2-fluid {
font-size: 2.25rem;
}
@media (--breakpoint-large) {
.f2-fluid {
font-size: 1.25rem;
font-size: calc(0.875rem + 0.5 * ((100vw - 20rem) / 60));
}
}

View File

@ -18,6 +18,7 @@
@import '_content'; @import '_content';
@import '_content-tables'; @import '_content-tables';
@import '_definition-lists'; @import '_definition-lists';
@import '_fluid-type';
@import '_font-family'; @import '_font-family';
/*@import '_hljs';*/ /*@import '_hljs';*/
@import '_hugo-internal-template-styling'; @import '_hugo-internal-template-styling';

File diff suppressed because one or more lines are too long