From 2f5f6ae61a99b8f98475342898849ed15fd3b46a Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Fri, 17 Feb 2017 22:28:15 -0700 Subject: [PATCH] fixed weird bug where text gets stuck if you scroll too fast --- style.css | 17 ++- style.css.map | 4 +- style.scss | 22 ++-- toptest.html | 336 ++++++++++++++++++++++++++------------------------ 4 files changed, 198 insertions(+), 181 deletions(-) diff --git a/style.css b/style.css index e9125f8..6a5fb0c 100644 --- a/style.css +++ b/style.css @@ -14,6 +14,7 @@ body { background: black; } #mast { + margin-top: 10px; background: none; line-height: 1.2; color: white; } @@ -27,8 +28,6 @@ body { color: #ccc; } #mast img { transition-duration: .2s; } - #mast .hideable { - transition-duration: .2s; } #mast h2 { transition-property: size; transition-duration: .2s; } @@ -47,12 +46,6 @@ body { .large .hideable { opacity: 1; } -.copy h1 { - text-decoration: underline; - font-style: italic; } - .copy h1 a { - color: black; } - .nojs body { background: white; } .nojs #mast { @@ -65,6 +58,12 @@ body { /*width wrapping*/ max-width: 800px; margin: auto; } + .slide p { + max-width: 800px; + margin: auto; } + .slide .cover { + height: 500px; + background: url("Chuck.jpg"); } .full { height: 100vh; @@ -90,4 +89,4 @@ h2 { a { transition-duration: .2s; } -/*# sourceMappingURL=style.css.map */ \ No newline at end of file +/*# sourceMappingURL=style.css.map */ diff --git a/style.css.map b/style.css.map index b9d26ef..3b26a26 100644 --- a/style.css.map +++ b/style.css.map @@ -1,7 +1,7 @@ { "version": 3, -"mappings": "AAIA,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;;AAEpB,IAAI;EACA,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;;AAErB,KAAM;EACF,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,EA5BN,OAAO;EA8BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAjCN,IAAI;EAmCP,SAAG;IACC,mBAAmB,EAAE,GAAG;EAE5B,eAAS;IACL,mBAAmB,EAAE,GAAG;EAE5B,QAAE;IACE,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAK5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAG;EACC,SAAS,EAAE,KAAK;AAEpB,SAAE;EACE,SAAS,EAAE,GAAG;;AAItB,UAAI;EACI,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAS;EACL,OAAO,EAAE,CAAC;;AAMd,QAAG;EACC,eAAe,EAAE,SAAS;EAC1B,UAAU,EAAE,MAAM;EAClB,UAAE;IACE,KAAK,EAAE,KAAK;;AAMpB,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,kBAAkB;IAClB,SAAS,EAjGT,KAAK;IAkGL,MAAM,EAAE,IAAI;;AAIpB,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAEtB,CAAC;EACG,mBAAmB,EAAE,GAAG", +"mappings": "AAIA,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;;AAEpB,IAAI;EACA,QAAQ,EAAE,KAAK;EACf,UAAU,EAAE,KAAK;;AAErB,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,EA7BN,OAAO;EA+BV,UAAK;IACD,UAAU,EAAE,MAAM;IAClB,KAAK,EAlCN,IAAI;EAoCP,SAAG;IACC,mBAAmB,EAAE,GAAG;EAM5B,QAAE;IACE,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,GAAG;;AAK5B,gBAAU;EACN,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,CAAC;AAEd,UAAG;EACC,SAAS,EAAE,KAAK;AAEpB,SAAE;EACE,SAAS,EAAE,GAAG;;AAItB,UAAI;EACI,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;AAEpB,gBAAS;EACL,OAAO,EAAE,CAAC;;AAMd,UAAK;EACD,UAAU,EAAE,KAAK;AAErB,WAAM;EACF,UAAU,EAAE,KAAK;;AAKzB,MAAO;EAEH,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,IAAI;EACX,UAAI;IACA,kBAAkB;IAClB,SAAS,EAzFT,KAAK;IA0FL,MAAM,EAAE,IAAI;EAEhB,QAAC;IACG,SAAS,EA7FT,KAAK;IA8FL,MAAM,EAAE,IAAI;EAEhB,aAAM;IACF,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,gBAAgB;;AAIpC,KAAM;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;;AAGf,UAAW;EACP,OAAO,EAAE,KAAK;;AAGlB,MAAO;EACH,qBAAqB,EAAE,GAAG;EAC1B,SAAS,EAAE,IAAI;;AAGnB,aAAc;EACV,OAAO,EAAE,SAAS;;AAGtB,EAAG;EACC,SAAS,EAAE,GAAG;;AAGlB,EAAG;EACC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;;AAEtB,CAAC;EACG,mBAAmB,EAAE,GAAG", "sources": ["style.scss"], "names": [], "file": "style.css" -} \ No newline at end of file +} diff --git a/style.scss b/style.scss index c5ee3e2..af90b56 100644 --- a/style.scss +++ b/style.scss @@ -21,6 +21,7 @@ body { background: black; } #mast { + margin-top: 10px; background: none; line-height: 1.2; color: white; @@ -39,7 +40,8 @@ body { transition-duration: .2s; } .hideable{ - transition-duration: .2s; + // transition-property: size; + // transition-duration: .2s; } h2{ transition-property: size; @@ -70,16 +72,6 @@ img { } } -.copy { - h1 { - text-decoration: underline; - font-style: italic; - a { - color: black; - } - } -} - .nojs { body { background: white; @@ -99,6 +91,14 @@ img { max-width: $width; margin: auto; } + p{ + max-width: $width; + margin: auto; + } + .cover{ + height: 500px; + background: url("Chuck.jpg"); + } } .full { diff --git a/toptest.html b/toptest.html index 44c3a44..0cc6419 100644 --- a/toptest.html +++ b/toptest.html @@ -9,164 +9,179 @@ #spaceTakerUpper { height: 100vh; } -
-
-

