ethereal jekyll theme
1.0.0
버그를 보고하고, 질문하고, 기능을 요청하고 싶다면 GitLab 저장소에서 자유롭게 요청하세요. 최선을 다해 도와드리겠습니다!
또는coming+andrewbanchich/[email protected]으로 이메일을 보내 이메일을 통해 이슈를 열 수 있습니다.
GitHub 저장소는 단순히 GitLab 저장소의 미러입니다.
HTML5 UP의 Ethereal html5up.net | @ajlkn CCA 3.0 라이센스(html5up.net/license)에 따라 개인 및 상업적 용도로 무료입니다.
이것은 HTML5 UP을 위한 나의 최신, 최고, 아마도 가장 독특한 템플릿인 Ethereal입니다. 3-4년 전에 Parallelism을 출시한 이후(!!!) 저는 유연성/사용자 정의 가능성이 더 많은 또 다른 횡스크롤 템플릿을 만들고 싶었습니다. 그 결과, 제가 직접 만든 강력한 횡스크롤 프레임워크(드래그/모멘텀 스크롤, 키보드 단축키 등과 같은 다양한 "스크롤 지원" 기능 포함)와 독특한 모양과 느낌, 라이트박스를 결합한 Ethereal 템플릿이 탄생했습니다. 갤러리, 수많은 사용자 정의 옵션, 그리고 물론 완벽한 반응성을 제공합니다. 파헤쳐보시길 바랍니다 :)
데모 이미지*는 거의 모든 용도에 사용할 수 있는 멋진 CC0(공개 도메인) 이미지 컬렉션인 Unsplash에서 제공합니다.
(* = 포함되지 않음)
AJ [email protected] | @ajlkn
지침:
Overview
========
Browsers deal with side-scrolling pages differently to vertically-oriented ones in
that they require elements (or at the very least, the top-most wrapper element) to
have a defined (fixed) width. This leads to a number of limitations (eg. the page
won't automatically grow/shrink in the same way a vertically-oriented one will), so
Ethereal does two things to work around this:
- The entire page is made up of "panel" elements, each of which can be assigned an
optional "size" modifier (satisfying the fixed width requirement).
- For panels that don't use a size modifier, individual containing elements *inside*
them (eg. a column) can be assigned a "span" modifier to give those a fixed width
instead (also satisfying the fixed width requirement).
Another fun quirk of side-scrolling pages is how to actually implement horizontal
scrolling *without* resorting to using the (usually ugly) horizontal scrollbar.
Ethereal does this in FOUR (!) ways:
- Dragging: Users can simply click and drag the page left or right to scroll it around.
This works exactly as you'd expect, and even has a nice "post-scroll momentum" effect.
- Scroll Wheel: Ethereal modifies* the scroll wheel's behavior to translate vertical
scrolling into horizontal scrolling, allowing the user to use either the scroll wheel
or trackpad to scroll the page (the latter of which retains the ability to horziontally
scroll as normal, so nothing changes there).
* Special thanks to @miorel + @pieterv of Facebook for "normalizeWheel()" :)
- Scroll Zones: Users can hover the mouse cursor on the left or right edges of the page
to automatically scroll in either direction.
- Keyboard Shortcuts: Finally, users can simply use the left/right arrows, page up/down,
home/end, and the spacebar to scroll the page.
Note that any (or all) of these scroll-assist features can be turned off (and in some
cases customized). See the top of assets/js/main.js for more information.
Span Modifiers
==============
Span modifiers are simply classes that give elements a fixed width, the size of which
is determined by the "unit value" associated with the modifier (eg. "span-3" means
"span 3 units"). These sizes are in "rem" units when used inside panels that don't
use a size modifier, and in percentage units when used inside panels that do.
Ethereal includes span modifiers ranging from 0.25 units ("span-0-25") to 10 units
("span-10"). Here's a partial list:
span-0-25 Span 0.25 units.
span-0-5 Span 0.5 units.
span-0-75 Span 0.75 units.
span-1 Span 1 unit.
span-1-25 Span 1.25 units.
span-1-5 Span 1.5 units.
span-1-75 Span 1.75 units.
...
span-9 Span 9 units.
span-9-25 Span 9.25 units.
span-9-5 Span 9.5 units.
span-9-75 Span 9.75 units.
span-10 Span 10 units.
Major Elements
==============
Most of Ethereal's elements are pretty much what you'd expect, but there are a handful
of "major" ones that warrant a bit more explanation:
Panel
------
The primary building block of Ethereal.
HTML
<section class="panel (size modifier) (color modifier)">
<div class="intro (color modifier)">
(intro content)
</div>
<div class="inner (inner modifiers) (color modifier)">
(inner content)
</div>
</section>
Note: The entire "intro" child element can be excluded.
Note: You can have as many "intro" and "inner" child elements as you like.
Modifiers
Size
small Use small size.
medium Use medium size.
large Use large size.
Color
color0 Use background color 0 (gradient).
color1 Use background color 1.
color2 Use background color 2.
color3 Use background color 3.
color4 Use background color 4.
color1-alt Use background color 1 (alt).
color2-alt Use background color 2 (alt).
color3-alt Use background color 3 (alt).
color4-alt Use background color 4 (alt).
Inner
columns Divides child elements into columns.
aligned When used with "columns", aligns content to top of panel.
divided When used with "columns", separates each column with a vertical line.
Examples
Here's a very basic example:
<section class="panel medium color0">
<div class="intro">
<h2 class="major">Panel</h2>
<p>Just a generic panel.</p>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</section>
And here's a more advanced example using columns and *no* size modifier:
<section class="panel color2">
<div class="intro">
<h2 class="major">Panel</h2>
<p>Just a generic panel.</p>
</div>
<div class="inner columns">
<div class="span-4">
<p>This column is 4 units wide.</p>
</div>
<div class="span-3">
<p>This column is 3 units wide.</p>
</div>
<div class="span-2">
<p>This column is 2 units wide.</p>
</div>
</div>
</section>
Note: The "intro" child element already has a fixed width, so a span modifier
isn't required.
Panel (Banner)
--------------
The "Banner" variant of a regular panel.
HTML
<section class="panel banner (size modifier) (color modifier) (orientation modifier)">
<div class="content (color modifier)">
(content)
</div>
<div class="image (image modifiers)" data-position="(image position modifier)">
<img src="(image URL)" alt="" />
</div>
</section>
Modifiers
Orientation
left Content on the left, image on the right.
right Content on the right, image on the left.
Image
filtered Applies a gradient filter to the image.
tinted Applies a tint filter to the image.
Image Position (required)
top left Position image in the top-left corner.
top Position image along the top edge.
top right Position image in the top-right corner.
right Position image along the right edge.
bottom right Position image in the bottom-right corner.
bottom Position image along the bottom edge.
bottom left Position image in the bottom-left corner.
left Position image along the left edge.
center Position image in the center.
Example
<section class="panel banner medium right">
<div class="content color0">
<h1>Banner</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="image" data-position="center">
<img src="/path/to/image.jpg" alt="" />
</div>
</section>
Panel (Spotlight)
-----------------
The "Spotlight" variant of a regular panel.
HTML
<section class="panel spotlight (size modifier) (orientation modifier)">
<div class="content (span modifier)">
(content)
</div>
<div class="image (image modifiers)" data-position="(image position modifier)">
<img src="(image URL)" alt="" />
</div>
</section>
Modifiers
Orientation
left Content on the left.
right Content on the right.
Image
filtered Applies a gradient filter to the image.
tinted Applies a tint filter to the image.
Image Position (required)
top left Position image in the top-left corner.
top Position image along the top edge.
top right Position image in the top-right corner.
right Position image along the right edge.
bottom right Position image in the bottom-right corner.
bottom Position image along the bottom edge.
bottom left Position image in the bottom-left corner.
left Position image along the left edge.
center Position image in the center.
Example
<section class="panel spotlight large right">
<div class="content">
<h1>Spotlight</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="image" data-position="center">
<img src="/path/to/image.jpg" alt="" />
</div>
</section>
Gallery
-------
A lightbox-enabled gallery.
HTML
<div class="gallery">
<a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
<img src="(thumbnail image URL)" alt="" />
</a>
<a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
<img src="(thumbnail image URL)" alt="" />
</a>
<a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
<img src="(thumbnail image URL)" alt="" />
</a>
<div class="group (span modifier)">
<a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
<img src="(thumbnail image URL)" alt="" />
</a>
<a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
<img src="(thumbnail image URL)" alt="" />
</a>
<a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
<img src="(thumbnail image URL)" alt="" />
</a>
<a href="(full image URL)" class="image (image modifiers) (span modifier)" data-position="(image position modifier)">
<img src="(thumbnail image URL)" alt="" />
</a>
...
</div>
...
</div>
Note: The "group" element creates a dual-row group of images. Images inside this group will
automatically wrap to the next row when they exceed its width (as defined by its span modifier).
You can have as many groups in a gallery as you like.
Modifiers
Image
filtered Applies a gradient filter to the image.
tinted Applies a tint filter to the image.
Image Position (required)
top left Position image in the top-left corner.
top Position image along the top edge.
top right Position image in the top-right corner.
right Position image along the right edge.
bottom right Position image in the bottom-right corner.
bottom Position image along the bottom edge.
bottom left Position image in the bottom-left corner.
left Position image along the left edge.
center Position image in the center.
Example
<div class="gallery">
<a href="/assets/images/thumbnails/01.jpg" class="image filtered span-2" data-position="center">
<img src="/assets/images/fulls/01.jpg" alt="" />
</a>
<a href="/assets/images/thumbnails/02.jpg" class="image filtered span-4" data-position="center">
<img src="/assets/images/fulls/02.jpg" alt="" />
</a>
<div class="group span-4">
<a href="/assets/images/thumbnails/03.jpg" class="image filtered span-2" data-position="center">
<img src="/assets/images/fulls/03.jpg" alt="" />
</a>
<a href="/assets/images/thumbnails/04.jpg" class="image filtered span-2" data-position="center">
<img src="/assets/images/fulls/04.jpg" alt="" />
</a>
<a href="/assets/images/thumbnails/05.jpg" class="image filtered span-2" data-position="center">
<img src="/assets/images/fulls/05.jpg" alt="" />
</a>
<a href="/assets/images/thumbnails/06.jpg" class="image filtered span-2" data-position="center">
<img src="/assets/images/fulls/06.jpg" alt="" />
</a>
</div>
</div>
크레딧:
Demo Images:
Unsplash (unsplash.com)
Icons:
Font Awesome (fortawesome.github.com/Font-Awesome)
Other:
jQuery (jquery.com)
Misc. Sass functions (@HugoGiraudel)
normalizeWheel (@miorel + @pieterv of Facebook)
Skel (skel.io)
