Skip to content

Commit

Permalink
Initial template recoding
Browse files Browse the repository at this point in the history
  • Loading branch information
pepelsbey committed Feb 3, 2015
1 parent a2b95bf commit 9c420c1
Show file tree
Hide file tree
Showing 10 changed files with 227 additions and 83 deletions.
15 changes: 15 additions & 0 deletions _data/tags-featured.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
- css
- flexbox
- html
- semantics
- javascript
- design
- dev-tools
- extensions
- http
- webrtc
- i18n
- android
- opera-mini
- svg
- tv
7 changes: 5 additions & 2 deletions _includes/author-picture.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
{% for authors in site.categories.authors %}
{% assign author = authors.id | split: '/' | last %}
{% if {{include.object}}.authors contains author %}
<img src="/authors/{{ authors.url | split: '/' | last }}.jpg" alt="{{ authors.title }}" class="{{include.class}}">
<a href="" class="author">
<img class="author__picture" src="/authors/{{ authors.url | split: '/' | last }}.jpg" alt="{{ authors.title }}">
<span class="author__name">{{ authors.title | replace: ' ','<br>' }}</span>
</a>
{% endif %}
{% endfor %}
{% endfor %}
2 changes: 1 addition & 1 deletion _includes/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<footer class="footer">
<p>Copyright © 2006–{{ site.time | date: '%Y' }} Opera Software ASA. Some rights reserved. <a href="https://github.com/operasoftware/devopera/blob/master/CONTRIBUTING.md" class="footer__contribute">Contribute</a></p>
<p class="footer__copy">Copyright © 2006—{{ site.time | date: '%Y' }} Opera Software ASA. Some rights reserved. <a href="https://github.com/operasoftware/devopera/blob/master/CONTRIBUTING.md" class="footer__link footer__link--contribute">Contribute!</a></p>
</footer>
{% if page.categories contains 'articles' or page.categories contains 'tv' or page.categories contains 'blog' %}
<script src="/scripts/highlight.js"></script>
Expand Down
31 changes: 15 additions & 16 deletions _includes/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,28 +17,27 @@
<link href="/feed/tv/" rel="alternate" type="application/atom+xml" title="Dev.Opera TV">
</head>
<body>

<header class="header" role="banner">
<div class="header__logo">
{% if page.url == '/index.html' %}
<h1 class="logo">
<span class="logo__wrapper">
Dev.<span class="logo__thinner">Opera</span>
</span>
</h1>
<h1 class="header__logo">
<span href="/" class="header__logo-type">
Dev.<span class="header__logo-opera">Opera</span>
</span>
</h1>
{% else %}
<p class="logo">
<a href="/" class="logo__wrapper">
Dev.<span class="logo__thinner">Opera</span>
</a>
</p>
<span class="header__logo">
<a href="/" class="header__logo-type">
Dev.<span class="header__logo-opera">Opera</span>
</a>
</span>
{% endif %}
</div>
<nav class="header__menu">
<nav>
{% include menu.html items='Blog|Articles|Extensions|TV' %}
</nav>
<form class="header__search" action="/search/" method="get">
<fieldset class="search">
<input type="search" name="q" placeholder="Search Dev.Opera" class="search__field">
<form action="/search/" method="get">
<fieldset class="header__search">
<input type="search" name="q" placeholder="Search Dev.Opera" class="header__search-field">
</fieldset>
</form>
</header>
6 changes: 3 additions & 3 deletions _includes/menu.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{% assign items = include.items | split: '|' %}
<ul class="menu">
<ul class="header__menu">
{% for item in items %}
<li class="menu__item">
<li>
{% assign url = page.url | remove: 'index.html' | replace: '/','' %}
{% assign slug = item | downcase %}
{% if url == slug %}
{{ item }}
{% else %}
<a href="/{{ slug }}/" class="menu__link">{{ item }}</a>
<a class="header__menu-link" href="/{{ slug }}/">{{ item }}</a>
{% endif %}
</li>
{% endfor %}
Expand Down
40 changes: 40 additions & 0 deletions _layouts/entry.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,45 @@
layout: default
---

