Skip to content

Commit

Permalink
typography
Browse files Browse the repository at this point in the history
  • Loading branch information
@kanishkkunal
kanishkkunal committed Mar 16, 2018
1 parent 074d5f6 commit 2a45b1f
Show file tree
Hide file tree
Showing 8 changed files with 78 additions and 44 deletions.
47 changes: 31 additions & 16 deletions dist/mm.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/mm.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/_variables.scss
View file
Expand Up @@ -71,7 +71,7 @@ $color-darkness: 5 !default;
// ––––––––––––––––––––––––––––––––––––––––––––––––––
$size-small-text: 0.875 !default;
$size-default-text: 1 !default;
$size-large-text: 1.25 !default;
$size-large-text: 1.125 !default;

// Element sizes are based on multiples of 8px

Expand Down
46 changes: 32 additions & 14 deletions src/core/_typography.scss
View file
Expand Up @@ -43,8 +43,8 @@ h1 {

.h2,
h2 {
//28.8px
@include font-size(1.8 * $size-default-text);
//30px
@include font-size(1.875 * $size-default-text);
}

.h3,
Expand All @@ -55,38 +55,56 @@ h3 {

.h4,
h4 {
//18px
@include font-size(1.125 * $size-default-text);
//20px
@include font-size(1.25 * $size-default-text);
}

.h5,
h5 {
//16px
@include font-size(1 * $size-default-text);
//18px
@include font-size(1.125 * $size-default-text);
}

.h6,
h6 {
//14px
@include font-size(0.875 * $size-default-text);
//16px
@include font-size(1 * $size-default-text);
}

@include tablet {
.h1,
h1 {
//26px
@include font-size(1.625 * $size-default-text);
//30px
@include font-size(1.875 * $size-default-text);
}

.h2,
h2 {
//21.6px
@include font-size(1.35 * $size-default-text);
//24px
@include font-size(1.5 * $size-default-text);
}

.h3,
h3 {
//19.2px
@include font-size(1.2 * $size-default-text);
//20px
@include font-size(1.25 * $size-default-text);
}

.h4,
h4 {
//18px
@include font-size(1.125 * $size-default-text);
}

.h5,
h5 {
//16px
@include font-size(1 * $size-default-text);
}

.h6,
h6 {
//14px
@include font-size(0.875 * $size-default-text);
}
}
3 changes: 2 additions & 1 deletion web/assets/vendors/highlight/styles/code-highlight.css
View file
Expand Up @@ -74,7 +74,8 @@
/* Meta color: hue: 200 */

.hljs-meta {
color: #9a59b5;
color: #262626;
font-weight: bold;
}

.hljs-meta-string {
Expand Down
2 changes: 1 addition & 1 deletion web/html/_layouts/_layout-default.pug
View file
Expand Up @@ -5,7 +5,7 @@ block header
.container
.header-left
a(href='/').site-branding
h1.title MM.css
h1.title MM.CSS
.menu-toggle
input(type="checkbox")#menu-toggle
label(for="menu-toggle").header-right
Expand Down
8 changes: 4 additions & 4 deletions web/html/docs/typography.pug
View file
Expand Up @@ -16,11 +16,11 @@ block docs-content
.code-example
.code-output
h1.mt Heading 1 <span class="text-muted text-small">2.25rem (36px)</span>
h2.mt Heading 2 <span class="text-muted text-small">1.8rem (28.8px)</span>
h2.mt Heading 2 <span class="text-muted text-small">1.875rem (30px)</span>
h3.mt Heading 3 <span class="text-muted text-small">1.5rem (24px)</span>
h4.mt Heading 4 <span class="text-muted text-small">1.125rem (18px)</span>
h5.mt Heading 5 <span class="text-muted text-small">1rem (16px)</span>
h6.mt Heading 6 <span class="text-muted text-small">0.875rem (14px)</span>
h4.mt Heading 4 <span class="text-muted text-small">1.25rem (20px)</span>
h5.mt Heading 5 <span class="text-muted text-small">1.12rem (18px)</span>
h6.mt Heading 6 <span class="text-muted text-small">1rem (16px)</span>
pre
code.
#{'<h1>Heading 1</h1>'}
Expand Down
12 changes: 6 additions & 6 deletions web/html/index.pug
View file
Expand Up @@ -19,15 +19,15 @@ block content
.col.col-4.col-md-6.col-sm-12.d-flex.my-4
.grid
.col-fixed.mr-4
.thumbnail-sm.border-circle.bg-red.text-white
.thumbnail-sm.border-circle.bg-primary.text-white
<svg class="icon icon-desktop"><use xlink:href="#icon-desktop"></use></svg>
.col
h2.h3.mt-0 Minimalist Design
p MM.css is built with minimalism in mind. Build modern and fast websites which users love.
.col.col-4.col-md-6.col-sm-12.d-flex.my-4
.grid
.col-fixed.mr-4
.thumbnail-sm.border-circle.bg-purple.text-white
.thumbnail-sm.border-circle.bg-primary.text-white
<svg class="icon icon-folder-o"><use xlink:href="#icon-folder-o"></use></svg>
.col
h2.h3.mt-0 Lightweight
Expand All @@ -36,7 +36,7 @@ block content
.col.col-4.col-md-6.col-sm-12.d-flex.my-4
.grid
.col-fixed.mr-4
.thumbnail-sm.border-circle.bg-pink.text-white
.thumbnail-sm.border-circle.bg-primary.text-white
<svg class="icon icon-tablet"><use xlink:href="#icon-tablet"></use></svg>
.col
h2.h3.mt-0 Mobile Friendly
Expand All @@ -45,7 +45,7 @@ block content
.col.col-4.col-md-6.col-sm-12.d-flex.my-4
.grid
.col-fixed.mr-4
.thumbnail-sm.border-circle.bg-yellow.text-white
.thumbnail-sm.border-circle.bg-primary.text-white
<svg class="icon icon-thumbs-o-up"><use xlink:href="#icon-thumbs-o-up"></use></svg>
.col
h2.h3.mt-0 Zero JavaScript
Expand All @@ -54,7 +54,7 @@ block content
.col.col-4.col-md-6.col-sm-12.d-flex.my-4
.grid
.col-fixed.mr-4
.thumbnail-sm.border-circle(style="background-color:#0087be;").text-white
.thumbnail-sm.border-circle.bg-primary.text-white
<svg class="icon icon-wordpress"><use xlink:href="#icon-wordpress"></use></svg>
.col
h2.h3.mt-0 WordPress Compatible
Expand All @@ -64,7 +64,7 @@ block content
.col.col-4.col-md-6.col-sm-12.d-flex.my-4
.grid
.col-fixed.mr-4
.thumbnail-sm.border-circle.bg-green.text-white
.thumbnail-sm.border-circle.bg-primary.text-white
<svg class="icon icon-check"><use xlink:href="#icon-check"></use></svg>
.col
h2.h3.mt-0 MIT License
Expand Down

0 comments on commit 2a45b1f

Please sign in to comment.