Browse Source

feat: self-host fonts

master
Inhji Y. 10 months ago
parent
commit
94c8d89852
  1. 18
      apps/tomie_web/assets/css/home.css
  2. 4
      apps/tomie_web/assets/css/home/homepage.css
  3. 23
      apps/tomie_web/assets/package-lock.json
  4. 1
      apps/tomie_web/assets/package.json
  5. BIN
      apps/tomie_web/assets/static/fonts/manrope.woff
  6. BIN
      apps/tomie_web/assets/static/fonts/open_sans.woff
  7. 10
      apps/tomie_web/assets/webpack.config.js
  8. 1
      apps/tomie_web/lib/tomie_web/templates/layout/home.html.eex

18
apps/tomie_web/assets/css/home.css

@ -7,22 +7,38 @@
@import "home/footer";
@import "home/homepage";
@font-face {
font-family: 'Open Sans';
src: url('../static/fonts/open_sans.woff') format('woff');
}
@font-face {
font-family: 'Manrope';
src: url('../static/fonts/manrope.woff') format('woff');
}
:root {
--primary-color: #d34;
--main-bg-color: #fefefe;
--divider-color: #ccc;
--body-family: 'Manrope', sans-serif;
--body-family: 'Open Sans', sans-serif;
--heading-family: 'Manrope', sans-serif;
}
body {
color: #555;
background: var(--main-bg-color);
font-family: var(--body-family);
font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1;
font-kerning: normal;
font-size: 17px;
letter-spacing: 0.015em;
word-spacing: 0.001em;
}
h1, h2, h3 {
color: #333;
font-family: var(--heading-family);
}
main#wrapper {

4
apps/tomie_web/assets/css/home/homepage.css

@ -47,10 +47,6 @@
font-weight: bold;
}
.home-wrapper dl {
font-family: 'Open Sans', serif;
}
.home-wrapper dl > dd {
margin-bottom: 1rem;
}

23
apps/tomie_web/assets/package-lock.json

@ -3495,6 +3495,29 @@
"integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
"dev": true
},
"file-loader": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.0.0.tgz",
"integrity": "sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
"schema-utils": "^2.6.5"
},
"dependencies": {
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
}
}
},
"file-uri-to-path": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",

1
apps/tomie_web/assets/package.json

@ -24,6 +24,7 @@
"babel-plugin-prismjs": "^2.0.1",
"copy-webpack-plugin": "^6.0.3",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-import": "^12.0.1",

BIN
apps/tomie_web/assets/static/fonts/manrope.woff

BIN
apps/tomie_web/assets/static/fonts/open_sans.woff

10
apps/tomie_web/assets/webpack.config.js

@ -32,6 +32,16 @@ module.exports = (env, options) => ({
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
},
{
test: /\.woff(2)?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../fonts/'
}
}
}
]
},

1
apps/tomie_web/lib/tomie_web/templates/layout/home.html.eex

@ -7,7 +7,6 @@
<%= live_title_tag @page_title, suffix: " • Inhji.de" %>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/home.css") %>"/>
<link rel="apple-touch-icon" sizes="180x180" href="<%= Routes.static_path(@conn, "/images/apple-touch-icon.png") %>">
<link rel="icon" type="image/png" sizes="32x32" href="<%= Routes.static_path(@conn, "/images/favicon-32x32.png") %>">

Loading…
Cancel
Save