Merge pull request #16 from AleksandrHovhannisyan/styling

Change form style and some colors, publish blog post

_config.yml

@@ -45,9 +45,9 @@ defaults:
       categories: [Gaming]
   -
     scope:
-      path: "_posts/other"
+      path: "_posts/music"
     values:
-      categories: [Other]
+      categories: [Music]
 
 
 # Exclude from processing.

_layouts/blog.html

@@ -3,13 +3,13 @@
 layout: default
 ---
 
-{% include banner.html heading="Welcome to my blog!" content="I like to write about programming and video games, with an occasional sprinkle of personal posts. All opinions are strictly my own." %}
+{% include banner.html heading="Welcome to my blog!" content="I like to write about programming, video games, music, and whatever else comes to mind. All opinions are my own." %}
 
 <article class="blog-overview container">
     <div class="category-links container">
         <a href="{{ site.url }}/blog/programming">Programming</a>
         <a href="{{ site.url }}/blog/gaming">Gaming</a>
-        <a href="{{ site.url }}/blog/other">Other</a>
+        <a href="{{ site.url }}/blog/music">Music</a>
     </div>
     <article class="post-previews">
         {{ content }}

_pages/categories/other.md

@@ -1,8 +1,8 @@
 ---
-permalink: /blog/other/
+permalink: /blog/music/
 title: Blog
 layout: blog
 order: -1
 ---
 
-{% include posts/category.html name="Other" %}
+{% include posts/category.html name="Music" %}

_pages/contact.md

@@ -12,13 +12,13 @@ order: 4
     <div id="contact-information">
         <div id="contact-form">
             <p>Thanks for reaching out! I'll get back to you ASAP.</p>
-            <form action="https://formspree.io/hire.aleksandr@gmail.com" method="POST">
+            <form action="https://formspree.io/hire.aleksandr@gmail.com" method="POST" spellcheck="false">
                 <input type="hidden" name="_subject" value="Thanks for getting in touch!" />
-                <label class="required" for="name"><strong>Name:</strong></label>
+                <label class="required" for="name"><strong>Name</strong></label>
                 <input type="text" name="name" id="name" required>
-                <label for="email"><strong>Email:</strong></label>
+                <label for="email"><strong>Email</strong></label>
                 <input type="email" name="_replyto" id="email"/>
-                <label class="required" for="message"><strong>Message:</strong></label>
+                <label class="required" for="message"><strong>Message</strong></label>
                 <textarea name="body" id="message" required></textarea>
                 <input type="submit" value="Send message" class="button">
                 <input type="text" name="_gotcha" class="honeypot" />
@@ -28,7 +28,7 @@ order: 4
             <h3>You can also find me on:</h3>
             {% for network in site.data.socials %}
             <div class="social-network">
-                <a class="container-link" href="{{ network.url }}" target="_blank"></a>
+                <a class="container-link" href="{{ network.url }}"></a>
                 {% assign icon = network.icon %}
                 {% include svg.html svg=icon class=icon %}
                 <span class="network-name">{{ network.name }}</span>

_pages/experience.md

@@ -20,7 +20,7 @@ order: 2
             </header>
             <div>
                 <p>Check out my other repos:</p>
-                <a href="https://github.com/AleksandrHovhannisyan?tab=repositories" target="_blank">{% include svg.html svg="github" %}</a>
+                <a href="https://github.com/AleksandrHovhannisyan?tab=repositories">{% include svg.html svg="github" %}</a>
             </div>
         </div>
     </div>

_pages/index.md

@@ -8,16 +8,16 @@ order: 1
     <div id="hero-banner">
         <div id="main-cta">
             <h1>Hey there! I'm Aleksandr</h1>
-            <p>I love tinkering with code and solving problems.</p>
-            <p>Looking for a software developer? <strong>Let's get in touch!</strong></p>
+            <p>I make software and freelance as a copy editor.</p>
+            <p>Interested in working together? <strong>Get in touch!</strong></p>
         </div>
         <div id="profile-photo">
             <img src="/assets/img/profile-photo.png" alt="My profile photo" />
         </div>
     </div>
     <div id="cta-buttons">
-        <a class="button" href="https://www.linkedin.com/in/aleksandr-hovhannisyan-ba154b120/" target="_blank">{% include svg.html svg="linkedin" %} <span>LinkedIn</span></a>
-        <a class="button" href="https://github.com/AleksandrHovhannisyan" target="_blank">{% include svg.html svg="github" %} <span>GitHub</span></a>
+        <a class="button" href="https://www.linkedin.com/in/aleksandr-hovhannisyan-ba154b120/">{% include svg.html svg="linkedin" %} <span>LinkedIn</span></a>
+        <a class="button" href="https://github.com/AleksandrHovhannisyan">{% include svg.html svg="github" %} <span>GitHub</span></a>
     </div>
 </article>
 

_posts/music/2019-11-23-2019-a-gift-from-switzerland-the-evpatoria-report.md

