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
Download Patch File Download Diff File Expand all files Collapse all files

382
sass/style.scss
View File

@@ -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;
}
@include respond-to($width) {
#mast {
padding-left: 1em;
}
}
h2 {
// font-weight: normal;
font-style: italic;
}
a {
transition-duration: .2s;
}