From acebb3a44e5cf2a96eb48fd35a3574833f9b0bf1 Mon Sep 17 00:00:00 2001 From: Andrii-Moshenskyi Date: Thu, 21 Jan 2021 13:04:08 +0200 Subject: Fix the SASS compilation error --- sass/front-page/inform-columns.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'sass/front-page/inform-columns.sass') diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass index 68930df..a12befa 100644 --- a/sass/front-page/inform-columns.sass +++ b/sass/front-page/inform-columns.sass @@ -1,4 +1,4 @@ -@import settings.sass +@import ../settings.sass section.inform-columns div.inform-column__inner -- cgit v1.2.3 From 495a964d3b03177c156eab6640514e433f3e4010 Mon Sep 17 00:00:00 2001 From: Andrii-Moshenskyi Date: Thu, 21 Jan 2021 13:05:34 +0200 Subject: Remove all references to Lato font --- sass/footer.sass | 4 ---- sass/front-page/banner.sass | 2 -- sass/front-page/inform-columns.sass | 2 -- sass/header.sass | 2 -- sass/main.sass | 5 +---- sass/settings.sass | 2 -- 6 files changed, 1 insertion(+), 16 deletions(-) (limited to 'sass/front-page/inform-columns.sass') diff --git a/sass/footer.sass b/sass/footer.sass index d386160..68f3640 100644 --- a/sass/footer.sass +++ b/sass/footer.sass @@ -63,7 +63,6 @@ footer list-style: none a list-style: none - font-family: $lato font-weight: normal font-size: 16px line-height: 230% @@ -97,7 +96,6 @@ footer display: flex align-items: center p - font-family: $lato font-weight: normal font-size: 13px line-height: 16px @@ -109,7 +107,6 @@ footer div.footer__rights display: flex p, a - font-family: $lato font-weight: normal font-size: 15px line-height: 150% @@ -142,7 +139,6 @@ footer justify-content: space-between div.footer__sm__developer p, a - font-family: $lato font-weight: normal font-size: 13px line-height: 16px diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass index 8cbea55..1e924c2 100644 --- a/sass/front-page/banner.sass +++ b/sass/front-page/banner.sass @@ -20,7 +20,6 @@ section.banner margin-bottom: 23px max-width: 100% h1.banner__title - font-family: $lato font-weight: 800 font-size: 45px line-height: 120% @@ -52,7 +51,6 @@ section.banner margin-top: 23px align-items: center justify-content: center - font-family: $lato font-weight: 900 font-size: 16px line-height: 15px diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass index a12befa..bc55f9d 100644 --- a/sass/front-page/inform-columns.sass +++ b/sass/front-page/inform-columns.sass @@ -30,7 +30,6 @@ section.inform-columns padding-right: 19px div.inform-column__title h3 - font-family: $lato font-weight: bold font-size: 28px line-height: 150% @@ -65,7 +64,6 @@ section.inform-columns justify-content: center background: $orange border: 1px solid $orange - font-family: $lato font-weight: 900 font-size: 16px line-height: 15px diff --git a/sass/header.sass b/sass/header.sass index c409dab..0ae1105 100644 --- a/sass/header.sass +++ b/sass/header.sass @@ -28,7 +28,6 @@ header +resp(lg) margin-right: 16px div.header__text - font-family: $lato font-weight: 500 font-size: 16px line-height: 25px @@ -53,7 +52,6 @@ header +resp(sm) display: none a - font-family: $lato font-weight: 600 font-size: 15px line-height: 14px diff --git a/sass/main.sass b/sass/main.sass index 6e409f8..f2d2453 100644 --- a/sass/main.sass +++ b/sass/main.sass @@ -1,8 +1,7 @@ @import settings.sass -@import fonts.sass body - font-family: $lato, sans-serif + font-family: sans-serif margin: 0 color: $black @@ -10,14 +9,12 @@ h1, h2, h3, h4, h5, p, ul, li margin: 0 h2 - font-family: $lato font-weight: 800 font-size: 38px line-height: 140% +resp(sm) font-size: 24px p - font-family: $lato font-weight: normal font-size: 18px line-height: 180% diff --git a/sass/settings.sass b/sass/settings.sass index 136578d..9cf5631 100644 --- a/sass/settings.sass +++ b/sass/settings.sass @@ -1,5 +1,3 @@ -// fonts -$lato : "Lato", "Arial", sans-serif // colors $white : #ffffff $orange : #FFBE12 -- cgit v1.2.3 From 2abeb67fc9bdb066ada8eb5689a4c91b88dbec71 Mon Sep 17 00:00:00 2001 From: Andrii-Moshenskyi Date: Thu, 21 Jan 2021 13:05:52 +0200 Subject: Update Inform Columns section styling after font updates --- sass/front-page/inform-columns.sass | 19 +++--- site/index.html | 122 ++++++++++++++++++------------------ 2 files changed, 71 insertions(+), 70 deletions(-) (limited to 'sass/front-page/inform-columns.sass') diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass index bc55f9d..9d6c3cc 100644 --- a/sass/front-page/inform-columns.sass +++ b/sass/front-page/inform-columns.sass @@ -1,6 +1,7 @@ @import ../settings.sass section.inform-columns + div.inform-column__inner display: grid grid-template-columns: 1fr 1fr @@ -17,6 +18,7 @@ section.inform-columns grid-gap: 40px padding: 48px 54px 59px +resp(md) + grid-gap: 25px padding: 30px 25px +resp(sm) padding: 30px 24px 40px @@ -43,6 +45,8 @@ section.inform-columns text-align: left margin-bottom: 29px font-size: 16px + +resp(md) + margin-bottom: 20px &:last-child margin-bottom: 10px +resp(sm) @@ -56,24 +60,23 @@ section.inform-columns +resp(sm) align-self: end a.inform-column__btn - max-width: 311px - width: 100% - height: 58px + max-width: 291px + padding: 10px + min-height: 38px display: flex align-items: center justify-content: center + text-align: center background: $orange border: 1px solid $orange - font-weight: 900 + font-weight: 700 font-size: 16px - line-height: 15px color: $black text-decoration: none transition: 0.3s + line-height: 1.5 +resp(sm) - height: 38px - width: 100% + min-height: 28px font-size: 14px - line-height: 96% &:hover background: $white \ No newline at end of file diff --git a/site/index.html b/site/index.html index 7cb2a4a..b8acf86 100644 --- a/site/index.html +++ b/site/index.html @@ -5,85 +5,83 @@
-
-
+
-
-
-
- Open Source -
-
-

