mt-theme

Installation

composer require intmedia/mt-theme

Optional:, _(*1)

composer require frontpack/less
composer require frontpack/composer-assets-plugin

Components

``` less @import 'assets/typro/typro/base/base'; @import 'assets/typro/typro/mixins/fonts'; @import 'assets/intmedia/mt-theme/components/page'; @import 'assets/intmedia/mt-theme/components/header'; @import 'assets/intmedia/mt-theme/components/footer'; @import 'assets/intmedia/mt-theme/components/content'; @import 'assets/intmedia/mt-theme/components/logo'; @import 'assets/intmedia/mt-theme/components/navigation'; @import 'assets/intmedia/mt-theme/components/post'; @import 'assets/intmedia/mt-theme/components/video';, _(*2)


### layout/page

``` html
<div class="wrapper">
...
</div>

@mt-page-max-width: 70em;
@mt-page-border-radius: 3px;

``` html , _(*3)


* `@mt-header-background: #f8f8f8;`
* `@mt-header-border-bottom: 1px solid #eee;`
* `@mt-header-max-width: @mt-page-max-width;`


### content

``` html
<div class="content">
    <div class="content__inner">
        <div class="content__block">
            <!-- content -->
        </div>
    </div>
</div>

@mt-content-max-width: @mt-page-max-width;
@mt-content-background: transparent;

``` html , _(*4)


* `@mt-footer-max-width: @mt-page-max-width;`
* `@mt-footer-background: transparent;`
* `@mt-footer-border-top: 1px solid #e8e8e8;`
* `@mt-footer-color: gray;`
* `@mt-footer-margin-top: 1em;`


### logo

``` html
<div class="logo">
    <div class="logo__inner">
        <a href="#" rel="home" class="logo__name">Site Name</a>
        <span class="logo__motto">Site motto</span>
    </div>
</div>

@mt-logo-name-color: #000;
@mt-logo-name-font-size: 150%;
@mt-logo-motto-color: gray;, _(*5)
.logo--on-left, _(*6)
.logo--inlined
.logo--centered

``` html , _(*7)


* `@mt-navigation-item-color: #000;`
* `@mt-navigation-item-border-radius: @mt-page-border-radius;`
* `@mt-navigation-active-item-color: #000;`
* `@mt-navigation-active-item-background: #fff;`
* `@mt-navigation-active-item-border-color: #ddd;`

* `.navigation--centered`
* `.navigation--on-right`


### post

``` html
<div class="post">
    <div class="post__image">
        <img src="photo.img" alt="">
    </div>
    <h1 class="post__header">Lorem ipsum dolor sit</h1>
    <p class="post__perex">Lorem ipsum dolo rsit</p>
    <div class="post__content">
        <p>Lorem ipsum</p>
    </div>
</div>

@mt-post-max-width: 54em;
@mt-post-perex-color: #666;

video

``` html, _(*8)

Lorem ipsum dolor sit amete

```, _(*9)

V této podobě se zobrazí na celou šířku, _(*10)

.video--w640 - omezí velikost videa/placeholderu na 640px
.video--centered - vystředí video na střed; v kombinaci s .video--w640 omezí velikost kontejneru