Chuck Dries

- Chuck Dries -

Tech / Design / Photography / Leadership

-
-

Digital Developer, The State Press

-

Computer Science Student, Arizona State University

-

chuck@chuckdries.com / 602.618.0414

-

- Github / - LinkedIn / - Resume [pdf] / - Blog -

+
+
+
+

Chuck Dries

+ Chuck Dries +

Tech / Design / Photography / Leadership

+
+

Digital Developer, The State Press

+

Computer Science Student, Arizona State University

+

chuck@chuckdries.com / 602.618.0414

+

+ Github / + LinkedIn / + Resume [pdf] / + Blog +

+
+
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus lorem, pretium non suscipit vel, dapibus non dolor. - Suspendisse potenti. Phasellus interdum tempus placerat. Vivamus nec interdum mauris. Integer eu neque lacus. Nulla - turpis turpis, fermentum in elementum nec, aliquam sed elit. Maecenas fringilla tristique leo quis mattis. In tempor - justo id vehicula porta. Ut metus tortor, laoreet quis iaculis ac, aliquet et metus. Suspendisse potenti. Nullam - at hendrerit neque. Vestibulum scelerisque turpis felis, et mollis risus suscipit eget. Donec condimentum ornare - dictum. Vivamus rhoncus felis nisl, suscipit imperdiet ante tempus sit amet. Nullam lobortis sem ultricies, tempus - felis a, hendrerit lacus. Suspendisse potenti. Suspendisse sollicitudin purus vitae felis molestie placerat. Vivamus - aliquam tincidunt velit, id cursus purus euismod vitae. Praesent a rhoncus quam, non scelerisque lorem. Aenean mollis - dapibus odio, ut bibendum arcu mattis vitae. Maecenas id faucibus arcu. Aenean ullamcorper urna id cursus semper. - Sed aliquet, est ut interdum ultrices, arcu libero venenatis lacus, ut viverra ante massa id elit. Mauris molestie - enim sit amet neque viverra, luctus laoreet dolor efficitur. Mauris non mi auctor, tincidunt odio in, ultricies sapien. - Sed mollis ligula vitae magna malesuada imperdiet. Aliquam quis felis urna. Morbi feugiat metus sed massa finibus - dapibus at sed augue. Curabitur in eleifend neque. Sed malesuada rutrum tellus, sit amet tempus enim pretium sed. - Mauris nisi eros, facilisis a ornare sit amet, efficitur vitae mauris. Aliquam in nibh placerat, mollis augue sit - amet, interdum felis. Morbi justo felis, semper ac lorem in, lobortis pharetra purus. Curabitur ut neque vitae magna - interdum pulvinar ac vitae dui. Donec consequat est ex, et tincidunt tellus rhoncus nec. Donec a dictum nisi, mollis - egestas lectus. Quisque vel fringilla justo, ultricies pharetra dui. Morbi egestas libero et turpis congue tincidunt. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et - ultrices posuere cubilia Curae; Aenean ullamcorper luctus dolor, nec consectetur erat placerat at. Phasellus a metus - sed lorem molestie euismod finibus id turpis. Integer iaculis dignissim eleifend. Ut enim risus, bibendum ac ultricies - tempus, blandit ut justo. Morbi id nulla tincidunt, aliquet quam et, consectetur purus. Quisque lobortis leo lorem, - sit amet pellentesque leo eleifend non. Fusce consectetur sapien risus, id sagittis velit ornare vitae. Duis ultricies, - sem sed facilisis lacinia, ex libero finibus ex, vel egestas ex lacus in dui. Quisque eros nulla, placerat a massa - et, fringilla feugiat purus. Proin ipsum neque, varius in turpis id, facilisis convallis justo. Donec vulputate sapien - pharetra erat blandit semper. Vestibulum mollis, ante sit amet tristique ullamcorper, leo dolor iaculis ligula, eget - dapibus nulla lorem viverra felis. Nulla eleifend fermentum ipsum a posuere. Curabitur sed placerat elit, ac molestie - metus. Pellentesque id eros volutpat, volutpat leo nec, finibus justo. Fusce euismod, mi bibendum ornare tincidunt, - lorem nisi interdum turpis, vulputate pretium lectus augue eget sem. Nam et nibh purus. Cras volutpat sagittis accumsan. - Vestibulum semper dui hendrerit, iaculis nunc at, imperdiet ligula. Cras fringilla nunc eros, non bibendum lorem - cursus non. Quisque scelerisque mauris accumsan risus ultrices maximus. Aenean tristique gravida suscipit. Mauris - sit amet varius tellus. Suspendisse interdum dolor sit amet lacinia consequat. Class aptent taciti sociosqu ad litora - torquent per conubia nostra, per inceptos himenaeos. Integer nec mattis nisi. Orci varius natoque penatibus et magnis - dis parturient montes, nascetur ridiculus mus. Sed quis enim at sapien scelerisque tristique non et libero.

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+

