Restructuring and styling of components

2018-07-05 11:15:44 +02:00
parent bcc6a948cb
commit 6dc175c126
9 changed files with 253 additions and 53 deletions
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -4,7 +4,7 @@ import Link from 'gatsby-link'
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'

 const Card = ({ ...props }) => (
-  <div className="m-3 w-full rounded overflow-hidden shadow-lg">
+  <div className="m-4 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
    <img className="w-full" src={ImgSprint} alt="Sprint Work" />
    <div className="px-6 py-4">
      <div className="font-bold text-xl mb-2">
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -5,34 +5,64 @@ import Button from './Button'
 import LogoSaburly from '../images/logo-saburly-colorful.svg'

 let menuClasses =
-  'no-underline mt-4 lg:inline-block opacity-75 lg:mt-0 text-white  hover:opacity-100 uppercase mr-4'
+  'no-underline mt-4 lg:inline-block opacity-100 lg:mt-0 text-white  hover:opacity-100 uppercase mr-4'

 const Footer = () => (
  <footer className="bg-indigo-darker">
-    <img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
-    <p className="text-white font-light">
-      Nam imperdiet et massa ut lacinia. Praesent nec sem ut sem efficitur
-      imperdiet.
-    </p>
-    <h4>Home</h4>
-    <ul className="text-sm">
-      <Link to="/services">
-        <li className={menuClasses}>What We Do</li>
-      </Link>
-      <Link to="/about">
-        <li className={menuClasses}>TEAM</li>
-      </Link>
-      <Link to="/blog">
-        <li className={menuClasses}>BLOG</li>
-      </Link>
-    </ul>
+    <div className="container mx-auto pt-10 pb-10 lg:flex">
+      <div className="lg:w-1/4 p-4">
+        <img src={LogoSaburly} alt="Saburly Logo" className="max-w-full" />
+        <a href="mailto:info@saburly.com">E: info@saburly.com</a>
+        <a href="tel:+46760477717">P: +46760477717</a>
+      </div>

-    <Button
-      text="Contact Us"
-      standard
-      classes="rounded-full text-white hover:shadow"
-      url="/contact"
-    />
+      <div className="lg:w-3/4 ml-10 p-4">
+        <div className="lg:flex items-center justify-between">
+          <h3 className="text-white font-light">
+            Let's start a new project together
+          </h3>
+          <Button
+            text="Contact Us"
+            standard
+            classes="rounded-full text-white hover:shadow"
+            url="/contact"
+          />
+        </div>
+
+        <div className="mt-4 lg:flex justify-between">
+          <nav>
+            <p className="font-thin text-white opacity-70">Sitemap</p>
+            <ul className="list-reset text-sm inline-block">
+              <Link className="block my-2" to="/">
+                <li className={menuClasses}>Home</li>
+              </Link>
+              <Link className="block my-2" to="/services">
+                <li className={menuClasses}>What We Do</li>
+              </Link>
+              <Link className="block my-2" to="/about">
+                <li className={menuClasses}>TEAM</li>
+              </Link>
+              <Link className="block my-2" to="/blog">
+                <li className={menuClasses}>BLOG</li>
+              </Link>
+            </ul>
+          </nav>
+          <div>
+            <p className="font-thin text-white opacity-70">Office - Sweden</p>
+            <p className="text-white my-2 leading-normal">
+              Saburly AB<br />Vretenvägen 13<br />171 54 Solna<br />Sweden
+            </p>
+          </div>
+          <div>
+            <p className="font-thin text-white opacity-70">Office - Bosnia</p>
+            <p className="text-white my-2 leading-normal">
+              Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
+              & Herzegovina
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
  </footer>
 )

--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -22,7 +22,7 @@ const Header = () => (
      </button>

      <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
-        <ul className="text-sm">
+        <ul className="list-reset text-sm">
          <Link to="/services">
            <li className={menuClasses}>What We Do</li>
          </Link>
--- a/src/components/SectionIntro.js
+++ b/src/components/SectionIntro.js
@@ -22,7 +22,7 @@ const IntroDefault = ({ ...props }) => (
    </h1>
    <p
      className={`${props.light ? headlineDark : ''} 
-    font-light leading-normal opacity-75`}
+    font-light leading-normal opacity-70`}
    >
      {props.text}
    </p>
--- a/src/components/Service.js
+++ b/src/components/Service.js
@@ -9,7 +9,7 @@ const Service = ({ ...props }) => (
      alt={`${props.title} agency`}
    />
    <InfoBox
-      classes="bg-white p-8 shadow lg:m-0 opacity-75 lg:max-w-sm"
+      classes="bg-white p-8 shadow lg:m-0 opacity-70 lg:max-w-sm"
      headline={props.title}
      text={props.text}
    />
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -55,7 +55,7 @@ const IndexPage = () => (
        classes="max-w-lg m-auto"
        intro="Services"
        headline="Because beautiful code makes our heart pound"
-        text="We have a passion for great software and design with the help of modern technologies. Custom end-to-end solutions is our speciality and our skilled team can even help you with initial analysis, architecture design, testing and deployments"
+        text="We have a passion for great software and design with the help of modern technologies. Our speciality is custom end-to-end solutions and our skilled team can even help you with initial analysis, architecture design, testing and deployments"
      />
    </section>

@@ -130,7 +130,7 @@ const IndexPage = () => (
      />
    </section>

-    <section className="text-center p-3">
+    <section className="container mx-auto text-center p-3">
      <SectionIntro
        intro="Blog & Social Media"
        headline="But occasionally we find the time to have fun and publish stuff"
@@ -138,9 +138,13 @@ const IndexPage = () => (
      <div className="lg:flex justify-center mt-8">
        <Card />
        <Card />
-        <Card />
      </div>
-      <Button filled text="More Posts" url="/blog" classes="rounded-full" />
+      <Button
+        standard
+        text="More Posts"
+        url="/blog"
+        classes="mt-2 mb-8 rounded-full text-grey-darker hover:shadow"
+      />
    </section>
  </main>
 )
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -10,12 +10,14 @@
 .bg-saburly-indigo svg {
  position: absolute;
  bottom: 0;
+  margin-bottom: -1px;
 }

 .bg-saburly-indigolight svg {
  position: absolute;
  top: 0;
  transform: rotate(180deg);
+  margin-top: -1px;
 }

 .bg-saburly-indigolight {
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -3402,12 +3402,28 @@ table {
  opacity: .25;
 }

+.opacity-30 {
+  opacity: .3;
+}
+
 .opacity-50 {
  opacity: .5;
 }

-.opacity-75 {
-  opacity: .75;
+.opacity-60 {
+  opacity: .6;
+}
+
+.opacity-70 {
+  opacity: .7;
+}
+
+.opacity-80 {
+  opacity: .8;
+}
+
+.opacity-90 {
+  opacity: .9;
 }

 .opacity-100 {
@@ -3422,12 +3438,28 @@ table {
  opacity: .25;
 }

+.hover\:opacity-30:hover {
+  opacity: .3;
+}
+
 .hover\:opacity-50:hover {
  opacity: .5;
 }

-.hover\:opacity-75:hover {
-  opacity: .75;
+.hover\:opacity-60:hover {
+  opacity: .6;
+}
+
+.hover\:opacity-70:hover {
+  opacity: .7;
+}
+
+.hover\:opacity-80:hover {
+  opacity: .8;
+}
+
+.hover\:opacity-90:hover {
+  opacity: .9;
 }

 .hover\:opacity-100:hover {
@@ -7646,12 +7678,28 @@ table {
    opacity: .25;
  }

+  .sm\:opacity-30 {
+    opacity: .3;
+  }
+
  .sm\:opacity-50 {
    opacity: .5;
  }

-  .sm\:opacity-75 {
-    opacity: .75;
+  .sm\:opacity-60 {
+    opacity: .6;
+  }
+
+  .sm\:opacity-70 {
+    opacity: .7;
+  }
+
+  .sm\:opacity-80 {
+    opacity: .8;
+  }
+
+  .sm\:opacity-90 {
+    opacity: .9;
  }

  .sm\:opacity-100 {
@@ -7666,12 +7714,28 @@ table {
    opacity: .25;
  }

+  .sm\:hover\:opacity-30:hover {
+    opacity: .3;
+  }
+
  .sm\:hover\:opacity-50:hover {
    opacity: .5;
  }

-  .sm\:hover\:opacity-75:hover {
-    opacity: .75;
+  .sm\:hover\:opacity-60:hover {
+    opacity: .6;
+  }
+
+  .sm\:hover\:opacity-70:hover {
+    opacity: .7;
+  }
+
+  .sm\:hover\:opacity-80:hover {
+    opacity: .8;
+  }
+
+  .sm\:hover\:opacity-90:hover {
+    opacity: .9;
  }

  .sm\:hover\:opacity-100:hover {
@@ -11875,12 +11939,28 @@ table {
    opacity: .25;
  }

+  .md\:opacity-30 {
+    opacity: .3;
+  }
+
  .md\:opacity-50 {
    opacity: .5;
  }

-  .md\:opacity-75 {
-    opacity: .75;
+  .md\:opacity-60 {
+    opacity: .6;
+  }
+
+  .md\:opacity-70 {
+    opacity: .7;
+  }
+
+  .md\:opacity-80 {
+    opacity: .8;
+  }
+
+  .md\:opacity-90 {
+    opacity: .9;
  }

  .md\:opacity-100 {
@@ -11895,12 +11975,28 @@ table {
    opacity: .25;
  }

+  .md\:hover\:opacity-30:hover {
+    opacity: .3;
+  }
+
  .md\:hover\:opacity-50:hover {
    opacity: .5;
  }

-  .md\:hover\:opacity-75:hover {
-    opacity: .75;
+  .md\:hover\:opacity-60:hover {
+    opacity: .6;
+  }
+
+  .md\:hover\:opacity-70:hover {
+    opacity: .7;
+  }
+
+  .md\:hover\:opacity-80:hover {
+    opacity: .8;
+  }
+
+  .md\:hover\:opacity-90:hover {
+    opacity: .9;
  }

  .md\:hover\:opacity-100:hover {
@@ -16104,12 +16200,28 @@ table {
    opacity: .25;
  }

+  .lg\:opacity-30 {
+    opacity: .3;
+  }
+
  .lg\:opacity-50 {
    opacity: .5;
  }

-  .lg\:opacity-75 {
-    opacity: .75;
+  .lg\:opacity-60 {
+    opacity: .6;
+  }
+
+  .lg\:opacity-70 {
+    opacity: .7;
+  }
+
+  .lg\:opacity-80 {
+    opacity: .8;
+  }
+
+  .lg\:opacity-90 {
+    opacity: .9;
  }

  .lg\:opacity-100 {
@@ -16124,12 +16236,28 @@ table {
    opacity: .25;
  }

+  .lg\:hover\:opacity-30:hover {
+    opacity: .3;
+  }
+
  .lg\:hover\:opacity-50:hover {
    opacity: .5;
  }

-  .lg\:hover\:opacity-75:hover {
-    opacity: .75;
+  .lg\:hover\:opacity-60:hover {
+    opacity: .6;
+  }
+
+  .lg\:hover\:opacity-70:hover {
+    opacity: .7;
+  }
+
+  .lg\:hover\:opacity-80:hover {
+    opacity: .8;
+  }
+
+  .lg\:hover\:opacity-90:hover {
+    opacity: .9;
  }

  .lg\:hover\:opacity-100:hover {
@@ -20333,12 +20461,28 @@ table {
    opacity: .25;
  }

+  .xl\:opacity-30 {
+    opacity: .3;
+  }
+
  .xl\:opacity-50 {
    opacity: .5;
  }

-  .xl\:opacity-75 {
-    opacity: .75;
+  .xl\:opacity-60 {
+    opacity: .6;
+  }
+
+  .xl\:opacity-70 {
+    opacity: .7;
+  }
+
+  .xl\:opacity-80 {
+    opacity: .8;
+  }
+
+  .xl\:opacity-90 {
+    opacity: .9;
  }

  .xl\:opacity-100 {
@@ -20353,12 +20497,28 @@ table {
    opacity: .25;
  }

+  .xl\:hover\:opacity-30:hover {
+    opacity: .3;
+  }
+
  .xl\:hover\:opacity-50:hover {
    opacity: .5;
  }

-  .xl\:hover\:opacity-75:hover {
-    opacity: .75;
+  .xl\:hover\:opacity-60:hover {
+    opacity: .6;
+  }
+
+  .xl\:hover\:opacity-70:hover {
+    opacity: .7;
+  }
+
+  .xl\:hover\:opacity-80:hover {
+    opacity: .8;
+  }
+
+  .xl\:hover\:opacity-90:hover {
+    opacity: .9;
  }

  .xl\:hover\:opacity-100:hover {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -764,8 +764,12 @@ module.exports = {
  opacity: {
    '0': '0',
    '25': '.25',
+    '30': '.3',
    '50': '.5',
-    '75': '.75',
+    '60': '.6',
+    '70': '.7',
+    '80': '.8',
+    '90': '.9',
    '100': '1',
  },