diff --git a/css/style.css b/css/style.css
index 96835a0..360ff93 100644
--- a/css/style.css
+++ b/css/style.css
@@ -114,12 +114,12 @@
-o-transform: none;
transform: none; } }
-.reset, body, .slide, .slide div .project .details h2, .slide div .project .details p, .slide div .project .details .award div p {
+.reset, body, .slide, .slide .project .details h2, .slide .project .details p, .slide .project .details .award div p {
padding: 0;
margin: 0;
text-indent: 0; }
-.widthCenter, .slide div, .slide p,
+.widthCenter, .slide > div, .slide p,
.slide h1,
.slide h2,
.slide h3,
@@ -145,7 +145,6 @@
*/
body {
font-family: 'Playfair Display', serif;
- font-size: 1.1em;
line-height: 1.6; }
#top {
@@ -160,7 +159,6 @@ body {
font-weight: normal; }
#mast {
- font-size: 1.1em;
margin-top: 10px;
background: none;
line-height: 1.2;
@@ -173,12 +171,19 @@ body {
#mast .sub {
font-style: italic;
color: #ccc; }
- #mast img {
- transition-duration: .2s; }
+ #mast h1 {
+ font-size: 2.5em;
+ font-style: italic;
+ font-weight: normal;
+ color: #ed1a76;
+ transition-property: size;
+ transition-duration: .2s;
+ margin: -18px 0 0 0; }
#mast h2 {
transition-property: size;
transition-duration: .2s;
- color: #91EFFF; }
+ color: #91EFFF;
+ margin: 0; }
#spaceTakerUpper {
height: 100vh;
@@ -219,82 +224,84 @@ body {
.slide {
padding: 0px;
width: 100%;
- /* width wrapping */ }
- .slide div {
- /* Project bits */ }
- .slide div .project {
- width: 390px;
- padding: 0 0 1em 0;
- border: 1px solid #eee;
- border-radius: 5px;
- overflow: hidden;
- box-shadow: 1px 1px 3px #ddd;
- background: white;
- margin-bottom: 20px; }
- .slide div .project .cover {
- height: 15em;
- background-position: center center;
- background-size: cover;
- background-repeat: no-repeat;
- margin: 0px;
- padding: 1em; }
- .slide div .project .cover video {
- height: 100%;
- width: 100%; }
- .slide div .project .details {
- padding: 1em 1em 0 1em; }
- .slide div .project .details h2 {
- line-height: 1;
- margin: 0 0 .5em 0; }
- .slide div .project .details p {
- margin: 0 0 .5em 0; }
- .slide div .project .details .tag {
- float: left;
- padding: 0 .3em 0 .3em;
- background: #f3f3f3;
- border: 1px solid #ddd;
- margin: .2em;
- border-radius: 5px; }
- .slide div .project .details .cat {
- background: #B7EEFF;
- border: 1px solid #8AC9DD; }
- .slide div .project .details .award {
- float: right;
- background: none;
- border: none;
- margin: 0 0 .5em .5em; }
- .slide div .project .details .award div {
- display: inline-block;
- text-align: center;
- vertical-align: middle;
- padding: 0; }
- .slide div .project .details .award div h3 {
- margin: 0;
- padding: 0;
- font-size: 1.4em;
- line-height: 1;
- font-weight: normal;
- font-style: italic; }
- .slide div .project .details .award div p {
- font-size: .8em; }
- .slide div .project .details .award::before,
- .slide div .project .details .award::after {
- vertical-align: middle;
- background-image: url(../images/laurelleft.png);
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center center;
+ /* width wrapping */
+ /* Project bits */ }
+ .slide .project {
+ width: 390px;
+ padding: 0 0 1em 0;
+ border: 1px solid #eee;
+ border-radius: 5px;
+ overflow: hidden;
+ box-shadow: 1px 1px 3px #ddd;
+ background: white;
+ margin-bottom: 20px; }
+ .slide .project .cover {
+ height: 14em;
+ background-position: center center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ margin: 0px;
+ padding: 1em; }
+ .slide .project .cover video {
+ height: 100%;
+ width: 100%; }
+ @media (max-width: 800px) {
+ .slide .project .cover {
+ height: 45vw; } }
+ .slide .project .details {
+ padding: 1em 1em 0 1em; }
+ .slide .project .details h2 {
+ line-height: 1;
+ margin: 0 0 .5em 0; }
+ .slide .project .details p {
+ margin: 0 0 .5em 0; }
+ .slide .project .details .tag {
+ float: left;
+ padding: 0 .3em 0 .3em;
+ background: #f3f3f3;
+ border: 1px solid #ddd;
+ margin: .2em;
+ border-radius: 5px; }
+ .slide .project .details .cat {
+ background: #B7EEFF;
+ border: 1px solid #8AC9DD; }
+ .slide .project .details .award {
+ float: right;
+ background: none;
+ border: none;
+ margin: 0 0 .5em .5em; }
+ .slide .project .details .award div {
display: inline-block;
- content: "";
- width: 1.6em;
- height: 3em;
- position: relative; }
- .slide div .project .details .award::before {
- background-image: url(../images/laurelleft.png);
- left: .09em; }
- .slide div .project .details .award::after {
- background-image: url(../images/laurelright.png);
- right: .11em; }
+ text-align: center;
+ vertical-align: middle;
+ padding: 0; }
+ .slide .project .details .award div h3 {
+ margin: 0;
+ padding: 0;
+ font-size: 1.4em;
+ line-height: 1;
+ font-weight: normal;
+ font-style: italic; }
+ .slide .project .details .award div p {
+ font-size: .8em; }
+ .slide .project .details .award::before,
+ .slide .project .details .award::after {
+ vertical-align: middle;
+ background-image: url(../images/laurelleft.png);
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center center;
+ display: inline-block;
+ content: "";
+ width: 1.6em;
+ height: 3em;
+ position: relative; }
+ .slide .project .details .award::before {
+ background-image: url(../images/laurelleft.png);
+ left: .09em; }
+ .slide .project .details .award::after {
+ background-image: url(../images/laurelright.png);
+ right: .11em; }
.slide table {
line-height: 1.3;
margin: 0;
@@ -311,7 +318,7 @@ body {
font-style: italic;
margin-top: 1.7em; }
@media (max-width: 800px) {
- .slide .widthCenter, .slide div, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 {
+ .slide .widthCenter, .slide > div, .slide p, .slide h1, .slide h2, .slide h3, .slide h4 {
margin-left: 12px;
margin-right: 12px; }
.slide div .project {
diff --git a/index.html b/index.html
index 4dff7d4..eb37632 100644
--- a/index.html
+++ b/index.html
@@ -25,8 +25,8 @@
-
Chuck Dries
-

+
Chuck Dries
+
Programmer
/ Student
/ Friendly dude
diff --git a/sass/style.scss b/sass/style.scss
index bbdc525..98d0669 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,141 +1,139 @@
-//setup
-@import 'responsive';
-@import 'animations';
-$width: 800px;
-$grey: #ccc;
-$pink: #ed1a76;
-$blue: #91EFFF;
-$greybg: #202020;
-.reset {
- padding: 0;
- margin: 0;
- text-indent: 0;
-}
+ //setup
+ @import 'responsive';
+ @import 'animations';
+ $width: 800px;
+ $grey: #ccc;
+ $pink: #ed1a76;
+ $blue: #91EFFF;
+ $greybg: #202020;
+ .reset {
+ padding: 0;
+ margin: 0;
+ text-indent: 0;
+ }
-.widthCenter {
- max-width: $width;
- margin: auto;
-}
-
-
-/*
+ .widthCenter {
+ max-width: $width;
+ margin: auto;
+ }
+ /*
* Covers for projects section
*/
-@import 'covers';
-
-/*
+ @import 'covers';
+ /*
* sections
*/
-body {
- @extend .reset; // font-family: 'Nota-serif', serif;
- font-family: 'Playfair Display', serif;
- font-size: 1.1em;
- line-height: 1.6; // margin-bottom: 700px;
-}
-
-#top {
- padding-top: 10px;
- width: 100%;
- position: fixed; // background: black;
- z-index: 999;
- div {
- margin: auto;
- max-width: $width;
- }
- h2 {
- font-weight: normal;
- }
-}
-
-#mast {
- font-size: 1.1em;
- margin-top: 10px;
- background: none;
- line-height: 1.2;
- color: white;
- a {
- color: white;
- font-style: inherit; // text-decoration: none;
- }
- a:hover {
- color: $pink;
- }
- .sub {
- font-style: italic;
- color: $grey;
- }
- img {
- transition-duration: .2s;
- }
- h2 {
- transition-property: size;
- transition-duration: .2s;
- color: #91EFFF;
- }
-}
-
-#spaceTakerUpper {
- height: 100vh;
- background: $greybg;
-}
-
-//small and large classes are applied to #top
-.small {
- background: $greybg;
- .hideable {
- display: none;
- opacity: 0;
- }
- img {
- max-width: 200px;
- }
- h2 {
- font-size: 1.2em;
- margin: 5px;
- }
- p {
- margin: 5px;
- }
-}
-
-.large {
- img {
- width: 100%;
- max-width: 380px;
- }
- .hideable {
- opacity: 1;
- }
- h2 {
- font-size: 1.3em;
- }
-}
-
-//TODO: fix
-.nojs {
body {
- background: white;
+ @extend .reset; // font-family: 'Nota-serif', serif;
+ font-family: 'Playfair Display', serif;
+ line-height: 1.6; // margin-bottom: 700px;
}
+
+ #top {
+ padding-top: 10px;
+ width: 100%;
+ position: fixed; // background: black;
+ z-index: 999;
+ div {
+ margin: auto;
+ max-width: $width;
+ }
+ h2 {
+ font-weight: normal;
+ }
+ }
+
#mast {
- background: $greybg;
+ margin-top: 10px;
+ // margin-top:0;
+ background: none;
+ line-height: 1.2;
+ color: white;
+ a {
+ color: white;
+ font-style: inherit; // text-decoration: none;
+ }
+ a:hover {
+ color: $pink;
+ }
+ .sub {
+ font-style: italic;
+ color: $grey;
+ }
+ h1{
+ font-size: 2.5em;
+ font-style: italic;
+ font-weight: normal;
+ color: $pink;
+ transition-property: size;
+ transition-duration: .2s;
+ margin: -18px 0 0 0;
+ }
+ h2 {
+ transition-property: size;
+ transition-duration: .2s;
+ color: #91EFFF;
+ margin: 0;
+ }
}
-}
+ #spaceTakerUpper {
+ height: 100vh;
+ background: $greybg;
+ } //small and large classes are applied to #top
+ .small {
+ background: $greybg;
+ .hideable {
+ display: none;
+ opacity: 0;
+ }
+ img {
+ max-width: 200px;
+ }
+ h2 {
+ font-size: 1.2em;
+ margin: 5px;
+ }
+ p {
+ margin: 5px;
+ }
+ }
-/*
+ .large {
+ img {
+ width: 100%;
+ max-width: 380px;
+ }
+ .hideable {
+ opacity: 1;
+ }
+ h2 {
+ font-size: 1.3em;
+ }
+ } //TODO: fix
+ .nojs {
+ body {
+ background: white;
+ }
+ #mast {
+ background: $greybg;
+ }
+ }
+ /*
* standalone elements
*/
-// the standard section element
-.slide {
- @extend .reset;
- padding: 0px;
- width: 100%;
- /* width wrapping */
- div {
- @extend .widthCenter;
+ // the standard section element
+ .slide {
+ @extend .reset;
+ padding: 0px;
+ width: 100%;
+ /* width wrapping */
+ &>div {
+ @extend .widthCenter;
+ }
/* Project bits */
//TODO: un-nest this stuff
.project {
@@ -148,7 +146,7 @@ body {
background: white;
margin-bottom: 20px;
.cover {
- height: 15em;
+ height: 14em;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
@@ -158,6 +156,9 @@ body {
height: 100%;
width: 100%;
}
+ @include respond-to($width) {
+ height: 45vw;
+ }
}
.details {
padding: 1em 1em 0 1em;
@@ -229,81 +230,80 @@ body {
}
}
}
- }
- table {
- line-height: 1.3;
- margin: 0;
- padding: 2px;
- border-spacing: 0;
- border-collapse: collapse;
- vertical-align: text-top;
- }
- ul {
- margin: 5px;
- }
- p {
- text-indent: 2em;
- }
- h1 {
- font-size: 2em;
- font-style: italic; // font-weight: 700;
- margin-top: 1.7em;
- }
- .grid {
- // columns: 2 auto;
- }
- @include textElements() {
- @extend .widthCenter;
- }
- @include respond-to($width) {
- .widthCenter {
- margin-left: 12px;
- margin-right: 12px;
+ table {
+ line-height: 1.3;
+ margin: 0;
+ padding: 2px;
+ border-spacing: 0;
+ border-collapse: collapse;
+ vertical-align: text-top;
}
- div {
- // margin: auto;
- // padding: 0;
- .project {
- width: 90%;
- float: none;
- display: block;
- margin: 0 0 .5em 5%;
- ;
- }
+ ul {
+ margin: 5px;
}
- @include textElements() {
- // margin-right: .8em;
- // margin-left: .8em;
+ p {
+ text-indent: 2em;
+ }
+ h1 {
+ font-size: 2em;
+ font-style: italic; // font-weight: 700;
+ margin-top: 1.7em;
}
.grid {
- // columns: 1 auto;
+ // columns: 2 auto;
+ }
+ @include textElements() {
+ @extend .widthCenter;
+ }
+ @include respond-to($width) {
+ .widthCenter {
+ margin-left: 12px;
+ margin-right: 12px;
+ }
+ div {
+ // margin: auto;
+ // padding: 0;
+ .project {
+ width: 90%;
+ float: none;
+ display: block;
+ margin: 0 0 .5em 5%;
+ ;
+ }
+ }
+ @include textElements() {
+ // margin-right: .8em;
+ // margin-left: .8em;
+ }
+ .grid {
+ // columns: 1 auto;
+ }
}
}
-}
-#skilltablebutton {
- text-decoration: underline;
- font-size: 1.1em;
- font-style: italic;
- font-weight: normal;
-}
-
-#scrollprompt {
- // @include prefix(animation, 1s 1.1s 1 prompt)
- @include prefix(animation, 2s ease fadeIn)
-}
-
-@include respond-to($width) {
- #mast {
- padding-left: 1em;
+ #skilltablebutton {
+ text-decoration: underline;
+ font-size: 1.1em;
+ font-style: italic;
+ font-weight: normal;
}
-}
-h2 {
- // font-weight: normal;
- font-style: italic;
-}
+ #scrollprompt {
+ // @include prefix(animation, 1s 1.1s 1 prompt)
+ @include prefix(animation, 2s ease fadeIn)
+ }
-a {
- transition-duration: .2s;
-}
\ No newline at end of file
+ @include respond-to($width) {
+ #mast {
+ padding-left: 1em;
+ }
+ }
+
+ h2 {
+ // font-weight: normal;
+ font-style: italic;
+ }
+
+ a {
+ transition-duration: .2s;
+ }
\ No newline at end of file