diff --git a/src/app/assets/stylesheets/_themes.scss b/src/app/assets/stylesheets/_themes.scss
index fbdd930061de57cf2ece0162644d3a22e2a835c7..bd1b310d5cd1441b72fcab48624958b5765ac6e9 100755
--- a/src/app/assets/stylesheets/_themes.scss
+++ b/src/app/assets/stylesheets/_themes.scss
@@ -332,6 +332,11 @@ $themes: (
}
}
-.static-page {
- padding-top: 1.5rem;
-}
\ No newline at end of file
+.content-page {
+ padding-top: 1rem;
+ width: 92%;
+ max-width: $content-max-width;
+ margin: 0 auto;
+}
+
+
diff --git a/src/app/assets/stylesheets/_variables.scss b/src/app/assets/stylesheets/_variables.scss
index 4fab274f6bbf8bdd365ef6f8ef05cf4f59e439fd..c89fff9bf4643ef30f29f309b360571d59dd44b8 100755
--- a/src/app/assets/stylesheets/_variables.scss
+++ b/src/app/assets/stylesheets/_variables.scss
@@ -34,6 +34,8 @@ $color-border-light-lightest: #f6f6f6;
$color-border-dark: #232F38;
$color-border-dark-lightest: #2B3A45;
+$content-max-width: 46em;
+
$font-primary:
// Safari for OS X and iOS (San Francisco)
-apple-system,
diff --git a/src/app/assets/stylesheets/foundation-overrides.scss b/src/app/assets/stylesheets/foundation-overrides.scss
index 0020d87c2c9d0dd8e03a3604cc5c4a507b305689..9fd958b40c7f3600fa65479cb389a320998db6d6 100644
--- a/src/app/assets/stylesheets/foundation-overrides.scss
+++ b/src/app/assets/stylesheets/foundation-overrides.scss
@@ -1,5 +1,17 @@
$body-font-family: $font-primary;
+h1 {
+ font-size: 2rem;
+ font-weight: bold;
+ margin-bottom: 1rem;
+}
+
+h2 {
+ font-size: 1.75rem;
+ font-weight: bold;
+ margin-bottom: 1rem;
+}
+
.menu > li > a {
line-height: 1.5rem;
}
diff --git a/src/app/assets/stylesheets/markdown.scss b/src/app/assets/stylesheets/markdown.scss
index 811b0dac493f9eecdd5d8abf5ae86d64a00698bd..4c27042ccc86a6a646b399a8dff46ca55e7dacf4 100644
--- a/src/app/assets/stylesheets/markdown.scss
+++ b/src/app/assets/stylesheets/markdown.scss
@@ -33,27 +33,28 @@
}
h1 {
- margin: 2.5rem 0 .3rem;
- font-size: 160%
+ margin: 1.5rem 0 1rem;
+ font-size: 180%;
+ font-weight: bold;
}
h2 {
- margin: 2.5rem 0 .3rem;
+ margin: 1.5rem 0 1rem;
font-size: 140%;
}
h3 {
- margin: 2rem 0 0.3rem;
+ margin: 1rem 0 0.5rem;
font-size: 120%;
}
h4 {
- margin: 1.5rem 0 0.2rem;
+ margin: 1rem 0 0.5rem;
font-size: 110%;
}
h5 {
- margin: 1rem 0 0.2rem;
+ margin: 1rem 0 0.5rem;
font-size: 100%;
}
h6 {
- margin: 1rem 0 0.2rem;
+ margin: 1rem 0 0.5rem;
font-size: 90%;
}
diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx
index b671f36fea37f524a2ca68bfbcbdebb14328c483..249cd2b9c2abf2262cc40510b4a0c3e784594349 100644
--- a/src/app/components/App.jsx
+++ b/src/app/components/App.jsx
@@ -235,16 +235,18 @@ class App extends React.Component {
)}
<div className="App__content">
- {process.env.BROWSER &&
- ip &&
- new_visitor &&
- this.state.showBanner ? (
- <WelcomePanel
- setShowBannerFalse={this.setShowBannerFalse}
- />
- ) : null}
- {callout}
- {children}
+ <div className="App__content-container">
+ {process.env.BROWSER &&
+ ip &&
+ new_visitor &&
+ this.state.showBanner ? (
+ <WelcomePanel
+ setShowBannerFalse={this.setShowBannerFalse}
+ />
+ ) : null}
+ {callout}
+ {children}
+ </div>
</div>
<Dialogs />
<Modals />
diff --git a/src/app/components/App.scss b/src/app/components/App.scss
index 25a0282810ca001a398197a70c7cc81f1ff298b4..79b6421b9f6057615bb414978ecd4cb0efb586cf 100644
--- a/src/app/components/App.scss
+++ b/src/app/components/App.scss
@@ -5,21 +5,15 @@
.App__content {
margin-top: 1rem;
+}
- // /* Small only */
- // @media screen and (max-width: 39.9375em) {
- // margin-top: 2.25rem;
- // }
- // /* Medium only */
- // @media screen and (min-width: 40em) and (max-width: 63.9375em) {
- // margin-top: 3rem;
- // }
- // /* Large and above */
- // @media screen and (min-width: 64.063em) {
- // margin-top: 3rem;
-
+.App__content-container {
+ padding-top: 1rem;
+ background: #fff;
}
+
+
.mini-header .App__content {
margin-top: 0;
}
diff --git a/src/app/components/cards/PostFull.scss b/src/app/components/cards/PostFull.scss
index b96cbdbdf6fc0fc653cd50355713dd72f4ef42b2..b7df0b653729725ec7be1a5946af3edc55603472 100644
--- a/src/app/components/cards/PostFull.scss
+++ b/src/app/components/cards/PostFull.scss
@@ -2,7 +2,7 @@
@include themify($themes) {
background-color: themed('moduleBackgroundColor');
}
- padding-top: 1.5rem;
+ padding-top: 1rem;
}
.PostFull {
diff --git a/src/app/components/modules/SignUp.scss b/src/app/components/modules/SignUp.scss
index bb5f2971ac5c87b404a0c140fa4a3e5b68b582f4..bd29bd06e83e0b3d493477a3e5e29bb48d4fb931 100644
--- a/src/app/components/modules/SignUp.scss
+++ b/src/app/components/modules/SignUp.scss
@@ -1,5 +1,6 @@
.SignUp {
padding: 1rem 1rem 2rem 1rem;
+
a.button {
margin-top: 0.5rem;
}
diff --git a/src/app/components/pages/Faq.jsx b/src/app/components/pages/Faq.jsx
index 371815f7e01d8d36dbb2c227085490b8fe390192..c859ae992d4c93153d0625b894b7db9efec5c7c4 100644
--- a/src/app/components/pages/Faq.jsx
+++ b/src/app/components/pages/Faq.jsx
@@ -4,10 +4,8 @@ import HelpContent from 'app/components/elements/HelpContent';
class Faq extends React.Component {
render() {
return (
- <div className="row">
- <div className="column large-8 medium-10 small-12">
- <HelpContent path="faq" />
- </div>
+ <div className="row content-page">
+ <HelpContent path="faq" />
</div>
);
}
diff --git a/src/app/components/pages/PostsIndex.scss b/src/app/components/pages/PostsIndex.scss
index 114727407d9dc8cf141e91eb013abaed8e993bf7..50664bdd11681b2e43a57032b8a8c148221d95e7 100644
--- a/src/app/components/pages/PostsIndex.scss
+++ b/src/app/components/pages/PostsIndex.scss
@@ -8,7 +8,6 @@
}
.PostsIndex {
- padding-top: 1rem;
.articles__h1--no-wrap {
white-space: nowrap;
}
diff --git a/src/app/components/pages/Privacy.jsx b/src/app/components/pages/Privacy.jsx
index 8976daba5e318c25175a453650a9810f16997e44..445e9a0b132b5d3b08ff14c358d3c830f489dd5d 100644
--- a/src/app/components/pages/Privacy.jsx
+++ b/src/app/components/pages/Privacy.jsx
@@ -3,8 +3,8 @@ import React from 'react';
class Privacy extends React.Component {
render() {
return (
- <div className="Privacy row">
- <div className="column large-12">
+ <div className="Privacy content-page row">
+ <div className="column">
<h1>Steemit, Inc Privacy Policy</h1>
<h2>Effective: May 25, 2018</h2>
<p className="c0">
diff --git a/src/app/components/pages/RecoverAccountStep1.jsx b/src/app/components/pages/RecoverAccountStep1.jsx
index ee997d959c9f8fa54a05a6da0d23ad49b299fe6f..83c745201effbd90862aba89ed4d65d8ed432229 100644
--- a/src/app/components/pages/RecoverAccountStep1.jsx
+++ b/src/app/components/pages/RecoverAccountStep1.jsx
@@ -190,7 +190,7 @@ class RecoverAccountStep1 extends React.Component {
<div className="RestoreAccount SignUp">
{show_account_and_passwords && (
<div className="row">
- <div className="column large-4">
+ <div className="column">
<h2>{tt('navigation.stolen_account_recovery')}</h2>
<p>
{tt(
diff --git a/src/app/components/pages/RecoverAccountStep1.scss b/src/app/components/pages/RecoverAccountStep1.scss
index 6cf573ecbcadb8f311f4c349f94f266e99c41ee8..8aa1943ac7255f02b06036653726a6fe1106f147 100644
--- a/src/app/components/pages/RecoverAccountStep1.scss
+++ b/src/app/components/pages/RecoverAccountStep1.scss
@@ -1,6 +1,8 @@
.RestoreAccount {
-
+ width: 92%;
+ max-width: 37.5em;
+ margin: 0 auto;
.button {
text-decoration: none;
font-weight: bold;
diff --git a/src/app/components/pages/TagsIndex.jsx b/src/app/components/pages/TagsIndex.jsx
index 7199f4f1513e24624f7c76b43178cdde21cdddb1..768a8372cc940f128cc6c0bf284683770d85417d 100644
--- a/src/app/components/pages/TagsIndex.jsx
+++ b/src/app/components/pages/TagsIndex.jsx
@@ -113,7 +113,7 @@ export default class TagsIndex extends React.Component {
<div className="TagsIndex row">
<div className="column">
<br />
- <h4>{tt('g.trending_topics')}</h4>
+ <h1>{tt('g.trending_topics')}</h1>
<table>
<thead>
<tr>{cols}</tr>
diff --git a/src/app/components/pages/Tos.jsx b/src/app/components/pages/Tos.jsx
index 8afcf43e1899d7ff1f0c670706ce18c2d67d688c..96c92aca9bd5d805f5cb8bc9cf12a639d73eb192 100644
--- a/src/app/components/pages/Tos.jsx
+++ b/src/app/components/pages/Tos.jsx
@@ -4,10 +4,8 @@ import HelpContent from 'app/components/elements/HelpContent';
class Tos extends React.Component {
render() {
return (
- <div className="row">
- <div className="column large-8 medium-10 small-12">
- <HelpContent path="tos" title="Terms of Service" />
- </div>
+ <div className="row content-page">
+ <HelpContent path="tos" title="Terms of Service" />
</div>
);
}
diff --git a/src/app/components/pages/Welcome.jsx b/src/app/components/pages/Welcome.jsx
index 98ff4049ea16d5f9416c95b07493b83f34651037..7afeab3384e6e677dd2f8083b4ee9702f02008d7 100644
--- a/src/app/components/pages/Welcome.jsx
+++ b/src/app/components/pages/Welcome.jsx
@@ -4,10 +4,8 @@ import HelpContent from 'app/components/elements/HelpContent';
class Welcome extends React.Component {
render() {
return (
- <div className="row static-page">
- <div className="column large-8 medium-10 small-12">
- <HelpContent path="welcome" />
- </div>
+ <div className="row content-page">
+ <HelpContent path="welcome" />
</div>
);
}
diff --git a/src/app/help/en/welcome.md b/src/app/help/en/welcome.md
index 75d8725c00b5f616529e0e52f05afb83ebc8c636..676ffe06dc62e8f20d199f6677eca39ddc207a6d 100644
--- a/src/app/help/en/welcome.md
+++ b/src/app/help/en/welcome.md
@@ -1,5 +1,5 @@
<span id="disable_router_nav_history_direction_check"></span>
-## Welcome to Steemit!
+# Welcome to Steemit!
This page is full of information to help you learn about the platform and become a successful Steemian. You can return to this page at any time by clicking on the "Welcome" link in the main menu. There is a table of contents below to help you navigate the page.