@@ -0,0 +1,85 @@
+---
+title: "A Gift from Switzerland: The Evpatoria Report"
+description: A review of some great songs from The Evpatoria Report, a fantastic post-rock band from Switzerland.
+keywords: [the evpatoria report, evpatoria report songs, evpatoria report review, evpatoria report band, post-rock band]
+---
+
+You know that feeling when you stumble across a band with a riveting, totally unique sound? It's recommended to you on Spotify, YouTube, or whatever you're listening to these days. Doesn't matter. When the song comes on, you immediately stop what you're doing—because hell, *whatever* it is, and whoever composed it, it deserves your undivided attention.
+
+You gradually raise the volume as your body catches up with the rhythm. It doesn't even go up high enough.
+
+That's how I felt when I first heard The Evpatoria Report, a post-rock band that hails from Switzerland and that published most of its work before 2010. Yet here I am in 2019, engrossed in what are some of the most emotionally moving songs I've ever heard.
+
+Below is a look at some of my favorites from their albums.
+
+## Eighteen Robins Road (Maar)
+
+<iframe style="border: 0; width: 100%; height: 120px;" src="https://bandcamp.com/EmbeddedPlayer/album=2600588727/size=large/bgcol=333333/linkcol=e99708/tracklist=false/artwork=small/track=1025421207/transparent=true/" seamless><a href="http://the-evpatoria-report.bandcamp.com/album/maar">Maar by The Evpatoria Report</a></iframe>
+
+This is hands-down my favorite song from The Evpatoria Report.
+
+The soothing intro is pretty typical in post-rock, so don't let it fool you. It's a tease that gradually grows in intensity. And as the crescendo builds, you turn to face the sound. Start bobbing your head. Tapping your feet. Closing your eyes and letting it take over.
+
+Make it to 4:30, and the electric riffs become sharper and more poignant as they test the boundaries of the genre. Your whole body's swinging now.
+
+And then the 5:15 bomb drops—so hard, in fact, that I just can't help but picture the whole band lighting on fire as they breathe a violent rage into their instruments. You're overcome with a head-banging, air-drumming fervor.
+
+It's a short-lived high that descends into a long and dreamy melody after about a minute—until, of course, it awakens once more. Except the riffs are new towards the end—still intense, but more hopeful and tame.
+
+All in all, it's a fantastic, explosive song.
+
+## Prognoz (Golevka)
+
+<iframe style="border: 0; width: 100%; height: 120px;" src="https://bandcamp.com/EmbeddedPlayer/album=1735644074/size=large/bgcol=333333/linkcol=e99708/tracklist=false/artwork=small/track=453876140/transparent=true/" seamless><a href="http://the-evpatoria-report.bandcamp.com/album/golevka">Golevka by The Evpatoria Report</a></iframe>
+
+Down here in Florida, during the summer, the weather's quite nice and pleasant. Intolerably hot at times, sure, but pleasant for the most part.
+
+Occasionally, though, amid all the deceptive calm and sunshine, a rain shower will break loose, *out of nowhere*. And it only lasts a few minutes, stopping as if it had never begun in the first place.
+
+That's how I'd describe the chief crescendo of *Prognoz*—a sudden, violent downpour that momentarily disturbs the peace.
+
+The rest of the song is nothing to write home about, though. It's not *bad*, but it does fail to live up to that amazing intro.
+
+## Dar Now (Maar)
+
+<iframe style="border: 0; width: 100%; height: 120px;" src="https://bandcamp.com/EmbeddedPlayer/album=2600588727/size=large/bgcol=333333/linkcol=e99708/tracklist=false/artwork=small/track=1748567723/transparent=true/" seamless><a href="http://the-evpatoria-report.bandcamp.com/album/maar">Maar by The Evpatoria Report</a></iframe>
+
+Wow.
+
+*Have I heard this before?* That's the first thought that crossed my mind when I heard *Dar Now*.
+
+And then, as I closed my eyes, I pictured it clearly: *Stranger Things*—or at least something like it, from that genre of science fiction.
+
+If this doesn't play in Season 4, I'll be legitimately disappointed. No, seriously—the notes are perfect for the show, the setting, the characters, all of it.
+
+The rest of the song? It's decent, but definitely not as good as the intro.
+
+## Taijin Kyofusho (Golevka)
+
+<iframe style="border: 0; width: 100%; height: 120px;" src="https://bandcamp.com/EmbeddedPlayer/album=1735644074/size=large/bgcol=333333/linkcol=e99708/tracklist=false/artwork=small/track=1073451937/transparent=true/" seamless><a href="http://the-evpatoria-report.bandcamp.com/album/golevka">Golevka by The Evpatoria Report</a></iframe>
+
+A song beloved by fans of The Evpatoria Report, and often cited as some of the band's best work.
+
+The notes carry the weight of the world—heavy and full of grief—as they play against the backdrop of recordings from the Columbia disaster. It's a beautiful, melancholy composition, a complete 180 from the post-rock I'm used to.
+
+At 2:35, the song reaches in, grabs you by the soul, and shreds you to pieces as the crescendo mounts, just to check if you still have a heartbeat.
+
+> Columbia, Houston, UHF comm check.
+
+The latter half of the song drowns out all noise and paints a remarkably accurate picture of the Columbia shuttle burning up brilliantly upon re-entry, trying to convey with music the anguish that the crew's families must have felt.
+
+## Voskhod Project - Bonus (Golevka)
+
+Experimental post rock is the name of the game here. There's really not much else to say!
+
+My absolute favorite part begins at 7:55—the guitar riffs are *spectacular*.
+
+The song dies off gently, too, giving you a much-needed respite after so much rock :)
+
+## Thanks, Switzerland
+
+You've spoiled me.
+
+Unfortunately, based on The Evpatoria Report's [most recent Facebook post](https://www.facebook.com/theevpatoriareport/), it appears that the band won't be getting back together anytime soon.
+
+But I'll be here, patiently waiting in case they ever do.

