Load fonts

6 files changed, 333 insertions, 89 deletions

diff --git a/assets/_sass/_layout.scss b/assets/_sass/_layout.scss
index 0c2a1b7..9c1dd0a 100644
--- a/assets/_sass/_layout.scss
+++ b/assets/_sass/_layout.scss
@@ -12,12 +12,12 @@
     border-radius: 0 0 5px 5px;

     text-decoration: none;

 

-    @include transition(background .2s ease);

+    transition: background .2s ease;

 

     &:before { position: absolute; top: 0; left: -150%; content: ""; width: 50%; height: 100%;

       background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);

       background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);

-      @include skew(-45deg, 0);

+      transform: skew(-45deg, 0);

     }

     &:hover {

       background: var(--main-color-hover);

@@ -48,7 +48,7 @@
 }

 

 .site-navigation {

-  @include flexbox();

+  display: flex;

   @include justify-content();

   @include align-items();

   @include flex-flow(row wrap);

@@ -63,7 +63,7 @@
     text-decoration: none;

     color: var(--grey-555);

     padding: 0 0 2px;

-    @include transition(color .2s ease);

+    transition: color .2s ease;

     cursor: pointer;

 

     &:before {

@@ -74,7 +74,8 @@
       width: 0%;

       border-bottom: 2px solid var(--grey-222);

 

-      @include transition(width .18s ease, opacity .18s ease); content: "";

+      transition: width .18s ease, opacity .18s ease;

+      content: "";

     }

 

     &:hover, &.active { color: var(--grey-222);

@@ -96,7 +97,7 @@
     box-shadow: 0 2px 5px rgba(0, 0, 0, .1);

 

     .site-header-wrapper {

-      @include flexbox();

+      display: flex;

       @include align-items();

       @include justify-content();

       @include flex-flow(row wrap);

@@ -129,8 +130,8 @@
     @include justify-content(flex-start);

     @include flex-flow(column nowrap);

     gap: 20px 0;

-    @include translate(0, -100%);

-    @include transition(transform .25s ease-in-out);

+    transform: translate(0, -100%);

+    transition: transform .25s ease-in-out;

     padding: 100px 20px 0;

     background: rgba(255, 255, 255, .9);

     z-index: 10;

diff --git a/assets/_sass/base/_fonts.scss b/assets/_sass/base/_fonts.scss
new file mode 100644
index 0000000..56be318
--- /dev/null
+++ b/assets/_sass/base/_fonts.scss
@@ -0,0 +1,306 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Bebas Neue';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/BebasNeue-Regular.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Bebas Neue';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/BebasNeue-Regular.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansitalic.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansitalic.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansitalic.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansitalic.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansbolditalic.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansbolditalic.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansbolditalic.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansbolditalic.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptsans.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptsans.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptsans.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptsans.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansbold.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansbold.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansbold.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptsansbold.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifitalic.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifitalic.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifitalic.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifitalic.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifbolditalic.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifitalic.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifitalic.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifitalic.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptserif.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptserif.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptserif.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/assets/fonts/ptserif.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifbold.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifbold.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifbold.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'PT Serif';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/assets/fonts/ptserifbold.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/assets/_sass/base/_mixins.scss b/assets/_sass/base/_mixins.scss
index 7541d12..47c3cc3 100644
--- a/assets/_sass/base/_mixins.scss
+++ b/assets/_sass/base/_mixins.scss
@@ -1,19 +1,3 @@
-@mixin transition($transitions...) {

-  transition: $transitions;

-  -moz-transition: $transitions;

-  -webkit-transition: $transitions;

-  -o-transition: $transitions;

-}

-

-@mixin no-select {

-  -webkit-touch-callout: none;

-  -webkit-user-select: none;

-  -khtml-user-select: none;

-  -moz-user-select: none;

-  -ms-user-select: none;

-  user-select: none;

-}

-

 @mixin placeholder {

   &.placeholder { @content }

   &:-ms-input-placeholder { @content }

@@ -22,54 +6,6 @@
   &::-webkit-input-placeholder { @content }

 }

 

-@mixin translate($val1, $val2) {

-  -webkit-transform: translate(#{$val1}, #{$val2});

-  -moz-transform: translate(#{$val1}, #{$val2});

-  -ms-transform: translate(#{$val1}, #{$val2});

-  -o-transform: translate(#{$val1}, #{$val2});

-  transform: translate(#{$val1}, #{$val2});

-}

-

-@mixin skew($x, $y) {

-  -webkit-transform: skew(#{$x}, #{$y});

-  -moz-transform: skew(#{$x}, #{$y});

-  -ms-transform: skew(#{$x}, #{$y});

-  -o-transform: skew(#{$x}, #{$y});

-  transform: skew(#{$x}, #{$y});

-}

-

-@mixin scale($val) {

-  -webkit-transform: scale(#{$val});

-  -moz-transform: scale(#{$val});

-  -ms-transform: scale(#{$val});

-  -o-transform: scale(#{$val});

-  transform: scale(#{$val});

-}

-

-@mixin rotate($deg) {

-  -webkit-transform: rotate(#{$deg});

-  -moz-transform: rotate(#{$deg});

-  -ms-transform: rotate(#{$deg});

-  -o-transform: rotate(#{$deg});

-  transform: rotate(#{$deg});

-}

-

-@mixin flexbox() {

-  display: -webkit-box;

-  display: -moz-box;

-  display: -ms-flexbox;

-  display: -webkit-flex;

-  display: flex;

-}

-

-@mixin inline-flex() {

-  display: -webkit-inline-box;

-  display: -webkit-inline-flex;

-  display: -moz-inline-flex;

-  display: -ms-inline-flexbox;

-  display: inline-flex;

-}

-

 @mixin flex($grow: 1, $shrink: 1, $basis: auto) {

   -webkit-flex: $grow $shrink $basis;

   -moz-flex: $grow $shrink $basis;

diff --git a/assets/_sass/components/_post.scss b/assets/_sass/components/_post.scss
index 5eed7cb..46a31e3 100644
--- a/assets/_sass/components/_post.scss
+++ b/assets/_sass/components/_post.scss
@@ -109,7 +109,7 @@
     }

     .post-categories {

       position: relative;

-      @include flexbox();

+      display: flex;

       @include justify-content(flex-end);

       gap: 5px;

       margin: 8px 0 0;

@@ -289,14 +289,14 @@
 }

 

 .post-footer {

-  @include flexbox();

+  display: flex;

   @include justify-content(space-between);

   @include align-items(flex-start);

   gap: 0 20px;

   margin: 50px 0 0;

 

   .post-tags {

-    @include flexbox();

+    display: flex;

     @include flex-flow(row wrap);

     @include flex(9, 1, auto);

     gap: 0 20px;

@@ -310,7 +310,7 @@
         font-family: 'PT Sans', sans-serif;

         color: var(--grey-ccc);

         text-decoration: none;

-        @include transition(all .15s ease);

+        transition: all .15s ease;

         &:hover {

           color: var(--grey-555);

         }

@@ -342,7 +342,7 @@
       letter-spacing: .1em;

       color: var(--grey-aaa);

       cursor: pointer;

-      @include transition(margin .2s ease);

+      transition: margin .2s ease;

     }

     ul {

       position: absolute;

@@ -350,11 +350,11 @@
       left: 100%;

       width: 100%;

       height: 100%;

-      @include flexbox();

+      display: flex;

       list-style: none;

       margin: 0;

       padding: 0;

-      @include transition(left .2s ease);

+      transition: left .2s ease;

 

       li {

         @include flex(1, 0, auto);

@@ -364,7 +364,7 @@
           border-left: 1px solid var(--grey-ddd);

         }

         a {

-          @include flexbox();

+          display: flex;

           @include align-items();

           @include justify-content();

           height: 100%;

@@ -396,7 +396,7 @@
       margin: 0 0 15px;

     }

     .post-author {

-      @include flexbox();

+      display: flex;

       @include align-items();

       @include flex-flow(row wrap);

       gap: 15px;

@@ -417,7 +417,7 @@
         .author-title { display: none; }

       }

       .post-meta {

-        @include flexbox();

+        display: flex;

         @include flex-flow(row wrap);

         margin: 0;

         margin-left: auto;

diff --git a/assets/_sass/main.scss b/assets/_sass/main.scss
index a20dba4..cc1bc5e 100644
--- a/assets/_sass/main.scss
+++ b/assets/_sass/main.scss
@@ -1,6 +1,7 @@
 @import 'base/vars';

 @import 'base/mixins';

 @import 'base/reset';

+@import 'base/fonts';

 @import 'base/syntax';

 @import 'base/animations';

 @import 'base/helpers';

diff --git a/assets/_sass/partials/_burger-menu.scss b/assets/_sass/partials/_burger-menu.scss
index 2bea84c..73a5b4d 100644
--- a/assets/_sass/partials/_burger-menu.scss
+++ b/assets/_sass/partials/_burger-menu.scss
@@ -3,18 +3,18 @@
 

   &:checked {

     & ~ .site-navigation {

-      @include translate(0, 0);

+      transform: translate(0, 0);

     }

     & ~ .toggleBurgerWrapper {

       span {

         background: transparent;

         &:before {

           top: 0;

-          @include rotate(135deg);

+          transform: rotate(135deg);

         }

         &:after {

           top: 0;

-          @include rotate(-135deg);

+          transform: rotate(-135deg);

         }

       }

     }

@@ -30,7 +30,7 @@
   height: 30px;

   cursor: pointer;

   z-index: 100;

-  @include no-select();

+  user-select: none;

 

   span {

     position: absolute;

@@ -39,8 +39,8 @@
     width: 100%;

     background: var(--grey-222);

 

-    @include transition(all .3s ease);

-    @include translate(0, -50%);

+    transition: all .3s ease;

+    transform: translate(0, -50%);

 

     &:before,

     &:after {

@@ -50,7 +50,7 @@
       background: var(--grey-222);

       content: "";

 

-      @include transition(all .3s ease);

+      transition: all .3s ease;

     }

     &:before {

       top: -6px;