From 3abaae7fc54eef5f8e8fd30c773e5f4894df6c0d Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Tue, 8 Aug 2017 14:04:44 -0700
Subject: [PATCH] Style and copy changes suggested by /r/webdev
---
css/style.css | 18 +++++++++++-------
index.html | 28 +++++++++++++++-------------
sass/style.scss | 23 +++++++++++++++--------
3 files changed, 41 insertions(+), 28 deletions(-)
diff --git a/css/style.css b/css/style.css
index 34ee076..7027e37 100755
--- a/css/style.css
+++ b/css/style.css
@@ -166,7 +166,7 @@ body {
color: white; }
#mast a {
color: white;
- font-style: italic; }
+ font-style: inherit; }
#mast a:hover {
color: #ed1a76; }
#mast .sub {
@@ -179,8 +179,12 @@ body {
transition-duration: .2s;
color: #91EFFF; }
+#spaceTakerUpper {
+ height: 100vh;
+ background: #202020; }
+
.small {
- background: black; }
+ background: #202020; }
.small .hideable {
display: none;
opacity: 0; }
@@ -206,7 +210,7 @@ body {
background: white; }
.nojs #mast {
- background: black; }
+ background: #202020; }
/*
* standalone elements
@@ -220,10 +224,10 @@ body {
.slide div .project {
width: 390px;
padding: 0 0 1em 0;
- border: 1px solid #aaa;
+ border: 1px solid #eee;
border-radius: 5px;
overflow: hidden;
- box-shadow: 1px 1px 4px #888;
+ box-shadow: 1px 1px 3px #ddd;
background: white; }
.slide div .project .cover {
height: 15em;
@@ -242,8 +246,8 @@ body {
.slide div .project .details .tag {
float: left;
padding: 0 .3em 0 .3em;
- background: #eee;
- border: 1px solid #ccc;
+ background: #f3f3f3;
+ border: 1px solid #ddd;
margin: .2em;
border-radius: 5px; }
.slide div .project .details .cat {
diff --git a/index.html b/index.html
index fc26722..2656bfc 100755
--- a/index.html
+++ b/index.html
@@ -17,13 +17,7 @@
<meta name="application-name" content="Chuck Dries" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="http://chuckdri.es/icons/mstile-144x144.png" />
-
- <style>
- #spaceTakerUpper {
- height: 100vh;
- background: black;
- }
- </style>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
@@ -66,11 +60,10 @@
<a name="about" style="padding-top: 130px"></a>
<h1>About Me <span style="font-size: .5em; font-weight:normal; color: #666;">Why I rock 🎶</span></h1>
<h3>A brief history of Chuck & tech</h3>
- <p>I'm mostly terrible at writing copy, but I think I'm a pretty good programmer. I've always been "into computers"
- but I didn't really get into the technical stuff until middle school, where I had to learn about networking and
- bash to run a minecraft server. Today, I do most of my "real" work in JavaScript (both on the client with VueJS
- and the server with Node + Express), but I've been experimenting with Unity and keeping up with my Minecraft
- habit.
+ <p>I'm a computer science student with experience in photography, digital and print graphic design, teaching, and leading.
+ I've been "into computers" my whole life, but I didn't really get into the technical stuff until middle school,
+ where I had to learn about networking and bash to run a minecraft server. Today, I do most of my work in JavaScript,
+ but in my free time I experiment with VR and game design.
</p>
<!--<h3>A brief history of Chuck & tech</h3>
<p>When I was a child I was obsessed with trains and vacuum cleaners. In elementary school my grandma tried to teach me Photoshop. In seventh grade I started teaching myself HTML. Freshman year I started learning the basics of networking and BASH
@@ -203,7 +196,8 @@
</div>
</div>
<p>© Chuck Dries 2017</p>
- <p style="font-family: sans-serif">;)</p>
+ <br>
+ <!--ewwww-->
</div>
<script>
var last_known_scroll = getScrollY();
@@ -278,6 +272,14 @@
}
}
+ function openSkillTable() {
+ if (!t) {
+ st.style.display = "block";
+ stb.innerText = "Less about me";
+ t = true;
+ }
+ }
+
function prompt() {
}
diff --git a/sass/style.scss b/sass/style.scss
index 5f77e17..ae83780 100755
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -4,7 +4,8 @@
$width: 800px;
$grey: #ccc;
$pink: #ed1a76;
-$greybg: rgba(0, 0, 0, .5);
+$blue: #91EFFF;
+$greybg: #202020;
.reset {
padding: 0;
margin: 0;
@@ -55,7 +56,7 @@ body {
color: white;
a {
color: white;
- font-style: italic;
+ font-style: inherit;
}
a:hover {
color: $pink;
@@ -74,9 +75,14 @@ body {
}
}
+#spaceTakerUpper {
+ height: 100vh;
+ background: $greybg;
+}
+
//small and large classes are applied to #top
.small {
- background: black;
+ background: $greybg;
.hideable {
display: none;
opacity: 0;
@@ -106,12 +112,13 @@ body {
}
}
+//TODO: fix
.nojs {
body {
background: white;
}
#mast {
- background: black;
+ background: $greybg;
}
}
@@ -132,10 +139,10 @@ body {
.project {
width: $width/2 - 10;
padding: 0 0 1em 0;
- border: 1px solid #aaa;
+ border: 1px solid #eee;
border-radius: 5px;
overflow: hidden;
- box-shadow: 1px 1px 4px #888;
+ box-shadow: 1px 1px 3px #ddd;
background: white;
.cover {
height: 15em;
@@ -159,8 +166,8 @@ body {
.tag {
float: left;
padding: 0 .3em 0 .3em;
- background: #eee;
- border: 1px solid #ccc;
+ background: #f3f3f3;
+ border: 1px solid #ddd;
margin: .2em;
border-radius: 5px;
}