Open Source

-
-
-
-

VyOS is fully open source and we encourage everyone to build images and report any build process issues. The source code of the rolling release and LTS branches alike is available online. However, simply making code available is not enough.

-

We also keep the complete build toolchain available, and we strive to make it easy to use. You can build a VyOS image in just a few commands. There is no special maintainer toolchain we keep to ourselves: all image build tools are available to everyone interested.

+
+
+
+ Open Source
-
- Learn how to build a VyOS image +
+

Open Source

+
+

VyOS is fully open source and we encourage everyone to build images and report any build process issues. The source code of the rolling release and LTS branches alike is available online. However, simply making code available is not enough.

+

We also keep the complete build toolchain available, and we strive to make it easy to use. You can build a VyOS image in just a few commands. There is no special maintainer toolchain we keep to ourselves: all image build tools are available to everyone interested.

+
+
+ Learn how to build a VyOS image +
+
-
-
-
- Open Process -
-
-

Open Process

-
+
+
+
+ Open Process
-
-

Our issue tracker is available online. There is no private issue tracker: even issues reported by commercial users through the support portal are registered in the public tracker (except security issues before public disclosure of course).

-

Everyone is free to browse open tasks, test them, fix them, and make pull requests.

-

We do not have any contributor agreements that require you to transfer your copyrights to us. The copyright is shared between all contributors. This means no one can make a closed source fork of VyOS—not even its current maintainers.

-
-
- Read contributing guidelines +
+

Open Process

+
+

Our issue tracker is available online. There is no private issue tracker: even issues reported by commercial users through the support portal are registered in the public tracker (except security issues before public disclosure of course).

+

Everyone is free to browse open tasks, test them, fix them, and make pull requests.

+

We do not have any contributor agreements that require you to transfer your copyrights to us. The copyright is shared between all contributors. This means no one can make a closed source fork of VyOS—not even its current maintainers.

+
+
+ Read contributing guidelines +
+
-
-
-
- Open Platform -
-
-

Open Platform

-
+
+
+
+ Open Platform
-
-

VyOS is not just a product, but an open platform. It uses a layered architecture with unified and documented internal APIs.

-