_sass/general/themes.scss

@@ -23,28 +23,28 @@ html.day {
     --label-bg-color: #dae3e7;
     --hover-color-general: #ECEFF1;
 
-    --form-bg-color: white;
+    --form-bg-color: rgb(243, 243, 243);
     --code-bg-color: rgb(235, 232, 232);
     --blockquote-bg-color: rgb(216, 216, 216);
     --spoiler-color: #90A4AE;
 }
 
 html.night {
-    --bg-color-main: #{$charcoal};
-    --bg-color-contrast: #{$nearly-black};
+    --bg-color-main: #212121;
+    --bg-color-contrast: #141414;
     // Alpha applied for Chrome bug where colors meld together: https://stackoverflow.com/a/29416776/10480032
     --selection-bg-color: #{$secondary-color-highlight};
 
-    --text-color-normal: #999999;
+    --text-color-normal: #9b9b9b;
     --text-color-emphasis: #afa89b;
     --text-color-nav: #{$silver};
 
     // --link-color: #a08458;
     --link-color: #{$secondary-color-link};
 
-    --button-bg-color: #{$secondary-color};
+    --button-bg-color: #554f43;
     --button-text-color: rgb(209, 209, 209);
-    --button-bg-hover-color: #{$secondary-color-light};
+    --button-bg-hover-color: #867d6b;
     --button-text-hover-color: #{$nearly-black};
 
     $card-bg-color: adjust-color($charcoal, $red: 15, $blue: 15, $green: 15);
@@ -53,7 +53,7 @@ html.night {
     $hover-color-general: adjust-color($charcoal, $red: 22, $blue: 22, $green: 22);
     --hover-color-general: #{$hover-color-general};
 
-    --form-bg-color: #{$hover-color-general};
+    --form-bg-color: #313131;
     --code-bg-color: #{$dark-gray};
     --blockquote-bg-color: #373434;
     --spoiler-color: rgb(163, 158, 148);

_sass/pages/contact.scss

@@ -28,21 +28,28 @@
 
         textarea {
             max-width: $form-max-width;
+            width: 100%;
             min-height: 200px;
             transition: height 0s;
+            resize: none;
         }
 
         input:not([class="button"]), textarea {
-            height: 30px;
-            width: 100%;
-            margin-bottom: 15px;
-            padding: 10px;
-            color: var(--text-color-normal);
             background-color: var(--form-bg-color);
             border: 0px solid;
-            box-shadow: 0 0 3px 1px rgb(172, 172, 172);
-            border-radius: 3px;
+            border-radius: 5px;
+            box-shadow: 0 0 5px 2px #d7d7d7;
+            color: var(--text-color-normal);
+            margin-bottom: 20px;
+            padding: 5px 10px;
+            width: 100%;
+
             transition: background-color $transition-duration, box-shadow $transition-duration, color $transition-duration;
+            box-shadow: 0 0 5px 2px #d7d7d7;
+
+            .night & {
+                box-shadow: 0 0 5px 2px #151515;
+            }
         }
 
         label {
@@ -58,7 +65,11 @@
 
         input:focus, textarea:focus {
             outline: none;
-            box-shadow: 0 0 5px 2px rgb(155, 155, 155);
+            box-shadow: 0 0 5px 2px #aaaaaa;
+
+            .night & {
+                box-shadow: 0 0 5px 2px #838383;
+            }
         }
 
         .button {

_sass/pages/index.scss

@@ -35,10 +35,10 @@
     #cta-buttons {
         margin-top: $paragraph-spacing;
         margin-bottom: $paragraph-spacing;
-    
+
         .button {
             width: 100%;
-            height: 40px;
+            height: 45px;
             margin-bottom: 15px;
             margin-right: 15px;
 

assets/scripts/loadRepoData.js

@@ -223,7 +223,6 @@ function anchorFor(repo) {
   const anchor = document.createElement('a');
   anchor.classList.add('container-link');
   anchor.setAttribute('href', repo.html_url);
-  anchor.setAttribute('target', '_blank');
   return anchor;
 }
 
@@ -232,7 +231,7 @@ function createHoverContent() {
   hoverContent.classList.add('hover-content');
 
   const boldText = document.createElement('strong');
-  boldText.textContent = 'View on GitHub';
+  boldText.textContent = 'Explore on GitHub';
 
   const externalLinkIcon = document.createElementNS(xmlns, 'svg');
   const svgPath = document.createElementNS(xmlns, 'path');