Browse Source

commit initial

Marie Simatic 1 year ago
commit
dc63518a18
60 changed files with 3466 additions and 0 deletions
  1. 4
    0
      .gitignore
  2. 22
    0
      LICENSE.txt
  3. 45
    0
      README.md
  4. 68
    0
      _config.yml
  5. 12
    0
      _includes/disqus.html
  6. 3
    0
      _includes/footer.html
  7. 21
    0
      _includes/head.html
  8. 14
    0
      _includes/js.html
  9. 33
    0
      _includes/nav.html
  10. 8
    0
      _includes/read_time.html
  11. 23
    0
      _includes/sidebar.html
  12. 43
    0
      _includes/social-links.html
  13. 22
    0
      _layouts/default.html
  14. 21
    0
      _layouts/page.html
  15. 67
    0
      _layouts/post.html
  16. 62
    0
      _layouts/post_listing.html
  17. 28
    0
      _plugins/youtube.rb
  18. 44
    0
      _posts/2016-01-09-Projet-Kami.md
  19. 121
    0
      _posts/2017-02-25-design-processeur.md
  20. 20
    0
      _posts/2017-04-19-effacer-les-lignes.md
  21. 92
    0
      _sass/components/_buttons.scss
  22. 122
    0
      _sass/components/_global.scss
  23. 125
    0
      _sass/components/_grid.scss
  24. 194
    0
      _sass/components/_helpers.scss
  25. 280
    0
      _sass/components/_mixins.scss
  26. 427
    0
      _sass/components/_normalize.scss
  27. 124
    0
      _sass/components/_syntax-highlighting.scss
  28. 98
    0
      _sass/components/_typography.scss
  29. 79
    0
      _sass/components/_variables.scss
  30. 47
    0
      _sass/pages/_archive.scss
  31. 97
    0
      _sass/pages/_layout.scss
  32. 248
    0
      _sass/pages/_post.scss
  33. 58
    0
      _sass/pages/_tags.scss
  34. 35
    0
      archive.html
  35. 18
    0
      categories/index.html
  36. 4
    0
      css/font-awesome.min.css
  37. 27
    0
      css/main.scss
  38. BIN
      favicon.ico
  39. BIN
      favicon.png
  40. 30
    0
      feed.xml
  41. BIN
      fonts/FontAwesome.otf
  42. BIN
      fonts/fontawesome-webfont.eot
  43. 640
    0
      fonts/fontawesome-webfont.svg
  44. BIN
      fonts/fontawesome-webfont.ttf
  45. BIN
      fonts/fontawesome-webfont.woff
  46. BIN
      fonts/fontawesome-webfont.woff2
  47. BIN
      img/proz_design/diagramme.png
  48. BIN
      img/proz_design/diagramme_add_addi_ldi.png
  49. BIN
      img/proz_design/diagramme_first_stage_pipeline.png
  50. BIN
      img/proz_design/diagramme_preview.png
  51. BIN
      img/proz_design/diagramme_push_pop.png
  52. BIN
      img/proz_design/diagramme_ret_rcall.png
  53. BIN
      img/proz_design/diagramme_rjump_branches.png
  54. BIN
      img/proz_design/diagramme_three_steps_pipeline.png
  55. BIN
      img/proz_design/rcall.png
  56. BIN
      img/proz_design/ret.png
  57. 4
    0
      index.html
  58. 4
    0
      js/jquery-2.1.4.min.js
  59. 2
    0
      js/main.js
  60. 30
    0
      tags.html

+ 4
- 0
.gitignore View File

@@ -0,0 +1,4 @@
1
+_site
2
+.sass-cache
3
+_drafts
4
+.ruby-version

+ 22
- 0
LICENSE.txt View File

@@ -0,0 +1,22 @@
1
+Copyright (c) 2015 Renyuan Zou
2
+
3
+MIT License
4
+
5
+Permission is hereby granted, free of charge, to any person obtaining
6
+a copy of this software and associated documentation files (the
7
+"Software"), to deal in the Software without restriction, including
8
+without limitation the rights to use, copy, modify, merge, publish,
9
+distribute, sublicense, and/or sell copies of the Software, and to
10
+permit persons to whom the Software is furnished to do so, subject to
11
+the following conditions:
12
+
13
+The above copyright notice and this permission notice shall be
14
+included in all copies or substantial portions of the Software.
15
+
16
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+ 45
- 0
README.md View File

