From 4467e79ab9516010c93c8ba7c530ddd9622a5262 Mon Sep 17 00:00:00 2001 From: Eugen Wissner Date: Wed, 15 Jul 2026 00:09:31 +0200 Subject: Load fonts --- assets/_sass/_layout.scss | 17 +- assets/_sass/base/_fonts.scss | 306 ++++++++++++++++++++++++++++++++ assets/_sass/base/_mixins.scss | 64 ------- assets/_sass/components/_post.scss | 20 +-- assets/_sass/main.scss | 1 + assets/_sass/partials/_burger-menu.scss | 14 +- 6 files changed, 333 insertions(+), 89 deletions(-) create mode 100644 assets/_sass/base/_fonts.scss (limited to 'assets/_sass') 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; -- cgit v1.2.3