A number of major features were contributed by community members. Command definitions are written in a machine-verifiable XML format and malformed definitions fail the build. Our new code is in legacy-free Python3, and some core components are in OCaml.

-

Every part of the system is open to contributions.

-
-
- Read about VyOS architecture +
+

Open Platform

+
+

VyOS is not just a product, but an open platform. It uses a layered architecture with unified and documented internal APIs.

+

A number of major features were contributed by community members. Command definitions are written in a machine-verifiable XML format and malformed definitions fail the build. Our new code is in legacy-free Python3, and some core components are in OCaml.

+

Every part of the system is open to contributions.

+
+
+ Read about VyOS architecture +
+
-
-
-
- Open Community -
-
-

Open Community

-
-
-
-

We welcome all contributors. Even if you are not a programmer, there are many things to do: testing, documentation, evangelism and so on.

-

Since you are sharing your time and effort with us to make the project better, we are also happy to share our LTS release maintenance effort with you. Every active contributor can get access to prebuilt LTS images.

-

We also issue contributor badges through YourAcclaim that you can put on your CV. Already a contributor?

+
+
+
+ Open Community
-
- Claim your rewards +
+

Open Community

- +
+

We welcome all contributors. Even if you are not a programmer, there are many things to do: testing, documentation, evangelism and so on.

+

Since you are sharing your time and effort with us to make the project better, we are also happy to share our LTS release maintenance effort with you. Every active contributor can get access to prebuilt LTS images.

+

We also issue contributor badges through YourAcclaim that you can put on your CV. Already a contributor?

