projects / jkinsey.net.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 7fd558c)
Added background color changing
authorJack Kinsey <j.jameskinsey@gmail.com>
Sun, 30 Apr 2017 04:23:38 +0000 (00:23 -0400)
committerJack Kinsey <j.jameskinsey@gmail.com>
Sun, 30 Apr 2017 04:23:38 +0000 (00:23 -0400)
12 files changed:
Makefile patch | blob | blame | history
about/index.html patch | blob | blame | history
code/index.html patch | blob | blame | history
index.html patch | blob | blame | history
js/script.js patch | blob | blame | history
res/bluestars.png [new file with mode: 0644] patch | blob
res/greenstars.png [new file with mode: 0644] patch | blob
res/pinkstars.png [new file with mode: 0644] patch | blob
res/stars.png [new file with mode: 0644] patch | blob
res/style.css patch | blob | blame | history
res/yellowstars.png [new file with mode: 0644] patch | blob
writing/index.html patch | blob | blame | history

diff --git a/Makefile b/Makefile
index 9422301f1805771aeeed9b1a8067f8b1c67dac04..5c7b64b0485597104ce8973fe94f009b6d955efe 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
 build:
-       sed '/id=\"menu\"/s/middle/top/; /id=\"about\"/s/class=\".*\"/class=\"selected\"/; /data-name=\"about\"/s/class=\"\"/class=\"selected\"/' < index.html > about/index.html
-       sed '/id=\"menu\"/s/middle/top/; /id=\"code\"/s/class=\".*\"/class=\"selected\"/; /data-name=\"code\"/s/class=\"\"/class=\"selected\"/' < index.html > code/index.html
-       sed '/id=\"menu\"/s/middle/top/; /id=\"writing\"/s/class=\".*\"/class=\"selected\"/; /data-name=\"writing\"/s/class=\"\"/class=\"selected\"/' < index.html > writing/index.html
+       sed '/id=\"menu\"/s/middle/top/; /<body/s/yellow/green/; /id=\"about\"/s/class=\".*\"/class=\"selected\"/; /data-name=\"about\"/s/class=\"\"/class=\"selected\"/' < index.html > about/index.html
+       sed '/id=\"menu\"/s/middle/top/; /<body/s/yellow/blue/; /id=\"code\"/s/class=\".*\"/class=\"selected\"/; /data-name=\"code\"/s/class=\"\"/class=\"selected\"/' < index.html > code/index.html
+       sed '/id=\"menu\"/s/middle/top/; /<body/s/yellow/pink/; /id=\"writing\"/s/class=\".*\"/class=\"selected\"/; /data-name=\"writing\"/s/class=\"\"/class=\"selected\"/' < index.html > writing/index.html
diff --git a/about/index.html b/about/index.html
index 7c28f86884baf88a73e1c4a58e5df15c1f6318cb..c8aa74e49e56f153fdaac37a509ed9e3444f90fa 100644 (file)
--- a/about/index.html
+++ b/about/index.html
@@ -7,16 +7,17 @@
 
         <title>Jack Kinsey</title>
     </head>
-    <body>
+    <body class="green">
+    <main>
 
         <menu id="menu" class="top">
-            <div id="avatar"><a href="/" class="home"><img src="/res/face.png"></img></a></div></a>
-            <div id="name"><a href="/" class="home"><h1>Jack Kinsey</h1></a></div>
+            <div id="avatar"><a href="/" data-color="yellow" class="home"><img src="/res/face.png"></img></a></div></a>
+            <div id="name"><a href="/" data-color="yellow" class="home"><h1>Jack Kinsey</h1></a></div>
             <nav id="links">
                 <ul>
-                    <li><a href="/writing" class="" data-name="writing">Writing</a></li>
-                    <li><a href="/code" class="" data-name="code">Code</a></li>
-                    <li><a href="/about" class="selected" data-name="about">About</a></li>
+                    <li><a href="/writing" class="" data-color="pink" data-name="writing">Writing</a></li>
+                    <li><a href="/code" class="" data-color="blue" data-name="code">Code</a></li>
+                    <li><a href="/about" class="selected" data-color="green" data-name="about">About</a></li>
                     <li><a href="/kinsey17-resume.pdf" data-name="resume">R&eacute;sum&eacute;</a></li>
                 </ul>
             </nav>
