Date: Thu, 7 Apr 2016 19:22:44 +0800 Subject: update doc and index --- demo/index.html | 958 -------------------------------------- dist/spectre.css | 68 +-- index.html | 1278 +++++++++++++++++++++++++++++++++++++++++++++++++++ src/cards.less | 2 +- src/labels.less | 16 +- src/modals.less | 6 +- src/toasts.less | 4 +- src/typography.less | 46 +- 8 files changed, 1357 insertions(+), 1021 deletions(-) delete mode 100644 demo/index.html create mode 100644 index.html diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index ca36a6d..0000000 --- a/demo/index.html +++ /dev/null @@ -1,958 +0,0 @@ - - - - - - - - Spectre, a lightweight and clean CSS framework for faster and extendable development. - - - - - -

Project Spectre

Project Spectre is a lightweight and clean CSS framework for faster and extendable development.

lightweight and clean starting point for your project
flexbox and responsive layout friendly
built in useful components and utilities

- GitHub - Documentation -

- -

typography

typography.less sets default styles for headings, paragraphs, blockquote, lists elements and some text related utilities.

- -

headings

H1 Title 5rem

H2 Title 4rem

H3 Title 3rem

H4 Title 2.4rem

H5 Title 2rem

H6 Title 1.6rem

- -

paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- -

blockquote

-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- - Source -

- -

lists

list item 1
list item 2 -
- list item 2.1
- list item 2.2
- list item 2.3
-
list item 3

list item 1
list item 2 -
1. list item 2.1
2. list item 2.2
3. list item 2.3
-
list item 3

- -

flexbox layout

layout.less includes flexbox based grid system with 12 columns.

Add the class columns to a container. Add any element you want with classname column inside the container. These columns will take up the space equally. You can specific the width of each column by adding class col-[1-12].

- -

tables

tables.less sets default styles for tables and data sets.

Add the class <table> to any table element. The class will add padding, border and emphasized table header. Adding the class selected to a <tr> element will highlight the whole table row.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

name	duration	genre	release date
The Shawshank Redemption	2h 22min	Crime, Drama	14 October 1994 USA
The Godfather	2h 55min	Crime, Drama	24 March 1972 USA
Schindler's List	3h 15min	Biography, Drama, History	4 February 1994 USA
Se7en	2h 7min	Crime, Drama, Mystery	24 March 1972 USA

- -

buttons

buttons.less includes simple button style for actions in different types and sizes.

Add the class btn to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons. A button with the class loading can show loading indicator.

- - -

- -

button sizes

Add the class btn-sm or btn-lg for small or large size. Icons with the class icon can be correctly rendered in each button size. Also, you can add the class btn-block for a full-width button.

- - - -

- -

- - - -

- -

button groups

If you want to use buttons as a group, add the class btn-group to the container.

- - - -

- -

forms

forms.less provides the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch.

- Name - -

- Email - -

- -

- - - Send me emails with news and tips - -

- Message - -

- Gender - - Male - - - Female - -

- - - Remember me - -

- - -

- Name -

- -

- Email -

- -

- - - Send me emails with news and tips - -

- Message -

- -

- Gender -

- - Male - - - Female - -

- - - Remember me - -

- - -

- -

input groups

- slack.com/ - -

- slack.com/ - - -

- -

media

- -

avatars

- -

chips

- - Crime - -

- Drama - -

- Biography - -

- Mystery - -

- Yan Zhu - -

- -

file icons

fileicons.less includes a set of file icons. This part is written entirely in CSS as well.

- -

tooltips

tooltips.less is a label-like component that appears on hover and focus.

Add the class tooltip and the attribute data-tooltip, which contains the tooltip content, to non self closing elements. And add the class name tooltip-right, tooltip-bottom or tooltip-left to define the position of a tooltip. By default, the tooltip appears above the element.

- <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button> -

- -

labels

labels.less .

Add the class label to span elements.

- default label -

- primary label -

- success label -

- info label -

- warning label -

- danger label -

- default label -

- primary label -

- -

toasts

toasts.less is used to show alert or information to users.

