From 1e941f284eb2ea3136b28cbba35efb1dc6506107 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Mon, 13 Mar 2017 17:26:48 -0700
Subject: [PATCH] Direct scroll handler and move to SCSS for covers
Scroll handler now attaches directly to scroll event rather than requestAnimationFrame
---
covers.css => covers.scss | 3 ++-
index.html | 21 +++++++++++----------
style.css | 9 ++++++++-
style.css.map | 4 ++--
style.scss | 6 ++++++
5 files changed, 29 insertions(+), 14 deletions(-)
rename covers.css => covers.scss (62%)
diff --git a/covers.css b/covers.scss
similarity index 62%
rename from covers.css
rename to covers.scss
index 083ae25..118c56c 100644
--- a/covers.css
+++ b/covers.scss
@@ -1,3 +1,4 @@
-#sierra{
+// covers.scss
+#sierra {
background-image: url("Sierra.jpg");
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 006bf96..2073c49 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,6 @@
<meta charset="UTF-8">
<title>Chuck Dries</title>
<link rel="stylesheet" href="style.css">
- <link rel="stylesheet" href="covers.css">
<style>
#spaceTakerUpper {
height: 105vh;
@@ -42,8 +41,8 @@
<h1>About Me</h1>
<p>When I was a child I was obsessed with trains and vacuum cleaners. I spent many sleepless nights marveling at these incredible machines. Today, I spend my nights pulling my hair out over webkit paint timing graphs. In a way, these nights are not
so different.</p>
- <p>I'm a Computer Science student at Arizona State Univrsity interested in the intersection of technology and art. I pride myself in taking a diverse set of interests and my pixel perfect lovingly handcrafted 💯% good stuff 👍👌 HTML. These days,
- you can find me at The State Press working on ways to innovate the news during the week and winning hackathons on the weekends.</p>
+ <p>I'm a Computer Science student and Hackathon winner at Arizona State University and I'm interested in the intersection of technology and art. I pride myself in taking a diverse set of interest and my pixel perfect lovingly handcrafted 💯% good
+ stuff 👍👌 HTML. These days, you can find me at The State Press working on ways to innovate the news during the week and winning hackathons on the weekends.</p>
<p>This website is still an active development project, pls don't judge too harshly.</p>
<h1>Skills <a id="skilltablebutton" style="text-decoration: underline; font-style: italic; font-weight: normal; font-size: 14px;" onclick="toggleSkillTable()">hide</a></h1>
<div id="skilltable">
@@ -260,13 +259,15 @@
var stb = document.getElementById("skilltablebutton");
document.addEventListener("scroll", function() {
last_known_scroll = getScrollY();
- if (!queueing) {
- window.requestAnimationFrame(function() {
- sc(last_known_scroll);
- queueing = false;
- });
- }
- queueing = true;
+ sc(last_known_scroll);
+ // Usually an important performance consideration, this ends up significantly delaying the resizing of the top box, which is important to stay sized correctly
+ // if (!queueing) {
+ // window.requestAnimationFrame(function() {
+ // sc(last_known_scroll);
+ // queueing = false;
+ // });
+ // }
+ // queueing = true;
});
sc(last_known_scroll);
diff --git a/style.css b/style.css
index c72c0ed..b510ca3 100644
--- a/style.css
+++ b/style.css
@@ -3,6 +3,9 @@
margin: 0px;
clear: both; }
+#sierra {
+ background-image: url("Sierra.jpg"); }
+
body {
font-family: serif;
font-size: 1em;
@@ -62,7 +65,8 @@ body {
.slide div {
/* width wrapping */
max-width: 800px;
- margin: auto; }
+ margin: auto;
+ text-align: center; }
.slide div div {
/* Project bits */
transition-duration: .2s;
@@ -82,6 +86,9 @@ body {
color: white; }
.slide div div .cover:hover {
box-shadow: 1px 1px 9px #444; }
+ .slide div p,
+ .slide div table {
+ text-align: left; }
.slide table {
line-height: 1.3;
margin: 0;
diff --git a/style.css.map b/style.css.map
index 54e4040..0902fda 100644
--- a/style.css.map
+++ b/style.css.map
@@ -1,7 +1,7 @@
{
"version": 3,
-"mappings": "AAKA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;AAIf,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,IAAK;EACD,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,QAAI;IACA,MAAM,EAAE,IAAI;IACZ,SAAS,EA1BT,KAAK;;AA8Bb,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EAtCN,OAAO;EAwCV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EA3CN,IAAI;EA6CP,SAAI;IACA,mBAAmB,EAAE,GAAG;EAM5B,QAAG;IACC,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAM5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAI;EACA,SAAS,EAAE,KAAK;AAEpB,SAAG;EACC,SAAS,EAAE,GAAG;;AAKlB,UAAI;EACA,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAU;EACN,OAAO,EAAE,CAAC;;AAKd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,oBAAoB;IACpB,SAAS,EAnGT,KAAK;IAoGL,MAAM,EAAE,IAAI;IACZ,cAAI;MACA,kBAAkB;MAClB,mBAAmB,EAAE,GAAG;MACxB,KAAK,EAAE,KAAa;MACpB,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,GAAG;MACZ,OAAO,EAAE,YAAY;MACrB,MAAM,EAAE,GAAG;MACX,qBAAO;QACH,MAAM,EAAE,KAAK;QACb,mBAAmB,EAAE,aAAa;QAClC,eAAe,EAAE,KAAK;QACtB,MAAM,EAAE,GAAG;QACX,wBAAG;UACC,UAAU,EAAE,MAAM;UAClB,UAAU,EAjHrB,kBAAiB;UAkHN,KAAK,EAAE,KAAK;MAGpB,2BAAa;QACT,UAAU,EAAE,gBAAgB;EAIxC,YAAM;IACF,WAAW,EAAE,GAAG;IAChB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,GAAG;IACZ,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,QAAQ;IACzB,cAAc,EAAE,QAAQ;EAE5B,SAAG;IACC,MAAM,EAAE,GAAG;EAEf,QAAE;IACE,WAAW,EAAE,GAAG;IAChB,SAAS,EA1IT,KAAK;IA2IL,MAAM,EAAE,IAAI;EAEhB,SAAG;IACC,SAAS,EAAE,GAAG;IACd,UAAU,EAAE,MAAM;IAClB,SAAS,EAhJT,KAAK;IAiJL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK;;AAIzB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGtB,CAAE;EACE,mBAAmB,EAAE,GAAG",
-"sources": ["style.scss"],
+"mappings": "AAKA,oBAAO;EACH,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;;ACPf,OAAQ;EACJ,gBAAgB,EAAE,iBAAiB;;ADWvC,IAAK;EAED,WAAW,EAAE,KAAK;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;;AAGpB,IAAK;EACD,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;EACjB,QAAI;IACA,MAAM,EAAE,IAAI;IACZ,SAAS,EA3BT,KAAK;;AA+Bb,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,KAAK;EACZ,OAAE;IACE,KAAK,EAAE,KAAK;IACZ,UAAU,EAAE,MAAM;EAEtB,aAAQ;IACJ,KAAK,EAvCN,OAAO;EAyCV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EA5CN,IAAI;EA8CP,SAAI;IACA,mBAAmB,EAAE,GAAG;EAM5B,QAAG;IACC,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAM5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAI;EACA,SAAS,EAAE,KAAK;AAEpB,SAAG;EACC,SAAS,EAAE,GAAG;;AAKlB,UAAI;EACA,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAU;EACN,OAAO,EAAE,CAAC;;AAKd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,oBAAoB;IACpB,SAAS,EApGT,KAAK;IAqGL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,cAAI;MACA,kBAAkB;MAClB,mBAAmB,EAAE,GAAG;MACxB,KAAK,EAAE,KAAa;MACpB,aAAa,EAAE,GAAG;MAClB,OAAO,EAAE,GAAG;MACZ,OAAO,EAAE,YAAY;MACrB,MAAM,EAAE,GAAG;MACX,qBAAO;QACH,MAAM,EAAE,KAAK;QACb,mBAAmB,EAAE,aAAa;QAClC,eAAe,EAAE,KAAK;QACtB,MAAM,EAAE,GAAG;QACX,wBAAG;UACC,UAAU,EAAE,MAAM;UAClB,UAAU,EAnHrB,kBAAiB;UAoHN,KAAK,EAAE,KAAK;MAGpB,2BAAa;QACT,UAAU,EAAE,gBAAgB;IAGpC;oBACM;MACF,UAAU,EAAE,IAAI;EAGxB,YAAM;IACF,WAAW,EAAE,GAAG;IAChB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,GAAG;IACZ,cAAc,EAAE,CAAC;IACjB,eAAe,EAAE,QAAQ;IACzB,cAAc,EAAE,QAAQ;EAE5B,SAAG;IACC,MAAM,EAAE,GAAG;EAEf,QAAE;IACE,WAAW,EAAE,GAAG;IAChB,SAAS,EAhJT,KAAK;IAiJL,MAAM,EAAE,IAAI;EAEhB,SAAG;IACC,SAAS,EAAE,GAAG;IACd,UAAU,EAAE,MAAM;IAClB,SAAS,EAtJT,KAAK;IAuJL,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,KAAK;;AAIzB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAGtB,CAAE;EACE,mBAAmB,EAAE,GAAG",
+"sources": ["style.scss","covers.scss"],
"names": [],
"file": "style.css"
}
diff --git a/style.scss b/style.scss
index ce7912f..e56036a 100644
--- a/style.scss
+++ b/style.scss
@@ -9,6 +9,7 @@ $greybg: rgba(0, 0, 0, .5);
clear: both;
}
+@import 'covers';
//sections
body {
@extend .reset;
@@ -100,6 +101,7 @@ body {
/* width wrapping */
max-width: $width;
margin: auto;
+ text-align: center;
div {
/* Project bits */
transition-duration: .2s;
@@ -123,6 +125,10 @@ body {
box-shadow: 1px 1px 9px #444;
}
}
+ p,
+ table {
+ text-align: left;
+ }
}
table {
line-height: 1.3;