Browse Source

Change nav :zap:

Mu-An Chiou 5 years ago
parent
commit
950e679d73
4 changed files with 25 additions and 9 deletions
  1. 1
    0
      .gitignore
  2. 10
    3
      _assets/style.scss
  3. 3
    3
      _includes/header.html
  4. 11
    3
      assets/style.css

+ 1
- 0
.gitignore View File

@@ -9,3 +9,4 @@ _site/
9 9
 *~
10 10
 .ruby-version
11 11
 _old_posts/
12
+*.map

+ 10
- 3
_assets/style.scss View File

@@ -15,11 +15,17 @@ a {
15 15
 
16 16
 .site-header {
17 17
   text-align: center;
18
-  font-size: 12px;
18
+  font-size: 10px;
19 19
   padding: 30px 0;
20 20
 
21 21
   a {
22
-    margin-right: 20px;
22
+    padding-bottom: 4px;
23
+    color: #555;
24
+    letter-spacing: 2px;
25
+    margin-right: 30px;
26
+    white-space: nowrap;
27
+    font-family: helvetica, sans-serif;
28
+
23 29
     &.active {
24 30
       opacity: .2;
25 31
       border-bottom: 1px solid #333;
@@ -121,11 +127,12 @@ article {
121 127
 .a-cat, .a-house, .a-person, .a-page {
122 128
   display: inline-block;
123 129
   background: #333;
130
+  vertical-align: middle;
131
+  margin-bottom: 2px;
124 132
   position: relative;
125 133
 }
126 134
 
127 135
 .a-cat {
128
-  opacity: .1;
129 136
   background: #333;
130 137
   height: 13px;
131 138
   width: 10px;

+ 3
- 3
_includes/header.html View File

@@ -2,9 +2,9 @@
2 2
   <div class="instagram"></div>
3 3
   <div class="container">
4 4
     <nav>
5
-      <a href="/" class="{% if page.url == '/' %} active{% endif %}"><div class="a-person"></div></a>
6
-      <a href="/archive" class="{% if page.url == '/archive/' %} active{% endif %}"><div class="a-page"></div></a>
7
-      <div class="a-cat"></div>
5
+      <a href="/" class="{% if page.url == '/' %} active{% endif %}"><div class="a-person"></div> ABOUT</a>
6
+      <a href="/archive" class="{% if page.url == '/archive/' %} active{% endif %}"><div class="a-page"></div> POSTS</a>
7
+      <a class="active" title="Don't touch the cat."><div class="a-cat"></div></a>
8 8
     </nav>
9 9
   </div>
10 10
 </header>

+ 11
- 3
assets/style.css View File

@@ -12,10 +12,15 @@ a {
12 12
 
13 13
 .site-header {
14 14
   text-align: center;
15
-  font-size: 12px;
15
+  font-size: 10px;
16 16
   padding: 30px 0; }
17 17
   .site-header a {
18
-    margin-right: 20px; }
18
+    padding-bottom: 4px;
19
+    color: #555;
20
+    letter-spacing: 2px;
21
+    margin-right: 30px;
22
+    white-space: nowrap;
23
+    font-family: helvetica, sans-serif; }
19 24
     .site-header a.active {
20 25
       opacity: .2;
21 26
       border-bottom: 1px solid #333; }
@@ -96,10 +101,11 @@ article h3 {
96 101
 .a-cat, .a-house, .a-person, .a-page {
97 102
   display: inline-block;
98 103
   background: #333;
104
+  vertical-align: middle;
105
+  margin-bottom: 2px;
99 106
   position: relative; }
100 107
 
101 108
 .a-cat {
102
-  opacity: .1;
103 109
   background: #333;
104 110
   height: 13px;
105 111
   width: 10px;
@@ -351,3 +357,5 @@ hr {
351 357
       transform: rotate(-135deg) skew(-10deg, -10deg);
352 358
       left: -15px;
353 359
       margin-top: 6px !important; } }
360
+
361
+/*# sourceMappingURL=style.css.map */

Loading…
Cancel
Save