In this section, we will learn about changing the typography of midnight-storm
.
midnight-storm
uses fastn
default typography. If you wish to update it.To add typography to your fastn web sites. Edit your FASTN.ftd
file and add
typography dependency into it.
In the below example we are using https://fastn-community.github.io/midnight-storm-typography/ typography.
Add typography dependency into yourFASTN.ftd
file as shown in below example:-- fastn.dependency: fastn-community.github.io/midnight-storm
-- fastn.dependency: fastn-community.github.io/midnight-storm-typography
ds
page module for midnight-storm
?You can create a ds.ftd
module inside your fastn
package and create your
custom ds
page component.
Let's learn how to create a module:
Create a new file let’s say ds.ftd
.
ds.ftd
module would look like:-- import: fastn-community.github.io/midnight-storm as ds
-- import: fastn-community.github.io/midnight-storm-typography
-- component page:
children wrapper:
optional caption title:
optional body body:
boolean sidebar: false
-- ds.page: $page.title
site-logo: $fastn-assets.files.images.fastn.svg
body: $page.body
sidebar: $page.sidebar
types: $midnight-storm-typography.types
-- end: ds.page.banner
-- ds.page.extra-headers:
-- ds.h3: Heading in sidebar
`<You can add any component like this inside sidebar.>`
-- end: ds.page.extra-headers
-- ftd.column:
spacing.fixed.em: 0.8
width: fill-container
children: $page.wrapper
-- end: ftd.column
-- end: ds.page
-- end: page
Click on the download icon of the above code-block. ds.ftd
file will be
downloaded. Import this file inside your new .ftd
file.
ds
component to create a new page using it.-- import: fastn-community.github.io/midnight-storm as ds
-- import: <your fastn package name>/ds
-- ds.page: This is page title
This is body area. It contains multiple paragraphs.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum.
-- ds.h1: This is heading level 1
This is heading level 1 optional body content.
-- ds.h2: This is heading level 2
This is heading level 2 optional body content.
-- ds.h3: This is heading level 3
This is heading level 3 optional body content.
-- end: ds.page
Click on the download icon of the above code-block. typography.ftd
file will
be downloaded.
fastn
project and deploy or run fastn serve
on
your localhost. Access your localhost in the browser
e.g.http://127.0.0.1:8000/typography/
you will see page text with
midnight-storm-typography font
sizes in Lato and
Source-Code-Pro font.