@@ -0,0 +1,45 @@
1
+### Update 03/08/2016
2
+I'm working on making leonids a [jekyll theme](https://jekyllrb.com/docs/themes/) so that people can easily install the theme without having to fork or download anything from here. Actually the first gem version is published, you can install it by following the official [doc](https://jekyllrb.com/docs/themes/). You can find the rubygem version [here](https://rubygems.org/gems/leonids). But it will be on beta until I can finish the doc of how you can install leonids with the rubygem version.
3
+
4
+### Update 05/06/2016
5
+
6
+Important! It's better to download the gzipped files instead of forking the repo. I would really appreciate if you could give me a star. 😁
7
+
8
+This project is under MIT license, so feel free to make it your own.
9
+
10
+# Leonids Jekyll Themes
11
+
12
+**[Leonids](http://renyuanz.github.io/leonids)** is a clean Jekyll theme perfect for powering your GitHub hosted blog.
13
+
14
+## What is Leonids?
15
+
16
+* Responsive templates. Looking good on mobile, tablet, and desktop.
17
+* Simple and clear permalink structure.
18
+* Support for Disqus Comments.
19
+* Support for multi-authors.
20
+* **And** the Leonids (/ˈliːənɪdz/ lee-ə-nidz) are a prolific meteor shower associated with the comet [Tempel-Tuttle](https://en.wikipedia.org/wiki/55P/Tempel%E2%80%93Tuttle).
21
+
22
+See a [demo](http://renyuanz.github.io/leonids/) hosted on GitHub.
23
+
24
+## Quick setup
25
+
26
+```
27
+git clone https://github.com/renyuanz/leonids
28
+cd leonids
29
+jekyll server
30
+```
31
+
32
+Check out your awesome blog at `http://localhost:4000` and Cheers!
33
+
34
+## Running with Docker
35
+
36
+```
37
+docker run --rm -it --volume=$PWD:/srv/jekyll -p 4000:4000 jekyll/jekyll:pages jekyll serve --watch --force_polling
38
+```
39
+
40
+## TODO
41
+
42
+- [ ] Build a timeline page.
43
+- [ ] Build a portfolio page.
44
+- [ ] Redesign categories page. Ref: [dribbble: blog category section By Ilja Miskov](https://dribbble.com/shots/2274792-Blog-Category-Selection)
45
+- [ ] Multi languages support.

+ 68
- 0
_config.yml View File

@@ -0,0 +1,68 @@
1
+###################################
2
+# Site wide configuration
3
+####################################
4
+#
5
+title: Facettes
6
+email: marie@simatic.org
7
+description: De l'informatique à l'art, en passant par le parkour, la cuisine et j'en passe, un blog parlant de tout, de rien, de mes projets, de moi.
8
+url: # the base hostname & protocol for your site
9
+
10
+
11
+#
12
+###################################
13
+# Jekyll configuration
14
+####################################
15
+#
16
+timezone:          Europe/Paris
17
+markdown:          kramdown
18
+highlighter:       rouge
19
+excerpt_separator: <!--more-->
20
+permalink:         /articles/:year-:month/:title
21
+
22
+kramdown:
23
+  auto_ids: true
24
+  footnote_nr: 1
25
+  entity_output: as_char
26
+  toc_levels: 1..6
27
+  enable_coderay: false
28
+
29
+#
30
+###################################
31
+# Site Owner configuration
32
+####################################
33
+#
34
+owner:
35
+  name: Marie Simatic
36
+  avatar: #leonids-logo.png
37
+  job: "Autant de pages que de facettes... à volonté"
38
+  bio: "De l'informatique à l'art, en passant par le parkour, la cuisine et j'en passe, un blog parlant de tout, de rien, de mes projets, de moi."
39
+  email:
40
+  disqus-shortname:
41
+  twitter: #username
42
+  facebook: #username
43
+  google:
44
+    plus: #username
45
+    analytics:
46
+    verify:
47
+    ad-client:
48
+    ad-slot:
49
+  bing-verify:
50
+  github: tamicasireim
51
+  gitlab: #username
52
+  stackoverflow: #123456/username   from a "http://stackoverflow.com/users/123456/username" link
53
+  linkedin: #username
54
+  skype: #username
55
+  xing: #username
56
+  instagram: #username
57
+  lastfm: #username
58
+  tumblr: #username
59
+  pinterest: #username
60
+  foursquare: #username
61
+  steam: #username
62
+  dribbble: #username
63
+  youtube: #username
64
+  soundcloud: #username
65
+  weibo: #username
66
+  flickr: #username
67
+  500px: #username
68
+  codepen: #username

+ 12
- 0
_includes/disqus.html View File

@@ -0,0 +1,12 @@
1
+<script type="text/javascript">
2
+    /* * * CONFIGURATION VARIABLES * * */
3
+    var disqus_shortname = '{{ site.owner.disqus-shortname }}';
4
+
5
+    /* * * DON'T EDIT BELOW THIS LINE * * */
6
+    (function() {
7
+        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
8
+        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
9
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
10
+    })();
11
+</script>
12
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

+ 3
- 0
_includes/footer.html View File

@@ -0,0 +1,3 @@
1
+<footer>
2
+  &copy; {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com/">Jekyll</a>, <a href="http://github.com/renyuanz/leonids/">leonids theme</a> made with <i class="fa fa-heart heart-icon"></i>
3
+</footer>

+ 21
- 0
_includes/head.html View File

@@ -0,0 +1,21 @@
1
+<head>
2
+  <meta charset="utf-8">
3
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
4
+  <meta name="viewport" content="width=device-width, initial-scale=1">
5
+
6
+  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }} | Acceuil {% endif %}</title>
7
+  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
8
+
9
+  <!-- CSS files -->
10
+  <link rel="stylesheet" href="{{ site.url }}/css/font-awesome.min.css">
11
+  <link rel="stylesheet" href="{{ site.url }}/css/main.css">
12
+
13
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
14
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.url }}" />
15
+
16
+  <!-- Icons -->
17
+  <!-- 16x16 -->
18
+  <link rel="shortcut icon" href="{{ site.url }}/favicon.ico">
19
+  <!-- 32x32 -->
20
+  <link rel="shortcut icon" href="{{ site.url }}/favicon.png">
21
+</head>

+ 14
- 0
_includes/js.html View File

@@ -0,0 +1,14 @@
1
+<script type="text/javascript" src="{{ site.url }}/js/jquery-2.1.4.min.js"></script>
2
+<script type="text/javascript" src="{{ site.url }}/js/main.js"></script>
3
+{% if site.owner.google.analytics %}
4
+<!-- Asynchronous Google Analytics snippet -->
5
+<script>
6
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
7
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
8
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
9
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
10
+
11
+  ga('create', '{{ site.owner.google.analytics }}', 'auto');
12
+  ga('send', 'pageview');
13
+</script>
14
+{% endif %}

+ 33
- 0
_includes/nav.html View File

@@ -0,0 +1,33 @@
1
+<nav class="post-navigation" role="navigation">
2
+  <div class="row">
3
+    <div class="col s5">
4
+      <div class="post-nav-prev">
5
+        {% if page.previous %}
6
+        <a href="{{ site.url }}{{ page.previous.url }}" title="{{ page.previous.title }}">
7
+          <div class="post-nav-btn">
8
+            <div class="post-nav-text"><span class="danger-text-color"><i class="fa fa-angle-left"></i> ~ </span><span class="hidden-md primary-text-color">{{ page.previous.title }}</span></div>
9
+          </div>
10
+        </a>
11
+        {% endif %}
12
+      </div>
13
+    </div>
14
+    <div class="col s2">
15
+      <a href="{{ site.url }}/">
16
+        <div class="leonids-icon">
17
+          <i class="fa fa-leaf"></i>
18
+        </div>
19
+      </a>
20
+    </div>
21
+    <div class="col s5 right">
22
+      <div class="post-nav-next">
23
+        {% if page.next %}
24
+        <a href="{{ site.url }}{{ page.next.url }}" title="{{ page.previous.title }}">
25
+          <div class="post-nav-btn">
26
+            <div class="post-nav-text"><span class="hidden-md primary-text-color">{{ page.next.title }}</span><span class="success-text-color"> ~ <i class="fa fa-angle-right"></i></span></div>
27
+          </div>
28
+        </a>
29
+        {% endif %}
30
+      </div>
31
+    </div>
32
+  </div>
33
+</nav>

+ 8
- 0
_includes/read_time.html View File

@@ -0,0 +1,8 @@
1
+<span class="read-time" title="Estimated read time">
2
+  {% assign words = content | number_of_words %}
3
+  {% if words < 360 %}
4
+    1 min read
5
+  {% else %}
6
+    {{ words | divided_by:180 }} mins read
7
+  {% endif %}
8
+</span>

+ 23
- 0
_includes/sidebar.html View File

@@ -0,0 +1,23 @@
1
+{% if page.author %} {% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.owner %} {% endif %}
2
+
3
+<div class="cover-card table-cell table-middle">
4
+  {% if author.avatar %}
5
+  <img src="{{ site.url }}/img/{{ author.avatar }}" alt="" class="avatar">
6
+  {% endif %}
7
+  <a href="{{ site.url }}/" class="author_name">{{ site.title }}</a>
8
+  <span class="author_job">{{ author.job }}</span>
9
+  <span class="author_bio mbm">{{ author.bio }}</span>
10
+  <nav class="nav">
11
+    <ul class="nav-list">
12
+      <li class="nav-item">
13
+        <a href="{{ site.url }}/">Acceuil</a>
14
+      </li>
15
+      {% for page in site.pages %} {% if page.title %}
16
+      <li class="nav-item">
17
+        <a href="{{ site.url }}{{ page.url }}">{{ page.title }}</a>
18
+      </li>
19
+      {% endif %} {% endfor %}
20
+    </ul>
21
+  </nav>
22
+  {% include social-links.html %}
23
+</div>

+ 43
- 0
_includes/social-links.html View File

@@ -0,0 +1,43 @@
1
+<script type="text/javascript">
2
+  // based on http://stackoverflow.com/a/10300743/280842
3
+  function gen_mail_to_link(hs, subject) {
4
+    var lhs,rhs;
5
+    var p = hs.split('@');
6
+    lhs = p[0];
7
+    rhs = p[1];
8
+    document.write("<a class=\"social-link-item\" target=\"_blank\" href=\"mailto");
9
+    document.write(":" + lhs + "@");
10
+    document.write(rhs + "?subject=" + subject + "\"><i class=\"fa fa-fw fa-envelope\"></i><\/a>");
11
+  }
12
+</script>
13
+<div class="social-links">
14
+  <ul>
15
+    {% if author.email %}
16
+      <li>
17
+      <script>gen_mail_to_link('{{ author.email }}', 'Hello from website');</script>
18
+      </li>
19
+    {% endif %}
20
+    {% if author.twitter %}<li><a href="http://twitter.com/{{ author.twitter }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-twitter"></i></a></li>{% endif %}
21
+    {% if author.facebook %}<li><a href="http://facebook.com/{{ author.facebook }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-facebook"></i></a></li>{% endif %}
22
+    {% if author.google.plus %}<li><a href="http://plus.google.com/+{{ author.google.plus }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-google-plus"></i> Google+</a></li>{% endif %}
23
+    {% if author.linkedin %}<li><a href="http://linkedin.com/in/{{ author.linkedin }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-linkedin"></i></a></li>{% endif %}
24
+    {% if author.skype %}<li><a href="skype:{{ author.skype }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-skype"></i></a></li>{% endif %}
25
+    {% if author.xing %}<li><a href="http://www.xing.com/profile/{{ author.xing }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-xing"></i></a></li>{% endif %}
26
+    {% if author.instagram %}<li><a href="http://instagram.com/{{ author.instagram }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-instagram"></i></a></li>{% endif %}
27
+    {% if author.tumblr %}<li><a href="http://{{ author.tumblr }}.tumblr.com" class="social-link-item" target="_blank"><i class="fa fa-fw fa-tumblr"></i></a></li>{% endif %}
28
+    {% if author.github %}<li><a href="http://github.com/{{ author.github }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-github"></i></a></li>{% endif %}
29
+    {% if author.gitlab %}<li><a href="http://gitlab.com/u/{{ author.gitlab }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-gitlab"></i></a></li>{% endif %}
30
+    {% if author.stackoverflow %}<li><a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i></a></li>{% endif %}
31
+    {% if author.lastfm %}<li><a href="http://lastfm.com/user/{{ author.lastfm }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-music"></i></a></li>{% endif %}
32
+    {% if author.dribbble %}<li><a href="http://dribbble.com/{{ author.dribbble }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-dribbble"></i></a></li>{% endif %}
33
+    {% if author.pinterest %}<li><a href="http://www.pinterest.com/{{ author.pinterest }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-pinterest"></i></a></li>{% endif %}
34
+    {% if author.foursquare %}<li><a href="http://foursquare.com/{{ author.foursquare }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-foursquare"></i></a></li>{% endif %}
35
+    {% if author.steam %}<li><a href="http://steamcommunity.com/id/{{ author.steam }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-steam"></i></a></li>{% endif %}
36
+    {% if author.youtube %}<li><a href="https://youtube.com/user/{{ author.youtube }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-youtube"></i></a></li>{% endif %}
37
+    {% if author.soundcloud %}<li><a href="http://soundcloud.com/{{ author.soundcloud }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-soundcloud"></i></a></li>{% endif %}
38
+    {% if author.weibo %}<li><a href="http://www.weibo.com/{{ author.weibo }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-weibo"></i></a></li>{% endif %}
39
+    {% if author.flickr %}<li><a href="http://www.flickr.com/{{ author.flickr }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-flickr"></i></a></li>{% endif %}
40
+    {% if author.500px %}<li><a href="http://www.500px.com/{{ author.500px }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-500px"></i></a></li>{% endif %}
41
+    {% if author.codepen %}<li><a href="http://codepen.io/{{ author.codepen }}" class="social-link-item" target="_blank"><i class="fa fa-fw fa-codepen"></i></a></li>{% endif %}
42
+  </ul>
43
+</div>

+ 22
- 0
_layouts/default.html View File

@@ -0,0 +1,22 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+
4
+{% include head.html %}
5
+
6
+<body>
7
+  <div class="row">
8
+    <div class="col s12 m3">
9
+      <div class="table cover">
10
+        {% include sidebar.html %}
11
+      </div>
12
+    </div>
13
+    <div class="col s12 m9">
14
+      <div class="post-listing">
15
+        {{ content }}
16
+        {% include footer.html %}
17
+      </div>
18
+    </div>
19
+  </div>
20
+  {% include js.html %}
21
+</body>
22
+</html>

+ 21
- 0
_layouts/page.html View File

@@ -0,0 +1,21 @@
1
+---
2
+layout: default
3
+---
4
+
5
+  <div id="page">
6
+    <header class="page-header">
7
+      <h2>{{ page.title }}</h2>
8
+    </header>
9
+
10
+    <article class="page-content">
11
+      {{ content }}
12
+    </article>
13
+
14
+
15
+  </div><!-- end page content -->
16
+
17
+
18
+  {% if site.owner.disqus-shortname and page.comments == true %}
19
+  <div id="disqus_thread"></div>
20
+  {% include disqus.html %}
21
+  {% endif %}

+ 67
- 0
_layouts/post.html View File

@@ -0,0 +1,67 @@
1
+---
2
+layout: default
3
+---
4
+
5
+<a class="btn" href= "{{ site.url }}/" >
6
+  Acceuil
7
+</a>
8
+{% if page.image.feature %}
9
+<div class="post-image-feature">
10
+  <img class="feature-image" src=
11
+  {% if page.image.feature contains 'https' or page.image.feature contains 'http' %}
12
+  "{{ page.image.feature }}"
13
+  {% else %}
14
+  "{{ site.url }}/img/{{ page.image.feature }}"
15
+  {% endif %}
16
+  alt="{{ page.title }} feature image">
17
+
18
+  {% if page.image.credit %}
19
+  <span class="image-credit">Crédit de la photo: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>
20
+  {% endif %}
21
+</div><!-- /.image-wrap -->
22
+{% endif %}
23
+
24
+
25
+<div id="post">
26
+  <header class="post-header">
27
+    <h1 title="{{ page.title }}">{{ page.title }}</h1>
28
+    <span class="post-meta">
29
+      <span class="post-date">
30
+        {{ page.date | date: "%-d %b %Y" | upcase }}
31
+      </span>
32
+      •
33
+      {% include read_time.html %}
34
+    </span>
35
+
36
+  </header>
37
+
38
+  <article class="post-content">
39
+    {{ content }}
40
+  </article>
41
+</div>
42
+
43
+<div class="share-buttons">
44
+  <h6>Share on: </h6>
45
+  <ul>
46
+    <li>
47
+      <a href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url }}" class="twitter btn" title="Share on Twitter"><i class="fa fa-twitter"></i><span> Twitter</span></a>
48
+    </li>
49
+    <li>
50
+      <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" class="facebook btn" title="Share on Facebook"><i class="fa fa-facebook"></i><span> Facebook</span></a>
51
+    </li>
52
+    <li>
53
+      <a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" class="google-plus btn" title="Share on Google Plus"><i class="fa fa-google-plus"></i><span> Google+</span></a>
54
+    </li>
55
+    <li>
56
+      <a href="https://news.ycombinator.com/submitlink?u={{ site.url }}{{ page.url }}" class="hacker-news btn" title="Share on Hacker News"><i class="fa fa-hacker-news"></i><span> Hacker News</span></a>
57
+    </li>
58
+    <li>
59
+      <a href="https://www.reddit.com/submit?url={{ site.url }}{{ page.url }}" class="reddit btn" title="Share on Reddit"><i class="fa fa-reddit"></i><span> Reddit</span></a>
60
+    </li>
61
+  </ul>
62
+</div><!-- end share-buttons -->
63
+
64
+{% if site.owner.disqus-shortname and page.comments == true %}
65
+<div id="disqus_thread"></div>
66
+{% include disqus.html %}
67
+{% endif %}

+ 62
- 0
_layouts/post_listing.html View File