+
+
+ Claim your rewards +
+
-- cgit v1.2.3 From 47f7a980b946cbbedba59a7e14682dd0ce2bd984 Mon Sep 17 00:00:00 2001 From: Andrii-Moshenskyi Date: Thu, 21 Jan 2021 13:06:59 +0200 Subject: Last minor changes --- sass/front-page/banner.sass | 8 - sass/front-page/bottom-text.sass | 10 +- sass/front-page/inform-columns.sass | 1 + sass/front-page/main-text.sass | 8 +- sass/main.sass | 63 ++- site/css/main.css | 736 ++++++++++++++++++++++++++++++++++++ site/img/global/list-element.svg | 6 + 7 files changed, 816 insertions(+), 16 deletions(-) create mode 100644 site/css/main.css create mode 100644 site/img/global/list-element.svg (limited to 'sass/front-page/inform-columns.sass') diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass index 878b9c9..51b6bcf 100644 --- a/sass/front-page/banner.sass +++ b/sass/front-page/banner.sass @@ -20,20 +20,12 @@ section.banner margin-bottom: 23px max-width: 100% h1 - font-weight: 800 - font-size: 45px - line-height: 120% - letter-spacing: 0.02em - color: $black padding-bottom: 57px +resp(sm) - font-size: 38px text-align: center padding-bottom: 51% padding-left: 20px padding-right: 20px - +resp(esm) - font-size: 28px div.banner__btn_container +resp(sm) background-color: $white diff --git a/sass/front-page/bottom-text.sass b/sass/front-page/bottom-text.sass index 54ac45d..943c4b6 100644 --- a/sass/front-page/bottom-text.sass +++ b/sass/front-page/bottom-text.sass @@ -16,4 +16,12 @@ +resp(esm) padding: 56px 20px 64px h2 - padding-bottom: 25px \ No newline at end of file + padding-bottom: 25px + +resp(sm) + padding-bottom: 0 + p + font-size: 18px + +resp(sm) + font-size: 16px + +resp(esm) + font-size: 14px \ No newline at end of file diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass index 9d6c3cc..250982f 100644 --- a/sass/front-page/inform-columns.sass +++ b/sass/front-page/inform-columns.sass @@ -63,6 +63,7 @@ section.inform-columns max-width: 291px padding: 10px min-height: 38px + color: #18191C !important display: flex align-items: center justify-content: center diff --git a/sass/front-page/main-text.sass b/sass/front-page/main-text.sass index d4cb662..c3b4fdd 100644 --- a/sass/front-page/main-text.sass +++ b/sass/front-page/main-text.sass @@ -11,4 +11,10 @@ section.main-text +resp(md) padding: 90px 0 +resp(sm) - padding: 34px 0 55px \ No newline at end of file + padding: 0 0 55px + p + font-size: 18px + +resp(sm) + font-size: 16px + +resp(esm) + font-size: 14px \ No newline at end of file diff --git a/sass/main.sass b/sass/main.sass index f2d2453..ece16ef 100644 --- a/sass/main.sass +++ b/sass/main.sass @@ -8,18 +8,28 @@ body h1, h2, h3, h4, h5, p, ul, li margin: 0 +h1 + font-weight: 800 + font-size: 45px + line-height: 120% + letter-spacing: 0.02em + color: $black + +resp(sm) + font-size: 32px + +resp(esm) + font-size: 28px h2 font-weight: 800 - font-size: 38px + font-size: 32px line-height: 140% +resp(sm) - font-size: 24px + font-size: 21px p font-weight: normal - font-size: 18px line-height: 180% + font-size: 16px color: $black - +resp(sm) + +resp(esm) font-size: 14px @supports (hyphens: auto) text-align: justify @@ -38,8 +48,49 @@ div.container max-width: 1000px #content - margin-top: 20px - margin-bottom: 20px + padding-top: 60px + padding-bottom: 50px + +resp(sm) + padding-top: 40px + padding-bottom: 20px + +resp(esm) + padding-top: 30px + h1 + margin-bottom: 25px + +resp(esm) + margin-bottom: 15px + h2 + margin-top: 25px + margin-bottom: 20px + +resp(esm) + margin-top: 20px + margin-bottom: 15px + p + margin: 15px 0 + +resp(esm) + margin: 9px 0 + ul + +resp(sm) + padding-left: 25px + +resp(esm) + padding-left: 15px + li + list-style: none + display: flex + align-items: center + margin: 12px 0 + line-height: 150% + +resp(esm) + font-size: 14px + margin: 10px 0 + &:before + margin-top: 4px + margin-right: 10px + content: url('../img/global/list-element.svg') + a + color: $dark-orange + &:hover + text-decoration: none @import header.sass @import front-page/banner.sass diff --git a/site/css/main.css b/site/css/main.css new file mode 100644 index 0000000..67dbe75 --- /dev/null +++ b/site/css/main.css @@ -0,0 +1,736 @@ +body { + font-family: sans-serif; + margin: 0; + color: #18191C; } + +h1, h2, h3, h4, h5, p, ul, li { + margin: 0; } + +h1 { + font-weight: 800; + font-size: 45px; + line-height: 120%; + letter-spacing: 0.02em; + color: #18191C; } + @media only screen and (max-width: 767px) { + h1 { + font-size: 32px; } } + @media only screen and (max-width: 575px) { + h1 { + font-size: 28px; } } + +h2 { + font-weight: 800; + font-size: 32px; + line-height: 140%; } + @media only screen and (max-width: 767px) { + h2 { + font-size: 21px; } } + +p { + font-weight: normal; + line-height: 180%; + font-size: 16px; + color: #18191C; } + @media only screen and (max-width: 575px) { + p { + font-size: 14px; } } + @supports ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) { + p { + text-align: justify; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; } } + +pre, code, sample { + white-space: pre-wrap; + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; } + +div.container { + max-width: 1340px; + margin: 0 auto; + padding-left: 15px; + padding-right: 15px; } + div.container.small { + max-width: 1000px; } + +#content { + padding-top: 60px; + padding-bottom: 50px; } + @media only screen and (max-width: 767px) { + #content { + padding-top: 40px; + padding-bottom: 20px; } } + @media only screen and (max-width: 575px) { + #content { + padding-top: 30px; } } + #content h1 { + margin-bottom: 25px; } + @media only screen and (max-width: 575px) { + #content h1 { + margin-bottom: 15px; } } + #content h2 { + margin-top: 25px; + margin-bottom: 20px; } + @media only screen and (max-width: 575px) { + #content h2 { + margin-top: 20px; + margin-bottom: 15px; } } + #content p { + margin: 15px 0; } + @media only screen and (max-width: 575px) { + #content p { + margin: 9px 0; } } + @media only screen and (max-width: 767px) { + #content ul { + padding-left: 25px; } } + @media only screen and (max-width: 575px) { + #content ul { + padding-left: 15px; } } + #content ul li { + list-style: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + margin: 12px 0; + line-height: 150%; } + @media only screen and (max-width: 575px) { + #content ul li { + font-size: 14px; + margin: 10px 0; } } + #content ul li:before { + margin-top: 4px; + margin-right: 10px; + content: url("../img/global/list-element.svg"); } + #content a { + color: #FD8F01; } + #content a:hover { + text-decoration: none; } + +header { + background: #ffffff; + -webkit-box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07); + box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07); + padding: 20px 0; + position: relative; } + @media only screen and (max-width: 991px) { + header { + padding: 15px 0; + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 2; } } + @media only screen and (max-width: 575px) { + header { + padding: 10px 0; } } + header div.header__inner { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + @media only screen and (max-width: 767px) { + header div.header__inner { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } } + header div.header__inner div.header__logo-side { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + header div.header__inner div.header__logo-side a.header__logo { + display: inherit; + margin-right: 30px; } + @media only screen and (max-width: 1199px) { + header div.header__inner div.header__logo-side a.header__logo { + margin-right: 16px; } } + header div.header__inner div.header__logo-side div.header__text { + font-weight: 500; + font-size: 16px; + line-height: 25px; } + @media only screen and (max-width: 767px) { + header div.header__inner div.header__logo-side div.header__text { + display: none; } } + header div.header__inner div.header__logo-side div.header__text p { + font-size: 16px; + color: #ACACAD; + text-align: left; } + @media only screen and (max-width: 991px) { + header div.header__inner div.header__logo-side div.header__text p { + display: none; } } + header div.header__inner div.header__links-side { + display: grid; + grid-template-columns: 1fr auto auto auto; + grid-gap: 31px; + justify-items: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + @media only screen and (max-width: 1199px) { + header div.header__inner div.header__links-side { + grid-gap: 20px; + text-align: center; } } + @media only screen and (max-width: 767px) { + header div.header__inner div.header__links-side { + display: none; } } + header div.header__inner div.header__links-side a { + font-weight: 600; + font-size: 15px; + line-height: 14px; + text-transform: uppercase; + text-decoration: none; + color: #18191C; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; } + @media only screen and (max-width: 1199px) { + header div.header__inner div.header__links-side a { + font-size: 14px; } } + header div.header__inner div.header__links-side a:hover { + color: #FFBE12; } + header div.header__inner div.header__mobile-menu__buttons { + height: 100%; + width: 30px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + display: none; } + @media only screen and (max-width: 767px) { + header div.header__inner div.header__mobile-menu__buttons { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } } + header div.header__inner div.header__mobile-menu__buttons img { + cursor: pointer; + display: none; } + header div.header__inner div.header__mobile-menu__buttons img.active { + display: block; } + +nav#mobile-menu { + z-index: 1; + bottom: 0; + top: 0; + right: 0; + position: fixed; + left: 100%; + background-color: #ffffff; + padding: 70px 15px; } + @media only screen and (max-width: 575px) { + nav#mobile-menu { + padding: 60px 15px; } } + nav#mobile-menu a { + display: block; + text-transform: uppercase; + color: #18191C; + text-decoration: none; + padding: 15px 0; + font-weight: 600; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; + border-bottom: 1px solid #e0e0e0; } + nav#mobile-menu a:hover { + color: #FFBE12; } + +section.banner { + background-image: url("/img/front-page/banner/banner-bg.svg"); + background-position: bottom; + background-repeat: no-repeat; + -webkit-background-size: cover; + background-size: cover; + padding: 77px 0 87px; } + @media only screen and (max-width: 767px) { + section.banner { + background-image: url("/img/front-page/banner/banner-bg-sm.svg"); + padding: 45px 0 0; } } + @media only screen and (max-width: 767px) { + section.banner div.sm-none { + padding: 0; } } + section.banner div.banner__text-button { + max-width: 50%; } + @media only screen and (max-width: 991px) { + section.banner div.banner__text-button { + max-width: 60%; } } + @media only screen and (max-width: 767px) { + section.banner div.banner__text-button { + margin-bottom: 23px; + max-width: 100%; } } + section.banner div.banner__text-button h1 { + padding-bottom: 57px; } + @media only screen and (max-width: 767px) { + section.banner div.banner__text-button h1 { + text-align: center; + padding-bottom: 51%; + padding-left: 20px; + padding-right: 20px; } } + @media only screen and (max-width: 767px) { + section.banner div.banner__text-button div.banner__btn_container { + background-color: #ffffff; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding-left: 20px; + padding-right: 20px; } } + section.banner div.banner__text-button div.banner__btn_container a { + max-width: 311px; + width: 100%; + height: 58px; + background: #18191C; + border: 1px solid #18191C; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin-top: 23px; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-weight: 700; + font-size: 16px; + line-height: 15px; + color: #ffffff; + text-decoration: none; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; } + @media only screen and (max-width: 767px) { + section.banner div.banner__text-button div.banner__btn_container a { + height: 38px; + font-size: 14px; } } + section.banner div.banner__text-button div.banner__btn_container a:hover { + background: #ffffff; + color: #18191C; } + +section.main-text { + max-width: 884px; + margin-left: auto; + margin-right: auto; + padding: 143px 0; + text-align: center; } + @media only screen and (max-width: 1199px) { + section.main-text { + padding: 143px 0; } } + @media only screen and (max-width: 991px) { + section.main-text { + padding: 90px 0; } } + @media only screen and (max-width: 767px) { + section.main-text { + padding: 0 0 55px; } } + section.main-text p { + font-size: 18px; } + @media only screen and (max-width: 767px) { + section.main-text p { + font-size: 16px; } } + @media only screen and (max-width: 575px) { + section.main-text p { + font-size: 14px; } } + +section.inform-columns div.inform-column__inner { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 23px 30px; } + @media only screen and (max-width: 1199px) { + section.inform-columns div.inform-column__inner { + grid-gap: 20px; } } + @media only screen and (max-width: 1199px) and (max-width: 767px) { + section.inform-columns div.inform-column__inner { + grid-template-columns: 1fr; } } + section.inform-columns div.inform-column__inner div.inform-column__item { + background: #F3F4F4; + display: grid; + grid-template-rows: auto 1fr auto; + grid-gap: 40px; + padding: 48px 54px 59px; } + @media only screen and (max-width: 991px) { + section.inform-columns div.inform-column__inner div.inform-column__item { + grid-gap: 25px; + padding: 30px 25px; } } + @media only screen and (max-width: 767px) { + section.inform-columns div.inform-column__inner div.inform-column__item { + padding: 30px 24px 40px; + grid-gap: 15px; + grid-template-rows: auto 1fr 65px; } } + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__icon { + padding-right: 19px; } + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 { + font-weight: bold; + font-size: 28px; + line-height: 150%; + letter-spacing: 0.02em; + color: #000000; } + @media only screen and (max-width: 767px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 { + font-size: 21px; } } + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p { + text-align: left; + margin-bottom: 29px; + font-size: 16px; } + @media only screen and (max-width: 991px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p { + margin-bottom: 20px; } } + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child { + margin-bottom: 10px; } + @media only screen and (max-width: 767px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child { + margin-bottom: 0; } } + @media only screen and (max-width: 767px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p { + line-height: 180%; + font-size: 14px; + margin-bottom: 25px; } } + @media only screen and (max-width: 767px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button { + -webkit-align-self: end; + -ms-flex-item-align: end; + align-self: end; } } + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn { + max-width: 291px; + padding: 10px; + min-height: 38px; + color: #18191C !important; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + background: #FFBE12; + border: 1px solid #FFBE12; + font-weight: 700; + font-size: 16px; + color: #18191C; + text-decoration: none; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; + line-height: 1.5; } + @media only screen and (max-width: 767px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn { + min-height: 28px; + font-size: 14px; } } + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn:hover { + background: #ffffff; } + +.bottom-text__inner { + padding: 138px 0 182px; + max-width: 657px; + margin-left: auto; + text-align: center; + margin-right: auto; } + @media only screen and (max-width: 1199px) { + .bottom-text__inner { + padding: 138px 250px 182px; } } + @media only screen and (max-width: 991px) { + .bottom-text__inner { + padding: 90px 50px 126px; } } + @media only screen and (max-width: 767px) { + .bottom-text__inner { + padding: 56px 50px 64px; } } + @media only screen and (max-width: 575px) { + .bottom-text__inner { + padding: 56px 20px 64px; } } + .bottom-text__inner h2 { + padding-bottom: 25px; } + @media only screen and (max-width: 767px) { + .bottom-text__inner h2 { + padding-bottom: 0; } } + .bottom-text__inner p { + font-size: 18px; } + @media only screen and (max-width: 767px) { + .bottom-text__inner p { + font-size: 16px; } } + @media only screen and (max-width: 575px) { + .bottom-text__inner p { + font-size: 14px; } } + +footer div.footer__inner div.footer__logo-society { + display: grid; + grid-template-columns: 60px 1fr 191px; + grid-gap: 25px; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + @media only screen and (max-width: 767px) { + footer div.footer__inner div.footer__logo-society { + display: none; } } + footer div.footer__inner div.footer__logo-society div.footer__hr { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; } + footer div.footer__inner div.footer__logo-society div.footer__hr img { + margin-bottom: 10px; + width: 100%; } + @media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__logo-society div.footer__hr img { + border-bottom: 1px solid #E0DFDF; } } + footer div.footer__inner div.footer__logo-society div.footer__socials { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding-left: 6px; } + +footer div.footer__inner div.footer__links-trustpilot { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-top: 36px; } + @media only screen and (max-width: 767px) { + footer div.footer__inner div.footer__links-trustpilot { + display: none; } } + footer div.footer__inner div.footer__links-trustpilot div.footer__links { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + @media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } } + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column { + display: grid; + grid-template-rows: auto 1fr; + margin-right: 48px; } + @media only screen and (max-width: 1199px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column { + margin-right: 28px; } } + @media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column { + margin: 0 0 30px; + grid-template-rows: 34px 1fr; } } + @media only screen and (max-width: 1199px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(1) { + width: 16%; } } + @media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(1) { + width: 40%; } } + @media only screen and (max-width: 1199px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(2) { + width: 18%; } } + @media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(2) { + width: 60%; } } + @media only screen and (max-width: 1199px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(3) { + width: 20%; } } + @media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(3) { + width: 40%; } } + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) { + margin-right: 0; } + @media only screen and (max-width: 1199px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) { + width: 32%; } } + @media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) { + width: 60%; } } + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column h3 { + font-weight: 600; + font-size: 18px; + padding: 0 0 17px 0; + color: #18191C; } + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul { + padding-left: 0; + list-style: none; } + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li { + padding: 5px 0; } + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a { + list-style: none; + font-weight: normal; + font-size: 16px; + line-height: 1.7; + color: #747577; + text-decoration: none; } + @media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a { + font-size: 14px; } } + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a:hover { + color: #FFBE12; + text-decoration: underline; } + footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot { + justify-self: end; + border-left: 1px solid #E0DFDF; + padding-left: 33px; } + @media only screen and (max-width: 1199px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot { + padding-left: 10px; } } + footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot div#tp-widget-wrapper { + margin: 0; } + +footer div.footer__inner div.footer__developer { + border-top: 1px solid #E0DFDF; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding: 40px 0; + margin-top: 37px; } + @media only screen and (max-width: 767px) { + footer div.footer__inner div.footer__developer { + display: none; } } + footer div.footer__inner div.footer__developer div.footer__hosted { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + footer div.footer__inner div.footer__developer div.footer__hosted p { + font-weight: normal; + font-size: 13px; + line-height: 16px; + color: #ACACAD; + padding-right: 16px; } + @media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__developer div.footer__hosted p { + padding-right: 8px; + display: none; } } + footer div.footer__inner div.footer__developer div.footer__rights { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a { + font-weight: normal; + font-size: 15px; + line-height: 150%; + text-decoration: none; + color: #ACACAD; + padding-right: 30px; } + @media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a { + font-size: 14px; + padding-right: 22px; } } + footer div.footer__inner div.footer__developer div.footer__rights a:hover { + text-decoration: underline; + color: #FFBE12; } + +footer div.footer__inner div.footer__sm { + display: none; } + @media only screen and (max-width: 767px) { + footer div.footer__inner div.footer__sm { + display: block; } } + footer div.footer__inner div.footer__sm div.footer__sm__contant { + border-top: 1px solid #ACACAD; + padding: 32px 0 23px; } + footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__logos { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } + footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__society { + max-width: 200px; + margin: 24px auto 17px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer p, footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer a { + font-weight: normal; + font-size: 13px; + line-height: 16px; + color: #747577; + opacity: 0.5; } + footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + margin-bottom: 19px; } + footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a { + text-decoration: none; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; } + footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:hover { + text-decoration: underline; } + footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:first-child { + margin-right: 20px; } + footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__rights { + text-align: center; } diff --git a/site/img/global/list-element.svg b/site/img/global/list-element.svg new file mode 100644 index 0000000..e97525e --- /dev/null +++ b/site/img/global/list-element.svg @@ -0,0 +1,6 @@ + + + + + + -- cgit v1.2.3