@@ -49,5 +50,6 @@
             </article>
         </div>
 
+    </main>
     </body>
 </html>
diff --git a/code/index.html b/code/index.html
index 983d67274c5e993fa07d3081b6c76a95cd04bb1e..0fb29bb98381c38c6128c39974aeee4f8585cf9f 100644 (file)
--- a/code/index.html
+++ b/code/index.html
@@ -7,16 +7,17 @@
 
         <title>Jack Kinsey</title>
     </head>
-    <body>
+    <body class="blue">
+    <main>
 
         <menu id="menu" class="top">
-            <div id="avatar"><a href="/" class="home"><img src="/res/face.png"></img></a></div></a>
-            <div id="name"><a href="/" class="home"><h1>Jack Kinsey</h1></a></div>
+            <div id="avatar"><a href="/" data-color="yellow" class="home"><img src="/res/face.png"></img></a></div></a>
+            <div id="name"><a href="/" data-color="yellow" class="home"><h1>Jack Kinsey</h1></a></div>
             <nav id="links">
                 <ul>
-                    <li><a href="/writing" class="" data-name="writing">Writing</a></li>
-                    <li><a href="/code" class="selected" data-name="code">Code</a></li>
-                    <li><a href="/about" class="" data-name="about">About</a></li>
+                    <li><a href="/writing" class="" data-color="pink" data-name="writing">Writing</a></li>
+                    <li><a href="/code" class="selected" data-color="blue" data-name="code">Code</a></li>
+                    <li><a href="/about" class="" data-color="green" data-name="about">About</a></li>
                     <li><a href="/kinsey17-resume.pdf" data-name="resume">R&eacute;sum&eacute;</a></li>
                 </ul>
             </nav>
@@ -49,5 +50,6 @@
             </article>
         </div>
 
+    </main>
     </body>
 </html>
diff --git a/index.html b/index.html
index 066cf002bd19161ca18294ce61c7952328824468..71322b415e1c7377cb933af042375208d7e80725 100644 (file)
--- a/index.html
+++ b/index.html
@@ -7,16 +7,17 @@
 
         <title>Jack Kinsey</title>
     </head>
-    <body>
+    <body class="yellow">
+    <main>
 
         <menu id="menu" class="middle">
-            <div id="avatar"><a href="/" class="home"><img src="/res/face.png"></img></a></div></a>
-            <div id="name"><a href="/" class="home"><h1>Jack Kinsey</h1></a></div>
+            <div id="avatar"><a href="/" data-color="yellow" class="home"><img src="/res/face.png"></img></a></div></a>
+            <div id="name"><a href="/" data-color="yellow" class="home"><h1>Jack Kinsey</h1></a></div>
             <nav id="links">
                 <ul>
-                    <li><a href="/writing" class="" data-name="writing">Writing</a></li>
-                    <li><a href="/code" class="" data-name="code">Code</a></li>
-                    <li><a href="/about" class="" data-name="about">About</a></li>
+                    <li><a href="/writing" class="" data-color="pink" data-name="writing">Writing</a></li>
+                    <li><a href="/code" class="" data-color="blue" data-name="code">Code</a></li>
+                    <li><a href="/about" class="" data-color="green" data-name="about">About</a></li>
                     <li><a href="/kinsey17-resume.pdf" data-name="resume">R&eacute;sum&eacute;</a></li>
                 </ul>
             </nav>
@@ -49,5 +50,6 @@
             </article>
         </div>
 
+    </main>
     </body>
 </html>