@@ -0,0 +1,62 @@
1
+---
2
+layout: default
3
+---
4
+
5
+{% for post in site.posts %}
6
+<section class="post">
7
+  <header class="post-header">
8
+    <p class="post-meta">
9
+      <span class="post-date">
10
+        {{ post.date | date: "%-d %b %Y" | upcase }}
11
+      </span>
12
+      {% if post.categories.size > 0 %}
13
+      •
14
+      {% for cat in post.categories %}
15
+        <a class="post-cat" href="{{ site.url }}/categories/#{{ cat }}">{{ cat }}</a>
16
+        {% unless forloop.last %}
17
+        <span>/</span>
18
+        {% endunless %}
19
+      {% endfor %}
20
+      {% endif %}
21
+    </p>
22
+    <h4>
23
+      <a href="{{ site.url }}{{ post.url }}" class="post-title" title="{{ post.title }}">{{ post.title }}</a>
24
+      {% if post.link %}
25
+      <a class="post-title-link" href="{{ post.link }}" target="_blank" title="{{ post.title }}"><i class="fa fa-external-link"></i></a>
26
+      {% endif %}
27
+    </h4>
28
+
29
+    {% if post.author %}
30
+      {% assign author = site.data.authors[post.author] %}
31
+    {% else %}
32
+      {% assign author = site.owner %}
33
+    {% endif %}
34
+
35
+    </header>
36
+
37
+    {% if post.excerpt %}
38
+    <div class="post-description">
39
+      <p>
40
+        {{ post.excerpt }}
41
+      </p>
42
+    </div>
43
+    {% endif %}
44
+
45
+    {% if post.image.feature %}
46
+    <div class="post-image-feature">
47
+      <img src=
48
+      {% if post.image.feature contains 'http' %}
49
+      "{{ post.image.feature }}"
50
+      {% else %}
51
+      "{{ site.url }}/img/{{ post.image.feature }}"
52
+      {% endif %}
53
+      alt="{{ post.title }} feature image">
54
+
55
+      {% if post.image.credit %}
56
+      <span class="image-credit">Photo Credit: <a href="{{ post.image.creditlink }}">{{ post.image.credit }}</a></span>
57
+      {% endif %}
58
+    </div><!-- /.image-wrap -->
59
+    {% endif %}
60
+
61
+</section>
62
+{% endfor %}

+ 28
- 0
_plugins/youtube.rb View File

@@ -0,0 +1,28 @@
1
+class YouTube < Liquid::Tag
2
+  Syntax = /^\s*([^\s]+)(\s+(\d+)\s+(\d+)\s*)?/
3
+
4
+  def initialize(tagName, markup, tokens)
5
+    super
6
+
7
+    if markup =~ Syntax then
8
+      @id = $1
9
+
10
+      if $2.nil? then
11
+          @width = 560
12
+          @height = 420
13
+      else
14
+          @width = $2.to_i
15
+          @height = $3.to_i
16
+      end
17
+    else
18
+      raise "No YouTube ID provided in the \"youtube\" tag"
19
+    end
20
+  end
21
+
22
+  def render(context)
23
+    # "<iframe width=\"#{@width}\" height=\"#{@height}\" src=\"http://www.youtube.com/embed/#{@id}\" frameborder=\"0\"allowfullscreen></iframe>"
24
+    "<iframe width=\"#{@width}\" height=\"#{@height}\" src=\"http://www.youtube.com/embed/#{@id}?color=white&theme=light\"></iframe>"
25
+  end
26
+
27
+  Liquid::Template.register_tag "youtube", self
28
+end

+ 44
- 0
_posts/2016-01-09-Projet-Kami.md View File

@@ -0,0 +1,44 @@
1
+---
2
+layout: post
3
+title:  "Projet de Réalité Virtuelle : Kami"
4
+categories: [informatique, projet]
5
+comments: true
6
+---
7
+
8
+Dans le cadre de l'enseignement [RV01 - Réalité Virtuelle][rv01] j'ai réalisé en binôme avec mon ami Théo un jeu vidéo avec comme support d'interaction un oculus rift et un leap motion.
9
+
10
+_A l'aube du 31ème siècle, l'Humanité dépasse toujours plus les limites de la technologie. Après un terrible accident qui vous a presque couté la vie, vous devenez le sujet d'une folle expérience : la première transplantation de l'esprit d'un homme dans un corps robotique._
11
+
12
+_Littéralement entre la vie et la mort, votre âme se fait happer par le mystérieux Dieu Kami_ (nom japonais signifiant à la fois "dieu" et "papier") _qui refuse de voir les Hommes ainsi violer les lois de la nature. Le Dieu vous fera affronter sa terrible armée afin de juger votre destin._
13
+
14
+<!--more-->
15
+
16
+# Vidéo de présentation du projet
17
+
18
+{% youtube lFnLHkYR3sw %}
19
+
20
+# Informations complémentaires
21
+
22
+Le projet a été réalisé au semestre d'Automne 2016 à l'UTC.
23
+
24
+- Languages :
25
+    - C#
26
+- Logiciels utilisés :
27
+    - Unity (licence gratuite), comme plateforme de développement.
28
+    - Visual Studio, comme IDE principal
29
+    - The Gimp, pour l'édition de la texture du mur
30
+    - Adobe Première, pour l'édition de la vidéo de présentation.
31
+
32
+Le code source est disponible sur le [dépot github du projet][kami-gh] néanmoins je crains que ce dernier ne soit pas très bien mis à jour. En effet, nous n'avons pas bien réussi à faire cohabiter unity et git. Un mauvais réglage du `.gitignore` sans doute.
33
+
34
+Le rendu final (rapport, code, package unity...) est néanmoins disponible en téléchargement [ici][kami-download].
35
+
36
+## Quelques crédits
37
+
38
+Projet mené par Théo Judas et Marie Simatic, encadré par Indira Thouvenin, Florian Jeanne, Yann Soullard et Rémi Frenoy.
39
+
40
+Merci à Nicolas Gershater pour sa participation dans le rôle de Kami.
41
+
42
+[rv01]: http://rv01.ens.utc.fr/?page_id=10
43
+[kami-gh]: https://github.com/tamicasireim/Kami
44
+[kami-download]: https://www.dropbox.com/sh/p0iscejlciubuxf/AADHc1iJdmr0N_rHkrDMnAeKa?dl=0

+ 121
- 0
_posts/2017-02-25-design-processeur.md View File

