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

173
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,82 +224,84 @@ body {
.slide { .slide {
padding: 0px; padding: 0px;
width: 100%; width: 100%;
/* width wrapping */ } /* width wrapping */
.slide div { /* Project bits */ }
/* Project bits */ } .slide .project {
.slide div .project { width: 390px;
width: 390px; padding: 0 0 1em 0;
padding: 0 0 1em 0; border: 1px solid #eee;
border: 1px solid #eee; border-radius: 5px;
border-radius: 5px; overflow: hidden;
overflow: hidden; box-shadow: 1px 1px 3px #ddd;
box-shadow: 1px 1px 3px #ddd; background: white;
background: white; margin-bottom: 20px; }
margin-bottom: 20px; } .slide .project .cover {
.slide div .project .cover { height: 14em;
height: 15em; 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 .project .cover video {
.slide div .project .cover video { height: 100%;
height: 100%; width: 100%; }
width: 100%; } @media (max-width: 800px) {
.slide div .project .details { .slide .project .cover {
padding: 1em 1em 0 1em; } height: 45vw; } }
.slide div .project .details h2 { .slide .project .details {
line-height: 1; padding: 1em 1em 0 1em; }
margin: 0 0 .5em 0; } .slide .project .details h2 {
.slide div .project .details p { line-height: 1;
margin: 0 0 .5em 0; } margin: 0 0 .5em 0; }
.slide div .project .details .tag { .slide .project .details p {
float: left; margin: 0 0 .5em 0; }
padding: 0 .3em 0 .3em; .slide .project .details .tag {
background: #f3f3f3; float: left;
border: 1px solid #ddd; padding: 0 .3em 0 .3em;
margin: .2em; background: #f3f3f3;
border-radius: 5px; } border: 1px solid #ddd;
.slide div .project .details .cat { margin: .2em;
background: #B7EEFF; border-radius: 5px; }
border: 1px solid #8AC9DD; } .slide .project .details .cat {
.slide div .project .details .award { background: #B7EEFF;
float: right; border: 1px solid #8AC9DD; }
background: none; .slide .project .details .award {
border: none; float: right;
margin: 0 0 .5em .5em; } background: none;
.slide div .project .details .award div { border: none;
display: inline-block; margin: 0 0 .5em .5em; }
text-align: center; .slide .project .details .award div {
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;
display: inline-block; display: inline-block;
content: ""; text-align: center;
width: 1.6em; vertical-align: middle;
height: 3em; padding: 0; }
position: relative; } .slide .project .details .award div h3 {
.slide div .project .details .award::before { margin: 0;
background-image: url(../images/laurelleft.png); padding: 0;
left: .09em; } font-size: 1.4em;
.slide div .project .details .award::after { line-height: 1;
background-image: url(../images/laurelright.png); font-weight: normal;
right: .11em; } 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 { .slide table {
line-height: 1.3; line-height: 1.3;
margin: 0; margin: 0;
@ -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

382
sass/style.scss
View File

@ -1,141 +1,139 @@
//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 {
@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 { 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 { #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 * 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,81 +230,80 @@ body {
} }
} }
} }
} table {
table { line-height: 1.3;
line-height: 1.3; margin: 0;
margin: 0; padding: 2px;
padding: 2px; border-spacing: 0;
border-spacing: 0; border-collapse: collapse;
border-collapse: collapse; vertical-align: text-top;
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;
} }
div { ul {
// margin: auto; margin: 5px;
// padding: 0;
.project {
width: 90%;
float: none;
display: block;
margin: 0 0 .5em 5%;
;
}
} }
@include textElements() { p {
// margin-right: .8em; text-indent: 2em;
// margin-left: .8em; }
h1 {
font-size: 2em;
font-style: italic; // font-weight: 700;
margin-top: 1.7em;
} }
.grid { .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 { #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 {
// @include prefix(animation, 1s 1.1s 1 prompt)
@include prefix(animation, 2s ease fadeIn)
}
@include respond-to($width) {
#mast {
padding-left: 1em;
} }
}
h2 { #scrollprompt {
// font-weight: normal; // @include prefix(animation, 1s 1.1s 1 prompt)
font-style: italic; @include prefix(animation, 2s ease fadeIn)
} }
a { @include respond-to($width) {
transition-duration: .2s; #mast {
} padding-left: 1em;
}
}
h2 {
// font-weight: normal;
font-style: italic;
}
a {
transition-duration: .2s;
}