<main class="layout">
<div class="layout__content layout__content--entry">
<article role="main" lang="{{ page.language }}" class="content">
<h1 class="content__title">{{ page.title | markdownline }}</h1>
{{ content }}
</article>
</div>
<div class="layout__aside">
<div class="entry">
<p class="entry__author">
{% include author-picture.html object=page class='meta__picture' %}
</p>
<p class="entry__info">Published on <time datetime="{{ page.date | date: '%Y-%m-%d' }}">{{ page.date | date: '%-d %B %Y' }}</time> in <a href="">Articles</a>. Translated to <a href="">Japanese</a>.</p>
<p class="entry__edit"><a href="https://github.com/operasoftware/devopera/edit/master/{{ page.path }}">Edit this article on GitHub</a></p>
<div class="entry__tags">
<ul class="tags">
<li class="tags__item"><a class="tags__link" href="">css</a></li>
<li class="tags__item"><a class="tags__link" href="">flexbox</a></li>
<li class="tags__item"><a class="tags__link" href="">html</a></li>
<li class="tags__item"><a class="tags__link" href="">semantics</a></li>
<li class="tags__item"><a class="tags__link" href="">javascript</a></li>
<li class="tags__item"><a class="tags__link" href="">design</a></li>
<li class="tags__item"><a class="tags__link" href="">dev-tools</a></li>
<li class="tags__item"><a class="tags__link" href="">extensions</a></li>
<li class="tags__item"><a class="tags__link" href="">http</a></li>
<li class="tags__item"><a class="tags__link" href="">webrtc</a></li>
<li class="tags__item"><a class="tags__link" href="">i18n</a></li>
<li class="tags__item"><a class="tags__link" href="">android</a></li>
<li class="tags__item"><a class="tags__link" href="">opera-mini</a></li>
<li class="tags__item"><a class="tags__link" href="">svg</a></li>
<li class="tags__item"><a class="tags__link" href="">tv</a></li>
</ul>
</div>
<p class="entry__license">{% include license.html license=page.license %}</p>
</div>
</div>
</main>

{% comment %}
<main>
<article role="main" lang="{{ page.language }}" class="layout-entry">
<div class="layout-entry__content">
Expand Down Expand Up @@ -32,3 +71,4 @@ <h1 class="content__title">{{ page.title | markdownline }}</h1>
</div>
</article>
</main>
{% endcomment %}
16 changes: 7 additions & 9 deletions _layouts/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,11 @@
layout: default
---