@@ -0,0 +1,121 @@
1
+---
2
+layout: post
3
+title:  "Design de Processeur : clône d'un atmega 8 en VHDL"
4
+categories: [informatique, projet]
5
+comments: true
6
+image :
7
+  feature: proz_design/diagramme_preview.png
8
+---
9
+
10
+J'ai réalisé ce projet dans le cadre de mon semestre en Allemagne à Jena _(ou bien Iéna, commen on dit en France)_ en Automne 2016. Au programme : du VHDL à tout va !
11
+
12
+<!--more-->
13
+
14
+# Informations générales sur le projet
15
+
16
+Le code est disponible sur [Github][pd_gh].
17
+
18
+Technologies utilisées :
19
+
20
+- FPGA Xilinx Artix V7 - prêt gracieux de la Fachhochschule de Jena.
21
+- Vivado - comme plateforme de développement.
22
+- Emacs - ou plutôt devrais-je dire Evil Emacs, hein.
23
+- Git - _As my lord & savior_
24
+
25
+# Mon processeur
26
+
27
+Sans transition, voici un beau petit schéma de "la bête" :
28
+![schéma du processeur](/img/proz_design/diagramme.png)
29
+
30
+Un certain nombre d'instructions ont été implémentées :
31
+
32
+- Opérations de calcul
33
+    - addition, soustraction, comparaison, entre deux registres (̀`ADD`) ou entre un registre et une constante (`ADDI` pour _add immediate_)
34
+    - Incrémentation, décrémentation...
35
+    - opérations logiques
36
+    - Logical Shifts
37
+- Opérations de mémoire
38
+    - Lecture / Ecriture dans une case de la mémoire
39
+    - Push / Pop dans la pile.
40
+- Opérations de saut
41
+    - Sauts et branchements conditionnels
42
+    - appel de "fonction"
43
+
44
+## Exemple de fonctionnement d'une instruction
45
+
46
+Alors concrètement, comment ça fonctionne ? Bien, je dirais. Mais encore ? Regardons celà de plus près avec le schéma suivant.
47
+
48
+![schéma du processeur](/img/proz_design/diagramme_add_addi_ldi.png)
49
+
50
+Commençons par suivre les aventures d'une instructions `ADD` (en jaunâtre).
51
+
52
+- Avec la valeur du `Program Counter`, le `Program Memory` récupère l'instruction (disons `ADD R1, R2`) et l'envoie au décoder.
53
+- Le décoder se charge de correctement régler les différents multiplexeur. Il lit l'instruction, envoie ̀`addrA = 1` et `addrB = 2` au `register file` et `OPCODE = ADD ` à l'ALU.
54
+- l'ALU reçoit le contenus des registres 1 et 2 à travers les signaux `dataA` et ̀`dataB`. Il renvoit la valeur de `dataA + dataB`
55
+- Le register file reçoit cette valeur et l'enregistre dans `R1`.
56
+- l'ALU envoie également le masque du SREG, qui sera mis à jour si nécessaire
57
+
58
+
59
+## Ecriture dans la mémoire et pile
60
+
61
+La mémoire est gérée par le composant ̀`decoder_memory`. Ce dernier prend en entrée ̀`index_z`, concaténation des registres 31 et 30, pointant vers l'espace mémoire qui sera affecté.
62
+
63
+Conformément à la documentation, la mémoire RAM commence à l'addresse 0x0060. L'addresse des pins / ports sont détaillés dans la documentation du _repository_.
64
+
65
+Les pins et ports sont déclarés comme des instances du composant générique `ports` et sont reliés directement aux leds et aux switches au niveau hardware.
66
+
67
+La mémoire RAM est un composant classique de RAM de type _distributed_ (voir section sur le pipeline à 3 niveaux pour plus d'informations).
68
+
69
+`decoder_memory` gère également le pointeur de pile et les instructions push et pop sont illustrées par le schéma ci-dessous :
70
+
71
+![schéma du processeur](/img/proz_design/diagramme_push_pop.png)
72
+
73
+## Les sauts
74
+
75
+### Branchement classique et conditionnels
76
+
77
+Les branchements fonctionnent très simplement de la façon suivante :
78
+
79
+- le decoder lit la valeur du saut qu'il doit apppliquer (saut relatif) et l'envoie à travers le signal ̀`offset_pc` au Program Counter.
80
+- Le program counteur prend la valeur de `program_counter + offset_pc`.
81
+
82
+En cas de branchement conditionnel, le décodeur vérifiera d'abord la valeur du drapeau voulu dans le SREG afin de choisir si oui ou non le branchement doit être effecté.
83
+
84
+![schéma du processeur](/img/proz_design/diagramme_rjump_branches.png)
85
+
86
+
87
+### Appels de fonction
88
+
89
+Les instructions d'appel de fonction ont un fonctionnement légèrement plus compliqué que les autres. En effet, elles doivent s'exécuter sur 2 cycles : l'addresse de retour de la fonction doit être stockée sur la pile et donc sur 2 octets (le programme counter a une taille de 11 bits).
90
+
91
+Le décodeur envoie un signal `two_cycle` au Program memory afin que ce dernier reste figé un cycle de plus, pendant que le Program counter change de valeur.
92
+
93
+Le fonctionnement général de ces instructions est montré par le schéma ci-dessous :
94
+
95
+![schéma du processeur](/img/proz_design/diagramme_ret_rcall.png)
96
+
97
+## Pipelines
98
+
99
+
100
+Un pipeline deux niveau a été implémenté (Fetch - Decode), comme montré par le schéma ci- dessous :
101
+![schéma du processeur](/img/proz_design/diagramme_first_stage_pipeline.png)
102
+
103
+### Pipelines à trois niveaux ?
104
+
105
+Le pipeline à trois niveaux était au programme et aurait dû être implémenté, mais, faute de temps, je n'ai pas pu le faire.
106
+
107
+Le plus grand avantage de ce pipeline aurait été de pouvoir implémenter le `decoder_memory`avec une RAM de type BLOCK et non DISTRIBUTED, ce qui aurait grandement amélioré les performances.
108
+
109
+![schéma du processeur](/img/proz_design/diagramme_three_steps_pipeline.png)
110
+
111
+# Conclusion
112
+
113
+C'était vraiment un chouette projet ! Il m'a permit de redécouvrir le VHDL que je n'avais qu'effleuré à l'UTC. J'ai adoré la logique un peu bizarre de la création de signaux qui a connu son apogée lors de l'implémentation des pipelines.
114
+
115
+J'ai pu également réellement comprendre la nécessité d'être rigoureux dans le versionnement de son code, notamment à un moment où j'ai dû réalisé un refactoring total de mon code à grand coup de gitmerge... tout ça à cause de commits mal testés. "C'est comme ça que l'on apprend", diraient certains.
116
+
117
+
118
+
119
+
120
+[pd_gh]: https://github.com/tamicasireim/prozdesign
121
+

+ 20
- 0
_posts/2017-04-19-effacer-les-lignes.md View File

@@ -0,0 +1,20 @@
1
+---
2
+layout: post
3
+title: Effacer les Lignes
4
+image:
5
+  feature: sample-image-2.jpg
6
+---
7
+
8
+Eh bien voilà, c'est fini. Une alliance entre les délires dans ma tête et ma plume qui se délie parfois. Une nuit sans lune j'ai écrit cette nouvelle, "Effacer les Lignes". Et puis une autre, j'ai décidé de le porter en histoire audio.
9
+
10
+Et puis voilà, presque un an plus tard, je vous présente ma toute nouvelle création : "Effacer les Lignes".
11
+
12
+LIEN YOUTUBE
13
+
14
+<!--more-->
15
+
16
+Je pense que la vidéo se suffit à elle-même. J'y rajouterais néanmoins une poignée de remerciements :
17
+
18
+Merci à Florian pour avoir prêté son ton et sa voix à Akim... Et d'être comme il est, tout simplement. Car Akim n'existe pas... mais si Florian n'existait pas non plus, il faudrait l'inventer !
19
+
20
+

+ 92
- 0
_sass/components/_buttons.scss View File

@@ -0,0 +1,92 @@
1
+/* Buttons
2
+   ========================================================================== */
3
+
4
+// General
5
+.btn {
6
+  display: inline-block;
7
+  margin-bottom: 20px;
8
+  padding: 8px 20px;
9
+  font-size: 0.875em;
10
+  font-family: $font-family-base;
11
+  font-weight: 700;
12
+  background-color: $primary;
13
+  color: $white;
14
+  border-width: 2px !important;
15
+  border-style: solid !important;
16
+  border-color: $primary;
17
+  text-decoration: none !important;
18
+  border-radius: 5px;
19
+  &:visited {
20
+    color: $white;
21
+    border-color: $primary;
22
+  }
23
+  &:hover {
24
+    background-color: $white;
25
+    color: $primary;
26
+    border-color: $primary;
27
+  }
28
+}
29
+
30
+// Success button
31
+.btn-success {
32
+  background-color: $success;
33
+  color: $white;
34
+  border-color: $success;
35
+  &:visited {
36
+    color: $white;
37
+    border-color: $success;
38
+  }
39
+  &:hover {
40
+    background-color: $white;
41
+    color: $success;
42
+    border-color: $success;
43
+  }
44
+}
45
+
46
+// Warning button
47
+.btn-warning {
48
+  background-color: $warning;
49
+  color: $white;
50
+  border-color: $warning;
51
+  &:visited {
52
+    color: $white;
53
+    border-color: $warning;
54
+  }
55
+  &:hover {
56
+    background-color: $white;
57
+    color: $warning;
58
+    border-color: $warning;
59
+  }
60
+}
61
+
62
+// Danger button
63
+.btn-danger {
64
+  background-color: $danger;
65
+  color: $white;
66
+  border-color: $danger;
67
+  &:visited {
68
+    color: $white;
69
+    border-color: $danger;
70
+  }
71
+  &:hover {
72
+    background-color: $white;
73
+    color: $danger;
74
+    border-color: $danger;
75
+  }
76
+}
77
+
78
+// Information button
79
+.btn-info {
80
+  background-color: $info;
81
+  color: $white;
82
+  border-color: $info;
83
+  &:visited {
84
+    border-color: $info;
85
+    color: $white;
86
+  }
87
+  &:hover {
88
+    background-color: $white;
89
+    color: $info;
90
+    border-color: $info;
91
+  }
92
+}

+ 122
- 0
_sass/components/_global.scss View File

@@ -0,0 +1,122 @@
1
+/**
2
+  * Global setting
3
+  */
4
+*,
5
+*:before,
6
+*:after {
7
+  @include box-sizing;
8
+}
9
+.notice {
10
+  border: 1px solid lighten($text-color, 45%);
11
+  border-radius: 0.4em;
12
+  padding: 0.5em 1em;
13
+}
14
+img {
15
+  height: auto;
16
+  max-width: 100%;
17
+}
18
+
19
+// Tables
20
+table,
21
+th,
22
+td {
23
+  border: none;
24
+}
25
+.table {
26
+  display: table;
27
+}
28
+.table-cell {
29
+  display: table-cell;
30
+}
31
+.table-top {
32
+  vertical-align: top;
33
+}
34
+.table-middle {
35
+  vertical-align: middle;
36
+}
37
+.table-bottom {
38
+  vertical-align: bottom;
39
+}
40
+table {
41
+  width: 100%;
42
+  display: table;
43
+  &.bordered > thead > tr,
44
+  &.bordered > tbody > tr {
45
+    border-bottom: 1px solid $table-border-color;
46
+  }
47
+  &.striped > tbody {
48
+    > tr:nth-child(odd) {
49
+      background-color: $table-striped-color;
50
+    }
51
+    > tr > td {
52
+      border-radius: 0;
53
+    }
54
+  }
55
+  &.highlight > tbody > tr {
56
+    @include transition(background-color .25s ease);
57
+    &:hover {
58
+      background-color: $table-striped-color;
59
+    }
60
+  }
61
+  &.centered {
62
+    thead tr th,
63
+    tbody tr td,
64
+    tfoot tr td {
65
+      text-align: center;
66
+    }
67
+  }
68
+}
69
+thead {
70
+  border-bottom: 1px solid $table-border-color;
71
+}
72
+td,
73
+th {
74
+  padding: 15px 5px;
75
+  display: table-cell;
76
+  text-align: left;
77
+  vertical-align: middle;
78
+  border-radius: 2px;
79
+}
80
+tfoot {
81
+  border-top: 1px solid $table-border-color;
82
+}
83
+
84
+// Global transition
85
+b,
86
+i,
87
+strong,
88
+em,
89
+blockquote,
90
+p,
91
+q,
92
+span,
93
+figure,
94
+img,
95
+h1,
96
+h2,
97
+header,
98
+input,
99
+a {
100
+  @include transition(all .1s ease);
101
+}
102
+
103
+// Footer
104
+footer {
105
+  text-align: center;
106
+  padding: 3em 0;
107
+  .heart-icon {
108
+    color: $danger;
109
+    text-shadow: 0 0 5px $white, 0 0 10px $danger;
110
+  }
111
+}
112
+.related-articles {
113
+  margin-top: 2em;
114
+  h4 {
115
+    font-family: $font-family-base;
116
+  }
117
+  ul {
118
+    margin: 0;
119
+    padding: 0;
120
+    list-style: none;
121
+  }
122
+}

+ 125
- 0
_sass/components/_grid.scss View File

@@ -0,0 +1,125 @@
1
+/**
2
+  * Grid
3
+  */
4
+
5
+// Container
6
+.container {
7
+  margin: 0 auto;
8
+  max-width: 1280px;
9
+  width: 90%;
10
+}
11
+@include media-query($medium-screen) {
12
+  .container {
13
+    width: 85%;
14
+  }
15
+}
16
+@include media-query($large-screen) {
17
+  .container {
18
+    width: 70%;
19
+  }
20
+}
21
+.container .row {
22
+  margin-left: (-1 * $gutter-width / 2);
23
+  margin-right: (-1 * $gutter-width / 2);
24
+}
25
+
26
+// Section
27
+.section {
28
+	padding-top: 1rem;
29
+	padding-bottom: 1rem;
30
+
31
+  &.no-pad {
32
+    padding: 0;
33
+  }
34
+  &.no-pad-bot {
35
+    padding-bottom: 0;
36
+  }
37
+  &.no-pad-top {
38
+    padding-top: 0;
39
+  }
40
+}
41
+
42
+// Row and colum
43
+.row {
44
+  margin-left: auto;
45
+  margin-right: auto;
46
+
47
+  // Clear floating children
48
+  &:after {
49
+    content: "";
50
+    display: table;
51
+    clear: both;
52
+  }
53
+
54
+  .col {
55
+    float: left;
56
+    @include box-sizing(border-box);
57
+    display:block;
58
+  	vertical-align:top;
59
+  	width:100%;
60
+
61
+    $i: 1;
62
+    @while $i <= $num-cols {
63
+      $perc: unquote((100 / ($num-cols / $i)) + "%");
64
+      &.s#{$i} {
65
+        width: $perc;
66
+        margin-left: 0;
67
+      }
68
+      $i: $i + 1;
69
+    }
70
+    $i: 1;
71
+    @while $i <= $num-cols {
72
+      $perc: unquote((100 / ($num-cols / $i)) + "%");
73
+      &.offset-s#{$i} {
74
+        margin-left: $perc;
75
+      }
76
+      $i: $i + 1;
77
+    }
78
+
79
+
80
+    @include media-query($small-screen) {
81
+
82
+      $i: 1;
83
+      @while $i <= $num-cols {
84
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
85
+        &.m#{$i} {
86
+          width: $perc;
87
+          margin-left: 0;
88
+        }
89
+        $i: $i + 1;
90
+      }
91
+      $i: 1;
92
+      @while $i <= $num-cols {
93
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
94
+        &.offset-m#{$i} {
95
+          margin-left: $perc;
96
+        }
97
+        $i: $i + 1;
98
+      }
99
+
100
+    }
101
+
102
+    @include media-query($medium-screen) {
103
+
104
+      $i: 1;
105
+      @while $i <= $num-cols {
106
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
107
+        &.l#{$i} {
108
+          width: $perc;
109
+          margin-left: 0;
110
+        }
111
+        $i: $i + 1;
112
+      }
113
+      $i: 1;
114
+      @while $i <= $num-cols {
115
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
116
+        &.offset-l#{$i} {
117
+          margin-left: $perc;
118
+        }
119
+        $i: $i + 1;
120
+      }
121
+
122
+    }
123
+
124
+  }
125
+}

+ 194
- 0
_sass/components/_helpers.scss View File

@@ -0,0 +1,194 @@
1
+/**
2
+  * Helpers
3
+  */
4
+
5
+// Displays
6
+.block { display: block }
7
+.inline-block { display: inline-block }
8
+
9
+.hidden-md {
10
+  display: none;
11
+  @include media-query($medium-screen) {
12
+    display: inline-block;
13
+  }
14
+}
15
+
16
+.radius-box {
17
+  border-radius: 10px;
18
+}
19
+
20
+.radius-ls {
21
+  border-bottom-left-radius: 3px;
22
+  border-top-left-radius: 3px;
23
+}
24
+.radius-rs {
25
+  border-bottom-right-radius: 3px;
26
+  border-top-right-radius: 3px;
27
+}
28
+
29
+.radius-l1 {
30
+  border-bottom-left-radius: 10px;
31
+  border-top-left-radius: 10px;
32
+}
33
+.radius-r1 {
34
+  border-bottom-right-radius: 10px;
35
+  border-top-right-radius: 10px;
36
+}
37
+
38
+// Margin helpers
39
+.m0            { margin: 0 }
40
+.mt0           { margin-top: 0 }
41
+.mr0           { margin-right: 0 }
42
+.mb0           { margin-bottom: 0 }
43
+.ml0           { margin-left: 0 }
44
+
45
+.ms            { margin: .25em }
46
+.mts           { margin-top: .25em }
47
+.mbs           { margin-bottom: .25em }
48
+.mrs           { margin-right: .25em }
49
+.mls           { margin-left: .25em }
50
+
51
+.mm            { margin: .5em }
52
+.mtm           { margin-top: .5em }
53
+.mbm           { margin-bottom: .5em }
54
+.mrm           { margin-right: .5em }
55
+.mlm           { margin-left: .5em }
56
+
57
+.m1            { margin: $base-space-unit }
58
+.mt1           { margin-top: $base-space-unit }
59
+.mb1           { margin-bottom: $base-space-unit }
60
+.mr1           { margin-right: $base-space-unit }
61
+.ml1           { margin-left: $base-space-unit }
62
+
63
+.m2            { margin: $base-space-unit*2 }
64
+.mt2           { margin-top: $base-space-unit*2 }
65
+.mb2           { margin-bottom: $base-space-unit*2 }
66
+.mr2           { margin-right: $base-space-unit*2 }
67
+.ml2           { margin-left: $base-space-unit*2 }
68
+
69
+// Padding helpers
70
+.p0            { padding: 0 }
71
+.pt0           { padding-top: 0 }
72
+.pr0           { padding-right: 0 }
73
+.pb0           { padding-bottom: 0 }
74
+.pl0           { padding-left: 0 }
75
+
76
+.ps            { padding: .25em }
77
+.pts           { padding-top: .25em }
78
+.pbs           { padding-bottom: .25em }
79
+.prs           { padding-right: .25em }
80
+.pls           { padding-left: .25em }
81
+
82
+.pm            { padding: .5em }
83
+.ptm           { padding-top: .5em }
84
+.pbm           { padding-bottom: .5em }
85
+.prm           { padding-right: .5em }
86
+.plm           { padding-left: .5em }
87
+
88
+.p1            { padding: 1em }
89
+.pt1           { padding-top: 1em }
90
+.pr1           { padding-right: 1em }
91
+.pb1           { padding-bottom: 1em }
92
+.pl1           { padding-left: 1em }
93
+
94
+.p2            { padding: 1em*2 }
95
+.pt2           { padding-top: 1em*2 }
96
+.pr2           { padding-right: 1em*2 }
97
+.pb2           { padding-bottom: 1em*2 }
98
+.pl2           { padding-left: 1em*2 }
99
+
100
+.pb5           { padding-bottom: 1em*5 }
101
+
102
+// Padding small
103
+.pads           { padding: .25em }
104
+
105
+// Padding medium
106
+.padm           { padding: .5em }
107
+
108
+// Padding large
109
+.padl           { padding: 1em }
110
+
111
+// Padding small left :: right
112
+.padsx {
113
+ padding-left: .25em;
114
+ padding-right: .25em;
115
+}
116
+
117
+// Padding medium left :: right
118
+.padmx {
119
+ padding-left: .5em;
120
+ padding-right: .5em;
121
+}
122
+
123
+// Padding large left :: right
124
+.padlx {
125
+ padding-left: 1em;
126
+ padding-right: 1em;
127
+}
128
+
129
+// Padding small top :: bottom
130
+.padsy {
131
+ padding-top: .25em;
132
+ padding-bottom: .25em;
133
+}
134
+
135
+// Padding medium top :: bottom
136
+.padmy {
137
+ padding-top: .5em;
138
+ padding-bottom: .5em;
139
+}
140
+
141
+// Padding large top :: bottom
142
+.padly {
143
+ padding-top: 1em;
144
+ padding-bottom: 1em;
145
+}
146
+
147
+// Colors helpers
148
+.primary-text-color {
149
+  color: $primary;
150
+}
151
+
152
+.primary-bg-color {
153
+  background-color: $primary;
154
+}
155
+
156
+.secondary-text-color {
157
+  color: $secondary;
158
+}
159
+
160
+.secondary-bg-color {
161
+  background-color: $secondary;
162
+}
163
+
164
+.success-text-color {
165
+  color: $success;
166
+}
167
+
168
+.success-bg-color {
169
+  background-color: $success;
170
+}
171
+
172
+.danger-text-color {
173
+  color: $danger;
174
+}
175
+
176
+.danger-bg-color {
177
+  background-color: $danger;
178
+}
179
+
180
+.info-text-color {
181
+  color: $info;
182
+}
183
+
184
+.info-bg-color {
185
+  background-color: $info;
186
+}
187
+
188
+.warning-text-color {
189
+  color: $warning;
190
+}
191
+
192
+.warning-bg-color {
193
+  background-color: $warning;
194
+}

+ 280
- 0
_sass/components/_mixins.scss View File

@@ -0,0 +1,280 @@
1
+/* Utility mixins
2
+   ========================================================================== */
3
+
4
+/**
5
+ * Clearfix for clearing floats like a boss h5bp.com/q
6
+ */
7
+
8
+@mixin clearfix {
9
+  *zoom: 1;
10
+  &:before,
11
+  &:after {
12
+    display: table;
13
+    content: "";
14
+    line-height: 0;
15
+  }
16
+  &:after {
17
+    clear: both;
18
+  }
19
+}
20
+
21
+/**
22
+ * Media query
23
+ */
24
+
25
+@mixin media-query($device) {
26
+    @media only screen and (min-width: $device) {
27
+        @content;
28
+    }
29
+}
30
+
31
+/**
32
+ * Webkit-style focus
33
+ */
34
+
35
+@mixin tab-focus() {
36
+  /* Default */
37
+  outline: thin dotted #333;
38
+  /* Webkit */
39
+  outline: 5px auto -webkit-focus-ring-color;
40
+  outline-offset: -2px;
41
+}
42
+
43
+/**
44
+ * Center-align a block level element
45
+ */
46
+
47
+@mixin center-block() {
48
+  display: block;
49
+  margin-left: auto;
50
+  margin-right: auto;
51
+}
52
+
53
+
54
+/**
55
+ * Hide text overflow and end with ...
56
+ */
57
+
58
+@mixin text-overflow() {
59
+  overflow: hidden;
60
+  text-overflow: ellipsis;
61
+  white-space: nowrap;
62
+}
63
+
64
+
65
+/* Gradient mixins
66
+   ========================================================================== */
67
+
68
+@mixin horizontal($startColor : $white, $endColor : $lightergrey) {
69
+  background-color: $endColor;
70
+  background-image  : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
71
+  background-image  : -webkit-linear-gradient(left, $startColor, $endColor);           // Safari 5.1+, Chrome 10+
72
+  background-image  : -moz-linear-gradient(left, $startColor, $endColor);            // FF 3.6+
73
+  background-image  : -ms-linear-gradient(left, $startColor, $endColor);             // IE10
74
+  background-image  : -o-linear-gradient(left, $startColor, $endColor);              // Opera 11.10
75
+  background-image  : linear-gradient(left, $startColor, $endColor);               // W3C
76
+  background-repeat : repeat-x;
77
+ }
78
+
79
+@mixin vertical($startColor : $white, $endColor:  $lightergrey) {
80
+  background-image  : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
81
+  background-image  : -webkit-linear-gradient(top, $startColor, $endColor);            // Safari 5.1+, Chrome 10+
82
+  background-color  : $endColor;
83
+  background-image  : -moz-linear-gradient(top, $startColor, $endColor);             // FF 3.6+
84
+  background-image  : -ms-linear-gradient(top, $startColor, $endColor);              // IE10
85
+  background-image  : -o-linear-gradient(top, $startColor, $endColor);             // Opera 11.10
86
+  background-image  : linear-gradient(top, $startColor, $endColor);                // W3C
87
+  background-repeat : repeat-x;
88
+}
89
+
90
+@mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
91
+  background-color  : $endColor;
92
+  background-image  : -moz-linear-gradient($deg, $startColor, $endColor);           // FF 3.6+
93
+  background-image  : -ms-linear-gradient($deg, $startColor, $endColor);            // IE10
94
+  background-image  : -webkit-linear-gradient($deg, $startColor, $endColor);          // Safari 5.1+, Chrome 10+
95
+  background-image  : -o-linear-gradient($deg, $startColor, $endColor);             // Opera 11.10
96
+  background-image  : linear-gradient($deg, $startColor, $endColor);              // W3C
97
+  background-repeat : repeat-x;
98
+}
99
+
100
+// .bordered(COLOR, COLOR, COLOR, COLOR);
101
+@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
102
+  border-top : solid 1px $top-color;
103
+  border-left : solid 1px $left-color;
104
+  border-right : solid 1px $right-color;
105
+  border-bottom : solid 1px $bottom-color;
106
+}
107
+
108
+/* Rounded corners
109
+   ========================================================================== */
110
+
111
+/**
112
+ * Round all corners
113
+ * example: @include rounded(4px);
114
+ */
115
+
116
+@mixin rounded($radius:4px) {
117
+  border-radius : $radius;
118
+}
119
+
120
+/**
121
+ * Round individual corners (top right, bottom right, bottom left, top left)
122
+ * example: @include border-radius(4px, 0, 0, 4px);
123
+ */
124
+
125
+@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
126
+  border-top-right-radius: $topright;
127
+  border-bottom-right-radius: $bottomright;
128
+  border-bottom-left-radius: $bottomleft;
129
+  border-top-left-radius: $topleft;
130
+  -webkit-background-clip: padding-box;
131
+  -moz-background-clip: padding;
132
+  background-clip: padding-box;
133
+}
134
+
135
+/**
136
+ * Box shadow
137
+ * example: @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR));
138
+ */
139
+
140
+@mixin box-shadow($shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26)) {
141
+  -webkit-box-shadow: $shadow;
142
+  -moz-box-shadow: $shadow;
143
+  box-shadow: $shadow;
144
+}
145
+
146
+/**
147
+ * Drop shadow
148
+ * example: @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
149
+ */
150
+
151
+@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
152
+  -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
153
+  -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
154
+  box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
155
+}
156
+
157
+/**
158
+ * Text shadow
159
+ * example: @include text-shadow(0 2px 3px rgba(0,0,0,.25));
160
+ */
161
+
162
+@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
163
+text-shadow: $shadow; }
164
+
165
+/**
166
+ * Opacity
167
+ * example: @include opacity(0.5); // 50% opacity
168
+ */
169
+
170
+@mixin opacity($opacity: 0.5) {
171
+  opacity: $opacity;
172
+}
173
+
174
+/* Transformations
175
+   ========================================================================== */
176
+
177
+/**
178
+ * @include rotate(VALUEdeg);
179
+ */
180
+
181
+@mixin rotate($deg) {
182
+  -webkit-transform: rotate($deg);
183
+  -moz-transform: rotate($deg);
184
+  -ms-transform: rotate($deg);
185
+  -o-transform: rotate($deg);
186
+  transform: rotate($deg);
187
+}
188
+
189
+/**
190
+ * @include scale(VALUE);
191
+ */
192
+
193
+@mixin scale($ratio) {
194
+  -webkit-transform: scale($ratio);
195
+  -moz-transform: scale($ratio);
196
+  -ms-transform: scale($ratio);
197
+  -o-transform: scale($ratio);
198
+  transform: scale($ratio);
199
+}
200
+
201
+/**
202
+ * @include skew(VALUE, VALUE);
203
+ */
204
+
205
+@mixin skew($x: 0, $y: 0) {
206
+  -webkit-transform: skew($x, $y);
207
+  -moz-transform: skew($x, $y);
208
+  -ms-transform: skew($x, $y);
209
+  -o-transform: skew($x, $y);
210
+  transform: skew($x, $y);
211
+}
212
+
213
+/**
214
+ * @include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
215
+ */
216
+
217
+@mixin transition($transition) {
218
+  -webkit-transition: $transition;
219
+  -moz-transition: $transition;
220
+  -ms-transition: $transition;
221
+  -o-transition: $transition;
222
+  transition: $transition;
223
+}
224
+
225
+/**
226
+ * @include translate(VALUE, VALUE);
227
+ */
228
+
229
+@mixin translate($x: 0, $y: 0) {
230
+  -webkit-transform: translate($x, $y);
231
+  -moz-transform: translate($x, $y);
232
+  -ms-transform: translate($x, $y);
233
+  -o-transform: translate($x, $y);
234
+  transform: translate($x, $y);
235
+}
236
+
237
+@mixin translate3d($x: 0, $y: 0, $z: 0) {
238
+  -webkit-transform: translate($x, $y, $z);
239
+  -moz-transform: translate($x, $y, $z);
240
+  -ms-transform: translate($x, $y, $z);
241
+  -o-transform: translate($x, $y, $z);
242
+  transform: translate($x, $y, $z);
243
+}
244
+
245
+@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
246
+  -webkit-animation: $name $duration $delay $ease;
247
+  -moz-animation:    $name $duration $delay $ease;
248
+  -ms-animation:     $name $duration $delay $ease;
249
+}
250
+
251
+
252
+/**
253
+ * Box-sizing
254
+ * example: @include box-sizing(VALUE); //(border-box, padding-box, content-box)
255
+ */
256
+
257
+@mixin box-sizing($boxsize: border-box) {
258
+  -webkit-box-sizing: $boxsize;
259
+  -moz-box-sizing: $boxsize;
260
+  -ms-box-sizing: $boxsize;
261
+  box-sizing: $boxsize;
262
+}
263
+
264
+
265
+/**
266
+ * Hide from visual and speaking browsers
267
+ */
268
+
269
+@mixin hidden {
270
+  display: none;
271
+  visibility: hidden;
272
+}
273
+
274
+/**
275
+ * Hide but maintain layout
276
+ */
277
+
278
+@mixin invisible() {
279
+  visibility: hidden;
280
+}

+ 427
- 0
_sass/components/_normalize.scss View File

@@ -0,0 +1,427 @@
1
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2
+
3
+/**
4
+ * 1. Set default font family to sans-serif.
5
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
6
+ *    user zoom.
7
+ */
8
+
9
+html {
10
+  font-family: sans-serif; /* 1 */
11
+  -ms-text-size-adjust: 100%; /* 2 */
12
+  -webkit-text-size-adjust: 100%; /* 2 */
13
+}
14
+
15
+/**
16
+ * Remove default margin.
17
+ */
18
+
19
+body {
20
+  margin: 0;
21
+}
22
+
23
+/* HTML5 display definitions
24
+   ========================================================================== */
25
+
26
+/**
27
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
28
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
29
+ * and Firefox.
30
+ * Correct `block` display not defined for `main` in IE 11.
31
+ */
32
+
33
+article,
34
+aside,
35
+details,
36
+figcaption,
37
+figure,
38
+footer,
39
+header,
40
+hgroup,
41
+main,
42
+menu,
43
+nav,
44
+section,
45
+summary {
46
+  display: block;
47
+}
48
+
49
+/**
50
+ * 1. Correct `inline-block` display not defined in IE 8/9.
51
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52
+ */
53
+
54
+audio,
55
+canvas,
56
+progress,
57
+video {
58
+  display: inline-block; /* 1 */
59
+  vertical-align: baseline; /* 2 */
60
+}
61
+
62
+/**
63
+ * Prevent modern browsers from displaying `audio` without controls.
64
+ * Remove excess height in iOS 5 devices.
65
+ */
66
+
67
+audio:not([controls]) {
68
+  display: none;
69
+  height: 0;
70
+}
71
+
72
+/**
73
+ * Address `[hidden]` styling not present in IE 8/9/10.
74
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
75
+ */
76
+
77
+[hidden],
78
+template {
79
+  display: none;
80
+}
81
+
82
+/* Links
83
+   ========================================================================== */
84
+
85
+/**
86
+ * Remove the gray background color from active links in IE 10.
87
+ */
88
+
89
+a {
90
+  background-color: transparent;
91
+}
92
+
93
+/**
94
+ * Improve readability when focused and also mouse hovered in all browsers.
95
+ */
96
+
97
+a:active,
98
+a:hover {
99
+  outline: 0;
100
+}
101
+
102
+/* Text-level semantics
103
+   ========================================================================== */
104
+
105
+/**
106
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107
+ */
108
+
109
+abbr[title] {
110
+  border-bottom: 1px dotted;
111
+}
112
+
113
+/**
114
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115
+ */
116
+
117
+b,
118
+strong {
119
+  font-weight: bold;
120
+}
121
+
122
+/**
123
+ * Address styling not present in Safari and Chrome.
124
+ */
125
+
126
+dfn {
127
+  font-style: italic;
128
+}
129
+
130
+/**
131
+ * Address variable `h1` font-size and margin within `section` and `article`
132
+ * contexts in Firefox 4+, Safari, and Chrome.
133
+ */
134
+
135
+h1 {
136
+  font-size: 2em;
137
+  margin: 0.67em 0;
138
+}
139
+
140
+/**
141
+ * Address styling not present in IE 8/9.
142
+ */
143
+
144
+mark {
145
+  background: #ff0;
146
+  color: #000;
147
+}
148
+
149
+/**
150
+ * Address inconsistent and variable font size in all browsers.
151
+ */
152
+
153
+small {
154
+  font-size: 80%;
155
+}
156
+
157
+/**
158
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159
+ */
160
+
161
+sub,
162
+sup {
163
+  font-size: 75%;
164
+  line-height: 0;
165
+  position: relative;
166
+  vertical-align: baseline;
167
+}
168
+
169
+sup {
170
+  top: -0.5em;
171
+}
172
+
173
+sub {
174
+  bottom: -0.25em;
175
+}
176
+
177
+/* Embedded content
178
+   ========================================================================== */
179
+
180
+/**
181
+ * Remove border when inside `a` element in IE 8/9/10.
182
+ */
183
+
184
+img {
185
+  border: 0;
186
+}
187
+
188
+/**
189
+ * Correct overflow not hidden in IE 9/10/11.
190
+ */
191
+
192
+svg:not(:root) {
193
+  overflow: hidden;
194
+}
195
+
196
+/* Grouping content
197
+   ========================================================================== */
198
+
199
+/**
200
+ * Address margin not present in IE 8/9 and Safari.
201
+ */
202
+
203
+figure {
204
+  margin: 1em 40px;
205
+}
206
+
207
+/**
208
+ * Address differences between Firefox and other browsers.
209
+ */
210
+
211
+hr {
212
+  -moz-box-sizing: content-box;
213
+  box-sizing: content-box;
214
+  height: 0;
215
+}
216
+
217
+/**
218
+ * Contain overflow in all browsers.
219
+ */
220
+
221
+pre {
222
+  overflow: auto;
223
+}
224
+
225
+/**
226
+ * Address odd `em`-unit font size rendering in all browsers.
227
+ */
228
+
229
+code,
230
+kbd,
231
+pre,
232
+samp {
233
+  font-family: monospace, monospace;
234
+  font-size: 1em;
235
+}
236
+
237
+/* Forms
238
+   ========================================================================== */
239
+
240
+/**
241
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
242
+ * styling of `select`, unless a `border` property is set.
243
+ */
244
+
245
+/**
246
+ * 1. Correct color not being inherited.
247
+ *    Known issue: affects color of disabled elements.
248
+ * 2. Correct font properties not being inherited.
249
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250
+ */
251
+
252
+button,
253
+input,
254
+optgroup,
255
+select,
256
+textarea {
257
+  color: inherit; /* 1 */
258
+  font: inherit; /* 2 */
259
+  margin: 0; /* 3 */
260
+}
261
+
262
+/**
263
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
264
+ */
265
+
266
+button {
267
+  overflow: visible;
268
+}
269
+
270
+/**
271
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
272
+ * All other form control elements do not inherit `text-transform` values.
273
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274
+ * Correct `select` style inheritance in Firefox.
275
+ */
276
+
277
+button,
278
+select {
279
+  text-transform: none;
280
+}
281
+
282
+/**
283
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284
+ *    and `video` controls.
285
+ * 2. Correct inability to style clickable `input` types in iOS.
286
+ * 3. Improve usability and consistency of cursor style between image-type
287
+ *    `input` and others.
288
+ */
289
+
290
+/* 1 */ html input[type="button"],
291
+button,
292
+input[type="reset"],
293
+input[type="submit"] {
294
+  -webkit-appearance: button; /* 2 */
295
+  cursor: pointer; /* 3 */
296
+}
297
+
298
+/**
299
+ * Re-set default cursor for disabled elements.
300
+ */
301
+
302
+button[disabled],
303
+html input[disabled] {
304
+  cursor: default;
305
+}
306
+
307
+/**
308
+ * Remove inner padding and border in Firefox 4+.
309
+ */
310
+
311
+button::-moz-focus-inner,
312
+input::-moz-focus-inner {
313
+  border: 0;
314
+  padding: 0;
315
+}
316
+
317
+/**
318
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319
+ * the UA stylesheet.
320
+ */
321
+
322
+input {
323
+  line-height: normal;
324
+}
325
+
326
+/**
327
+ * It's recommended that you don't attempt to style these elements.
328
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
329
+ *
330
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
331
+ * 2. Remove excess padding in IE 8/9/10.
332
+ */
333
+
334
+input[type="checkbox"],
335
+input[type="radio"] {
336
+  box-sizing: border-box; /* 1 */
337
+  padding: 0; /* 2 */
338
+}
339
+
340
+/**
341
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342
+ * `font-size` values of the `input`, it causes the cursor style of the
343
+ * decrement button to change from `default` to `text`.
344
+ */
345
+
346
+input[type="number"]::-webkit-inner-spin-button,
347
+input[type="number"]::-webkit-outer-spin-button {
348
+  height: auto;
349
+}
350
+
351
+/**
352
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354
+ *    (include `-moz` to future-proof).
355
+ */
356
+
357
+input[type="search"] {
358
+  -webkit-appearance: textfield; /* 1 */
359
+  -moz-box-sizing: content-box;
360
+  -webkit-box-sizing: content-box; /* 2 */
361
+  box-sizing: content-box;
362
+}
363
+
364
+/**
365
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366
+ * Safari (but not Chrome) clips the cancel button when the search input has
367
+ * padding (and `textfield` appearance).
368
+ */
369
+
370
+input[type="search"]::-webkit-search-cancel-button,
371
+input[type="search"]::-webkit-search-decoration {
372
+  -webkit-appearance: none;
373
+}
374
+
375
+/**
376
+ * Define consistent border, margin, and padding.
377
+ */
378
+
379
+fieldset {
380
+  border: 1px solid #c0c0c0;
381
+  margin: 0 2px;
382
+  padding: 0.35em 0.625em 0.75em;
383
+}
384
+
385
+/**
386
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
387
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388
+ */
389
+
390
+legend {
391
+  border: 0; /* 1 */
392
+  padding: 0; /* 2 */
393
+}
394
+
395
+/**
396
+ * Remove default vertical scrollbar in IE 8/9/10/11.
397
+ */
398
+
399
+textarea {
400
+  overflow: auto;
401
+}
402
+
403
+/**
404
+ * Don't inherit the `font-weight` (applied by a rule above).
405
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406
+ */
407
+
408
+optgroup {
409
+  font-weight: bold;
410
+}
411
+
412
+/* Tables
413
+   ========================================================================== */
414
+
415
+/**
416
+ * Remove most spacing between table cells.
417
+ */
418
+
419
+table {
420
+  border-collapse: collapse;
421
+  border-spacing: 0;
422
+}
423
+
424
+td,
425
+th {
426
+  padding: 0;
427
+}

+ 124
- 0
_sass/components/_syntax-highlighting.scss View File

@@ -0,0 +1,124 @@
1
+/* ==========================================================================
2
+   Syntax highlighting
3
+   ========================================================================== */
4
+
5
+
6
+pre, code {
7
+  font-family: $font-family-monospace;
8
+  color: #525252;
9
+  font-size: 0.9em;
10
+  background-color: #f8f8f8;
11
+  font-size: ($font-size-base - 3);
12
+}
13
+code {
14
+  color: #e96900;
15
+  border-radius: 2px;
16
+  white-space: nowrap;
17
+}
18
+
19
+
20
+pre { // only apply for code blocks
21
+  overflow: auto;
22
+  display: block;
23
+  padding: 1em;
24
+  margin: 0 0 1em;
25
+  line-height: $base-line-height * 0.925;
26
+  word-break: break-all;
27
+  word-wrap: break-word;
28
+  border-radius: 0;
29
+  font-weight: normal;
30
+}
31
+pre code {
32
+  background: transparent;
33
+  white-space: pre;
34
+  overflow: auto;
35
+  word-wrap: normal;
36
+  color: #525252;
37
+  span {
38
+    word-break: break-all;
39
+  }
40
+}
41
+.highlight {
42
+  margin: 0;
43
+  pre {
44
+    position: relative;
45
+  }
46
+  pre code {
47
+    color: #525252;
48
+    &::before {
49
+      content: attr(data-lang);
50
+      position: absolute;
51
+      top: 0;
52
+      right: 0;
53
+      color: #ccc;
54
+      text-align: right;
55
+      text-transform: uppercase;
56
+      font-size: 0.85em;
57
+      padding: 5px 10px 0;
58
+      line-height: 20px;
59
+      height: 20px;
60
+      font-weight: 600;
61
+    }
62
+  }
63
+  .hll { background-color: #ffffcc }
64
+  .c { color: #B0B2B0; font-style: italic } /* Comment */
65
+  .err {  } /* Error */
66
+  .k { color: #AA22FF; font-weight: bold } /* Keyword */
67
+  .o { color: #666666 } /* Operator */
68
+  .cm { color: #B0B2B0; font-style: italic } /* Comment.Multiline */
69
+  .cp { color: #B0B2B0 } /* Comment.Preproc */
70
+  .c1 { color: #B0B2B0; font-style: italic } /* Comment.Single */
71
+  .cs { color: #B0B2B0; font-weight: bold } /* Comment.Special */
72
+  .gd { color: #A00000 } /* Generic.Deleted */
73
+  .ge { font-style: italic } /* Generic.Emph */
74
+  .gr { color: #FF0000 } /* Generic.Error */
75
+  .gh { color: #000080; font-weight: bold } /* Generic.Heading */
76
+  .gi { color: #00A000 } /* Generic.Inserted */
77
+  .go { color: #808080 } /* Generic.Output */
78
+  .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
79
+  .gs { font-weight: bold } /* Generic.Strong */
80
+  .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
81
+  .gt { color: #0040D0 } /* Generic.Traceback */
82
+  .kc { color: #AA22FF; font-weight: bold } /* Keyword.Constant */
83
+  .kd { color: #AA22FF; font-weight: bold } /* Keyword.Declaration */
84
+  .kn { color: #AA22FF; font-weight: bold } /* Keyword.Namespace */
85
+  .kp { color: #AA22FF } /* Keyword.Pseudo */
86
+  .kr { color: #AA22FF; font-weight: bold } /* Keyword.Reserved */
87
+  .kt { color: #00BB00; font-weight: bold } /* Keyword.Type */
88
+  .m { color: #666666 } /* Literal.Number */
89
+  .s { color: #BB4444 } /* Literal.String */
90
+  .na { color: #BB4444 } /* Name.Attribute */
91
+  .nb { color: #AA22FF } /* Name.Builtin */
92
+  .nc { color: #0000FF } /* Name.Class */
93
+  .no { color: #880000 } /* Name.Constant */
94
+  .nd { color: #AA22FF } /* Name.Decorator */
95
+  .ni { color: #999999; font-weight: bold } /* Name.Entity */
96
+  .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
97
+  .nf { color: #00A000 } /* Name.Function */
98
+  .nl { color: #A0A000 } /* Name.Label */
99
+  .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
100
+  .nt { color: #008000; font-weight: bold } /* Name.Tag */
101
+  .nv { color: #B8860B } /* Name.Variable */
102
+  .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
103
+  .w { color: #bbbbbb } /* Text.Whitespace */
104
+  .mf { color: #666666 } /* Literal.Number.Float */
105
+  .mh { color: #666666 } /* Literal.Number.Hex */
106
+  .mi { color: #666666 } /* Literal.Number.Integer */
107
+  .mo { color: #666666 } /* Literal.Number.Oct */
108
+  .sb { color: #BB4444 } /* Literal.String.Backtick */
109
+  .sc { color: #BB4444 } /* Literal.String.Char */
110
+  .sd { color: #BB4444; font-style: italic } /* Literal.String.Doc */
111
+  .s2 { color: #BB4444 } /* Literal.String.Double */
112
+  .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
113
+  .sh { color: #BB4444 } /* Literal.String.Heredoc */
114
+  .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
115
+  .sx { color: #008000 } /* Literal.String.Other */
116
+  .sr { color: #BB6688 } /* Literal.String.Regex */
117
+  .s1 { color: #BB4444 } /* Literal.String.Single */
118
+  .ss { color: #B8860B } /* Literal.String.Symbol */
119
+  .bp { color: #AA22FF } /* Name.Builtin.Pseudo */
120
+  .vc { color: #B8860B } /* Name.Variable.Class */
121
+  .vg { color: #B8860B } /* Name.Variable.Global */
122
+  .vi { color: #B8860B } /* Name.Variable.Instance */
123
+  .il { color: #666666 } /* Literal.Number.Integer.Long */
124
+}

+ 98
- 0
_sass/components/_typography.scss View File

@@ -0,0 +1,98 @@
1
+/* ==========================================================================
2
+   Typography
3
+   ========================================================================== */
4
+
5
+//
6
+// Global
7
+//
8
+
9
+html {
10
+  line-height: $base-line-height;
11
+  font-family: $font-family-base;
12
+  font-weight: normal;
13
+  color: $text-color;
14
+  -webkit-font-smoothing: antialiased;
15
+  text-rendering: optimizeLegibility;
16
+  font-size: $font-size-base;
17
+}
18
+
19
+//
20
+// Blockquote
21
+//
22
+
23
+blockquote {
24
+  display: block;
25
+	position: relative;
26
+  padding-left: 20px;
27
+  font-style: italic;
28
+  border-left: 5px solid $secondary;
29
+}
30
+
31
+//
32
+// Links
33
+//
34
+
35
+a {
36
+   text-decoration: none;
37
+   color: $primary;
38
+   &:hover,
39
+   &:focus {
40
+     color: lighten($primary, 14%);
41
+     text-decoration: none;
42
+   }
43
+}
44
+
45
+//
46
+// Header Styles
47
+//
48
+
49
+h1, h2, h3, h4, h5, h6 {
50
+	font-weight: 600;
51
+  line-height: 1.7;
52
+}
53
+
54
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
55
+  font-weight: inherit;
56
+  color: $text-color;
57
+  &:hover,
58
+  &:focus {
59
+    color: lighten($text-color, 24%);
60
+  }
61
+}
62
+h1 { font-size: $font-size-h1; margin: ($font-size-h1 / 2) 0 ($font-size-h1 / 2.5) 0;}
63
+h2 { font-size: $font-size-h2; margin: ($font-size-h2 / 2) 0 ($font-size-h2 / 2.5) 0;}
64
+h3 { font-size: $font-size-h3; margin: ($font-size-h3 / 2) 0 ($font-size-h3 / 2.5) 0;}
65
+h4 { font-size: $font-size-h4; margin: ($font-size-h4 / 2) 0 ($font-size-h4 / 2.5) 0;}
66
+h5 { font-size: $font-size-h5; margin: ($font-size-h5 / 2) 0 ($font-size-h5 / 2.5) 0;}
67
+h6 { font-size: $font-size-h6; margin: ($font-size-h6 / 2) 0 ($font-size-h6 / 2.5) 0; text-transform: uppercase;}
68
+
69
+//
70
+// Horizontal rules
71
+//
72
+
73
+hr {
74
+  margin-top: $spacer-y;
75
+  margin-bottom: $spacer-y;
76
+  border: 0;
77
+  border-top: $hr-border-width solid $hr-border-color;
78
+}
79
+
80
+//
81
+// Text Styles
82
+//
83
+
84
+em { font-style: italic; }
85
+
86
+strong { font-weight: 600; }
87
+
88
+small,
89
+.small {
90
+  font-size: 80%;
91
+  font-weight: normal;
92
+}
93
+
94
+p {
95
+  margin: 1.2em 0;
96
+  word-spacing: 0.05em;
97
+  line-height: 1.6em;
98
+}

+ 79
- 0
_sass/components/_variables.scss View File

@@ -0,0 +1,79 @@
1
+/*
2
+ * Global Variables
3
+ */
4
+
5
+// Google font import
6
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:600,400,400italic|Roboto+Mono);
7
+
8
+// Custom variables
9
+
10
+// Spacing
11
+//
12
+// Control the default styling of most Bootstrap elements by modifying these
13
+// variables. Mostly focused on spacing.
14
+
15
+$spacer:                     1rem !default;
16
+$spacer-x:                   $spacer !default;
17
+$spacer-y:                   $spacer !default;
18
+$border-width:               .0625rem !default;
19
+
20
+// Typography
21
+//
22
+// Font, line-height, and color for body text, headings, and more.
23
+
24
+$font-family-sans-serif:     "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
25
+$font-family-serif:          Georgia, "Times New Roman", Times, serif !default;
26
+$font-family-monospace:      "Roboto Mono", "Courier New", monospace !default;
27
+$font-family-base:           $font-family-sans-serif !default;
28
+
29
+// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
30
+$font-size-root:             15px !default;
31
+
32
+$font-size-base:             $font-size-root !default;
33
+$font-size-lg:               $font-size-root * 1.25 !default;
34
+$font-size-sm:               $font-size-root * 0.875 !default;
35
+$font-size-xs:               $font-size-root * 0.75 !default;
36
+
37
+$font-size-h1:               2rem !default;
38
+$font-size-h2:               1.75rem !default;
39
+$font-size-h3:               1.5rem !default;
40
+$font-size-h4:               1.25rem !default;
41
+$font-size-h5:               1.15rem !default;
42
+$font-size-h6:               1rem !default;
43
+
44
+$base-line-height:            1.5;
45
+$base-space-unit:             1.5em;
46
+
47
+$hr-border-color:             rgba(0,0,0,.1) !default;
48
+$hr-border-width:             $border-width;
49
+
50
+//
51
+// Colors
52
+//
53
+
54
+$text-color:       rgba(0, 0, 0, 0.87) !default;
55
+$background-color: #f5f5f5;
56
+
57
+$white:            #fff;
58
+$primary:          #42b983;
59
+$secondary:        #8d7edc;
60
+$success:          #65e892;
61
+$danger:           #f83e4b;
62
+$warning:          #F5A623;
63
+$info:             #09ABF6;
64
+
65
+// Tables
66
+$table-border-color: #d0d0d0 !default;
67
+$table-striped-color: #f2f2f2 !default;
68
+
69
+// Grid Variables
70
+$num-cols: 12 !default;
71
+$gutter-width: 1.5rem !default;
72
+$element-top-margin: $gutter-width/3 !default;
73
+$element-bottom-margin: ($gutter-width*2)/3 !default;
74
+
75
+// Media Query Ranges
76
+$small-screen: 600px !default;
77
+$medium-screen: 992px !default;
78
+$large-screen: 1200px !default;
79
+$larger-screen: 1600px !default;

+ 47
- 0
_sass/pages/_archive.scss View File

@@ -0,0 +1,47 @@
1
+.archive {
2
+  #timeline {
3
+    position: relative;
4
+    &:before {
5
+      content: '';
6
+      position: absolute;
7
+      top: 0;
8
+      left: -2px;
9
+      height: 100%;
10
+      width: 4px;
11
+      background: $background-color;
12
+    }
13
+    &:after {
14
+      content: "";
15
+      display: table;
16
+      clear: both;
17
+    }
18
+  }
19
+
20
+  .archive-title {
21
+    position: relative;
22
+    margin: 2em auto 1em;
23
+    .archive-year {
24
+      margin-left: 1em;
25
+      &:before {
26
+        content: " ";
27
+        position: absolute;
28
+        left: 0;
29
+        top: 50%;
30
+        margin-left: -4px;
31
+        margin-top: -4px;
32
+        width: 8px;
33
+        height: 8px;
34
+        background: #bbb;
35
+        border-radius: 50%;
36
+      }
37
+    }
38
+  }
39
+
40
+
41
+  ul {
42
+    list-style: none;
43
+    li {
44
+      margin: 1em auto;
45
+    }
46
+  }
47
+}

+ 97
- 0
_sass/pages/_layout.scss View File

@@ -0,0 +1,97 @@
1
+/* LAYOUT CSS */
2
+.cover {
3
+  background-color: $background-color;
4
+  position: fixed;
5
+  text-align: center;
6
+  width: 100%;
7
+  min-height: 400px;
8
+  padding: 30px 15px 20px;
9
+  z-index: 1;
10
+  @include media-query($small-screen) {
11
+    background-position: center;
12
+    padding: 30px;
13
+  }
14
+  @include media-query($medium-screen) {
15
+    height: 100vh;
16
+    position: initial;
17
+    width: 100%;
18
+  }
19
+}
20
+.cover-card {
21
+  color: $text-color;
22
+  padding: 0 30px;
23
+  .avatar {
24
+    border-radius: 50%;
25
+    width: 100px;
26
+    height: 100px;
27
+    float: none;
28
+  }
29
+  .author_name {
30
+    display: block;
31
+    color: #F36170;
32
+    font-size: 1.75em;
33
+    text-transform: lowercase;
34
+  }
35
+  .author_job {
36
+    display: block;
37
+    color: $secondary;
38
+    font-size: 0.8em;
39
+    font-weight: 700;
40
+    text-transform: uppercase;
41
+    margin: -5px auto 10px;
42
+  }
43
+  .author_bio {
44
+    font-size: 90%;
45
+    display: block;
46
+  }
47
+  @include media-query($medium-screen) {
48
+    text-align: right;
49
+    margin: 0 auto;
50
+    padding: 0 0px 80px;
51
+  }
52
+}
53
+.social-links {
54
+  margin-top: 0.5em;
55
+  ul {
56
+    margin: 0;
57
+    padding: 0;
58
+    li {
59
+      list-style: none;
60
+      display: inline-block;
61
+      margin-left: 1em;
62
+      a.social-link-item {
63
+        color: $secondary;
64
+        &:hover,
65
+        &:focus {
66
+          color: lighten($secondary, 14%);
67
+        }
68
+      }
69
+    }
70
+  }
71
+}
72
+.nav-list {
73
+  margin: 0;
74
+  padding: 0;
75
+  list-style: none;
76
+  .nav-item {
77
+    display: inline-block;
78
+    *display: inline;
79
+    zoom: 1;
80
+    &:after {
81
+      content: '/';
82
+    }
83
+    &:last-child:after {
84
+      content: '';
85
+    }
86
+    & a {
87
+      margin-top: 1em;
88
+      text-transform: lowercase;
89
+      font-size: 85%;
90
+      color: $secondary;
91
+      &:hover,
92
+      &:focus {
93
+        color: lighten($secondary, 14%);
94
+      }
95
+    }
96
+  }
97
+}

+ 248
- 0
_sass/pages/_post.scss View File

@@ -0,0 +1,248 @@
1
+// Post listing
2
+.post-listing {
3
+  background-color: $white;
4
+  position: absolute;
5
+  top: 400px;
6
+  z-index: 233;
7
+  width: 100%;
8
+  padding: 20px 20px 0;
9
+  -webkit-transform: translate3d(0,0,1px);
10
+  transform: translate3d(0,0,1px);
11
+  @include media-query($small-screen) {
12
+    padding: 50px 30px 0;
13
+  }
14
+  @include media-query($medium-screen) {
15
+    height: 100vh;
16
+    overflow-y: scroll;
17
+    position: initial;
18
+    top: 0;
19
+  }
20
+}
21
+
22
+.image-credit {
23
+  float: right;
24
+  font-weight: bold;
25
+  font-style: italic;
26
+  color: $info;
27
+  font-size: 13px;
28
+  padding-right: 20px;
29
+}
30
+
31
+// Post Section
32
+section.post {
33
+	margin-bottom: 80px;
34
+}
35
+
36
+// Back home button
37
+
38
+.back-home a {
39
+  font-size: 13px;
40
+  font-weight: bold;
41
+  color: $info;
42
+  border: 1px solid lighten($text-color, 45%);
43
+  border-radius: 0.4em;
44
+  padding: 0.5em 1em;
45
+}
46
+
47
+// Post title
48
+.post-title {
49
+
50
+}
51
+
52
+.post-title-link {
53
+	color: $primary;
54
+	font-size: 14px;
55
+	margin-left: 10px;
56
+	&:hover,
57
+	&:focus {
58
+		color: lighten($primary, 14%);
59
+	}
60
+}
61
+
62
+// Post meta
63
+.post-meta {
64
+  font-size: 13px;
65
+  font-weight: bold;
66
+	.post-date {
67
+		color: $secondary;
68
+	}
69
+	.post-author {
70
+		text-transform: uppercase;
71
+		color: $warning;
72
+	}
73
+  .post-cat {
74
+		text-transform: uppercase;
75
+		color: $warning;
76
+	}
77
+  .read-time {
78
+    color: $primary;
79
+  }
80
+}
81
+
82
+// Read more buttons
83
+
84
+a.read-more {
85
+  padding: 5px 8px;
86
+}
87
+
88
+// Post content
89
+
90
+#post {
91
+  padding-bottom: 50px;
92
+  .post-header {
93
+    margin: 0 auto 50px;
94
+  }
95
+}
96
+
97
+#post h1 {
98
+  margin: 0.5em 0 1em;
99
+}
100
+#post h2 {
101
+  margin: 2em 0 0.8em;
102
+  padding-bottom: 0.7em;
103
+  border-bottom: 1px solid #ddd;
104
+}
105
+#post h3 {
106
+  margin: 1.75em 0 1.2em;
107
+  position: relative;
108
+}
109
+
110
+#page {
111
+  padding-bottom: 50px;
112
+  min-height: 70vh;
113
+  .page-header {
114
+    margin: 0 auto 50px;
115
+  }
116
+}
117
+
118
+.post-navigation {
119
+  background-color: #f6f6f6;
120
+  @include box-shadow;
121
+}
122
+.leonids-icon {
123
+  margin: 0 auto;
124
+  padding: 20px 30px;
125
+  text-align: center;
126
+  color: $warning;
127
+  font-size: 16px;
128
+  line-height: 16px;
129
+}
130
+.post-nav-prev,
131
+.post-nav-next {
132
+  min-height: 10px;
133
+  width: 100%;
134
+}
135
+.post-nav-next {
136
+  text-align: right;
137
+}
138
+.post-nav-btn {
139
+  width: 100%;
140
+  padding: 20px 30px;
141
+  .post-nav-text {
142
+    font-size: 16px;
143
+    line-height: 16px;
144
+    font-weight: bold;
145
+  }
146
+  .table-cell {
147
+    vertical-align: middle;
148
+  }
149
+}
150
+.post-image-feature {
151
+  margin-bottom: 40px;
152
+  .feature-image {
153
+    width: 100%;
154
+    max-height: 500px;
155
+  }
156
+}
157
+
158
+// Shares Buttons
159
+.share-buttons {
160
+  padding-top: 1em;
161
+  border-top: 1px solid #ddd;
162
+  ul {
163
+    margin: 0;
164
+    padding: 0;
165
+    list-style: none;
166
+    li {
167
+      display: inline-block;
168
+      margin-right: 0.5em;
169
+      span {
170
+        display: none;
171
+        @include media-query($small-screen) {
172
+          display: inline;
173
+          margin: 0.5em;
174
+        }
175
+      }
176
+    }
177
+  }
178
+}
179
+.twitter {
180
+  background-color: #77bcf1;
181
+  color: $white;
182
+  border-color: #77bcf1;
183
+  &:visited {
184
+    color: $white;
185
+    border-color: #77bcf1;
186
+  }
187
+  &:hover {
188
+    background-color: $white;
189
+    color: #77bcf1;
190
+    border-color: #77bcf1;
191
+  }
192
+}
193
+.facebook {
194
+  background-color: #627aac;
195
+  color: $white;
196
+  border-color: #627aac;
197
+  &:visited {
198
+    color: $white;
199
+    border-color: #627aac;
200
+  }
201
+  &:hover {
202
+    background-color: $white;
203
+    color: #627aac;
204
+    border-color: #627aac;
205
+  }
206
+}
207
+.google-plus {
208
+  background-color: #e36f60;
209
+  color: $white;
210
+  border-color: #e36f60;
211
+  &:visited {
212
+    color: $white;
213
+    border-color: #e36f60;
214
+  }
215
+  &:hover {
216
+    background-color: $white;
217
+    color: #e36f60;
218
+    border-color: #e36f60;
219
+  }
220
+}
221
+.hacker-news {
222
+  background-color: #f60;
223
+  color: $white;
224
+  border-color: #f60;
225
+  &:visited {
226
+    color: $white;
227
+    border-color: #f60;
228
+  }
229
+  &:hover {
230
+    background-color: $white;
231
+    color: #f60;
232
+    border-color: #f60;
233
+  }
234
+}
235
+.reddit {
236
+  background-color: #5f99cf;
237
+  color: $white;
238
+  border-color: #5f99cf;
239
+  &:visited {
240
+    color: $white;
241
+    border-color: #5f99cf;
242
+  }
243