chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix iphone style lol

Browse Source
This commit is contained in:
Chuck Dries 2017-11-01 23:00:09 -07:00
parent 68e7b3f762
commit f05ea4ae3d
3 changed files with 283 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
css/style.css
View File

@ -114,12 +114,12 @@
-o-transform: none; -o-transform: none;
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; padding: 0;
margin: 0; margin: 0;
text-indent: 0; } text-indent: 0; }
.widthCenter, .slide div, .slide p, .widthCenter, .slide > div, .slide p,
.slide h1, .slide h1,
.slide h2, .slide h2,
.slide h3, .slide h3,
@ -145,7 +145,6 @@
*/ */
body { body {
font-family: 'Playfair Display', serif; font-family: 'Playfair Display', serif;
font-size: 1.1em;
line-height: 1.6; } line-height: 1.6; }
#top { #top {
@ -160,7 +159,6 @@ body {
font-weight: normal; } font-weight: normal; }
#mast { #mast {
font-size: 1.1em;
margin-top: 10px; margin-top: 10px;
background: none; background: none;
line-height: 1.2; line-height: 1.2;
@ -173,12 +171,19 @@ body {
#mast .sub { #mast .sub {
font-style: italic; font-style: italic;
color: #ccc; } color: #ccc; }
#mast img { #mast h1 {
transition-duration: .2s; } 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 { #mast h2 {
transition-property: size; transition-property: size;
transition-duration: .2s; transition-duration: .2s;
color: #91EFFF; } color: #91EFFF;
margin: 0; }
#spaceTakerUpper { #spaceTakerUpper {
height: 100vh; height: 100vh;
@ -219,10 +224,9 @@ body {
.slide { .slide {
padding: 0px; padding: 0px;
width: 100%; width: 100%;
/* width wrapping */ } /* width wrapping */
.slide div {
/* Project bits */ } /* Project bits */ }
.slide div .project { .slide .project {
width: 390px; width: 390px;
padding: 0 0 1em 0; padding: 0 0 1em 0;
border: 1px solid #eee; border: 1px solid #eee;
@ -231,54 +235,57 @@ body {
box-shadow: 1px 1px 3px #ddd; box-shadow: 1px 1px 3px #ddd;
background: white; background: white;
margin-bottom: 20px; } margin-bottom: 20px; }
.slide div .project .cover { .slide .project .cover {
height: 15em; height: 14em;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
margin: 0px; margin: 0px;
padding: 1em; } padding: 1em; }
.slide div .project .cover video { .slide .project .cover video {
height: 100%; height: 100%;
width: 100%; } width: 100%; }
.slide div .project .details { @media (max-width: 800px) {
.slide .project .cover {
height: 45vw; } }
.slide .project .details {
padding: 1em 1em 0 1em; } padding: 1em 1em 0 1em; }
.slide div .project .details h2 { .slide .project .details h2 {
line-height: 1; line-height: 1;
margin: 0 0 .5em 0; } margin: 0 0 .5em 0; }
.slide div .project .details p { .slide .project .details p {
margin: 0 0 .5em 0; } margin: 0 0 .5em 0; }
.slide div .project .details .tag { .slide .project .details .tag {
float: left; float: left;
padding: 0 .3em 0 .3em; padding: 0 .3em 0 .3em;
background: #f3f3f3; background: #f3f3f3;
border: 1px solid #ddd; border: 1px solid #ddd;
margin: .2em; margin: .2em;
border-radius: 5px; } border-radius: 5px; }
.slide div .project .details .cat { .slide .project .details .cat {
background: #B7EEFF; background: #B7EEFF;
border: 1px solid #8AC9DD; } border: 1px solid #8AC9DD; }
.slide div .project .details .award { .slide .project .details .award {
float: right; float: right;
background: none; background: none;
border: none; border: none;
margin: 0 0 .5em .5em; } margin: 0 0 .5em .5em; }
.slide div .project .details .award div { .slide .project .details .award div {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
padding: 0; } padding: 0; }
.slide div .project .details .award div h3 { .slide .project .details .award div h3 {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 1.4em; font-size: 1.4em;
line-height: 1; line-height: 1;
font-weight: normal; font-weight: normal;
font-style: italic; } font-style: italic; }
.slide div .project .details .award div p { .slide .project .details .award div p {
font-size: .8em; } font-size: .8em; }
.slide div .project .details .award::before, .slide .project .details .award::before,
.slide div .project .details .award::after { .slide .project .details .award::after {
vertical-align: middle; vertical-align: middle;
background-image: url(../images/laurelleft.png); background-image: url(../images/laurelleft.png);
background-size: contain; background-size: contain;
@ -289,10 +296,10 @@ body {
width: 1.6em; width: 1.6em;
height: 3em; height: 3em;
position: relative; } position: relative; }
.slide div .project .details .award::before { .slide .project .details .award::before {
background-image: url(../images/laurelleft.png); background-image: url(../images/laurelleft.png);
left: .09em; } left: .09em; }
.slide div .project .details .award::after { .slide .project .details .award::after {
background-image: url(../images/laurelright.png); background-image: url(../images/laurelright.png);
right: .11em; } right: .11em; }
.slide table { .slide table {
@ -311,7 +318,7 @@ body {
font-style: italic; font-style: italic;
margin-top: 1.7em; } margin-top: 1.7em; }
@media (max-width: 800px) { @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-left: 12px;
margin-right: 12px; } margin-right: 12px; }
.slide div .project { .slide div .project {

4
index.html
View File

@ -25,8 +25,8 @@
<div style="display:table;width:100%;height: 100%"> <div style="display:table;width:100%;height: 100%">
<div style="display:table-cell;vertical-align:middle;"> <div style="display:table-cell;vertical-align:middle;">
<div id="mast"> <div id="mast">
<h1 style="display:none;">Chuck Dries</h1> <h1>Chuck Dries</h1>
<img src="images/cd.png" alt="Chuck Dries"> <!-- <img src="images/cd.png" alt="Chuck Dries"> -->
<h2 class="tagline">Programmer <h2 class="tagline">Programmer
<span style="font-style: normal">/</span> Student <span style="font-style: normal">/</span> Student
<span style="font-style: normal">/</span> Friendly dude <span style="font-style: normal">/</span> Friendly dude

116
sass/style.scss
View File

@ -1,41 +1,37 @@
//setup //setup
@import 'responsive'; @import 'responsive';
@import 'animations'; @import 'animations';
$width: 800px; $width: 800px;
$grey: #ccc; $grey: #ccc;
$pink: #ed1a76; $pink: #ed1a76;
$blue: #91EFFF; $blue: #91EFFF;
$greybg: #202020; $greybg: #202020;
.reset { .reset {
padding: 0; padding: 0;
margin: 0; margin: 0;
text-indent: 0; text-indent: 0;
} }
.widthCenter { .widthCenter {
max-width: $width; max-width: $width;
margin: auto; margin: auto;
} }
/*
/*
* Covers for projects section * Covers for projects section
*/ */
@import 'covers'; @import 'covers';
/*
/*
* sections * sections
*/ */
body { body {
@extend .reset; // font-family: 'Nota-serif', serif; @extend .reset; // font-family: 'Nota-serif', serif;
font-family: 'Playfair Display', serif; font-family: 'Playfair Display', serif;
font-size: 1.1em;
line-height: 1.6; // margin-bottom: 700px; line-height: 1.6; // margin-bottom: 700px;
} }
#top { #top {
padding-top: 10px; padding-top: 10px;
width: 100%; width: 100%;
position: fixed; // background: black; position: fixed; // background: black;
@ -47,11 +43,11 @@ body {
h2 { h2 {
font-weight: normal; font-weight: normal;
} }
} }
#mast { #mast {
font-size: 1.1em;
margin-top: 10px; margin-top: 10px;
// margin-top:0;
background: none; background: none;
line-height: 1.2; line-height: 1.2;
color: white; color: white;
@ -66,23 +62,28 @@ body {
font-style: italic; font-style: italic;
color: $grey; color: $grey;
} }
img { h1{
font-size: 2.5em;
font-style: italic;
font-weight: normal;
color: $pink;
transition-property: size;
transition-duration: .2s; transition-duration: .2s;
margin: -18px 0 0 0;
} }
h2 { h2 {
transition-property: size; transition-property: size;
transition-duration: .2s; transition-duration: .2s;
color: #91EFFF; color: #91EFFF;
margin: 0;
}
} }
}
#spaceTakerUpper { #spaceTakerUpper {
height: 100vh; height: 100vh;
background: $greybg; background: $greybg;
} } //small and large classes are applied to #top
.small {
//small and large classes are applied to #top
.small {
background: $greybg; background: $greybg;
.hideable { .hideable {
display: none; display: none;
@ -98,9 +99,9 @@ body {
p { p {
margin: 5px; margin: 5px;
} }
} }
.large { .large {
img { img {
width: 100%; width: 100%;
max-width: 380px; max-width: 380px;
@ -111,31 +112,28 @@ body {
h2 { h2 {
font-size: 1.3em; font-size: 1.3em;
} }
} } //TODO: fix
.nojs {
//TODO: fix
.nojs {
body { body {
background: white; background: white;
} }
#mast { #mast {
background: $greybg; background: $greybg;
} }
} }
/*
/*
* standalone elements * standalone elements
*/ */
// the standard section element // the standard section element
.slide { .slide {
@extend .reset; @extend .reset;
padding: 0px; padding: 0px;
width: 100%; width: 100%;
/* width wrapping */ /* width wrapping */
div { &>div {
@extend .widthCenter; @extend .widthCenter;
}
/* Project bits */ /* Project bits */
//TODO: un-nest this stuff //TODO: un-nest this stuff
.project { .project {
@ -148,7 +146,7 @@ body {
background: white; background: white;
margin-bottom: 20px; margin-bottom: 20px;
.cover { .cover {
height: 15em; height: 14em;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -158,6 +156,9 @@ body {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
@include respond-to($width) {
height: 45vw;
}
} }
.details { .details {
padding: 1em 1em 0 1em; padding: 1em 1em 0 1em;
@ -229,7 +230,6 @@ body {
} }
} }
} }
}
table { table {
line-height: 1.3; line-height: 1.3;
margin: 0; margin: 0;
@ -279,31 +279,31 @@ body {
// columns: 1 auto; // columns: 1 auto;
} }
} }
} }
#skilltablebutton { #skilltablebutton {
text-decoration: underline; text-decoration: underline;
font-size: 1.1em; font-size: 1.1em;
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
} }
#scrollprompt { #scrollprompt {
// @include prefix(animation, 1s 1.1s 1 prompt) // @include prefix(animation, 1s 1.1s 1 prompt)
@include prefix(animation, 2s ease fadeIn) @include prefix(animation, 2s ease fadeIn)
} }
@include respond-to($width) { @include respond-to($width) {
#mast { #mast {
padding-left: 1em; padding-left: 1em;
} }
} }
h2 { h2 {
// font-weight: normal; // font-weight: normal;
font-style: italic; font-style: italic;
} }
a { a {
transition-duration: .2s; transition-duration: .2s;
} }