senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling changes for consistency

Browse Source
This commit is contained in:
Moris Zen
2018-09-05 09:30:55 +02:00
parent 41cd42d1bc
commit cbc4380753
7 changed files with 40 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/PageIntro.js
View File

@@ -37,11 +37,12 @@ class PageIntro extends Component {
{this.props.children}
<SectionIntro
header
h2Classes="text-4xl md:text-5xl"
h2Classes="text-4xl lg:mb-2 md:text-5xl"
intro={this.props.intro}
classes={`lg:text-left lg:max-w-sm content-center ${
classes={`md:p-8 lg:text-left lg:max-w-sm content-center ${
this.props.sectionClasses
}`}
textClasses="font-medium opacity-80"
headline={this.props.headline}
text={this.props.text}
/>
@@ -59,7 +60,7 @@ class PageIntro extends Component {
src={this.props.image}
className={`${
this.props.imgClasses
} tiltImage md:max-h-sm md:max-w-md mx-auto`}
} tiltImage md:max-h-sm md:max-w-35 mx-auto`}
alt="Software Development Agency"
/>
</div>

6
src/pages/about.js
View File

@@ -25,10 +25,10 @@ const AboutPage = () => (
<Fade top>
<PageIntro
tiltImage
headline="Founded by developers"
headline="We know software"
text="Saburly was founded by senior tech leads that understand what it takes to create modern digital solutions. We have managed large software development teams for successful companies in the past and are now recruiting and mentoring the best talents in the industry for Saburly."
image={IntroImage}
imgClasses="border-white border-8 rounded -mb-12"
imgClasses="border-white rounded-lg opacity-70 hover:opacity-100 saburly-transition -mb-12"
/>
</Fade>
@@ -44,7 +44,7 @@ const AboutPage = () => (
<p className="py-2 font-light text-grey-darkest text-center">
Saburly comes from an old Bosnian saying and is about
</p>
<h5 className="text-center text-4xl italic font-light text-black">
<h5 className="text-center text-xl md:text-2xl lg:text-4xl italic font-light text-black">
"Achieving success through patience, strategic planning and
perseverance"
</h5>

4
src/pages/contact.js
View File

@@ -16,11 +16,11 @@ const ContactPage = () => (
<Fade top>
<PageIntro
tiltImage
headline="Let's make it happen"
headline="Let's connect"
text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do."
sectionClasses="lg:mb-8"
image={ContactImage}
imgClasses="-mb-12 border-white border-8 rounded"
imgClasses="-mb-12 border-white rounded-lg opacity-70 hover:opacity-100 saburly-transition"
/>
</Fade>

12
src/pages/index.js
View File

@@ -33,7 +33,7 @@ const IndexPage = ({ ...props }) => (
image={ImgIntro}
imgClasses="-mb-20 p-2 md:p-8"
>
<h2 className="text-black text-4xl xl:text-5xl pt-1 pb-2">
<h2 className="px-8 text-black text-4xl xl:text-5xl pt-1">
We{' '}
<Typed
strings={['imagine', 'design', 'develop', 'maintain']}
@@ -105,35 +105,35 @@ const IndexPage = ({ ...props }) => (
<div className="sm:w-1/2 md:w-1/5 p-2">
<img
src={LogoColounge}
className="opacity-50 hover:opacity-100 client-logo p-1"
className="opacity-50 hover:opacity-100 client-logo p-2"
alt="Colounge Logo"
/>
</div>
<div className="sm:w-1/2 md:w-1/5 p-2">
<img
src={LogoRicoh}
className="opacity-50 hover:opacity-100 client-logo p-1"
className="opacity-50 hover:opacity-100 client-logo p-2"
alt="Ricoh Logo"
/>
</div>
<div className="sm:w-1/3 md:w-1/5 p-2">
<img
src={LogoCoor}
className="opacity-50 hover:opacity-100 client-logo p-1"
className="opacity-50 hover:opacity-100 client-logo p-2"
alt="Coor Logo"
/>
</div>
<div className="sm:w-1/3 md:w-1/5 p-2">
<img
src={LogoKinnarps}
className="opacity-50 hover:opacity-100 client-logo p-1"
className="opacity-50 hover:opacity-100 client-logo p-2"
alt="Kinnarps Logo"
/>
</div>
<div className="sm:w-1/3 md:w-1/5 p-2">
<img
src={LogoIMCG}
className="opacity-50 hover:opacity-100 client-logo p-1"
className="opacity-50 hover:opacity-100 client-logo p-2"
alt="IMCG Logo"
/>
</div>

8
src/pages/services.js
View File

@@ -20,10 +20,10 @@ const ServicesPage = () => (
<PageIntro
tiltImage
buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
headline="Agile Practitioners"
headline="Agile practitioners"
text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
image={IntroImage}
imgClasses="-mb-12 border-white border-8 rounded-lg"
imgClasses="-mb-12 border-white rounded-lg opacity-70 hover:opacity-100 saburly-transition"
/>
</Fade>
<section className="px-4 py-16">
@@ -37,7 +37,7 @@ const ServicesPage = () => (
/>
<SectionIntro
h2Classes="text-4xl md:text-5xl saburly-color font-medium"
h2Classes="text-4xl md:text-5xl saburly-color font-light"
classes="my-20 max-w-lg"
headline="Design services"
text="We offer consistent quality design that extends to every section of the application development. Our approach is simple: focus on how users might use the product
@@ -90,7 +90,7 @@ const ServicesPage = () => (
<div className="lg:flex">
<div>
<SectionIntro
h2Classes="font-medium saburly-color text-4xl md:text-5xl"
h2Classes="font-light saburly-color text-4xl md:text-5xl"
headline="Software development"
text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions."
/>

20
src/styles/index.css
View File

@@ -3442,6 +3442,10 @@ table {
max-width: 10rem;
}
.max-w-35 {
max-width: 35rem;
}
.max-w-2\.5 {
max-width: 2.5rem;
}
@@ -8596,6 +8600,10 @@ table {
max-width: 10rem;
}
.sm\:max-w-35 {
max-width: 35rem;
}
.max-w-2\.sm\:5 {
max-width: 2.5rem;
}
@@ -13735,6 +13743,10 @@ table {
max-width: 10rem;
}
.md\:max-w-35 {
max-width: 35rem;
}
.max-w-2\.md\:5 {
max-width: 2.5rem;
}
@@ -18874,6 +18886,10 @@ table {
max-width: 10rem;
}
.lg\:max-w-35 {
max-width: 35rem;
}
.max-w-2\.lg\:5 {
max-width: 2.5rem;
}
@@ -24013,6 +24029,10 @@ table {
max-width: 10rem;
}
.xl\:max-w-35 {
max-width: 35rem;
}
.max-w-2\.xl\:5 {
max-width: 2.5rem;
}

1
tailwind.config.js
View File

@@ -598,6 +598,7 @@ module.exports = {
'4': '4rem',
'5': '5rem',
'10': '10rem',
'35': '35rem',
xs: '20rem',
sm: '30rem',
md: '40rem',