About Me

+
+
+

Projects

+
+
+

A project

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer risus lorem, pretium non suscipit vel, dapibus non + dolor. Suspendisse potenti. Phasellus interdum tempus placerat. Vivamus nec interdum mauris. Integer eu neque + lacus. Nulla turpis turpis, fermentum in elementum nec, aliquam sed elit. Maecenas fringilla tristique leo quis + mattis. In tempor justo id vehicula porta. Ut metus tortor, laoreet quis iaculis ac, aliquet et metus. Suspendisse + potenti. Nullam at hendrerit neque. Vestibulum scelerisque turpis felis, et mollis risus suscipit eget. Donec + condimentum ornare dictum. Vivamus rhoncus felis nisl, suscipit imperdiet ante tempus sit amet. Nullam lobortis + sem ultricies, tempus felis a, hendrerit lacus. Suspendisse potenti. Suspendisse sollicitudin purus vitae felis + molestie placerat. Vivamus aliquam tincidunt velit, id cursus purus euismod vitae. Praesent a rhoncus quam, non + scelerisque lorem. Aenean mollis dapibus odio, ut bibendum arcu mattis vitae. Maecenas id faucibus arcu. Aenean + ullamcorper urna id cursus semper. Sed aliquet, est ut interdum ultrices, arcu libero venenatis lacus, ut viverra + ante massa id elit. Mauris molestie enim sit amet neque viverra, luctus laoreet dolor efficitur. Mauris non mi + auctor, tincidunt odio in, ultricies sapien. Sed mollis ligula vitae magna malesuada imperdiet. Aliquam quis + felis urna. Morbi feugiat metus sed massa finibus dapibus at sed augue. Curabitur in eleifend neque. Sed malesuada + rutrum tellus, sit amet tempus enim pretium sed. Mauris nisi eros, facilisis a ornare sit amet, efficitur vitae + mauris. Aliquam in nibh placerat, mollis augue sit amet, interdum felis. Morbi justo felis, semper ac lorem in, + lobortis pharetra purus. Curabitur ut neque vitae magna interdum pulvinar ac vitae dui. Donec consequat est ex, + et tincidunt tellus rhoncus nec. Donec a dictum nisi, mollis egestas lectus. Quisque vel fringilla justo, ultricies + pharetra dui. Morbi egestas libero et turpis congue tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ullamcorper + luctus dolor, nec consectetur erat placerat at. Phasellus a metus sed lorem molestie euismod finibus id turpis. + Integer iaculis dignissim eleifend. Ut enim risus, bibendum ac ultricies tempus, blandit ut justo. Morbi id nulla + tincidunt, aliquet quam et, consectetur purus. Quisque lobortis leo lorem, sit amet pellentesque leo eleifend + non. Fusce consectetur sapien risus, id sagittis velit ornare vitae. Duis ultricies, sem sed facilisis lacinia, + ex libero finibus ex, vel egestas ex lacus in dui. Quisque eros nulla, placerat a massa et, fringilla feugiat + purus. Proin ipsum neque, varius in turpis id, facilisis convallis justo. Donec vulputate sapien pharetra erat + blandit semper. Vestibulum mollis, ante sit amet tristique ullamcorper, leo dolor iaculis ligula, eget dapibus + nulla lorem viverra felis. Nulla eleifend fermentum ipsum a posuere. Curabitur sed placerat elit, ac molestie + metus. Pellentesque id eros volutpat, volutpat leo nec, finibus justo. Fusce euismod, mi bibendum ornare tincidunt, + lorem nisi interdum turpis, vulputate pretium lectus augue eget sem. Nam et nibh purus. Cras volutpat sagittis + accumsan. Vestibulum semper dui hendrerit, iaculis nunc at, imperdiet ligula. Cras fringilla nunc eros, non bibendum + lorem cursus non. Quisque scelerisque mauris accumsan risus ultrices maximus. Aenean tristique gravida suscipit. + Mauris sit amet varius tellus. Suspendisse interdum dolor sit amet lacinia consequat. Class aptent taciti sociosqu + ad litora torquent per conubia nostra, per inceptos himenaeos. Integer nec mattis nisi. Orci varius natoque penatibus + et magnis dis parturient montes, nascetur ridiculus mus. Sed quis enim at sapien scelerisque tristique non et + libero.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+