KB public UI: fix viewport size
- add viewport header - adjust headline sizes for mobile
This commit is contained in:
parent
986285c216
commit
f34ce5c292
2 changed files with 32 additions and 5 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 %>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue