Skip to content

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

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

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