Project-Pro/vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance responsive typography and spacing in o-nas.scss

Browse Source 
- Adjusted font sizes for various elements at different breakpoints to improve readability on smaller screens.
- Modified padding and margin values to create better spacing and layout consistency across different device sizes.
- Implemented responsive design principles using mixins for better adaptability to screen sizes.
This commit is contained in:
Roman Pyrih
2025-04-24 14:41:49 +02:00
parent f0cc804989
commit eefae26fa7
3 changed files with 211 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layout/style-css/o-nas.css
View File

File diff suppressed because one or more lines are too long

2
layout/style-css/o-nas.css.map
View File

File diff suppressed because one or more lines are too long

212
layout/style-scss/o-nas.scss
View File

@@ -51,6 +51,10 @@ p {
padding-right: 30px;
padding-top: 3px;
background: $cWhite;
@include respond-below(md) {
font-size: 26px;
}
}
}
@@ -107,6 +111,10 @@ p {
max-width: 390px;
}
}
@include respond-below(sm) {
font-size: 44px;
}
}
h2 {
color: $cTxtBlack;
@@ -116,6 +124,10 @@ p {
line-height: 1.2;
font-weight: 300;
text-transform: uppercase;
@include respond-below(sm) {
font-size: 24px;
}
}
}
@@ -134,6 +146,10 @@ p {
margin-top: 34px;
margin-bottom: 72px;
@include respond-below(sm) {
font-size: 42px;
}
._col {
&-1 {
position: relative;
@@ -188,6 +204,10 @@ p {
background-size: cover;
padding: 86px 0 90px;
@include respond-below(sm) {
padding: 50px 0 90px;
}
._row {
&-1 {
margin-bottom: 50px;
@@ -208,6 +228,13 @@ p {
strong {
font-weight: 600;
}
@include respond-below(md) {
font-size: 20px;
}
@include respond-below(sm) {
font-size: 18px;
}
}
}
&-2 {
@@ -251,6 +278,9 @@ p {
@include respond-above(md) {
margin-left: 44px;
}
@include respond-below(md) {
font-size: 18px;
}
}
h3 {
color: $cWhite;
@@ -266,6 +296,14 @@ p {
padding: 16px 44px 9px;
border-radius: 50px;
background: rgba(#2e2d2c, 0.8);
@include respond-below(md) {
font-size: 24px;
line-height: 1.3;
}
@include respond-below(sm) {
font-size: 18px;
}
}
}
}
@@ -278,6 +316,10 @@ p {
margin-top: -50px;
margin-bottom: 130px;
@include respond-below(sm) {
margin-bottom: 100px;
}
._row {
&-1 {
._col {
@@ -323,6 +365,10 @@ p {
font-weight: 600;
margin-bottom: 3px;
text-transform: uppercase;
@include respond-below(md) {
font-size: 16px;
}
}
p {
@@ -331,6 +377,10 @@ p {
font-family: $font3;
font-weight: 300;
text-transform: uppercase;
@include respond-below(md) {
font-size: 16px;
}
}
}
}
@@ -343,10 +393,18 @@ p {
.box-4 {
margin-bottom: 160px;
@include respond-below(sm) {
margin-bottom: 100px;
}
._row {
&-1 {
margin-bottom: 100px;
@include respond-below(sm) {
margin-bottom: 60px;
}
._col {
&-1 {
}
@@ -489,6 +547,9 @@ p {
._row {
&-1 {
margin-bottom: 70px;
@include respond-below(sm) {
margin-bottom: 40px;
}
}
&-2 {
width: 100%;
@@ -505,6 +566,10 @@ p {
font-family: $font3;
font-weight: 300;
@include respond-below(md) {
font-size: 18px;
}
strong {
font-weight: 600;
}
@@ -520,9 +585,20 @@ p {
flex-direction: row;
column-gap: 30px;
@include respond-below(md) {
flex-wrap: wrap;
justify-content: center;
row-gap: 30px;
}
.offer-tile {
width: calc(100% / 5 - (30px - (30px / 5)));
@include respond-below(md) {
width: calc(100% / 2 - (30px - (30px / 2)));
max-width: 240px;
}
img {
display: block;
margin-left: auto;
@@ -538,6 +614,10 @@ p {
text-align: center;
text-transform: uppercase;
margin-bottom: 20px;
@include respond-between(md, lg) {
font-size: 19px;
}
}
ul {
@@ -640,6 +720,10 @@ p {
text-transform: uppercase;
margin-bottom: 40px;
@include respond-below(md) {
font-size: 23px;
}
strong {
font-weight: 800;
display: block;
@@ -651,6 +735,10 @@ p {
font-family: $font3;
font-weight: 300;
max-width: 370px;
@include respond-below(md) {
font-size: 18px;
}
}
}
@@ -676,10 +764,19 @@ p {
line-height: 26px;
text-transform: uppercase;
@include respond-below(md) {
font-size: 14px;
padding: 16px 30px 11px;
}
strong {
display: block;
font-size: 25px;
font-weight: 700;
@include respond-below(md) {
font-size: 20px;
}
}
&:first-child {
@@ -716,6 +813,10 @@ p {
font-family: $font3;
font-weight: 300;
@include respond-below(md) {
font-size: 18px;
}
strong {
font-weight: 600;
}
@@ -733,6 +834,10 @@ p {
flex-direction: row;
gap: 26px;
@include respond-below(md) {
gap: 16px;
}
._col {
&-1 {
}
@@ -746,6 +851,10 @@ p {
flex-direction: column;
gap: 26px;
@include respond-below(md) {
gap: 16px;
}
li.img-tile {
position: relative;
@@ -769,10 +878,25 @@ p {
text-align: center;
text-transform: uppercase;
@include respond-below(md) {
font-size: 20px;
}
@include respond-below(sm) {
font-size: 18px;
}
strong {
display: block;
font-size: 35px;
font-weight: 700;
@include respond-below(md) {
font-size: 25px;
}
@include respond-below(sm) {
font-size: 20px;
}
}
}
}
@@ -804,6 +928,10 @@ p {
font-family: $font3;
font-weight: 300;
@include respond-below(md) {
font-size: 18px;
}
strong {
font-weight: 600;
}
@@ -857,6 +985,10 @@ p {
align-items: center;
gap: 40px;
@include respond-below(md) {
flex-direction: column;
}
._col {
width: 100%;
@@ -866,6 +998,13 @@ p {
img {
width: 100%;
max-width: 540px;
@include respond-below(md) {
display: block;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
}
}
&-2 {
@@ -877,6 +1016,11 @@ p {
text-transform: uppercase;
margin-bottom: 25px;
@include respond-below(md) {
font-size: 26px;
text-align: center;
}
strong {
display: block;
}
@@ -892,6 +1036,10 @@ p {
&:not(:last-child) {
margin-bottom: 25px;
}
@include respond-below(md) {
font-size: 16px;
}
}
}
}
@@ -915,6 +1063,10 @@ p {
flex-direction: row;
gap: 32px;
@include respond-below(md) {
flex-wrap: wrap;
}
li {
border-radius: 20px;
background: #2e2d2c;
@@ -927,6 +1079,10 @@ p {
width: calc(100% / 4);
@include respond-below(md) {
width: calc(100% / 2 - (32px - (32px / 2)));
}
img {
width: 100%;
max-width: fit-content;
@@ -967,6 +1123,10 @@ p {
flex-direction: row;
gap: 60px;
@include respond-below(md) {
flex-direction: column-reverse;
}
._col {
&-1 {
h3 {
@@ -976,9 +1136,15 @@ p {
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 15px;
margin-right: 45px;
text-transform: uppercase;
text-align: right;
@include respond-above(md) {
margin-right: 45px;
}
@include respond-below(md) {
text-align: center;
}
}
h2 {
color: #fff;
@@ -1003,6 +1169,7 @@ p {
@include respond-below(md) {
font-size: 26px;
margin-right: auto;
}
}
@@ -1027,6 +1194,10 @@ p {
margin-bottom: 12px;
}
@include respond-below(md) {
font-size: 16px;
}
strong {
font-weight: 700;
}
@@ -1040,11 +1211,23 @@ p {
margin: 40px 0 0 0;
list-style: none;
@include respond-below(md) {
display: flex;
flex-direction: row;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
li {
&:not(:last-child) {
margin-bottom: 20px;
@include respond-above(md) {
margin-bottom: 20px;
}
}
@include respond-below(md) {
width: calc(100% / 2 - (20px - (20px / 2)));
}
img {
width: 100%;
max-width: fit-content;
@@ -1086,16 +1269,25 @@ p {
.preview_img {
margin-bottom: 50px;
@include respond-below(md) {
margin-bottom: 30px;
}
img {
width: 100%;
max-width: fit-content;
height: 400px;
object-fit: cover;
@include respond-below(md) {
height: 240px;
}
}
}
.preview_data {
h3 {
color: $cTxtBlack;
font-size: 24px;
font-family: $font3;
font-weight: 300;
letter-spacing: 2px;
@@ -1114,6 +1306,12 @@ p {
height: 1px;
background-color: #000000;
}
@include respond-below(md) {
font-size: 18px;
margin-bottom: 35px;
padding-bottom: 25px;
}
}
ul {
@@ -1125,11 +1323,19 @@ p {
&.mini {
font-size: 16px;
text-transform: uppercase;
@include respond-below(md) {
font-size: 15px;
}
}
color: $cTxtBlack;
font-size: 20px;
font-family: $font3;
font-weight: 300;
@include respond-below(md) {
font-size: 16px;
}
}
}
}