KB public UI: fix viewport size

- add viewport header
- adjust headline sizes for mobile
This commit is contained in:
Felix Niklas 2019-06-06 10:26:42 +02:00
parent 986285c216
commit f34ce5c292
2 changed files with 32 additions and 5 deletions

View file

@ -88,6 +88,10 @@ html {
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
color: $light-color; color: $light-color;
@include phone {
font-size: 17px;
}
} }
body { body {
@ -103,29 +107,45 @@ h1 {
line-height: 1.12; line-height: 1.12;
margin: .8em 0 .6em; margin: .8em 0 .6em;
font-weight: normal; font-weight: normal;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }
@include phone { @include phone {
font-size: 2em; font-size: 28px;
margin: 1em 0 .8em;
} }
} }
h2 { h2 {
font-size: 2em; font-size: 1.8em;
font-weight: normal; font-weight: 500;
line-height: 1.1; line-height: 1.1;
margin: 1em 0 .4em; margin: 1em 0 .4em;
@include phone {
font-size: 24px;
margin: 1.2em 0 .5em;
}
} }
h3 { h3 {
font-size: 1.5em; font-size: 1.4em;
font-weight: normal; font-weight: 500;
line-height: 1.2; line-height: 1.2;
margin: 1.33em 0 .55em; margin: 1.33em 0 .55em;
letter-spacing: .015em; letter-spacing: .015em;
@include phone {
font-size: 19px;
line-height: 1.3;
margin: 1.2em 0 .75em;
}
} }
h4 { h4 {
@ -151,6 +171,11 @@ ol {
padding-left: 1.5em; padding-left: 1.5em;
} }
strong,
b {
font-weight: 500;
}
.topbar { .topbar {
font-size: 0.875em; font-size: 0.875em;
display: flex; display: flex;
@ -782,6 +807,7 @@ ol {
@include phone { @include phone {
font-size: 35px; font-size: 35px;
margin: 10px 0 13px;
} }
} }
} }

View file

@ -8,6 +8,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title><%= kb_public_page_title %></title> <title><%= kb_public_page_title %></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<%= stylesheet_link_tag "knowledge_base.css", :media => 'all' %> <%= stylesheet_link_tag "knowledge_base.css", :media => 'all' %>
<%= render 'knowledge_base/public/inline_stylesheet', knowledge_base: @knowledge_base %> <%= render 'knowledge_base/public/inline_stylesheet', knowledge_base: @knowledge_base %>