From a993d527ae2a0e30d55816df9b7f75db877a40e0 Mon Sep 17 00:00:00 2001
From: Pon Kattera <kattera@gmail.com>
Date: Sun, 1 Jul 2018 23:00:38 -0700
Subject: [PATCH] Mainly CSS tweaks to fix padding and alignment of content
---
src/app/assets/stylesheets/_themes.scss | 11 +++++++---
src/app/assets/stylesheets/_variables.scss | 2 ++
.../stylesheets/foundation-overrides.scss | 12 ++++++++++
src/app/assets/stylesheets/markdown.scss | 15 +++++++------
src/app/components/App.jsx | 22 ++++++++++---------
src/app/components/App.scss | 18 +++++----------
src/app/components/cards/PostFull.scss | 2 +-
src/app/components/modules/SignUp.scss | 1 +
src/app/components/pages/Faq.jsx | 6 ++---
src/app/components/pages/PostsIndex.scss | 1 -
src/app/components/pages/Privacy.jsx | 4 ++--
.../components/pages/RecoverAccountStep1.jsx | 2 +-
.../components/pages/RecoverAccountStep1.scss | 4 +++-
src/app/components/pages/TagsIndex.jsx | 2 +-
src/app/components/pages/Tos.jsx | 6 ++---
src/app/components/pages/Welcome.jsx | 6 ++---
src/app/help/en/welcome.md | 2 +-
17 files changed, 64 insertions(+), 52 deletions(-)
diff --git a/src/app/assets/stylesheets/_themes.scss b/src/app/assets/stylesheets/_themes.scss
index fbdd93006..bd1b310d5 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 4fab274f6..c89fff9bf 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 0020d87c2..9fd958b40 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 811b0dac4..4c27042cc 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 b671f36fe..249cd2b9c 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 25a028281..79b6421b9 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 b96cbdbdf..b7df0b653 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 bb5f2971a..bd29bd06e 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 371815f7e..c859ae992 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 114727407..50664bdd1 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 8976daba5..445e9a0b1 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 ee997d959..83c745201 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 6cf573ecb..8aa1943ac 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 7199f4f15..768a8372c 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 8afcf43e1..96c92aca9 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 98ff4049e..7afeab338 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 75d8725c0..676ffe06d 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.
--
GitLab