From 6a7e61ee1d077c8f269cb0f7b29527999f25e16f Mon Sep 17 00:00:00 2001 From: Arshad Khan Date: Fri, 11 Nov 2016 05:22:56 +0530 Subject: [PATCH 1/4] footer layout improved --- src/containers/App/index.js | 32 ++++++++++++++------------ src/containers/App/style.scss | 43 +++++++++++++++++++---------------- 2 files changed, 41 insertions(+), 34 deletions(-) diff --git a/src/containers/App/index.js b/src/containers/App/index.js index cc4b04560..1d0e752cb 100644 --- a/src/containers/App/index.js +++ b/src/containers/App/index.js @@ -37,9 +37,11 @@ class App extends Component { {children}
- + +
- + +

Navigate

  • About
  • Contact
    • @@ -50,7 +52,8 @@ class App extends Component {
- + +

Useful sites

- -

© QURAN.COM. ALL RIGHTS RESERVED 2016

-

- Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran){' '} - is a pro bono project. -

- - - - -
    + +

    Other links

    + + +

    + Quran.com ( also known as The Noble Quran, Al Quran, Holy Quran, Koran ){' '} + is a pro bono project. +

    + +

    © QURAN.COM. ALL RIGHTS RESERVED 2016

    + +
diff --git a/src/containers/App/style.scss b/src/containers/App/style.scss index 41532991d..ea87437a2 100644 --- a/src/containers/App/style.scss +++ b/src/containers/App/style.scss @@ -4,44 +4,47 @@ font-size: 14px; margin-top: 50px; - .about, - .links{ + .about, .links{ padding-top: 30px; + text-transform: uppercase; .list{ padding-left: 0px; :global(li){ list-style: none; - padding: 3% 0%; + padding: 5px 0; } } - } - .about{ - a{ + p{ + line-height: 30px; color: #fff; } - } - .links{ - text-transform: uppercase; a{ + font-size: 13px; color: rgba(#fff, 0.5); } - } -} -.seo{ - padding-top: 15px; - :global(li){ - &:first-child{ - border: none; + a:hover{ + color: #fff; } - - border-left: 1px solid rgba(#fff, 0.5); } + :global(a){ - color: rgba(#fff, 0.5);; - white-space: pre; + -webkit-transition: color .15s ease-in-out; + -moz-transition: color .15s ease-in-out; + -o-transition: color .15s ease-in-out; + -ms-transition: color .15s ease-in-out; + transition: color .15s ease-in-out; } + + .links { + &:last-child{ + p{ + color: rgba(#fff, 0.5); + } + } + } + } From dd9af3406bb4937bab0e5a2616e5d50943238e1f Mon Sep 17 00:00:00 2001 From: Arshad Khan Date: Mon, 14 Nov 2016 00:49:58 +0530 Subject: [PATCH 2/4] quick links layout improved --- src/components/Home/QuickSurahs/index.js | 39 ++++++++++++------------ src/containers/Home/index.js | 4 +-- src/containers/Home/style.scss | 22 +++++++++++-- 3 files changed, 41 insertions(+), 24 deletions(-) diff --git a/src/components/Home/QuickSurahs/index.js b/src/components/Home/QuickSurahs/index.js index b7d79ba35..a23a30c80 100644 --- a/src/components/Home/QuickSurahs/index.js +++ b/src/components/Home/QuickSurahs/index.js @@ -2,18 +2,20 @@ import React from 'react'; import debug from '../../../helpers/debug'; import Link from 'react-router/lib/Link'; +const styles = require('containers/Home/style.scss'); + export default () => { debug('component:Index', 'QuickSurahs'); const isFriday = new Date().getDay() === 5; return ( - -
    -
  • Quick links:
    • +
    +

    + Quick links: { isFriday && -
  • + { > Surah Al-Kahf - {' '}| -
    • + } -
  • + Surah Yasin (Yaseen) - {' '}| -
    • -
  • + + + Surah Ar-Rahman - {' '}| -
    • + + -
  • + Surah Al Mulk - {' '}| -
    • -
  • + + + { > Ayat Al-Kursi -
    • -

- ); + + + ); }; diff --git a/src/containers/Home/index.js b/src/containers/Home/index.js index 285276ccf..a24ffeca4 100644 --- a/src/containers/Home/index.js +++ b/src/containers/Home/index.js @@ -22,9 +22,9 @@ function Home(props) {
+

- SURAHS (CHAPTERS) - + SURAHS (CHAPTERS)

diff --git a/src/containers/Home/style.scss b/src/containers/Home/style.scss index 11e28f9c8..276e8f4d4 100644 --- a/src/containers/Home/style.scss +++ b/src/containers/Home/style.scss @@ -2,12 +2,28 @@ .list{ .title{ - padding: 50px 0px; + padding: 20px 0; font-size: 14px; margin: 0px; - @media(max-width: $screen-xs-max) { - padding: 10px 0; + span { + margin: 0; + line-height: 2; + a { + padding: 0 15px; + } + &:after { + content: '|'; + } + &:first-child, &:last-child{ + &:after { + content: none; + } + } + } + + &:last-child{ + border-bottom: solid 2px rgba(0,0,0,.05) } } } From 2c9eccf27cbc097bc2901fc1b6029b2094e41a4f Mon Sep 17 00:00:00 2001 From: Arshad Khan Date: Mon, 14 Nov 2016 00:59:34 +0530 Subject: [PATCH 3/4] Update index.js --- src/containers/Home/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/Home/index.js b/src/containers/Home/index.js index a24ffeca4..1b0832c97 100644 --- a/src/containers/Home/index.js +++ b/src/containers/Home/index.js @@ -24,7 +24,7 @@ function Home(props) {

- SURAHS (CHAPTERS) + SURAHS (CHAPTERS)

From f54ec027f616bd2fd89ce9aa9bfc6ace6193e114 Mon Sep 17 00:00:00 2001 From: Arshad Khan Date: Mon, 14 Nov 2016 01:12:12 +0530 Subject: [PATCH 4/4] Adding margin to quick links section --- src/containers/Home/style.scss | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/containers/Home/style.scss b/src/containers/Home/style.scss index 276e8f4d4..e1fd35f7b 100644 --- a/src/containers/Home/style.scss +++ b/src/containers/Home/style.scss @@ -1,11 +1,11 @@ @import '../../styles/variables.scss'; -.list{ - .title{ +.list { + .title { padding: 20px 0; font-size: 14px; - margin: 0px; - + margin-top: 20px; + span { margin: 0; line-height: 2; @@ -15,14 +15,15 @@ &:after { content: '|'; } - &:first-child, &:last-child{ + &:first-child, &:last-child { &:after { content: none; } } } - - &:last-child{ + + &:last-child { + margin-top: 25px; border-bottom: solid 2px rgba(0,0,0,.05) } }