<main>
<article role="main" class="layout-page">
<div class="layout-page__content">
<div class="content">
<h1 class="content__title">{{ page.title | markdownline }}</h1>
{{ content }}
</div>
</div>
</article>
<main class="layout">
<div class="layout__content">
<article role="main" lang="en" class="content">
<h1 class="content__title">{{ page.title | markdownline }}</h1>
{{ content }}
</article>
</div>
</main>
39 changes: 31 additions & 8 deletions _layouts/tags.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,40 @@ <h2 class="teaser__title"><a href="{{ post.url }}" class="teaser__link">{{ post.

{% assign tag = tag | split: '(•)' %}

<main>
<article role="main" class="layout-archive">
<section class="layout-archive__content">
<div class="columns columns--archive">
<main class="layout">
<div class="layout__content">
<section class="archive">
<h2 class="archive__title">Entries with “{{ page.tag }}” tag</h2>
<div class="archive__first">
{% for post in tag %}
{{ post }}
{% endfor %}
</div>
<div class="archive__second">

</div>
<div class="archive__third">

</div>
</section>
<section class="layout-archive__aside">
<h1>Entries with “{{ page.tag }}” tag</h1>
</section>
</article>
</div>
<div class="layout__aside">
<ul class="tags">
<li class="tags__item"><a class="tags__link" href="">css</a></li>
<li class="tags__item"><a class="tags__link" href="">flexbox</a></li>
<li class="tags__item"><a class="tags__link" href="">html</a></li>
<li class="tags__item"><a class="tags__link" href="">semantics</a></li>
<li class="tags__item"><a class="tags__link" href="">javascript</a></li>
<li class="tags__item"><a class="tags__link" href="">design</a></li>
<li class="tags__item"><a class="tags__link" href="">dev-tools</a></li>
<li class="tags__item"><a class="tags__link" href="">extensions</a></li>
<li class="tags__item"><a class="tags__link" href="">http</a></li>
<li class="tags__item"><a class="tags__link" href="">webrtc</a></li>
<li class="tags__item"><a class="tags__link" href="">i18n</a></li>
<li class="tags__item"><a class="tags__link" href="">android</a></li>
<li class="tags__item"><a class="tags__link" href="">opera-mini</a></li>
<li class="tags__item"><a class="tags__link" href="">svg</a></li>
<li class="tags__item"><a class="tags__link" href="">tv</a></li>
</ul>
</div>
</main>
152 changes: 109 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,120 @@
layout: default
---

{% assign blog = site.posts | where: 'category', 'blog' | where: 'language', 'en' %}
{% assign articles = site.posts | where: 'category', 'articles' | where: 'language', 'en' %}
{% assign featured = site.posts | where: 'featured', 'featured' %}
{% assign blog = site.posts | where: 'category', 'blog' | where: 'language', 'en' %}

<main class="layout-main">
<section class="layout-main__blog">
<article class="teaser teaser--links">
<ul>
{% for item in site.data.links-main %}
<li><a href="{{ item.link | escape }}">{{ item.text }}</a></li>
<main class="layout">
<div class="layout__content">
<section class="featured">
<h2 class="featured__title">Featured</h2>
<div class="featured__article">
{% for article in featured %}
<article class="teaser teaser--featured">
<a class="teaser__link" href="{{ article.url }}">
<h3 class="teaser__title">{{ article.title | markdownline }}</h3>
{% if article.cover %}
<img class="teaser__picture" src="{{ article.url }}cover.{{ article.cover }}" alt="{{ article.title | markdownline | strip_html }}">
{% endif %}
</a>
<div class="teaser__content">
<p class="teaser__meta">
<time datetime="{{ article.date | date: '%Y-%m-%d' }}">{{ article.date | date: '%-d %B %Y' }}</time>
by {% include author-name.html object=article link=true class='teaser__author' %}
in <a href="/{{ article.category }}/" class="teaser__category">{{ article.category | capitalize }}</a>
</p>
{% if article.intro %}
<p class="teaser__intro content">{{ article.intro | markdownline }}</p>
{% endif %}
</div>
</article>
{% endfor %}
</ul>
</article>
<h2 class="layout-main__title"><a href="/blog/">Blog</a></h2>
{% for post in blog limit:6 %}
<article class="teaser">
<h3 class="teaser__title"><a href="{{ post.url }}" class="teaser__link">{{ post.title | markdownline }}</a></h3>
<p class="meta meta--teaser">
<time datetime="{{ post.date | date: '%Y-%m-%d' }}" class="meta__time">{{ post.date | date: '%-d %B %Y' }}</time>
by {% include author-name.html object=post link=true class='meta__author' %}
in <a href="/{{ post.category }}/" class="meta__category">{{ post.category | capitalize }}</a>
</p>
{% if post.intro %}
<p class="teaser__intro">{{ post.intro | markdownline }}</p>
{% endif %}
</article>
</div>
<div class="featured__tags">
<ul class="tags tags--featured">
{% for item in site.data.tags-featured %}
<li class="tags__item"><a class="tags__link" href="/tags/{{ item }}/">{{ item }}</a></li>
{% endfor %}
</section>
<section class="layout-main__articles">
<h2 class="layout-main__title"><a href="/articles/">Articles</a></h2>
<div class="columns columns--main">
{% for article in articles limit:12 %}
<article class="teaser">
<h3 class="teaser__title"><a href="{{ article.url }}" class="teaser__link">{{ article.title | markdownline }}</a></h3>
{% if article.cover %}
<a href="{{ article.url }}">
<img src="{{ article.url }}cover.{{ article.cover }}" alt="{{ article.title | markdownline | strip_html }}" class="teaser__cover">
</ul>
</div>
</section>
<section class="archive">
<h2 class="archive__title"><a href="/articles/">Articles</a></h2>
{% for article in articles limit:16 %}
{% case forloop.index %}
{% when 1 %}
<div class="archive__first">
{% when 7 %}
<div class="archive__second">
{% when 13 %}
<div class="archive__third">
{% endcase %}
{% case forloop.index %}
{% when 13 %}
<div class="archive__third-first">
{% when 15 %}
<div class="archive__third-second">
{% endcase %}
{% unless article.featured %}
<article class="teaser">
<a class="teaser__link" href="{{ article.url }}">
<h3 class="teaser__title">{{ article.title | markdownline }}</h3>
{% if article.cover %}
<img class="teaser__picture" src="{{ article.url }}cover.{{ article.cover }}" alt="{{ article.title | markdownline | strip_html }}">
{% endif %}
</a>
<div class="teaser__content">
<p class="teaser__meta">
<time datetime="{{ article.date | date: '%Y-%m-%d' }}">{{ article.date | date: '%-d %B %Y' }}</time>
by {% include author-name.html object=article link=true class='teaser__author' %}
in <a href="/{{ article.category }}/" class="teaser__category">{{ article.category | capitalize }}</a>
</p>
{% if article.intro %}
<p class="teaser__intro content">{{ article.intro | markdownline }}</p>
{% endif %}
</div>
</article>
{% endunless %}
{% case forloop.index %}
{% when 14 or 16 %}
</div>
{% endcase %}
{% case forloop.index %}
{% when 6 or 12 or 16 %}
</div>
{% endcase %}
{% endfor %}
</section>
</div>
<div class="layout__aside">
<section class="blog-column">
<h2 class="blog-column__title"><a href="/blog/">Blog</a></h2>
{% for post in blog limit:6 %}
<article class="teaser teaser--blog{% if forloop.last %} teaser--last{% endif %}">
<a class="teaser__link" href="{{ post.url }}">
<h3 class="teaser__title">{{ post.title | markdownline }}</h3>
</a>
{% endif %}
<p class="meta meta--teaser">
<time datetime="{{ article.date | date: '%Y-%m-%d' }}" class="meta__time">{{ article.date | date: '%-d %B %Y' }}</time>
by {% include author-name.html object=article link=true class='meta__author' %}
in <a href="/{{ article.category }}/" class="meta__category">{{ article.category | capitalize }}</a>
</p>
{% if article.intro %}
<p class="teaser__intro">{{ article.intro | markdownline }}</p>
{% endif %}
<div class="teaser__content">
<p class="teaser__meta">
<time datetime="{{ post.date | date: '%Y-%m-%d' }}">{{ post.date | date: '%-d %B %Y' }}</time>
by {% include author-name.html object=post link=true class='teaser__author' %}
in <a href="/{{ post.category }}/" class="teaser__category">{{ post.category | capitalize }}</a>
</p>
{% if post.intro %}
<p class="teaser__intro content">{{ post.intro | markdownline }}</p>
{% endif %}
</div>
</article>
{% endfor %}
</div>
</section>
</section>
<section class="linkbait">
<h2 class="linkbait__title">Useful Links</h2>
<ul>
{% for item in site.data.links-main %}
<li><a class="linkbait__link" href="{{ item.link | escape }}">{{ item.text }}</a></li>
{% endfor %}
</ul>
</section>
</div>
</main>
2 changes: 1 addition & 1 deletion styles/tags.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
display:inline-block;
&:not(:last-child):after {
color:$grey;
content:'\00A0\2219';
content:'\00A0\2219\00A0';
}
}

Expand Down

0 comments on commit 9c420c1

Please sign in to comment.