Update Inter font

This commit is contained in:
panr 2019-02-06 12:52:43 +01:00
parent 8d86361f8c
commit 32409a7012
60 changed files with 80 additions and 51 deletions

View File

@ -11,7 +11,7 @@ This theme is pretty basic and covers all of the essentials. All you have to do
## Features ## Features
- **dark/light mode**, depending on your preferences (dark is default, but you can change it) - **dark/light mode**, depending on your preferences (dark is default, but you can change it)
- great reading experience thanks to [**Inter UI font**](https://rsms.me/inter/), made by [Rasmus Andersson](https://rsms.me/about/) - great reading experience thanks to [**Inter font**](https://rsms.me/inter/), made by [Rasmus Andersson](https://rsms.me/about/)
- nice code highlighting thanks to [**PrismJS**](https://prismjs.com) - nice code highlighting thanks to [**PrismJS**](https://prismjs.com)
- fully responsive - fully responsive

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" class="greater-icon" width="44" height="44" viewBox="0 0 44 44">
<polyline fill="none" stroke="#000" stroke-width="2" points="15 8 29.729 22.382 15 35.367"/>
</svg>

After

Width:  |  Height:  |  Size: 207 B

View File

@ -2,7 +2,7 @@
{{ if $.Site.Params.Logo.path }} {{ if $.Site.Params.Logo.path }}
<img src="{{ $.Site.Params.Logo.path }}" alt="{{ $.Site.Params.Logo.alt }}" /> <img src="{{ $.Site.Params.Logo.path }}" alt="{{ $.Site.Params.Logo.alt }}" />
{{ else }} {{ else }}
<span class="logo__mark">></span> <span class="logo__mark">{{ partial "greater-icon.html" . }}</span>
<span class="logo__text">{{ with $.Site.Params.Logo.logoText }}{{ . }}{{ else }}hello friend{{ end }}</span> <span class="logo__text">{{ with $.Site.Params.Logo.logoText }}{{ . }}{{ else }}hello friend{{ end }}</span>
<span class="logo__cursor"></span> <span class="logo__cursor"></span>
{{ end }} {{ end }}

View File

@ -8,7 +8,10 @@
{{ end }} {{ end }}
{{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }} {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
<ul class="menu__sub-inner"> <ul class="menu__sub-inner">
<li class="menu__sub-inner-more-trigger">{{ $.Site.Params.MenuMore | default "Show more" }} <span class="menu__sub-inner-more-trigger-icon">></span></li> <li class="menu__sub-inner-more-trigger">
{{ $.Site.Params.MenuMore | default "Show more" }}
<span class="menu__sub-inner-more-trigger-icon">{{ partial "greater-icon.html" . }}</span>
</li>
<ul class="menu__sub-inner-more hidden"> <ul class="menu__sub-inner-more hidden">
{{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }} {{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}

44
source/css/fonts.css Normal file
View File

@ -0,0 +1,44 @@
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url("../fonts/Inter-Regular.woff2") format("woff2"),
url("../fonts/Inter-Regular.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
src: url("../fonts/Inter-Italic.woff2") format("woff2"),
url("../fonts/Inter-Italic.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
src: url("../fonts/Inter-Medium.woff2") format("woff2"),
url("../fonts/Inter-Medium.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
src: url("../fonts/Inter-MediumItalic.woff2") format("woff2"),
url("../fonts/Inter-MediumItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
src: url("../fonts/Inter-Bold.woff2") format("woff2"),
url("../fonts/Inter-Bold.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
src: url("../fonts/Inter-BoldItalic.woff2") format("woff2"),
url("../fonts/Inter-BoldItalic.woff") format("woff");
}

View File

@ -1,44 +0,0 @@
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 400;
src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"),
url("../fonts/Inter-UI-Regular.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 400;
src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"),
url("../fonts/Inter-UI-Italic.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 600;
src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
url("../fonts/Inter-UI-Medium.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 600;
src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: normal;
font-weight: 800;
src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
url("../fonts/Inter-UI-Bold.woff") format("woff");
}
@font-face {
font-family: 'Inter UI';
font-style: italic;
font-weight: 800;
src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
}

View File

@ -10,7 +10,11 @@
} }
&__mark { &__mark {
display: inline-flex;
align-items: center;
margin-right: 5px; margin-right: 5px;
@mixin greater-icon 8px;
} }
&__text { &__text {

View File

@ -11,7 +11,7 @@ html {
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
line-height: 1.54; line-height: 1.54;
@ -140,6 +140,7 @@ code {
margin: 0 2px; margin: 0 2px;
border-radius: 5px; border-radius: 5px;
font-size: .9rem; font-size: .9rem;
font-weight: normal;
.dark-theme & { .dark-theme & {
background: var(--dark-background-secondary); background: var(--dark-background-secondary);

View File

@ -93,13 +93,19 @@
left: 0; left: 0;
&-trigger { &-trigger {
display: inline-flex;
align-items: center;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
&-icon { &-icon {
display: inline-block; display: inline-flex;
align-items: center;
margin-left: 3px;
transform: rotate(90deg); transform: rotate(90deg);
line-height: 1; line-height: 1;
@mixin greater-icon 5px;
} }
} }

View File

@ -1,5 +1,5 @@
@import 'variables'; @import 'variables';
@import 'inter-ui'; @import 'fonts';
@import 'buttons'; @import 'buttons';
@import 'header'; @import 'header';

View File

@ -21,6 +21,18 @@
@custom-media --phone (width < 684px); @custom-media --phone (width < 684px);
@custom-media --tablet (width < 900px); @custom-media --tablet (width < 900px);
@define-mixin greater-icon $stroke-width: 3px, $width: .95rem, $height: 100% {
.greater-icon {
width: $width;
height: $height;
polyline {
stroke: currentColor;
stroke-width: $stroke-width;
}
}
}
/* HOW TO USE */ /* HOW TO USE */
/*@media (--phone) {*/ /*@media (--phone) {*/

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long