Skip to content

Commit

Permalink
Merge pull request #189 from activebridge/fix/font_styles_and_text_tags
Browse files Browse the repository at this point in the history 
Fix Titles and descriptions styles and paddings and margins for them
  • Loading branch information
@katatsu12
katatsu12 authored Apr 18, 2024
2 parents 0ff0d0a + cb3dd78 commit 222dccc
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 108 deletions.
79 changes: 7 additions & 72 deletions _sass/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,11 @@
.index-header {
position: inherit;
margin-bottom: 1em;
font-size: 2.5em;
font-size: 45px;
z-index: 1;
letter-spacing: 0.5em;
text-transform: uppercase;
text-align: center;
}

.description {
Expand Down Expand Up @@ -56,8 +59,6 @@
}

.index {
.description { font-size: 20px; }

&-home {
position: relative;
z-index: 1;
Expand All @@ -75,12 +76,6 @@
&__container {
padding-top: 8vh;
background: linear-gradient(135deg, $white, $main-lilac);

.header-4 {
margin: 7vh 0 4vh 0;
padding: 0 5%;
font-family: 'Cera-Bold', serif;
}
}

&__holder {
Expand All @@ -92,14 +87,6 @@
margin-top: 4vh;
}

&__description {
padding: 0 !important;
font-family: 'Inria', serif;
font-size: 20px;
text-align: justify;
}
&__title { margin: 6vh 0 3vh 0; }

&__items {
flex-direction: column;
display: flex;
Expand Down Expand Up @@ -142,20 +129,11 @@
width: 40px;
height: 40px;
}

.header-3:last-child { margin-top: 7vh; }
}

&-services {
background-color: $main-lilac;

.header-3 { margin: 5vh; }

.header-5 {
max-width: 65%;
margin: 0 auto 4vh;
}

.card {
&__title-2 {
font-family: 'Inria Bold', serif;
Expand All @@ -177,15 +155,6 @@
&-about-us {
padding: 8vh 0;

&__description {
margin: 4.5vh 0;
font-family: 'Inria', serif;
font-size: 1.2em;
line-height: 1.7em;
text-align: justify;
color: $white;
}

.button { box-shadow: $light-purple-shadow; }
}

Expand All @@ -198,11 +167,7 @@
font-family: 'Cera Regular';
text-transform: uppercase;
}

.purple-text { display: inline; }

.description { margin-top: 5vh; }

.button { background: $main-gradient; }
}
}
Expand All @@ -211,9 +176,6 @@
display: flex;
flex-direction: column;
align-items: center;

.header-2 { max-width: 100%; }

.index-solutions__items { margin: 7vh auto 0 auto; }

.index-solutions__button {
Expand All @@ -232,8 +194,7 @@
top: 0;

.index-header {
margin: 0 0 1em .5em;
font-size: 1.5em;
font-size: 25px;
order: 2;
}

Expand All @@ -243,12 +204,10 @@
order: 1;
}

.header-2 {
font-size: 1em;
.block-inria-title {
font-size: 15px;
order: 3;
margin: 0;
}

.description { display: none; }

.awards-img {
Expand Down Expand Up @@ -282,11 +241,8 @@
}

.index {
.description { font-size: 14px; }

&-home {
.index-testimonials__header { padding: 0 10px; }

.description.with-padding {
font-size: .75em;
text-align: justify;
Expand All @@ -302,17 +258,6 @@
margin-top: 2vh;
}

.header-3 {
line-height: 1.8;
&:last-child { margin-top: 4vh; }
}

.header-4 {
margin-top: 3vh;
font-size: .9em;
line-height: 1.8;
}

&__items {
width: 100%;
height: 65vh;
Expand Down Expand Up @@ -396,8 +341,6 @@
}

&-solutions {
.header-2 { margin-top: 0; }

.description {
text-align: justify;
text-align-last: center;
Expand All @@ -406,14 +349,6 @@
.button { margin-bottom: 0; }
}

&-about-us {
&__description {
margin-bottom: 0;
font-size: 0.9em;
line-height: 1.8em;
}
}

&-about-us-info {
background: center/cover no-repeat url('/assets/images/index/about_us_photo_mob.webp');

Expand Down
10 changes: 10 additions & 0 deletions _sass/utility.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.mb-4 { margin-bottom: 40px; }

.cera-regular { font-family: "Cera Regular", serif; }
.cera-bold { font-family: "Cera-Bold", serif; }
.inria-bold { font-family: "Inria Bold", serif; }
.inria-regular { font-family: "Inria Regular", serif; }

@media (max-width: 767px) {
.mb-4 { margin-bottom: 25px; }
}
47 changes: 40 additions & 7 deletions assets/css/main.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
---
@import "variables";
@import "utility";
@import "view_transitions";
@import "buttons";
@import "navbar";
Expand Down Expand Up @@ -64,6 +65,12 @@
font-display: swap;
}

@font-face {
font-family: 'Inria Regular';
src: url(/assets/fonts/InriaSerif-Regular.woff2);
font-display: swap;
}

p { margin: 0; }

body {
Expand Down Expand Up @@ -91,12 +98,29 @@ ul, ol { margin-left: 0; }

.white-text { color: $white !important; }

.header-1 {
// new block titles, changes to reduce the difference of styles, use clear class names
.block-cera-title {
font-family: "Cera Regular", serif;
font-size: 30px;
letter-spacing: 0.4em;
text-align: center;
text-transform: uppercase;
font-size: 2em;
letter-spacing: 0.6em;
margin-bottom: 60px;
}

.block-inria-title {
font-family: "Inria Bold", serif;
font-size: 30px;
font-weight: 700;
}

.message {
font-size: 22px;
line-height: 35px;
margin-bottom: 50px;
}

// will remove the old ones after adding new ones everywhere
.header-2 {
margin: 0 auto;
font-family: 'Inria Bold', serif;
Expand All @@ -121,8 +145,6 @@ ul, ol { margin-left: 0; }

.inria { font-family: 'Inria Bold', serif; }

.inria-regular { font-family: 'Inria', serif; }

.info-container {
background: $main-gradient;
padding-bottom: 7vh;
Expand Down Expand Up @@ -189,7 +211,6 @@ ul, ol { margin-left: 0; }
}

&.with-padding { padding: 0 25%; }

&.with-margin { margin: 2.5em auto; }
}

Expand Down Expand Up @@ -321,9 +342,21 @@ b { font-family: "Cera-Bold", serif; }
}

.description {
font-size: 0.8em;
font-size: 14px;
color: $black;
}

.description.with-padding { padding: 0 8%; }

.block-inria-title,.block-cera-title {
font-size: 18px;
line-height: 23px;
}
.block-cera-title { margin-bottom: 40px; }

.message {
font-size: 18px;
line-height: 25px;
margin-bottom: 30px;
}
}
Binary file added assets/fonts/InriaSerif-Regular.woff2
View file
Binary file not shown.
46 changes: 17 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve" class="index-logo">
<path d="M82.3 76.5c-.9 0-1.9-.1-2.8-.2-.8-.1-1.4-.7-1.5-1.5l-2.4-21.6c-12.2-3.9-28.6-5.5-42.1-1.7l-3.1 23.4c-.1 1-1 1.6-2 1.5-1-.1-1.6-1-1.5-2l2.9-21.7c-1.3.5-2.6 1-3.8 1.7-6.6 3.3-11 8.2-14.2 12.7l-5.3 8.6c-.5.8-1.6 1.1-2.4.6-.8-.5-1.1-1.6-.6-2.4.4-.6.8-1.3 1.2-2.1 1.1-1.9 2.4-4.2 4.2-6.7l24.7-40.2c.4-.7 1.3-1 2.1-.7.8.3 1.3 1.1 1.1 1.9L34 47.7c13.3-3.3 29-1.9 41.2 1.7l-2.6-23.6c-.1-1 .6-1.8 1.5-1.9 1-.1 1.8.6 1.9 1.5l2.8 25.1c3.8 1.3 7.1 2.8 9.7 4.5 5.3 3.3 8.1 7 8.1 10.7 0 2.7-1.2 5.2-3.4 7.1-2.7 2.4-6.6 3.7-10.9 3.7zm-1-3.5c3.9.2 7.4-.8 9.6-2.7 1.5-1.3 2.2-2.8 2.2-4.5 0-2.4-2.3-5.1-6.4-7.7-2.1-1.3-4.6-2.5-7.4-3.6l2 18.5zm-49-39.4L19.9 53.8c1.4-1 2.9-1.9 4.5-2.7 1.9-.9 3.8-1.7 5.9-2.4l2-15.1z" />
</svg>
<div class="header-1 index-header">{{ site.data.index.active_bridge }}</div>
<h1 class="header-2">{{ site.data.index.first_title }}</h1>
<p class="index-header">{{ site.data.index.active_bridge }}</p>
<h1 class="block-inria-title mb-4">{{ site.data.index.first_title }}</h1>
<p class="description with-margin">{{ site.data.index.teams_expertise }}</p>
<a id="index-free-consultation" class="button" href="/contacts" data-link="transition">
{{ site.data.index.free_consultation }}
Expand All @@ -44,12 +44,8 @@ <h1 class="header-2">{{ site.data.index.first_title }}</h1>

<div class="info-container index-home wrap">
<div class="wrapper">
<div class="header-5 index-testimonials__header white-text">
{{ site.data.index.help_startups }}
</div>
<div class="description white-text">
{{ site.data.index.testimonials_description }}
</div>
<p class="message white-text inria-bold"> {{ site.data.index.help_startups }}</p>
<p class="description white-text"> {{ site.data.index.testimonials_description }}</p>
</div>
{% include testimonials_carousel.html %}
<a id="index-read-testimonials" class="button white-text violet-button" href="/reviews" data-link="transition">
Expand All @@ -60,16 +56,12 @@ <h1 class="header-2">{{ site.data.index.first_title }}</h1>
<div class="index-technologies__container">
<div class="wrapper">
<div class="index-technologies">
<h2 class="header-3">{{ site.data.index.our_vision }}</h2>
<h3 class="header-4">{{ site.data.index.care_about_your_projects }}</h3>
<div class="description text-justify index-technologies__description">
{{ site.data.index.dedicated_developers }}
</div>
<h2 class="header-4">{{ site.data.index.core_technology }}</h2>
<div class="description text-justify index-technologies__description">
{{ site.data.index.technologies_knowledge }}
</div>
<div class="header-3">{{ site.data.index.featured_technologies }}</div>
<h2 class="block-cera-title">{{ site.data.index.our_vision }}</h2>
<h3 class="message cera-bold ">{{ site.data.index.care_about_your_projects }}</h3>
<p class="description text-justify mb-4 inria-regular">{{ site.data.index.dedicated_developers }}</p>
<h2 class="message cera-bold ">{{ site.data.index.core_technology }}</h2>
<p class="description text-justify mb-4 inria-regular">{{ site.data.index.technologies_knowledge }}</p>
<p class="block-cera-title">{{ site.data.index.featured_technologies }}</p>
</div>
</div>
<div class="index-technologies__holder">
Expand All @@ -87,13 +79,9 @@ <h2 class="header-4">{{ site.data.index.core_technology }}</h2>

<div class="index-services development__cards wrap">
<div class="wrapper">
<h2 class="header-5">{{ site.data.index.expert_web_services }}</h2>
<div class="description justify-center">
{{ site.data.index.embedded_teams }}
</div>
<div class="header-3">
{{ site.data.index.our_services }}
</div>
<h2 class="message inria-bold">{{ site.data.index.expert_web_services }}</h2>
<p class="description justify-center mb-4">{{ site.data.index.embedded_teams }}</p>
<p class="block-cera-title"> {{ site.data.index.our_services }}</p>
<div class="cards-container">
{% for service in site.data.index.services %}
<div class="card">
Expand All @@ -112,8 +100,8 @@ <h2 class="header-5">{{ site.data.index.expert_web_services }}</h2>

<div class="info-container index-about-us">
<div class="wrapper">
<div class="header-3 white-text">{{ site.data.index.our_company }}</div>
<div class="index-about-us__description">{{ site.data.index.about_us_description }}</div>
<p class="block-cera-title white-text">{{ site.data.index.our_company }}</p>
<p class="description text-justify mb-4 white-text inria-regular">{{ site.data.index.about_us_description }}</p>
</div>
<div class="about_us_info desktop-only">
{% include about_us_info.html %}
Expand All @@ -136,8 +124,8 @@ <h2 class="header-5">{{ site.data.index.expert_web_services }}</h2>

<div class="index-solutions">
<div class="wrapper index-solutions__holder">
<h2 class="header-2">{{ site.data.index.build_great_product }}</h2>
<div class="description">{{ site.data.index.help_businesses }}</div>
<h2 class="message inria-bold">{{ site.data.index.build_great_product }}</h2>
<p class="description">{{ site.data.index.help_businesses }}</p>
</div>
<div class="carousel-scroll" >
<div class="carousel-scroll__scroller" data-scroll="scroller">
Expand Down

0 comments on commit 222dccc

Please sign in to comment.