diff options
| author | Matthew Rhone <matthew.rhone@outlook.com> | 2017-01-08 22:01:10 +0300 |
|---|---|---|
| committer | Matthew Rhone <matthew.rhone@outlook.com> | 2017-01-08 22:01:10 +0300 |
| commit | d516f927a5234713fd3860fcab397ac9b07cb45c (patch) | |
| tree | 3a40762a0d4565dd3abf585707f24cb48d48cc96 | |
| parent | 7da890601ea9651f4f9b39e222feff8b47d846a6 (diff) | |
Kill static font size in header, make responsive.
| -rw-r--r-- | layouts/partials/header.html | 6 | ||||
| -rw-r--r-- | postcss/src/style.min.css | 2 | ||||
| -rw-r--r-- | static/css/style.min.css | 18 |
3 files changed, 23 insertions, 3 deletions
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 6b00759..e0ef793 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -24,6 +24,6 @@ <li class="navbar-item"><a class="navbar-link" href="{{ .URL }}">{{ .Name }}</a></li>{{ end }} </ul> </div> - <div class="header"><span style="font-size: 34px;"> - <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></span> - {{ if .Site.Params.description }}<span style="font-size:12px;"> | <i>{{ .Site.Params.description }}</i> </span>{{end}}</div> + <div class="header"> + <a href="{{ .Site.BaseURL }}" class="title">{{ .Site.Title }}</a> + {{ if .Site.Params.description }}<span class="title-description"> | <i>{{ .Site.Params.description }}</i> </span>{{end}}</div> diff --git a/postcss/src/style.min.css b/postcss/src/style.min.css index 5c271fd..1bae738 100644 --- a/postcss/src/style.min.css +++ b/postcss/src/style.min.css @@ -33,6 +33,8 @@ h1,h2,h3,h4,h5,h6 {color: $headlineTextColor;} opacity: 0.5; } .header, .tags {color:#fff;font-weight:700;} +.header a.title {font-size: responsive 34px 38 px;} +.header span.title-description {font-size: responsive 15px 19px;} a.navbar-link, a.post-title-link{font-weight:700;} code {color: $codeTextColor;} a {color: $linkTextColor;} diff --git a/static/css/style.min.css b/static/css/style.min.css index 027206f..5b484b8 100644 --- a/static/css/style.min.css +++ b/static/css/style.min.css @@ -42,6 +42,24 @@ h1,h2,h3,h4,h5,h6 {color: #676767;} opacity: 0.5; } .header, .tags {color:#fff;font-weight:700;} +.header a.title {font-size: calc(34px + 4 * ((100vw - 420px) / 860));} +@media screen and (min-width: 1280px) { + .header a.title { font-size: 38; + } +} +@media screen and (max-width: 420px) { + .header a.title { font-size: 34px; + } +} +.header span.title-description {font-size: calc(15px + 4 * ((100vw - 420px) / 860));} +@media screen and (min-width: 1280px) { + .header span.title-description { font-size: 19px; + } +} +@media screen and (max-width: 420px) { + .header span.title-description { font-size: 15px; + } +} a.navbar-link, a.post-title-link{font-weight:700;} code {color: #866c6c;} a {color: #676767;} |