<div class="notification-list"></div>
<div class="cursor-gradient">
</div>
<header class="header ">
<div class="header__inner">
<div class="header__grid grid grid--no-gutter">
<div class="header__column grid__col grid__col--md-5">
<button type="button" class="button button--icon header__burger-button ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#menu"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#menu"></use>
</svg>
</span>
</span>
</button>
<div class="logo header__logo">
<a href="#" class="logo__content logo__link">
<figure class="image logo__image">
<img loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/logo/logo.svg" data-sizes="auto" alt="letters-logo" class="image__img lazyload">
</figure>
</a>
</div>
<button type="button" class="button button--icon header__search-button header__search-button--mobile ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#search"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#search"></use>
</svg>
</span>
</span>
</button>
</div>
<div class="header__column header__column--desktop grid__col grid__col--md-19">
<div class="header__theme-wrapper">
<div class="theme-switcher header__theme">
<button data-theme="theme-beige" class="theme-switcher__button theme-switcher__button--beige">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-gray" class="theme-switcher__button theme-switcher__button--gray">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-yellow" class="theme-switcher__button theme-switcher__button--yellow">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-green" class="theme-switcher__button theme-switcher__button--green">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-dark" class="theme-switcher__button theme-switcher__button--dark">
<span class="theme-switcher__icon-cross"></span>
</button>
</div>
</div>
<button type="button" class="button button--icon-text header__search-button ">
<span class="button__inner" data-text="Search">
<span class="button__text">
Search
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-down-left"></use>
</svg>
</span>
</span>
</button>
<nav class="navigation header__navigation text-button">
<ul class="navigation__list">
<li class="navigation__item is-current navigation__item--only-mobile " data-text="home">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
home
</span>
</a>
</li>
<li class="navigation__item " data-text="fonts">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
fonts
</span>
</a>
</li>
<li class="navigation__item " data-text="about">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
about
</span>
</a>
</li>
<li class="navigation__item navigation__item--only-mobile " data-text="contact">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
contact
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="header__burger-top">
<button type="button" class="button button--icon header__burger-button header__burger-button--close ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#exit"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#exit"></use>
</svg>
</span>
</span>
</button>
</div>
</div>
<div class="header_appear-container">
<div class="header__search">
<form method="get" action="the.url.com">
<div class="textfield textfield--label-hidden header__search-field">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="search" name="textfield" placeholder="Search">
<label class="textfield__label text-button " for="search">
Textfield label
</label>
</div>
</div>
</form>
</div>
<div class="header__burger">
<nav class="navigation header__navigation text-button">
<ul class="navigation__list">
<li class="navigation__item is-current navigation__item--only-mobile " data-text="home">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
home
</span>
</a>
</li>
<li class="navigation__item " data-text="fonts">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
fonts
</span>
</a>
</li>
<li class="navigation__item " data-text="about">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
about
</span>
</a>
</li>
<li class="navigation__item navigation__item--only-mobile " data-text="contact">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
contact
</span>
</a>
</li>
</ul>
</nav>
<div class="header__burger-heading text-small">switch themes</div>
<div class="theme-switcher header__theme">
<button data-theme="theme-beige" class="theme-switcher__button theme-switcher__button--beige">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-gray" class="theme-switcher__button theme-switcher__button--gray">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-yellow" class="theme-switcher__button theme-switcher__button--yellow">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-green" class="theme-switcher__button theme-switcher__button--green">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-dark" class="theme-switcher__button theme-switcher__button--dark">
<span class="theme-switcher__icon-cross"></span>
</button>
</div>
<div class="header__burger-heading text-small">Instagram</div>
<a href="#" class="header__link h2">@lettersfromtartu</a>
</div>
</div>
</header>
<main class="main main--padding">
<div class="detail-hero">
<div class="detail-hero__inner">
<div class="detail-hero__item">
<div class="detail-hero__item-inner">
<figure class="image image--fluid detail-hero__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201400%20700%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/1400x700 1400w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
<div class="detail-hero__item">
<div class="detail-hero__item-inner">
<figure class="image image--fluid detail-hero__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201400%20700%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/1400x700 1400w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
<div class="detail-hero__item">
<div class="detail-hero__item-inner">
<figure class="image image--fluid detail-hero__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201400%20700%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/1400x700 1400w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
<div class="detail-hero__item">
<div class="detail-hero__item-inner">
<figure class="image image--fluid detail-hero__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201400%20700%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/1400x700 1400w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
</div>
</div>
</div>
<div class="detail-hero__left-button"></div>
<div class="detail-hero__right-button"></div>
<div class="detail-hero__bubble-list">
<div class="detail-hero__bubble-item" data-slide=0>
<div class="detail-hero__bubble"></div>
</div>
<div class="detail-hero__bubble-item" data-slide=1>
<div class="detail-hero__bubble"></div>
</div>
<div class="detail-hero__bubble-item" data-slide=2>
<div class="detail-hero__bubble"></div>
</div>
<div class="detail-hero__bubble-item" data-slide=3>
<div class="detail-hero__bubble"></div>
</div>
</div>
</div>
<div class="detail-preview" data-id=undefined>
<div class="detail-preview__preview">
<div class="detail-preview__parameter-list">
<fieldset class="style-select detail-preview__style-select ">
<legend class="style-select__legend-label text-small">style</legend>
<div class="style-select__inner">
<div class="style-select__item"><input class="style-select__input" type="radio" name="style" id="bold" value="bold" data-font=""><label class="style-select__label" for="bold">Bold</label><span class="style-select__delim">/</span></div>
<div class="style-select__item"><input class="style-select__input" type="radio" name="style" id="italic" value="italic" data-font=""><label class="style-select__label" for="italic">Italic</label><span class="style-select__delim">/</span></div>
<div class="style-select__item"><input class="style-select__input" type="radio" name="style" id="normal" value="normal" checked="checked" data-font=""><label class="style-select__label" for="normal">Normal</label></div>
</div>
</fieldset>
<div class="size-slider detail-preview__size-slider " data-min="0" data-max="140" data-initial="30">
<label class="size-slider__label text-small" for="size-slider">
size
</label>
<div class="size-slider__inner">
<div>
0 pt
</div>
<div class="size-slider__slider"></div>
<div>
140 pt
</div>
<input id="size-slider" type="number" name="detail-parameters" class="size-slider__input-value" value="30">
</div>
</div>
</div>
<div class="detail-demo detail-preview__demo " data-initial="30">
<div class="detail-demo__line-wrapper">
<div class="detail-demo__text" contentEditable="true"></div>
<div class="detail-demo__single-line">
Väike mölder hüppas üle rongi
</div>
</div>
</div>
</div>
<div class="content-section content-section--sticky detail-preview__about">
<div class="content-section__title text-button">wesenber</div>
<div class="content-section__content">
<div class="detail-preview__info">
<div class="detail-preview__info-heading text-small">author</div>
<div class="detail-preview__info-body">Marge Maasikas</div>
</div>
<div class="detail-preview__info">
<div class="detail-preview__info-heading text-small">styles</div>
<div class="detail-preview__info-body">Bold / Italic / Normal</div>
</div>
<div class="detail-preview__info">
<div class="detail-preview__info-heading text-small">year</div>
<div class="detail-preview__info-body">2011</div>
</div>
<div class="detail-preview__info">
<div class="detail-preview__info-heading text-small">times downloaded</div>
<div class="detail-preview__info-body">12</div>
</div>
</div>
</div>
</div>
<div class="content-section content-section--sticky content-section--padding content-section--max-width ">
<div class="content-section__title text-button">about this typeface</div>
<div class="content-section__content">
Neuhaus sündis soovist luua, tumeda ja pisut futurislik-tööstusliku tunnetusega paradoksaalne kirjatüüp. Antud fondis saavad kokku kaks omavahel vastuolulist ja üksteist välistavat poolt, usk ning kuritegevus. Vormides neid ühte, saabub mürgine harmoonia. Fondi inspiratsioon tuleneb nii venemaa õigeusu maailmast pärit ornamentaalsetest kirjadest (Vyaz), kui ka Ladina- Ameerika kuritegevuslike jõukude poolt kasutatavatest gängisümolistikast ning Brasiilia graffiti kirjastiilist (Pichação). Antud fonti iseloomustavad parimalt tähed M, A, S, T, E, X ja C. Kõige paremini sobiks font temaga sarnaste tumedate postrite peale või näiteks albumikujundusele. Font töötab kõige paremini olles võimalikult üleolev ning pahaendeliselt suur.
</div>
</div>
<div class="content-section content-section--sticky glyph-module">
<div class="content-section__title text-button">glyph set</div>
<div class="content-section__content">
<div class="glyph-set glyph-module__grid" data-font="" data-slug="">
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
A
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
B
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
C
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
D
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
E
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
F
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
G
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
H
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
I
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
J
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
K
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
L
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
M
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
N
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
O
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
P
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
Q
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
R
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
S
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
T
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
U
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
V
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
W
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
X
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
Y
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
Z
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
a
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
b
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
c
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
d
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
e
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
f
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
g
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
h
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
i
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
j
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
k
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
l
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
m
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
n
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
o
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
p
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
q
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
r
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
s
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
t
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
u
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
v
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
w
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
x
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
y
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
z
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
1
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
2
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
3
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
4
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
5
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
6
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
7
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
8
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
9
</div>
</div>
</div>
<div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
0
</div>
</div>
</div>
</div>
</div>
</div>
<div class="detail-meta ">
<div class="grid grid--no-gutter">
<div class="grid__col grid__col--md-17 grid__col--lg-18 detail-meta__col">
<div class="content-section content-section--sticky detail-meta__col-inner detail-meta__versions">
<div class="content-section__title text-button">Supported languages</div>
<div class="content-section__content">
<div class="detail-meta__languages">Estonian only for free download. Afrikaans, Akan, Albanian, Amharic, Arabic, Armenian, Assamese, Assyrian, Azerbaijani, Bahdini, Bambara, Bashkir, Basque, Belarusian, English included in the commercial version.</div>
<div class="accordion js-accordion-group detail-meta__accordions">
<div class="accordion__item js-accordion is-open" id="accordion-item-1">
<a href="#accordion-item-1" class="accordion__header js-accordion-control">
<div class="accordion__title">Accordion item 1 <svg class="icon accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
</svg>
<svg class="icon accordion__header-icon--collapse accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
</svg>
</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint.
</div>
</div>
</div>
<div class="accordion__item js-accordion " id="accordion-item-2">
<a href="#accordion-item-2" class="accordion__header js-accordion-control">
<div class="accordion__title">Accordion item 2 <svg class="icon accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
</svg>
<svg class="icon accordion__header-icon--collapse accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
</svg>
</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint.
</div>
</div>
</div>
<div class="accordion__item js-accordion " id="accordion-item-3">
<a href="#accordion-item-3" class="accordion__header js-accordion-control">
<div class="accordion__title">Accordion item 3 <svg class="icon accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
</svg>
<svg class="icon accordion__header-icon--collapse accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
</svg>
</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-section content-section--sticky detail-meta__examples">
<div class="content-section__title text-button">In use</div>
<div class="content-section__content">
<div class="detail-meta__example">
<div class="content-tooltip ">
<a href="https://google.com" class="button button--icon-text content-tooltip__button " target="_blank">
<span class="button__inner" data-text="Hover me">
<span class="button__text">
Hover me
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-local"></use>
</svg>
</span>
</span>
</a>
<div class="content-tooltip__container">
<div class="content-section__overflow">
<figure class="image content-section--fluid content-section__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20510%20695%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/510x695 100w" data-sizes="auto" alt="image alt text" class="image__img lazyload">
</figure>
</div>
</div>
</div>
</div>
<div class="detail-meta__example">
<div class="content-tooltip ">
<a href="https://google.com" class="button button--icon-text content-tooltip__button " target="_blank">
<span class="button__inner" data-text="Hover me">
<span class="button__text">
Hover me
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-local"></use>
</svg>
</span>
</span>
</a>
<div class="content-tooltip__container">
<div class="content-section__overflow">
<figure class="image content-section--fluid content-section__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20510%20695%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/510x695 100w" data-sizes="auto" alt="image alt text" class="image__img lazyload">
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid__col grid__col--md-7 grid__col--lg-6 detail-meta__col detail-meta__col--sidebar">
<div class="content-section content-section--sticky detail-meta__col-inner">
<div class="content-section__title text-button">Quality indicators</div>
<div class="content-section__content">
<div class="quality-indicator">
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">character set</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 10%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">vector quality</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 30%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">spacing</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 100%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">kerning</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 0%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">family styles</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 60%"></span>
</span>
</div>
<div class="quality-indicator__metric">
<span class="quality-indicator__label text-small">open type features</span>
<span class="quality-indicator__meter">
<span class="quality-indicator__meter-fill" style="width: 90%"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__top grid grid--no-gutter">
<div class="footer__col grid__col grid__col--md-8">
<div class="footer__link-title text-small">facebook</div>
<div class="footer__link-wrapper h2">
<a class="footer__link" href="#">
@lettersfromtartu
</a>
</div>
</div>
<div class="footer__col grid__col grid__col--md-9 grid__col--lg-10">
<form class="newsletter footer__newsletter newsletter--block">
<div class="newsletter__textfield-container">
<div class="newsletter__button-wrapper">
<div class="textfield textfield--label-hidden textfield--border-hidden newsletter__textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="footerEmail" name="textfield" placeholder="Enter your email here">
<label class="textfield__label text-button " for="footerEmail">
newsletter
</label>
</div>
</div>
<button type="submit" class="button newsletter__button newsletter__button--mobile ">
<span class="button__inner" data-text="subscribe">
<span class="button__text">
subscribe
</span>
</span>
</button>
</div>
<div class="newsletter__button-wrapper">
<div class="newsletter__label text-small">
newsletter
<span class="newsletter__error-message"></span>
</div>
<button type="submit" class="button newsletter__button ">
<span class="button__inner" data-text="subscribe">
<span class="button__text">
subscribe
</span>
</span>
</button>
</div>
</div>
<div class="newsletter__success">
<div class="text-large newsletter__vw-title">
Thank you for signing up!
</div>
Your subscription has been confirmed. You've been added to our list and will hear back from us soon.
</div>
</form>
</div>
<div class="footer__col grid__col grid__col--md-7 grid__col--lg-6">
<div class="button-list button-list--col-2 footer__button-list">
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Search">
<span class="button__text">
Search
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="FAQ">
<span class="button__text">
FAQ
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Index">
<span class="button__text">
Index
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Fonts">
<span class="button__text">
Fonts
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="About">
<span class="button__text">
About
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Contact">
<span class="button__text">
Contact
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="footer__bottom-left text-small">
2020 Letters from Tartu. All rights reserved.
</div>
<div class="logo footer__logo">
<a href="#" class="logo__content logo__link">
<figure class="image logo__image">
<img loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/logo/logo.svg" data-sizes="auto" alt="letters-logo" class="image__img lazyload">
</figure>
</a>
</div>
<div class="footer__bottom-right text-small">
<a class="link" href="#">
Terms and conditions
</a>
</div>
</div>
</footer>
{% extends '@view-base' %}
{% block page %}
{% include '@detail-hero' with {data: data.detailHero} %}
{% include '@detail-preview' with {data: data.detailPreview} %}
{% include '@content-section' with {modifier: "content-section--sticky content-section--padding content-section--max-width", data: data.detailAbout} %}
{% include '@glyph-module' with {data: data.glyphModule} %}
{% include '@detail-meta' with {data: data.detailMeta} %}
{% endblock %}
{
"language": "en-US",
"data": {
"paddingModifier": "main--padding",
"header": {
"themeHeading": "switch themes",
"instagram": {
"heading": "Instagram",
"link": "#",
"handle": "lettersfromtartu"
},
"logo": {
"image": {
"alt": "letters-logo",
"srcset": "../../inc/logo/logo.svg"
},
"link": "#"
},
"themeSwitcher": {
"palettes": [
{
"class": "beige"
},
{
"class": "gray"
},
{
"class": "yellow"
},
{
"class": "green"
},
{
"class": "dark"
}
]
},
"searchButton": {
"text": "Search"
},
"navigation": {
"items": [
{
"link": "#",
"title": "home",
"current": "true",
"is_only_mobile": true
},
{
"link": "#",
"title": "fonts"
},
{
"link": "#",
"title": "about"
},
{
"link": "#",
"title": "contact",
"is_only_mobile": true
}
]
},
"search": {
"label": "Textfield label",
"id": "search",
"name": "textfield",
"placeholder": "Search",
"url": "the.url.com"
}
},
"footer": {
"socialMedia": {
"title": "facebook",
"text": " @lettersfromtartu",
"link": "#"
},
"rightsText": "2020 Letters from Tartu. All rights reserved.",
"terms": {
"text": "Terms and conditions",
"link": "#"
},
"logo": {
"image": {
"alt": "letters-logo",
"srcset": "../../inc/logo/logo.svg"
},
"link": "#"
},
"newsletter": {
"textfield": {
"label": "newsletter",
"id": "footerEmail",
"name": "textfield",
"placeholder": "Enter your email here"
},
"button": {
"text": "subscribe"
},
"buttonMobile": {
"icon": "arrow-enter-bold"
},
"label": "newsletter",
"thanks": {
"title": "Thank you for signing up!",
"message": "Your subscription has been confirmed. You've been added to our list and will hear back from us soon."
}
},
"buttonList": {
"buttonModifier": "button--icon-text button-ico",
"buttons": [
{
"text": "Search",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "FAQ",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "Index",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "Fonts",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "About",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "Contact",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
}
]
}
},
"detailHero": {
"items": [
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
}
]
},
"detailPreview": {
"aboutTitle": "wesenber",
"styleSelect": {
"label": "style",
"items": [
{
"id": "bold",
"name": "style",
"value": "bold",
"label": "Bold",
"rule": "font-weight",
"style": "bold"
},
{
"id": "italic",
"name": "style",
"value": "italic",
"label": "Italic",
"rule": "font-style",
"style": "italic"
},
{
"id": "normal",
"name": "style",
"value": "normal",
"label": "Normal",
"rule": "font-style",
"style": "normal",
"isSelected": true
}
]
},
"sizeSlider": {
"id": "size-slider",
"name": "detail-parameters",
"label": "size",
"rangeUnit": "pt",
"rangeMin": 0,
"rangeMax": 140,
"rangeInitial": 30
},
"detailDemo": {
"placeholder": "Väike mölder hüppas üle rongi",
"initialSize": 30,
"lineHeight": "normal"
},
"aboutInfo": [
{
"heading": "author",
"body": "Marge Maasikas"
},
{
"heading": "styles",
"body": "Bold / Italic / Normal"
},
{
"heading": "year",
"body": "2011"
},
{
"heading": "times downloaded",
"body": "12"
}
],
"fontPath": "",
"fonts": [
{
"label": "",
"font": ""
}
]
},
"detailAbout": {
"title": "about this typeface",
"content": "Neuhaus sündis soovist luua, tumeda ja pisut futurislik-tööstusliku tunnetusega paradoksaalne kirjatüüp. Antud fondis saavad kokku kaks omavahel vastuolulist ja üksteist välistavat poolt, usk ning kuritegevus. Vormides neid ühte, saabub mürgine harmoonia. Fondi inspiratsioon tuleneb nii venemaa õigeusu maailmast pärit ornamentaalsetest kirjadest (Vyaz), kui ka Ladina- Ameerika kuritegevuslike jõukude poolt kasutatavatest gängisümolistikast ning Brasiilia graffiti kirjastiilist (Pichação). Antud fonti iseloomustavad parimalt tähed M, A, S, T, E, X ja C. Kõige paremini sobiks font temaga sarnaste tumedate postrite peale või näiteks albumikujundusele. Font töötab kõige paremini olles võimalikult üleolev ning pahaendeliselt suur."
},
"glyphModule": {
"sectionTitle": "glyph set",
"glyphSet": {
"glyphs": "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890",
"font": {
"label": "",
"slug": "",
"path": ""
}
}
},
"detailMeta": {
"title": "Supported languages",
"languages": "Estonian only for free download. Afrikaans, Akan, Albanian, Amharic, Arabic, Armenian, Assamese, Assyrian, Azerbaijani, Bahdini, Bambara, Bashkir, Basque, Belarusian, English included in the commercial version.",
"versions": {
"items": [
{
"id": "accordion-item-1",
"title": "Accordion item 1",
"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint."
},
{
"id": "accordion-item-2",
"title": "Accordion item 2",
"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint."
},
{
"id": "accordion-item-3",
"title": "Accordion item 3",
"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quo voluptatum, accusantium exercitationem totam tempora error delectus libero commodi et. Similique vel exercitationem rerum distinctio itaque sunt voluptatibus enim sint."
}
]
},
"examples": {
"title": "In use",
"items": [
{
"button": {
"text": "Hover me",
"icon": "arrow-local",
"link": "https://google.com"
},
"image": {
"srcset": "//via.placeholder.com/510x695 100w",
"alt": "image alt text",
"aspectRatio": {
"width": 510,
"height": 695
}
}
},
{
"button": {
"text": "Hover me",
"icon": "arrow-local",
"link": "https://google.com"
},
"image": {
"srcset": "//via.placeholder.com/510x695 100w",
"alt": "image alt text",
"aspectRatio": {
"width": 510,
"height": 695
}
}
}
]
},
"sidebar": {
"title": "Quality indicators",
"indicators": {
"indicators": [
{
"label": "character set",
"quality": 10
},
{
"label": "vector quality",
"quality": 30
},
{
"label": "spacing",
"quality": 100
},
{
"label": "kerning",
"quality": 0
},
{
"label": "family styles",
"quality": 60
},
{
"label": "open type features",
"quality": 90
}
]
}
}
}
}
}