Add a container element with the class toast. You can add any text within the container, and even icons. You may also add a close button with the class btn-clear if you need.

- - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -

- - Efficiently unleash cross-media information without cross-media value. -

- -

menus

menus.less is a vertical list links or buttons for actions and navigations.

Add a container element with the class menu. And add child elements with the class name menu-item. That is a basic menu component.

- -

- - Go to - -
- - Slack - -
- - Hipchat - -
- Skype -

- - Go to - -
- - Slack - -
- - Hipchat - -
- Skype -

- -

breadcrumbs

- -

tabs

- - Music - -
- - Playlists - -
- - Radio - -
- - Connect - -

- - Music - -
- - Playlists - -
- - Radio - -
- - Connect - -

- -

badges

badges.less is often used as unread number indicator.

Add the class badge to non self closing elements. And add the attribute data-badge to define the content of a badge. The badge will appear in the top-right direction of the element.

- - Notifications - -

- -

modals

- -

cards

Microsoft

Software and hardware

- Empower every person and every organization on the planet to achieve more. -

- Do -

Apple

Hardware and software

- To make a contribution to the world by making tools for the mind that advance humankind. -

- - - -

Google

Software and hardware

- Organize the world’s information and make it universally accessible and useful. -

- Ad -

- - \ No newline at end of file diff --git a/dist/spectre.css b/dist/spectre.css index eae9afa..08b0d96 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -455,24 +455,6 @@ blockquote p:last-child { blockquote small { color: #b3b3b3; } -code, -pre { - display: block; - margin-top: 1em; - margin-bottom: 1em; - border-left: 0.2rem solid #5764c6; - line-height: 1.8rem; - background-color: #f9f9f9; -} -code { - padding: 1rem 2rem; -} -pre code { - background-color: transparent; - border-left: 0; - margin-top: 0; - margin-bottom: 0; -} ul, ol { margin: 0 0 1rem; @@ -550,6 +532,31 @@ ol ol { -ms-hyphens: auto; hyphens: auto; } +pre { + margin-top: 1em; + margin-bottom: 1em; + padding: 1.5rem; + border-left: 0.2rem solid #5764c6; + line-height: 1.8rem; + background-color: #f9f9f9; +} +code { + padding: .2rem .4rem; + margin: -0.2rem 0.1em 0 0.1em; + border-radius: .2rem; + background-color: #efefef; + font-size: .9em; + line-height: 1em; + vertical-align: baseline; + white-space: nowrap; +} +pre code { + margin-top: 0; + margin-bottom: 0; + border-left: 0; + background-color: transparent; + line-height: 1.8rem; +} .container { width: 100%; margin-left: auto; @@ -1264,13 +1271,13 @@ textarea.form-input { } .card .card-header, .card .card-image, -.card .card-content, +.card .card-body, .card .card-footer { padding: 1.5rem 1.5rem 0 1.5rem; } .card .card-header:last-child, .card .card-image:last-child, -.card .card-content:last-child, +.card .card-body:last-child, .card .card-footer:last-child { padding-bottom: 1.5rem; } @@ -1426,15 +1433,15 @@ textarea.form-input { } .label { display: inline-block; - padding: .3rem .4rem; - font-size: 90%; + padding: .2rem .4rem; + font-size: .9em; line-height: 1em; - color: #737373; + color: #666666; background-color: #efefef; text-align: center; white-space: nowrap; - vertical-align: middle; - margin: -0.3rem 0.1em 0 0.1em; + vertical-align: baseline; + margin: -0.2rem 0.1em 0 0.1em; border-radius: .2rem; } .label.label-primary { @@ -1457,11 +1464,6 @@ textarea.form-input { color: #fff; background-color: #e85600; } -.label.label-lg { - font-size: 100%; - line-height: 1.2; - padding: .3rem .5rem; -} .menu { display: block; width: auto; @@ -1533,7 +1535,6 @@ textarea.form-input { margin: .5rem; } .modal { - width: 50vw; text-align: left; margin: 0; padding: 0; @@ -1563,6 +1564,11 @@ textarea.form-input { padding: 1.5rem; text-align: right; } +@media screen and (min-width: 640px) { + .modal { + width: 64rem; + } +} .breadcrumb { list-style: none; margin: .5rem 0; diff --git a/index.html b/index.html new file mode 100644 index 0000000..d7ac1fc --- /dev/null +++ b/index.html @@ -0,0 +1,1278 @@ + + + + + + + + Spectre, a lightweight and clean CSS framework for faster and extendable development. + + + + + +

Project Spectre

Project Spectre is a lightweight and clean CSS framework for faster and extendable development.

lightweight and clean starting point for your project
flexbox and responsive layout friendly
built in useful components and utilities

+ GitHub + Documentation +

+ +

typography

Typography sets default styles for headings, paragraphs, blockquote, lists elements and some text related utilities.

+ +

headings

H1 Title 5rem

H2 Title 4rem

H3 Title 3rem

H4 Title 2.4rem

H5 Title 2rem

H6 Title 1.6rem

+ +

paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+ +

blockquote

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ - Source +

+ +

lists

list item 1
list item 2 +
- list item 2.1
- list item 2.2
- list item 2.3
+
list item 3

list item 1
list item 2 +
1. list item 2.1
2. list item 2.2
3. list item 2.3
+
list item 3

+ +

flexbox layout

Layout includes flexbox based responsive grid system with 12 columns.

Add the class columns to a container. And add any element you want with classname column inside the container. These columns will take up the space equally. You can specific the width of each column by adding class col-[1-12].

col-6

col-3

col-2

col-1

col-2

col-4

col-2

+ + +

+<div class="columns">
+    <div class="column col-6">col-6</div>
+    <div class="column col-3">col-3</div>
+    <div class="column col-2">col-2</div>
+    <div class="column col-1">col-1</div>
+</div>
+

+ +

tables

Tables include default styles for tables and data sets.

Add the class table to any <table> element. The class will add padding, border and emphasized table header. Use the class selected to make <tr> element highlighted.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

name	duration	genre	release date
The Shawshank Redemption	2h 22min	Crime, Drama	14 October 1994 USA
The Godfather	2h 55min	Crime, Drama	24 March 1972 USA
Schindler's List	3h 15min	Biography, Drama, History	4 February 1994 USA
Se7en	2h 7min	Crime, Drama, Mystery	24 March 1972 USA

+ + +

+<table class="table">
+    <thead>
+        <tr>
+            <th>name</th>
+            <th>duration</th>
+            <th>genre</th>
+            <th>release date</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr class="selected">
+            <th>The Shawshank Redemption</th>
+            <th>2h 22min</th>
+            <th>Crime, Drama</th>
+            <th>14 October 1994</th>
+        </tr>
+    </tbody>
+</table>
+

+ +

buttons

Buttons include simple button styles for actions in different types and sizes.

Add the class btn to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons. A button with the class loading can show loading indicator.

+ +

+ + +

+<button class="btn">default button</button>
+<button class="btn btn-primary">primary button</button>
+<button class="btn btn-link">link button</button>
+
+<!-- a button with loading state -->
+<button class="btn loading">button</button>
+

+ +

button sizes

Add the class btn-sm or btn-lg for small or large button size. Also, you can add the class btn-block for a full-width button.

+ +

+ + + +

+ +

+ + +

+<button class="btn btn-lg">large button</button>
+<button class="btn btn-sm">small button</button>
+<button class="btn btn-block">block button</button>
+

+ +

Icons with the class icon can be correctly rendered in each button size.

+ + + +

+ + +

+<button class="btn btn-primary btn-lg"><span class="icon icon-markunread"></span> large</button>
+<button class="btn btn-primary"><span class="icon icon-markunread"></span> normal</button>
+<button class="btn btn-primary btn-sm"><span class="icon icon-markunread"></span> small</button>
+

+ +

button groups

If you want to use buttons as a group, add the class btn-group to the container. You can add the class btn-group-block for a full-width button group.

+ + + +

+ + +

+<div class="btn-group btn-group-block">
+    <button class="btn">first button</button>
+    <button class="btn">second button</button>
+    <button class="btn">third button</button>
+</div>
+

+ +

forms

Forms provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch.

+ Name + +

+ Email + +

+ Gender + + Male + + + Female + +

+ +

+ + + Send me emails with news and tips + +

+ Message + +

+ + + Remember me + +

+ + +

+ Name +

+ +

+ Email +

+ +

+ Gender +

+ + Male + + + Female + +

+ +

+ + + Send me emails with news and tips + +

+ Message +

+ +

+ + + Remember me + +

+ + +

+<form>
+    <div class="form-group">
+        <label class="form-label" for="input-example-1">Name</label>
+        <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
+    </div>
+    <div class="form-group">
+        <label class="form-label">Gender</label>
+        <label class="form-radio">
+            <input type="radio" name="gender" /> Male
+        </label>
+        <label class="form-radio">
+            <input type="radio" name="gender" checked /> Female
+        </label>
+    </div>
+    <div class="form-group">
+        <select class="form-select">
+            <option>Choose an option</option>
+            <option>Slack</option>
+            <option>Skype</option>
+            <option>Hipchat</option>
+        </select>
+    </div>
+    <div class="form-group">
+        <label class="form-switch">
+            <input type="checkbox" />
+            Send me emails with news and tips
+        </label>
+    </div>
+    <div class="form-group">
+        <label class="form-label" for="input-example-3">Message</label>
+        <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+    </div>
+    <div class="form-group">
+        <label class="form-checkbox">
+            <input type="checkbox" />
+            Remember me
+        </label>
+    </div>
+</form>
+

+ +

input groups

+ slack.com/ + +

+ slack.com/ + + +

+ +

images

Images include responsive image class.

Add the class img-responsive to <img> elements. The images will scale with the parent sizes.

+ + +

+<img src="img/osx-el-capitan.jpg" class="img-responsive rounded" />
+

+ +

avatars

Avatars are user profile pictures.

Add the class avatar to <img> element. Avatars come in 5 sizes, including avatar-xl (64px), avatar-lg (48px), avatar-sm (24px), and avatar-xs (16px). By default, the avatar size is 32px.

For users who don't have profile pictures, you may use their initials for avatars. Add the class avatar and avatar size class to <div> element. The attribute data-initial is the name appear inside the avatar.

+ + +

+<img src="img/avatar-1.png" class="avatar avatar-xl" />
+
+
+<div class="avatar-container">
+    <img src="img/avatar-1.png" class="avatar avatar-xl" />
+    <img src="img/avatar-5.png" class="avatar avatar-icon" />
+</div>
+
+<div class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></div>
+

+ +

chips

+ + Crime + +

+ Drama + +

+ Biography + +

+ Mystery + +

+ Yan Zhu + +

+ +

file icons

fileicons.less includes a set of file icons. This part is written entirely in CSS as well.

+ +

tooltips

Tooltips provide context information labels that appear on hover and focus.

Add the class tooltip and the attribute data-tooltip, which contains the tooltip content, to non self closing elements. And add the class name tooltip-right, tooltip-bottom or tooltip-left to define the position of a tooltip. By default, the tooltip appears above the element.

+ +

+ + +

+<button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
+<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
+

+ +

labels

Labels are formatted text tags for highlighted, informative information.

Add the class label to <span> or <small> elements. You can add another class label-primary, label-success, label-info, label-warning, label-danger for more colored labels.

+ default label +

+ primary label +

+ success label +

+ info label +

+ warning label +

+ danger label +

+ + +

+<span class="label">default label</span>
+<span class="label label-primary">primary label</span>
+

+ +

toasts

Toasts are used to show alert or information to users.

Add a container element with the class toast. You can add any text within the container, and even icons. You may also add a close button with the class btn-clear if you need.

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

You can add the class toast-primary, toast-success, toast-info, toast-warning, toast-danger for more colors.

+ + Efficiently unleash cross-media information without cross-media value. +

+ + +

+<div class="toast">
+    <button class="btn btn-clear pull-right"></button>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</div>
+
+<div class="toast toast-primary">
+    <button class="btn btn-clear pull-right"></button>
+    <span class="icon icon-error_outline"></span>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</div>
+

+ +

menus

A menu is a vertical list of links or buttons for actions and navigation.

Add a container element with the class menu. And add child elements with the classname menu-item. That is a basic menu component.

+ +

+ + Go to + +
+ + Slack + +
+ + Hipchat + +
+ Skype +

+ + Go to + +
+ + Slack + +
+ + Hipchat + +
+ Skype +

+ + +

+<ul class="menu">
+    <li class="menu-header">
+        <span class="menu-header-text">
+            Go to
+        </span>
+    </li>
+    <li class="menu-item">
+        <a href="#">
+            <span class="icon icon-link"></span> Slack
+        </a>
+    </li>
+    <li class="menu-item">
+        <a href="#">
+            <span class="icon icon-link"></span> HIpchat
+        </a>
+    </li>
+    <li class="menu-item">
+        <a href="#">
+            <span class="icon icon-link"></span> skype
+        </a>
+    </li>
+</ul>
+

+ +

navigation

Navigation includes several components, including breadcrumbs and tabs.

breadcrumbs

Add a container element with the class breadcrumb. And add child elements with the classname breadcrumb-item.

+ +

+ + +

+<ul class="breadcrumb">
+    <li class="breadcrumb-item">
+        <a href="#">
+            Home
+        </a>
+    </li>
+    <li class="breadcrumb-item">
+        <a href="#">
+            Profile
+        </a>
+    </li>
+    <li class="breadcrumb-item">
+        <a href="#">
+            Change avatar
+        </a>
+    </li>
+</ul>
+

+ +

tabs

Add a container element with the class tab. And add child elements with the classname tab-item. You can add the class tab-block for a full-width tab.

+ + Music + +
+ + Playlists + +
+ + Radio + +
+ + Connect + +

+ + Music + +
+ + Playlists + +
+ + Radio + +
+ + Connect + +

+ + +

+<ul class="tab tab-block">
+    <li class="tab-item active">
+        <a href="#">
+            Music
+        </a>
+    </li>
+    <li class="tab-item">
+        <a href="#">
+            Playlists
+        </a>
+    </li>
+    <li class="tab-item">
+        <a href="#">
+            Radio
+        </a>
+    </li>
+    <li class="tab-item">
+        <a href="#">
+            Connect
+        </a>
+    </li>
+</ul>
+

+ +

badges

Badges are often used as unread number indicators.

Add the class badge to non self closing elements. And add the attribute data-badge to define the content of a badge. The badge will appear in the top-right direction of the element.

+ + Notifications + +

+ + +

+<span class="badge" data-badge="99">
+    Notifications
+</span>
+

+ +

modals

+ +

+ + +

+<div class="modal">
+    <div class="modal-container">
+        <div class="modal-header">
+            <button class="btn btn-clear pull-right"></button>
+            <h6 class="modal-title">Modal title</h6>
+        </div>
+        <div class="modal-body">
+            <div class="content">
+                <!-- content here -->
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-link">Close</button>
+            <button class="btn btn-primary">Share</button>
+        </div>
+    </div>
+</div>
+

+ +

cards

Cards are flexible content containers.

Add a container element with the class card. And add child elements with the class name card-image, card-header, card-content and/or card-footer in any order.

Microsoft

Software and hardware

+ Empower every person and every organization on the planet to achieve more. +

+ Do +

Apple

Hardware and software

+ To make a contribution to the world by making tools for the mind that advance humankind. +

+ + + +

Google

Software and hardware

+ Organize the world’s information and make it universally accessible and useful. +

+ Ad +

+ + +

+<div class="card">
+    <div class="card-image">
+        <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" />
+    </div>
+    <div class="card-header">
+        <h4 class="card-title">Microsoft</h4>
+        <h6 class="card-meta">Software and hardware</h6>
+    </div>
+    <div class="card-body">
+        To make a contribution to the world by making tools for the mind that advance humankind.
+    </div>
+    <div class="card-footer">
+        <button class="btn btn-primary">Do</button>
+    </div>
+</div>
+

+ +

+ + diff --git a/src/cards.less b/src/cards.less index 3a9abc5..3338fd6 100644 --- a/src/cards.less +++ b/src/cards.less @@ -11,7 +11,7 @@ .card-header, .card-image, - .card-content, + .card-body, .card-footer { padding: 1.5rem 1.5rem 0 1.5rem; diff --git a/src/labels.less b/src/labels.less index 1c16f40..aba7cf4 100644 --- a/src/labels.less +++ b/src/labels.less @@ -1,15 +1,15 @@ // Labels .label { display: inline-block; - padding: .3rem .4rem; - font-size: 90%; + padding: .2rem .4rem; + font-size: .9em; line-height: 1em; - color: lighten(@body-font-color, 25%); + color: lighten(@body-font-color, 20%); background-color: @core-border-color; text-align: center; white-space: nowrap; - vertical-align: middle; - margin: -.3rem .1em 0 .1em; + vertical-align: baseline; + margin: -.2rem .1em 0 .1em; border-radius: .2rem; &.label-primary { @@ -32,10 +32,4 @@ color: #fff; background-color: @control-color-danger; } - - &.label-lg { - font-size: 100%; - line-height: 1.2; - padding: .3rem .5rem; - } } \ No newline at end of file diff --git a/src/modals.less b/src/modals.less index b51f5ca..4ef3652 100644 --- a/src/modals.less +++ b/src/modals.less @@ -1,7 +1,6 @@ // Modals .modal { display: block; - width: 50vw; text-align: left; margin: 0; padding: 0; @@ -29,4 +28,9 @@ padding: 1.5rem; text-align: right; } +} +@media screen and (min-width: 640px) { + .modal { + width: 64rem; + } } \ No newline at end of file diff --git a/src/toasts.less b/src/toasts.less index 9792e50..44becf1 100644 --- a/src/toasts.less +++ b/src/toasts.less @@ -34,4 +34,6 @@ background-color: @control-color-danger; border-color: darken(@control-color-danger, 2%); } -} \ No newline at end of file +} + +// TODO: attached toasts \ No newline at end of file diff --git a/src/typography.less b/src/typography.less index 0051ba0..817e973 100644 --- a/src/typography.less +++ b/src/typography.less @@ -50,24 +50,6 @@ blockquote { color: lighten(@body-font-color, 50%); } } -code, -pre { - display: block; - margin-top: 1em; - margin-bottom: 1em; - border-left: .2rem solid @core-color; - line-height: 1.8rem; - background-color: lighten(@core-border-color, 4%); -} -code { - padding: 1rem 2rem; -} -pre code { - background-color: transparent; - border-left: 0; - margin-top: 0; - margin-bottom: 0; -} ul, ol { margin: 0 0 1rem; @@ -147,4 +129,32 @@ ol { word-break: break-word; word-wrap: break-word; hyphens: auto; +} + +// Code +pre { + margin-top: 1em; + margin-bottom: 1em; + padding: 1.5rem; + border-left: .2rem solid @core-color; + line-height: 1.8rem; + background-color: lighten(@core-border-color, 4%); +} +code { + padding: .2rem .4rem; + margin: -.2rem .1em 0 .1em; + border-radius: .2rem; + background-color: @core-border-color; + font-size: .9em; + line-height: 1em; + vertical-align: baseline; + white-space: nowrap; + + pre & { + margin-top: 0; + margin-bottom: 0; + border-left: 0; + background-color: transparent; + line-height: 1.8rem; + } } \ No newline at end of file -- cgit v1.3.1-23-gd82d

H1 Title 5rem

H2 Title 4rem

H3 Title 3rem

H4 Title 2.4rem

H5 Title 2rem

H6 Title 1.6rem

Modal title

Lorem ipsum

Cupcake ipsum

Candy ipsum

Microsoft

Software and hardware

Apple

Hardware and software

Google

Software and hardware

H1 Title 5rem

H2 Title 4rem

H3 Title 3rem

H4 Title 2.4rem

H5 Title 2rem

H6 Title 1.6rem

Modal title

Lorem ipsum

Cupcake ipsum

Candy ipsum

Microsoft

Software and hardware

Apple

Hardware and software

Google

Software and hardware