Skip to content

Commit

Permalink
[#77] refactor: style changes done
Browse files Browse the repository at this point in the history
  • Loading branch information
@damla
damla committed Apr 16, 2021
1 parent 362db79 commit 2cff9c0
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 62 deletions.
17 changes: 9 additions & 8 deletions components/custom-container/custom-container.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,13 @@
flex-direction: column;
align-items: center;
min-width: 100%;
padding: 2.4rem 0;
padding: 6rem 0 10rem;

.h1 {
font-family: "Zaph Humanist", sans-serif;
font-size: 3rem;
text-transform: uppercase;
color: variables.$secondary-color;
margin-bottom: 2.4rem;
color: variables.$quaternary-color;

@media only screen and (max-width: variables.$max-width-middle) {
font-size: 2.5rem;
Expand All @@ -26,6 +25,7 @@
max-width: 70vw;
text-align: justify;
margin-bottom: 1.5rem;
margin-top: 1rem;

@media only screen and (max-width: variables.$max-width-middle) {
font-size: 1rem;
Expand All @@ -37,18 +37,19 @@

.h3 {
font-family: "SuisseInt-Regular", sans-serif;
font-size: 1.7rem;
font-weight: 200;
letter-spacing: 0.1rem;
font-size: 1.5rem;
line-height: 1.5rem;
letter-spacing: 0.05em;
font-size: 1.375rem;
line-height: 1.5em;
color: variables.$secondary-color;
max-width: 70vw;
text-align: center;
margin-bottom: 3rem;
margin-bottom: 6rem;
margin-top: 0.5rem;

@media only screen and (max-width: variables.$max-width-tablet) {
font-size: 1.3rem;
margin-bottom: 1rem;
}
}

Expand Down
28 changes: 16 additions & 12 deletions pages/contact/contact.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
@use "../../global/variables.scss" as variables;

.item {
display: flex;
flex-basis: 45%;
min-height: 50vh;
display: flex;
align-items: center;
flex-direction: column;
padding: 0 1rem;
margin-bottom: 2.5rem;
align-items: center;
justify-content: space-between;

.container {
display: flex;
align-items: center;
flex-direction: column;
}

&:first-child {
border-right: 1px solid variables.$secondary-color;
border-right: 1px solid #6a6f7b6b;
}

@media only screen and (max-width: variables.$max-width-tablet) {
Expand All @@ -27,7 +34,7 @@
text-decoration: underline;
font-size: 2rem;
text-transform: uppercase;
color: variables.$quaternary-color;
color: variables.$secondary-color;
margin: 1rem 0;

@media only screen and (max-width: variables.$max-width-middle) {
Expand All @@ -42,23 +49,20 @@

.h4 {
font-family: "SuisseInt-Regular", sans-serif;
font-size: 1.5rem;
font-weight: 200;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
color: variables.$secondary-color;
color: #6a6f7b;
margin-left: 5px;

@media only screen and (max-width: variables.$max-width-middle) {
font-size: 1.5rem;
}
letter-spacing: 0.1em;
}
}

.p {
font-family: "SuisseInt-Regular", sans-serif;
text-decoration: none;
font-weight: 200;
letter-spacing: 0.1rem;
letter-spacing: 0.05em;
font-size: 1rem;
line-height: 1.5rem;
margin-bottom: 1.5rem;
Expand Down
86 changes: 44 additions & 42 deletions pages/contact/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,55 +74,57 @@ export default function Contact ({
<CustomContainer page='contact' h1={maintitle} h3={subtitle} justifyContent='center'>
{
informations.map((element, index) => (

<div key={index} className={styles.item}>
<h3 lang={locale} className={styles.boxTitle}>{element.title}</h3>
<div className={styles.boxSubtitle}>
<Image
src="/assets/svgs/map-pin-primary.svg"
width={20}
height={20}
alt="map-pin-icon"
/>
<h4 className={styles.h4}>{element.address.field_name}</h4>
</div>
<p className={styles.p}>{element.address.value}</p>
<div className={styles.boxSubtitle}>
<Image
src="/assets/svgs/phone-primary.svg"
width={20}
height={20}
alt="phone-icon"
/>
<h4 className={styles.h4}>{element.phone.field_name}</h4>
</div>
<p className={styles.p}><a href={element.phone.link}>{element.phone.value}</a></p>
<div className={styles.boxSubtitle}>
<Image
src="/assets/svgs/envelope-primary.svg"
width={20}
height={20}
alt="envelope-icon"
/>
<h4 className={styles.h4}>{element.email.field_name}</h4>
</div>
<p className={styles.p}><a href={element.email.link}>{element.email.value}</a></p>
<div className={styles.boxSubtitle}>
<Image
src="/assets/svgs/fax-primary.svg"
width={20}
height={20}
alt="fax-icon"
/>
<h4 className={styles.h4}>{element.fax.field_name}</h4>
<div className={styles.container}>
<h3 lang={locale} className={styles.boxTitle}>{element.title}</h3>
<div className={styles.boxSubtitle}>
<Image
src="/assets/svgs/map-pin-primary.svg"
width={20}
height={20}
alt="map-pin-icon"
/>
<h4 className={styles.h4}>{element.address.field_name}</h4>
</div>
<p className={styles.p}>{element.address.value}</p>
<div className={styles.boxSubtitle}>
<Image
src="/assets/svgs/phone-primary.svg"
width={20}
height={20}
alt="phone-icon"
/>
<h4 className={styles.h4}>{element.phone.field_name}</h4>
</div>
<p className={styles.p}><a href={element.phone.link}>{element.phone.value}</a></p>
<div className={styles.boxSubtitle}>
<Image
src="/assets/svgs/envelope-primary.svg"
width={20}
height={20}
alt="envelope-icon"
/>
<h4 className={styles.h4}>{element.email.field_name}</h4>
</div>
<p className={styles.p}><a href={element.email.link}>{element.email.value}</a></p>
<div className={styles.boxSubtitle}>
<Image
src="/assets/svgs/fax-primary.svg"
width={20}
height={20}
alt="fax-icon"
/>
<h4 className={styles.h4}>{element.fax.field_name}</h4>
</div>
<p className={styles.p}><a href={element.fax.link}>{element.fax.value}</a></p>
</div>
<p className={styles.p}><a href={element.fax.link}>{element.fax.value}</a></p>

<Map mapApi={mapApi} id={element.map.id} coordinate={element.map.coordinate} HTML={element.map.HTML}/>
</div>
))
}
</CustomContainer>
<Map mapApi={mapApi} id="hq-map" coordinate={[28.656831, 40.990484]} width={500} height={500} HTML="<h2>Karsal Örme</h2>"/>
<Map mapApi={mapApi} id="factory-map" coordinate={[27.649564, 41.272214]} width={500} height={500} HTML="<h2>Fabrika</h2>"/>
</Section>
</Layout>
</>
Expand Down

0 comments on commit 2cff9c0

Please sign in to comment.