Skip to content

K
kpp
Commit d2d292e8 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Переменные, функции, часть типографики перевел на rem

parent 6ef5b86c
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 48 deletions
projectConfig.json
View file @ d2d292e8
......@@ -61,9 +61,9 @@
"object-fit-polyfill": []
},
"addCssBefore": [
"./src/scss/functions.scss",
"./src/scss/variables.scss",
"./src/scss/mixins.scss",
"./src/scss/functions.scss",
"../../node_modules/owl.carousel/dist/assets/owl.carousel.css",
"../../node_modules/nouislider/distribute/nouislider.css"
],
......
src/blocks/page/page.scss
View file @ d2d292e8
......@@ -13,7 +13,6 @@
$block-name: &; // #{$block-name}__element
box-sizing: border-box;
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-overflow-style: scrollbar;
-ms-text-size-adjust: 100%;
......
src/blocks/typo/typo.scss
View file @ d2d292e8
......@@ -5,20 +5,25 @@ $gray: hsl(0, 0%, 50%) !default;
$gray-lighter: hsl(0, 0%, 80%) !default;
$gray-lightest: hsl(0, 0%, 90%) !default;
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif !default;
$font-family--headings: $font-family !default;
$font-family--monospace: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace !default;
$font-size--root: 16px !default;
$font-size: 14px !default;
$font-size--h1: 2.25em !default;
$font-size--h2: 1.875em !default;
$font-size--h3: 1.5em !default;
$font-size--h4: 1.25em !default;
$font-size--h5: 1em !default;
$font-size--h6: 1em !default;
$font-size--small: 0.75em !default;
$font-size: 1rem !default; // rem(16px)
$line-height: 1.375em !default;
$font-size--h1: rem(40px) !default;
$font-size--h2: rem(32px) !default;
$font-size--h3: rem(24px) !default;
$font-size--h4: rem(18px) !default;
$font-size--h5: rem(16px) !default;
$font-size--h6: rem(16px) !default;
$font-size--small: 80% !default;
$line-height: 1.5;
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
$font-family--serif: 'Georgia', 'Times New Roman', 'Times', serif;
$font-family--monospace: SFMono-Regular, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
$font-family--headings: $font-family;
$text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default;
......@@ -40,6 +45,15 @@ $border-radius: 3px !default;
html {
font-size: $font-size--root;
// Для адаптивной типографики, менять font-size на html
// @media (min-width: $screen-md) {
// font-size: ($font-size--root + 2);
// }
}
body {
// ТОЛЬКО типографика!
font-family: $font-family;
......@@ -62,7 +76,7 @@ h5,
h6 {
font-family: $font-family--headings;
font-weight: 700;
line-height: $line-height;
line-height: 1.2;
color: currentColor;
}
......@@ -72,8 +86,8 @@ h6 {
h1,
h2,
h3 {
margin-top: $line-height;
margin-bottom: ($line-height / 2);
margin-top: 2rem;
margin-bottom: 0.5rem;
}
// .h4,
......@@ -82,37 +96,43 @@ h3 {
h4,
h5,
h6 {
margin-top: ($line-height / 2);
margin-bottom: ($line-height / 2);
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
// .h1,
h1 {
/* font-size: #{(($font-size--h1 / ($font-size--h1 * 0 + 1)) * $font-size--root)}; */
font-size: $font-size--h1;
}
// .h2,
h2 {
/* font-size: #{(($font-size--h2 / ($font-size--h2 * 0 + 1)) * $font-size--root)}; */
font-size: $font-size--h2;
}
// .h3,
h3 {
/* font-size: #{(($font-size--h3 / ($font-size--h3 * 0 + 1)) * $font-size--root)}; */
font-size: $font-size--h3;
}
// .h4,
h4 {
/* font-size: #{(($font-size--h4 / ($font-size--h4 * 0 + 1)) * $font-size--root)}; */
font-size: $font-size--h4;
}
// .h5,
h5 {
/* font-size: #{(($font-size--h5 / ($font-size--h5 * 0 + 1)) * $font-size--root)}; */
font-size: $font-size--h5;
}
// .h6,
h6 {
/* font-size: #{(($font-size--h6 / ($font-size--h6 * 0 + 1)) * $font-size--root)}; */
font-size: $font-size--h6;
}
......@@ -127,7 +147,7 @@ pre,
address,
figure {
margin-top: 0;
margin-bottom: ($line-height / 2);
margin-bottom: 1rem;
}
address {
......@@ -181,12 +201,12 @@ small {
sub,
sup {
font-size: 70%;
font-size: $font-size--small;
}
// .mark,
mark {
background: #fcf8e3;
background: rgba($color-warning, 0.3);
padding: 0.1em 0.3em;
}
......
src/scss/blocks-library.scss
View file @ d2d292e8
......@@ -18,16 +18,16 @@
&:before {
content: '.' attr(data-id);
position: absolute;
top: -1em;
top: -1.2em;
left: 0;
font-weight: 700;
text-transform: lowercase;
font-size: 1.7rem;
line-height: 2rem;
height: 2rem;
font-size: 1em;
line-height: 1;
height: 1em;
text-align: right;
white-space: nowrap;
color: $gray-light;
color: $gray-lighter;
@media (min-width: $screen-md) {
left: 2.5rem;
......
src/scss/functions.scss
View file @ d2d292e8
/**
* Преобразование пикселей в em на основе переменной с базовым размером шрифта
* (указывается в px) проекта.
* @param {number} $px Число без единиц измерения, кол-во пикселей
* @param {string} $font-size Число пикселей, размер конт. шрифта на проекте
* @return {string} Результат преобразования $px в em на основе $font-size
* Преобразование пикселей в rem на основе переменной с базовым размером шрифта.
* @param {number} $px Число пикселей (с единицами измерения или без)
* @param {string} Число пикселей, размер контентного шрифта на проекте
* @return {string} Результат преобразования $px в rem
*/
$font-size: 14px !default;
$font-size--root: 16px !default;
@function px-to-em($px, $font-size: $font-size) {
@return (($px * 100 / ($font-size / 1px)) / 100) * 1em;
@function rem($px, $font-size: $font-size--root) {
@return ((($px / ($px * 0 + 1)) * 100 / ($font-size / 1px)) / 100) * 1rem;
}
src/scss/variables.scss
View file @ d2d292e8
......@@ -34,20 +34,24 @@ $border-color: $gray-light;
// Базовая типографика
$font-size: 14px;
$font-size--h1: 2.25em;
$font-size--h2: 1.875em;
$font-size--h3: 1.5em;
$font-size--h4: 1.25em;
$font-size--h5: 1em;
$font-size--h6: 1em;
$font-size--small: 0.75em;
$line-height: 1.375em;
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif;
$font-size--root: 16px !default;
$font-size: 1rem !default; // rem(16px)
$font-size--h1: rem(40px) !default;
$font-size--h2: rem(32px) !default;
$font-size--h3: rem(24px) !default;
$font-size--h4: rem(18px) !default;
$font-size--h5: rem(16px) !default;
$font-size--h6: rem(16px) !default;
$font-size--small: 80% !default;
$line-height: 1.5;
$font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
$font-family--serif: 'Georgia', 'Times New Roman', 'Times', serif;
$font-family--monospace: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
$font-family--monospace: SFMono-Regular, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
$font-family--headings: $font-family;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment