jekyll-theme-potato-hacker 1.0.2 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: dde925fd1cadd7e5809e8b498be72ad6ec71178706f83fbac2e2ca33e97b66b4
4
- data.tar.gz: ad4efebb03986bb95f19c71fa890c7fe3200e54e73cf2df0012f183aee14f171
3
+ metadata.gz: 4098f660b3a6665bf6ca4ac14949e8583378f34495603ac932a75a2ff785be3e
4
+ data.tar.gz: d162eb7c6d64f668c3c75ae53bbcbecf2f24173a045a137724372ccc70a36bea
5
5
  SHA512:
6
- metadata.gz: d1349736907dedbb049109b58e90a46bc1449a1974062bca1c55c19a37df4ba8291347889c4bfb6919415306b7a47a0dace2fbf1cf19e34ef97c23ea4e030f6c
7
- data.tar.gz: b1ee53bb27e5c307a7990b7656f6cfa826cd29ca2ad2cf487a169c7b028041ff87be64587bf063ecb002026746ba2dd15b46f9ebe3955e8576f57b3df7e13267
6
+ metadata.gz: 3b21fca8427b6c11c23278e744ec314bf3377ecec0aa78da153a898218ebacde67e9e366d356b9a915808e365845582420a96072697df9cb589abf73fa8fc101
7
+ data.tar.gz: 14ee22c9edb4c0fbf9e37e5f278f8bea86110260478683fe2ab409d3f9f7c0ce1627053f7972afa86f4fbf3e29dc20f466e76af3bbab9a182d4f56a7b9d9fb4e
data/README.md CHANGED
@@ -1,10 +1,14 @@
1
1
  # jekyll-theme-potato-hacker
2
+ [![Gem Version](https://badge.fury.io/rb/jekyll-theme-potato-hacker.svg)](https://badge.fury.io/rb/jekyll-theme-potato-hacker)
3
+ [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)
4
+
2
5
 
3
6
  Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes` and your sass in `_sass`. To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
4
7
 
5
- ![screenshot](screenshot.png "screenshot")
8
+ ![screenshot](https://raw.githubusercontent.com/luxedo/jekyll-theme-potato-hacker/master/screenshot.png "screenshot")
6
9
 
7
10
  Check out the [demo](https://luxedo.github.io/jekyll-theme-potato-hacker/)
11
+ Check out the [gem](https://rubygems.org/gems/jekyll-theme-potato-hacker)
8
12
 
9
13
  ## Installation
10
14
 
@@ -28,8 +32,15 @@ Or install it yourself as:
28
32
 
29
33
  $ gem install jekyll-theme-potato-hacker
30
34
 
35
+ Or even use the remote theme tag in `_config.yml` if you're using github pages:
36
+ ```yaml
37
+ remote_theme: luxedo/jekyll-theme-potato-hacker
38
+ ```
39
+
31
40
  ## Usage
32
41
 
42
+ ### Pages
43
+
33
44
  This is a simple theme I made to my portfolio/blog https://luxedo.github.io/
34
45
  There are four different categories of pages for this template:
35
46
  * Main page `index.md` in the root.
@@ -37,16 +48,19 @@ There are four different categories of pages for this template:
37
48
  * Blog posts `_posts` folder.
38
49
  * Dropdown pages `_dropdown` folder.
39
50
 
40
- The dropdown menus are generated based on the [front matter](https://jekyllrb.com/docs/front-matter/) data in the files. Use the `dropdown` attribute to chose where the page will be placed.
51
+ ### Dropdown
52
+ The dropdown menus are generated based on the [front matter](https://jekyllrb.com/docs/front-matter/) data in the files. Use the `dropdown` attribute to chose where the page will be placed. The items with the highest `priority` will be placed first.
41
53
  ```yaml
42
54
  ---
43
55
  layout: page
44
56
  title: dropdown1 item1
45
57
  description: Test page
46
58
  dropdown: dropdown1
59
+ priority: 1
47
60
  ---
48
61
  ```
49
62
 
63
+ ### Blog
50
64
  If you want to use the blog, you need to set `blog: on` inside `_config.yml` and add a `blog.md` file in your root directory:
51
65
  ```yaml
52
66
  ---
@@ -56,6 +70,44 @@ description: Test page
56
70
  ---
57
71
  ```
58
72
 
73
+ ### \_config.yml
74
+ Some settings are defined in `_config.yml`. Download the file in this repo
75
+ for a complete example.
76
+ ```yaml
77
+ # Useful links
78
+ github_username: "<github_username>"
79
+ facebook_username: "<facebook_username>"
80
+ twitter_username: "<twitter_username>"
81
+ linkedin_id: "<linkedin_id>"
82
+
83
+ # Theme
84
+ # theme: jekyll-theme-potato-hacker # Uncomment this
85
+ # remote_theme: luxedo/jekyll-theme-potato-hacker # Or this
86
+ theme_repository: "https://github.com/luxedo/jekyll-theme-potato-hacker"
87
+ theme_base: "dark" # Theme palette (light | dark)
88
+ theme_switch: on # Show color switch (on | off)
89
+
90
+ # Extra settings
91
+ blog: on # Show blog tag and post list (on | off)
92
+ avatar: on # Show avatar (on | off)
93
+ avatar_image: "assets/img/avatar.jpg"
94
+ avatar_description: "My name is Popotato and I'm a HACKER."
95
+ highlighter_theme: monokai # Theme of the syntax_highlighter [base16 |
96
+ # colorful | github | gruvbox | molokai |
97
+ # monokai | pastie | thankful_eyes | tulip ]
98
+ toolbar_priority: # Order of the items in the toolbar (except for blog and home)
99
+ - dropdown2
100
+ - About
101
+ - dropdown1
102
+
103
+ # Collections
104
+ collections:
105
+ dropdown:
106
+ output: true
107
+ items:
108
+ output: true
109
+ ```
110
+
59
111
  ## Contributing
60
112
 
61
113
  Bug reports and pull requests are welcome on GitHub at https://github.com/luxedo/jekyll-theme-potato-hacker/issues. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
@@ -11,31 +11,7 @@
11
11
  {% endif %}
12
12
  <div class="row">
13
13
  <div class="col-sm-8 col-sm-offset-2">
14
- {% if site.github_username != null %}
15
- <a href="https://github.com/{{site.github_username}}" target="_blank">
16
- <i class="fa fa-github fa-3x"></i>
17
- </a>
18
- {% endif %}
19
- {% if site.email != null %}
20
- <a href="mailto:{{site.email}}">
21
- <i class="fa fa-envelope fa-3x"></i>
22
- </a>
23
- {% endif %}
24
- {% if site.facebook_username != null %}
25
- <a href="https://www.facebook.com/{{site.facebook_username}}" target="_blank">
26
- <i class="fa fa-facebook fa-3x"></i>
27
- </a>
28
- {% endif %}
29
- {% if site.twitter_username != null %}
30
- <a href="https://twitter.com/{{site.twitter_username}}" target="_blank">
31
- <i class="fa fa-twitter fa-3x"></i>
32
- </a>
33
- {% endif %}
34
- {% if site.linkedin_id != null %}
35
- <a href="https://www.linkedin.com/in/{{site.linkedin_id}}" target="_blank">
36
- <i class="fa fa-linkedin fa-3x"></i>
37
- </a>
38
- {% endif %}
14
+ {% include links.html %}
39
15
  </div>
40
16
  </div>
41
17
  {% if site.email != null and site.author != null %}
data/_includes/head.html CHANGED
@@ -37,11 +37,11 @@
37
37
  <link rel="shortcut icon" href="{{'/assets/img/icons/favicon.ico' | prepend: site.baseurl }}" type="image/x-icon" />
38
38
 
39
39
  <!-- Android Lolipop Theme Color -->
40
- <meta name="theme-color" content="rgba(42, 77, 20, 1)">
40
+ <meta name="theme-color" content="#2a4d14">
41
41
 
42
42
  <!-- Styles -->
43
43
  <link rel="stylesheet" id="css-theme" href="{{ '/assets/css/main-' | append: site.theme_base | append: '.css' | prepend: site.baseurl }}">
44
- <link rel="stylesheet" href="{{ '/assets/css/syntax.css' | prepend: site.baseurl }}">
44
+ <link rel="stylesheet" href="{{ '/assets/css/highlight/' | append: site.highlighter_theme | append: '.css' | prepend: site.baseurl }}">
45
45
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
46
46
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
47
47
  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
@@ -19,6 +19,7 @@
19
19
  {% if site.blog == true %}
20
20
  <li><a href="{{ '/blog' | prepend: site.baseurl }}">Blog</a></li>
21
21
  {% endif %}
22
+
22
23
  {% for page in site.dropdown %}
23
24
  <li class="dropdown dropdown-{{ page.dropdown }}">
24
25
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"
@@ -26,28 +27,45 @@
26
27
  <span class="caret"></span>
27
28
  </a>
28
29
  <ul class="dropdown-menu dropdown-menu-{{ page.title }}">
29
- <li><a href="{% if page.redirect_to %}{{page.redirect_to}}{% else %}{{ page.url | prepend: site.baseurl }}{% endif %}">{{ page.title }}</a></li>
30
+ <li priority="{{ page.priority }}"><a href="{% if page.redirect_to %}{{page.redirect_to}}{% else %}{{ page.url | prepend: site.baseurl }}{% endif %}">{{ page.title }}</a></li>
30
31
  </ul>
31
32
  </li>
32
33
  {% endfor %}
34
+ {% for page in site.items %}
35
+ <li class="nav-item"><a href="{% if page.redirect_to %}{{page.redirect_to}}{% else %}{{ page.url | prepend: site.baseurl }}{% endif %}">{{ page.title }}</a></li>
36
+ {% endfor %}
37
+
33
38
  <script>
34
39
  // clean repeated dropdowns and add <li> to their positions
35
- $(".dropdown").each((index0, value0) => {
36
- let dropdownClass = "."+$(value0)[0].classList[1];
37
- let dropdownMain = $(dropdownClass)[0].querySelector("ul");
38
- if ($(dropdownClass).length > 1) {
39
- $(dropdownClass).each((index1, value1) => {
40
- if (index1 != 0) {
41
- dropdownMain.append(value1.querySelector("ul li"))
42
- $(dropdownClass)[1].remove();
40
+ let done = [];
41
+ let elements = [];
42
+ $(".dropdown")
43
+ //
44
+ .each((index0 , value0) => {
45
+ let dropdownClass = "."+$(value0)[0].classList[1];
46
+ if (done.indexOf(dropdownClass) !== -1) return
47
+ done.push(dropdownClass)
48
+ let dropdownMain = $(dropdownClass)[0]
49
+ let itemsList = $(dropdownClass+">ul>li").sort((a, b) => parseInt(b.getAttribute("priority") || -9999999) - parseInt(a.getAttribute("priority") || -9999999))
50
+ $(dropdownClass+">ul>li").remove();
51
+ $(dropdownClass+">ul").append(itemsList)
52
+ $(dropdownClass).remove();
53
+ elements.push(dropdownMain)
54
+ });
55
+ let priority = [{% for item in site.toolbar_priority %} "{{item}}", {% endfor %}];
56
+ elements = elements.concat(...$(".nav-item").remove())
57
+ priority.map(text => {
58
+ elements = elements.filter(node => {
59
+ let nodeText = node.querySelector("a").textContent.trim()
60
+ if (text == nodeText) {
61
+ $(".nav").append(node)
62
+ return false;
43
63
  }
44
- });
45
- }
64
+ return true;
65
+ })
46
66
  });
67
+ $(".nav").append(elements)
47
68
  </script>
48
- {% for page in site.items %}
49
- <li><a href="{% if page.redirect_to %}{{page.redirect_to}}{% else %}{{ page.url | prepend: site.baseurl }}{% endif %}">{{ page.title }}</a></li>
50
- {% endfor %}
51
69
  </ul>
52
70
  </div>
53
71
  </div>
@@ -0,0 +1,25 @@
1
+ {% if site.github_username != null %}
2
+ <a href="https://github.com/{{site.github_username}}" target="_blank">
3
+ <i class="fa fa-github fa-3x"></i>
4
+ </a>
5
+ {% endif %}
6
+ {% if site.email != null %}
7
+ <a href="mailto:{{site.email}}">
8
+ <i class="fa fa-envelope fa-3x"></i>
9
+ </a>
10
+ {% endif %}
11
+ {% if site.facebook_username != null %}
12
+ <a href="https://www.facebook.com/{{site.facebook_username}}" target="_blank">
13
+ <i class="fa fa-facebook fa-3x"></i>
14
+ </a>
15
+ {% endif %}
16
+ {% if site.twitter_username != null %}
17
+ <a href="https://twitter.com/{{site.twitter_username}}" target="_blank">
18
+ <i class="fa fa-twitter fa-3x"></i>
19
+ </a>
20
+ {% endif %}
21
+ {% if site.linkedin_id != null %}
22
+ <a href="https://www.linkedin.com/in/{{site.linkedin_id}}" target="_blank">
23
+ <i class="fa fa-linkedin fa-3x"></i>
24
+ </a>
25
+ {% endif %}
@@ -4,7 +4,7 @@ layout: page
4
4
  {% for post in site.posts %}
5
5
  <a href="{{ post.url | prepend: site.baseurl }}">
6
6
  <h1 class="post-title"> {{ post.title }}</h1>
7
- <h4 class="post-title"> {{ post.date }} </h4>
7
+ <h5 class="post-title"> {{ post.date }} </h5>
8
8
  </a>
9
9
  {{post.excerpt}}
10
10
  {% if post.content contains site.excerpt_separator %}
@@ -25,40 +25,51 @@
25
25
  </section>
26
26
  <section class="content">
27
27
  <div class="row">
28
- <!-- <div class="col-sm-2">
29
- <div class="pane-separator hidden-xs" style="margin-bottom:30em;"></div>
30
- <div class="left-pane">
28
+ <div class="col-md-8 col-md-offset-1 content-div">
29
+ <div class="page-separator visible-md visible-lg visible-xl">
30
+ <h1 class="h1-strip" style="padding-bottom:8em; margin-bottom: 0;"></h1>
31
+ </div>
32
+ <div class="page-separator visible-sm">
33
+ <h1 class="h1-strip" style="padding-bottom:3em; margin-bottom: 0;"></h1>
34
+ </div>
35
+ <div class="page-separator visible-xs">
36
+ <h1 class="h1-strip" style="padding-bottom:1em; margin-bottom: 0;"></h1>
31
37
  </div>
32
- </div> -->
33
- <div class="col-sm-8 col-sm-offset-2 content-div">
34
- <div class="page-separator hidden-xs"><h1 class="h1-strip" style="padding-bottom:8em; margin-bottom: 0;"></h1></div>
35
- <div class="page-separator visible-xs"><h1 class="h1-strip" style="padding-bottom:2em; margin-bottom: 0;"></h1></div>
36
38
  <h1 class="post-title page-title" id="title"><a href="#title">{{ page.title }}</a></h1>
37
39
  {{ content }}
38
40
  </div>
39
- <div class="col-sm-2">
40
- <div class="pane-separator hidden-xs" style="margin-bottom:30em;"></div>
41
- <div class="pane-separator visible-xs" style="margin-bottom:5em;"></div>
42
- <div class="right-pane" style="margin-left: 1em;">
43
- {% if page.url contains '/blog/' or page.url == '/' or page.url == '/blog.html' %}
41
+ <div class="col-md-2">
42
+ <div class="pane-separator visible-md visible-lg visible-xl" style="margin-bottom:30em;"></div>
43
+ <div class="right-pane">
44
+ {% if site.avatar == true %}
45
+ <div class="avatar">
44
46
  <center>
45
47
  {% if site.avatar_image != null %}
46
- <img src="{{ site.avatar_image | prepend: '/' | prepend: site.baseurl }}" alt="me" class="avatar-image">
48
+ <img src="{{ site.avatar_image | prepend: '/' | prepend: site.baseurl }}" alt="me" class="avatar-image">
49
+ {% endif %}
50
+ {% if site.avatar_description != null %}
51
+ <p style="margin-top: 0.5em;" class="avatar-description">{{site.avatar_description}}</p>
47
52
  {% endif %}
48
- <p class="avatar-description">{{site.avatar_description}}</p>
53
+ <div class="right-links">
54
+ {% include links.html %}
55
+ </div>
49
56
  </center>
57
+ </div>
50
58
  {% endif %}
51
- {% if page.url contains "/blog/" %}
59
+ {% if site.blog == true %}
60
+ <div class="posts-list">
52
61
  <a href="{{ '/blog' | prepend: site.baseurl }}">
53
- <h4>Posts:</h4>
62
+ <h4>Recent Posts:</h4>
54
63
  </a>
55
- <ul>
56
- {% for post in site.posts %}
57
- <li>
58
- <a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
59
- </li>
60
- {% endfor %}
61
- </ul>
64
+ <ul>
65
+ {% for i in (1..site.recent_posts) %}
66
+ {% assign post = site.posts[i] %}
67
+ <li>
68
+ <a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
69
+ </li>
70
+ {% endfor %}
71
+ </ul>
72
+ </div>
62
73
  {% endif %}
63
74
  </div>
64
75
  </div>
data/_layouts/post.html CHANGED
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  layout: default
3
+ blog: true
3
4
  ---
4
5
  <h4 class="post-title"> {{ page.date }} </h4>
5
6
  <article class="blog-post">
data/_sass/_base.scss CHANGED
@@ -114,12 +114,7 @@ nav:hover {
114
114
  margin-bottom: 5em;
115
115
  }
116
116
 
117
- .highlight,
118
- .highlight .w {
119
- opacity: 0.9;
120
- }
121
117
  $avatar-size: 10em;
122
-
123
118
  .avatar-image {
124
119
  height: auto;
125
120
  width: auto;
@@ -146,3 +141,10 @@ $avatar-size: 10em;
146
141
  z-index: -1;
147
142
  padding: 1em;
148
143
  }
144
+
145
+ .right-links {
146
+ a i {
147
+ font-size: 1.5em;
148
+ color: $gray !important;
149
+ }
150
+ }
@@ -834,7 +834,7 @@ $close-text-shadow: 0 1px 0 #fff;
834
834
  //##
835
835
 
836
836
  $code-color: lighten($brand-danger, 25%);
837
- $code-bg: rgba($text-color, 0.1);
837
+ $code-bg: rgba($text-color, 0.01);
838
838
 
839
839
  $kbd-color: #fff;
840
840
  $kbd-bg: #333;
@@ -1,8 +1,7 @@
1
1
  .highlight table td { padding: 5px; }
2
2
  .highlight table pre { margin: 0; }
3
3
  .highlight, .highlight .w {
4
- color: #d0d0d0;
5
- background-color: #151515;
4
+ color: #303030;
6
5
  }
7
6
  .highlight .err {
8
7
  color: #151515;
@@ -0,0 +1,170 @@
1
+ .highlight table td { padding: 5px; }
2
+ .highlight table pre { margin: 0; }
3
+ .highlight, .highlight .w {
4
+ color: #bbbbbb;
5
+ background-color: #000;
6
+ }
7
+ .highlight .c, .highlight .cd, .highlight .cm, .highlight .c1 {
8
+ color: #888;
9
+ }
10
+ .highlight .cp {
11
+ color: #579;
12
+ }
13
+ .highlight .cs {
14
+ color: #cc0000;
15
+ font-weight: bold;
16
+ }
17
+ .highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kv {
18
+ color: #080;
19
+ font-weight: bold;
20
+ }
21
+ .highlight .kp {
22
+ color: #038;
23
+ }
24
+ .highlight .kt {
25
+ color: #339;
26
+ }
27
+ .highlight .o {
28
+ color: #333;
29
+ }
30
+ .highlight .ow {
31
+ color: #000;
32
+ font-weight: bold;
33
+ }
34
+ .highlight .nb, .highlight .bp {
35
+ color: #007020;
36
+ }
37
+ .highlight .nf {
38
+ color: #06B;
39
+ font-weight: bold;
40
+ }
41
+ .highlight .nc {
42
+ color: #B06;
43
+ font-weight: bold;
44
+ }
45
+ .highlight .nn {
46
+ color: #0e84b5;
47
+ font-weight: bold;
48
+ }
49
+ .highlight .ne {
50
+ color: #F00;
51
+ font-weight: bold;
52
+ }
53
+ .highlight .nv {
54
+ color: #963;
55
+ }
56
+ .highlight .vi {
57
+ color: #33B;
58
+ }
59
+ .highlight .vc {
60
+ color: #369;
61
+ }
62
+ .highlight .vg {
63
+ color: #d70;
64
+ font-weight: bold;
65
+ }
66
+ .highlight .no {
67
+ color: #036;
68
+ font-weight: bold;
69
+ }
70
+ .highlight .nl {
71
+ color: #970;
72
+ font-weight: bold;
73
+ }
74
+ .highlight .ni {
75
+ color: #800;
76
+ font-weight: bold;
77
+ }
78
+ .highlight .na {
79
+ color: #00C;
80
+ }
81
+ .highlight .nt {
82
+ color: #070;
83
+ }
84
+ .highlight .nd {
85
+ color: #555;
86
+ font-weight: bold;
87
+ }
88
+ .highlight .s, .highlight .sb, .highlight .s2, .highlight .sh, .highlight .s1 {
89
+ background-color: #fff0f0;
90
+ }
91
+ .highlight .sc {
92
+ color: #04D;
93
+ }
94
+ .highlight .sd {
95
+ color: #D42;
96
+ }
97
+ .highlight .si {
98
+ background-color: #eee;
99
+ }
100
+ .highlight .se {
101
+ color: #666;
102
+ font-weight: bold;
103
+ }
104
+ .highlight .sr {
105
+ color: #000;
106
+ background-color: #fff0ff;
107
+ }
108
+ .highlight .ss {
109
+ color: #A60;
110
+ }
111
+ .highlight .sx {
112
+ color: #D20;
113
+ }
114
+ .highlight .m, .highlight .mb, .highlight .mx {
115
+ color: #60E;
116
+ font-weight: bold;
117
+ }
118
+ .highlight .mi, .highlight .il {
119
+ color: #00D;
120
+ font-weight: bold;
121
+ }
122
+ .highlight .mf {
123
+ color: #60E;
124
+ font-weight: bold;
125
+ }
126
+ .highlight .mh {
127
+ color: #058;
128
+ font-weight: bold;
129
+ }
130
+ .highlight .mo {
131
+ color: #40E;
132
+ font-weight: bold;
133
+ }
134
+ .highlight .gh {
135
+ color: #000080;
136
+ font-weight: bold;
137
+ }
138
+ .highlight .gu {
139
+ color: #800080;
140
+ font-weight: bold;
141
+ }
142
+ .highlight .gd {
143
+ color: #A00000;
144
+ }
145
+ .highlight .gi {
146
+ color: #00A000;
147
+ }
148
+ .highlight .gr {
149
+ color: #FF0000;
150
+ }
151
+ .highlight .ge {
152
+ font-style: italic;
153
+ }
154
+ .highlight .gs {
155
+ font-weight: bold;
156
+ }
157
+ .highlight .gp {
158
+ color: #c65d09;
159
+ font-weight: bold;
160
+ }
161
+ .highlight .go {
162
+ color: #888;
163
+ }
164
+ .highlight .gt {
165
+ color: #04D;
166
+ }
167
+ .highlight .err {
168
+ color: #F00;
169
+ background-color: #FAA;
170
+ }