diff --git a/js/script.js b/js/script.js
index 6528aa3fffbec092eaebfd9b1da621006b290d08..e7ab2b64e94d2eccb94dcc67cfc36770def73e79 100644 (file)
--- a/js/script.js
+++ b/js/script.js
@@ -3,6 +3,7 @@ window.addEventListener('load', function() {
     var home = document.getElementsByClassName("home");
     var menu = document.getElementById("menu");
     var content = document.getElementById("content");
+    var body = document.getElementsByTagName("body")[0];
     var menuLoc = parseInt(getComputedStyle(menu).getPropertyValue("top"));
 
     function menuOperator(position, token="") {
@@ -21,6 +22,10 @@ window.addEventListener('load', function() {
             var article = document.getElementById(name);
             article.setAttribute("class", "selected");
         }
+        var color = node.getAttribute("data-color");
+        if(color) {
+            body.setAttribute("class", color);
+        }
         window.history.pushState("object or string", "Title", node.href);
     }
 
diff --git a/res/bluestars.png b/res/bluestars.png
new file mode 100644 (file)
index 0000000..c91ed65
Binary files /dev/null and b/res/bluestars.png differ
diff --git a/res/greenstars.png b/res/greenstars.png
new file mode 100644 (file)
index 0000000..5c5d7e2
Binary files /dev/null and b/res/greenstars.png differ
diff --git a/res/pinkstars.png b/res/pinkstars.png
new file mode 100644 (file)
index 0000000..eeed9e8
Binary files /dev/null and b/res/pinkstars.png differ
diff --git a/res/stars.png b/res/stars.png
new file mode 100644 (file)
index 0000000..dba8c02
Binary files /dev/null and b/res/stars.png differ
diff --git a/res/style.css b/res/style.css
index 37422944e133bd2477ac87f9e5f3e09feb1156f0..5ba1ddff62a5542696d20223346bd8ff2261c99b 100644 (file)
--- a/res/style.css
+++ b/res/style.css
@@ -1,4 +1,9 @@
 @import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
+/* pink:473a47
+ * blue:004350
+ * green:0c5b57
+ * yellow:4b4432
+ */
 
 body {
     width:100%;
@@ -6,9 +11,29 @@ body {
     overflow-x:hidden;
     font-family:'Cutive Mono', monospace;
     color:#FFF1FF;
-    #background-image:linear-gradient(to right,#00c4f4 0%,#278fba 20%,#278fba 80%,#00c4f4 100%);
-    #background-color:#278fba;
-    background:url(http://static.jkinsey.net/img/pinkishstardust.png) #323;
+    transition:background-color .6s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+body.pink {
+    background-color:#161216;
+}
+
+body.blue {
+    background-color:#001216;
+}
+
+body.green {
+    background-color:#031514;
+}
+
+body.yellow {
+    background-color:#191710;
+}
+
+main {
+    width:100%;
+    height:100%;
+    background:url(stars.png);
 }
 
 menu {
diff --git a/res/yellowstars.png b/res/yellowstars.png
new file mode 100644 (file)
index 0000000..d41ba44
Binary files /dev/null and b/res/yellowstars.png differ
diff --git a/writing/index.html b/writing/index.html
index 8fc72324c4f27964af862eabec435190d01fd819..8a0a76fa2338c6500f0f8617c4cfd6e864a809b1 100644 (file)
--- a/writing/index.html
+++ b/writing/index.html
@@ -7,16 +7,17 @@
 
         <title>Jack Kinsey</title>
     </head>
-    <body>
+    <body class="pink">
+    <main>
 
         <menu id="menu" class="top">
-            <div id="avatar"><a href="/" class="home"><img src="/res/face.png"></img></a></div></a>
-            <div id="name"><a href="/" class="home"><h1>Jack Kinsey</h1></a></div>
+            <div id="avatar"><a href="/" data-color="yellow" class="home"><img src="/res/face.png"></img></a></div></a>
+            <div id="name"><a href="/" data-color="yellow" class="home"><h1>Jack Kinsey</h1></a></div>
             <nav id="links">
                 <ul>
-                    <li><a href="/writing" class="selected" data-name="writing">Writing</a></li>
-                    <li><a href="/code" class="" data-name="code">Code</a></li>
-                    <li><a href="/about" class="" data-name="about">About</a></li>
+                    <li><a href="/writing" class="selected" data-color="pink" data-name="writing">Writing</a></li>
+                    <li><a href="/code" class="" data-color="blue" data-name="code">Code</a></li>
+                    <li><a href="/about" class="" data-color="green" data-name="about">About</a></li>
                     <li><a href="/kinsey17-resume.pdf" data-name="resume">R&eacute;sum&eacute;</a></li>
                 </ul>
             </nav>
@@ -49,5 +50,6 @@
             </article>
         </div>
 
+    </main>
     </body>
 </html>