Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Adding in progress fixes and updates.

  • Loading branch information...
commit 2059611fe39da6f8944a839b980d29bd88912445 1 parent 44056f9
Jameson Tyler authored
306 assets/css/master.css
View
@@ -92,15 +92,26 @@ footer {
overflow: hidden; }
.center {
- margin: 0 auto;
+ margin-right: auto !important;
+ margin-left: auto !important;
width: 70%;
- text-align: center; }
+ text-align: center;
+ float: none !important; }
+ .center.ten, .center.twenty, .center.twentyfive, .center.thirty, .center.thirtythree, .center.forty, .center.fifty, .center.sixty, .center.sixtysix, .center.seventy, .center.seventyfive, .center.eighty, .center.ninety {
+ width: inherit;
+ text-align: inherit; }
+
+.left {
+ margin-left: 8% !important; }
.right {
float: right; }
.right > ul {
text-align: right; }
+.inline {
+ display: inline-block; }
+
.grid .block {
float: left; }
@@ -113,7 +124,7 @@ footer {
.grid .ninety.only {
margin-left: 13.6%;
margin-right: 0; }
- .grid .ninety.firstOnly {
+ .grid .ninety.firstonly {
margin-left: 90.4%;
margin-right: 9.6%; }
.grid .eighty {
@@ -123,7 +134,7 @@ footer {
.grid .eighty.only {
margin-left: 23.2%;
margin-right: 0; }
- .grid .eighty.firstOnly {
+ .grid .eighty.firstonly {
margin-left: 80.8%;
margin-right: 19.2%; }
.grid .seventyfive {
@@ -133,7 +144,7 @@ footer {
.grid .seventyfive.only {
margin-left: 28%;
margin-right: 0; }
- .grid .seventyfive.firstOnly {
+ .grid .seventyfive.firstonly {
margin-left: 76%;
margin-right: 24%; }
.grid .seventy {
@@ -143,7 +154,7 @@ footer {
.grid .seventy.only {
margin-left: 32.8%;
margin-right: 0; }
- .grid .seventy.firstOnly {
+ .grid .seventy.firstonly {
margin-left: 71.2%;
margin-right: 28.8%; }
.grid .sixtysix {
@@ -153,7 +164,7 @@ footer {
.grid .sixtysix.only {
margin-left: 36%;
margin-right: 0; }
- .grid .sixtysix.firstOnly {
+ .grid .sixtysix.firstonly {
margin-left: 68%;
margin-right: 32%; }
.grid .sixty {
@@ -163,7 +174,7 @@ footer {
.grid .sixty.only {
margin-left: 42.4%;
margin-right: 0; }
- .grid .sixty.firstOnly {
+ .grid .sixty.firstonly {
margin-left: 61.6%;
margin-right: 38.4%; }
.grid .fifty {
@@ -173,7 +184,7 @@ footer {
.grid .fifty.only {
margin-left: 52%;
margin-right: 0; }
- .grid .fifty.firstOnly {
+ .grid .fifty.firstonly {
margin-left: 52%;
margin-right: 48%; }
.grid .forty {
@@ -183,7 +194,7 @@ footer {
.grid .forty.only {
margin-left: 61.6%;
margin-right: 0; }
- .grid .forty.firstOnly {
+ .grid .forty.firstonly {
margin-left: 42.4%;
margin-right: 57.6%; }
.grid .thirtythree {
@@ -193,7 +204,7 @@ footer {
.grid .thirtythree.only {
margin-left: 68%;
margin-right: 0; }
- .grid .thirtythree.firstOnly {
+ .grid .thirtythree.firstonly {
margin-left: 36%;
margin-right: 64%; }
.grid .thirty {
@@ -203,7 +214,7 @@ footer {
.grid .thirty.only {
margin-left: 71.2%;
margin-right: 0; }
- .grid .thirty.firstOnly {
+ .grid .thirty.firstonly {
margin-left: 32.8%;
margin-right: 67.2%; }
.grid .twentyfive {
@@ -213,7 +224,7 @@ footer {
.grid .twentyfive.only {
margin-left: 76%;
margin-right: 0; }
- .grid .twentyfive.firstOnly {
+ .grid .twentyfive.firstonly {
margin-left: 28%;
margin-right: 72%; }
.grid .twenty {
@@ -223,7 +234,7 @@ footer {
.grid .twenty.only {
margin-left: 80.8%;
margin-right: 0; }
- .grid .twenty.firstOnly {
+ .grid .twenty.firstonly {
margin-left: 23.2%;
margin-right: 76.8%; }
.grid .ten {
@@ -233,34 +244,22 @@ footer {
.grid .ten.only {
margin-left: 90.4%;
margin-right: 0; }
- .grid .ten.firstOnly {
+ .grid .ten.firstonly {
margin-left: 13.6%;
margin-right: 86.4%; }
-.grid .ninety,
-.grid .eighty,
-.grid .seventyfive,
-.grid .seventy,
-.grid .sixty,
-.grid .sixtysix,
-.grid .fifty,
-.grid .forty,
-.grid .thirtythree,
-.grid .thirty,
-.grid .twentyfive,
-.grid .twenty,
-.grid .ten {
- margin-right: 4%;
- margin-left: 0; }
-.grid .fifty:nth-child(2n),
-.grid .thirtythree:nth-child(3n),
-.grid .twentyfive:nth-child(4n),
-.grid .twenty:nth-child(5n),
-.grid .ten:nth-child(6n),
-.grid .ten + .ninety,
+.grid .fifty:nth-of-type(2n+2),
+.grid .thirtythree:nth-of-type(3n+3),
+.grid .twentyfive:nth-of-type(4n+4),
+.grid .twenty:nth-child(5n+5),
+.grid .ten:nth-of-type(10n+10),
+.grid .fifty2:nth-of-type(2n+2),
+.grid .thirtythree2:nth-of-type(3n+3),
+.grid .twentyfive2:nth-of-type(4n+4)
+.ten + .ninety,
.grid .twenty + .eighty,
.grid .twentyfive + .seventyfive,
.grid .thirty + .seventy,
-.grid .thirtythree + .sixtythree,
+.grid .thirtythree + .sixtysix,
.grid .forty + .sixty,
.grid .sixtysix + .thirtythree,
.grid .sixty + .forty,
@@ -270,9 +269,94 @@ footer {
.grid .ninety + .ten {
margin-right: 0;
margin-left: 0; }
+.grid .fifty:nth-of-type(2n),
+.grid .thirtythree:nth-of-type(3n+1),
+.grid .twentyfive:nth-of-type(4n+1),
+.grid .twenty:nth-child(5n+1) {
+ clear: left; }
.grid .ten + .ten + .eighty {
margin-right: 0;
margin-left: 0; }
+.grid .ninety,
+.grid .eighty,
+.grid .seventyfive,
+.grid .seventy,
+.grid .sixty,
+.grid .sixtysix,
+.grid .fifty,
+.grid .forty,
+.grid .thirtythree,
+.grid .thirty,
+.grid .twentyfive,
+.grid .twenty,
+.grid .ten {
+ margin-right: 4%;
+ margin-left: 0; }
+.grid .ninety.first {
+ margin-left: 90.4%; }
+.grid .eighty.first {
+ margin-left: 80.8%; }
+.grid .seventyfive.first {
+ margin-left: 76%; }
+.grid .seventy.first {
+ margin-left: 71.2%; }
+.grid .sixtysix.first {
+ margin-left: 68%; }
+.grid .sixty.first {
+ margin-left: 61.6%; }
+.grid .fifty.first {
+ margin-left: 52%; }
+.grid .forty.first {
+ margin-left: 42.4%; }
+.grid .thirtythree.first {
+ margin-left: 36%; }
+.grid .thirty.first {
+ margin-left: 32.8%; }
+.grid .twentyfive.first {
+ margin-left: 28%; }
+.grid .twenty.first {
+ margin-left: 23.2%; }
+.grid .ten.first {
+ margin-left: 13.6%; }
+.grid .ninety.only {
+ margin-left: 13.6%;
+ margin-right: 0; }
+.grid .eighty.only {
+ margin-left: 23.2%;
+ margin-right: 0; }
+.grid .seventyfive.only {
+ margin-left: 28%;
+ margin-right: 0; }
+.grid .seventy.only {
+ margin-left: 32.8%;
+ margin-right: 0; }
+.grid .sixtysix.only {
+ margin-left: 36%;
+ margin-right: 0; }
+.grid .sixty.only {
+ margin-left: 42.4%;
+ margin-right: 0; }
+.grid .fifty.only {
+ margin-left: 52%;
+ margin-right: 0; }
+.grid .forty.only {
+ margin-left: 61.6%;
+ margin-right: 0; }
+.grid .thirtythree.only {
+ margin-left: 68%;
+ margin-right: 0; }
+.grid .thirty.only {
+ margin-left: 71.2%;
+ margin-right: 0; }
+.grid .twentyfive.only {
+ margin-left: 76%;
+ margin-right: 0; }
+.grid .twenty.only {
+ margin-left: 80.8%;
+ margin-right: 0; }
+.grid .ten.only {
+ margin-left: 90.4%;
+ margin-right: 0; }
.not-desktop {
display: none; }
@@ -283,8 +367,7 @@ footer {
.phone {
display: none; }
-/* Desktop */
-@media (min-width: 1024px) {
+@media (min-width: 75em) {
body {
font-size: 134%; }
@@ -309,7 +392,7 @@ footer {
.grid .desktop-to-ninety.only {
margin-left: 13.6%;
margin-right: 0; }
- .grid .desktop-to-ninety.firstOnly {
+ .grid .desktop-to-ninety.firstonly {
margin-left: 90.4%;
margin-right: 9.6%; }
.grid .desktop-to-eighty {
@@ -319,7 +402,7 @@ footer {
.grid .desktop-to-eighty.only {
margin-left: 23.2%;
margin-right: 0; }
- .grid .desktop-to-eighty.firstOnly {
+ .grid .desktop-to-eighty.firstonly {
margin-left: 80.8%;
margin-right: 19.2%; }
.grid .desktop-to-seventyfive {
@@ -329,7 +412,7 @@ footer {
.grid .desktop-to-seventyfive.only {
margin-left: 28%;
margin-right: 0; }
- .grid .desktop-to-seventyfive.firstOnly {
+ .grid .desktop-to-seventyfive.firstonly {
margin-left: 76%;
margin-right: 24%; }
.grid .desktop-to-seventy {
@@ -339,7 +422,7 @@ footer {
.grid .desktop-to-seventy.only {
margin-left: 32.8%;
margin-right: 0; }
- .grid .desktop-to-seventy.firstOnly {
+ .grid .desktop-to-seventy.firstonly {
margin-left: 71.2%;
margin-right: 28.8%; }
.grid .desktop-to-sixtysix {
@@ -349,7 +432,7 @@ footer {
.grid .desktop-to-sixtysix.only {
margin-left: 36%;
margin-right: 0; }
- .grid .desktop-to-sixtysix.firstOnly {
+ .grid .desktop-to-sixtysix.firstonly {
margin-left: 68%;
margin-right: 32%; }
.grid .desktop-to-sixty {
@@ -359,7 +442,7 @@ footer {
.grid .desktop-to-sixty.only {
margin-left: 42.4%;
margin-right: 0; }
- .grid .desktop-to-sixty.firstOnly {
+ .grid .desktop-to-sixty.firstonly {
margin-left: 61.6%;
margin-right: 38.4%; }
.grid .desktop-to-fifty {
@@ -369,7 +452,7 @@ footer {
.grid .desktop-to-fifty.only {
margin-left: 52%;
margin-right: 0; }
- .grid .desktop-to-fifty.firstOnly {
+ .grid .desktop-to-fifty.firstonly {
margin-left: 52%;
margin-right: 48%; }
.grid .desktop-to-forty {
@@ -379,7 +462,7 @@ footer {
.grid .desktop-to-forty.only {
margin-left: 61.6%;
margin-right: 0; }
- .grid .desktop-to-forty.firstOnly {
+ .grid .desktop-to-forty.firstonly {
margin-left: 42.4%;
margin-right: 57.6%; }
.grid .desktop-to-thirtythree {
@@ -389,7 +472,7 @@ footer {
.grid .desktop-to-thirtythree.only {
margin-left: 68%;
margin-right: 0; }
- .grid .desktop-to-thirtythree.firstOnly {
+ .grid .desktop-to-thirtythree.firstonly {
margin-left: 36%;
margin-right: 64%; }
.grid .desktop-to-thirty {
@@ -399,7 +482,7 @@ footer {
.grid .desktop-to-thirty.only {
margin-left: 71.2%;
margin-right: 0; }
- .grid .desktop-to-thirty.firstOnly {
+ .grid .desktop-to-thirty.firstonly {
margin-left: 32.8%;
margin-right: 67.2%; }
.grid .desktop-to-twentyfive {
@@ -409,7 +492,7 @@ footer {
.grid .desktop-to-twentyfive.only {
margin-left: 76%;
margin-right: 0; }
- .grid .desktop-to-twentyfive.firstOnly {
+ .grid .desktop-to-twentyfive.firstonly {
margin-left: 28%;
margin-right: 72%; }
.grid .desktop-to-twenty {
@@ -419,7 +502,7 @@ footer {
.grid .desktop-to-twenty.only {
margin-left: 80.8%;
margin-right: 0; }
- .grid .desktop-to-twenty.firstOnly {
+ .grid .desktop-to-twenty.firstonly {
margin-left: 23.2%;
margin-right: 76.8%; }
.grid .desktop-to-ten {
@@ -429,7 +512,7 @@ footer {
.grid .desktop-to-ten.only {
margin-left: 90.4%;
margin-right: 0; }
- .grid .desktop-to-ten.firstOnly {
+ .grid .desktop-to-ten.firstonly {
margin-left: 13.6%;
margin-right: 86.4%; }
.grid .desktop-to-ninety,
@@ -452,8 +535,7 @@ footer {
.grid .desktop-to-twenty:nth-child(5n),
.grid .desktopt-to-ten:nth-child(6n) {
margin-right: 0; } }
-/* Tablet Up To Desktop */
-@media (min-width: 768px) and (max-width: 1023px) {
+@media (min-width: 64.375em) and (max-width: 74.937em) {
.tablet {
display: block; }
@@ -484,7 +566,7 @@ footer {
.grid .tablet-to-ninety.only {
margin-left: 13.6%;
margin-right: 0; }
- .grid .tablet-to-ninety.firstOnly {
+ .grid .tablet-to-ninety.firstonly {
margin-left: 90.4%;
margin-right: 9.6%; }
.grid .tablet-to-eighty {
@@ -494,7 +576,7 @@ footer {
.grid .tablet-to-eighty.only {
margin-left: 23.2%;
margin-right: 0; }
- .grid .tablet-to-eighty.firstOnly {
+ .grid .tablet-to-eighty.firstonly {
margin-left: 80.8%;
margin-right: 19.2%; }
.grid .tablet-to-seventyfive {
@@ -504,7 +586,7 @@ footer {
.grid .tablet-to-seventyfive.only {
margin-left: 28%;
margin-right: 0; }
- .grid .tablet-to-seventyfive.firstOnly {
+ .grid .tablet-to-seventyfive.firstonly {
margin-left: 76%;
margin-right: 24%; }
.grid .tablet-to-seventy {
@@ -514,7 +596,7 @@ footer {
.grid .tablet-to-seventy.only {
margin-left: 32.8%;
margin-right: 0; }
- .grid .tablet-to-seventy.firstOnly {
+ .grid .tablet-to-seventy.firstonly {
margin-left: 71.2%;
margin-right: 28.8%; }
.grid .tablet-to-sixtysix {
@@ -524,7 +606,7 @@ footer {
.grid .tablet-to-sixtysix.only {
margin-left: 36%;
margin-right: 0; }
- .grid .tablet-to-sixtysix.firstOnly {
+ .grid .tablet-to-sixtysix.firstonly {
margin-left: 68%;
margin-right: 32%; }
.grid .tablet-to-sixty {
@@ -534,7 +616,7 @@ footer {
.grid .tablet-to-sixty.only {
margin-left: 42.4%;
margin-right: 0; }
- .grid .tablet-to-sixty.firstOnly {
+ .grid .tablet-to-sixty.firstonly {
margin-left: 61.6%;
margin-right: 38.4%; }
.grid .tablet-to-fifty {
@@ -544,7 +626,7 @@ footer {
.grid .tablet-to-fifty.only {
margin-left: 52%;
margin-right: 0; }
- .grid .tablet-to-fifty.firstOnly {
+ .grid .tablet-to-fifty.firstonly {
margin-left: 52%;
margin-right: 48%; }
.grid .tablet-to-forty {
@@ -554,7 +636,7 @@ footer {
.grid .tablet-to-forty.only {
margin-left: 61.6%;
margin-right: 0; }
- .grid .tablet-to-forty.firstOnly {
+ .grid .tablet-to-forty.firstonly {
margin-left: 42.4%;
margin-right: 57.6%; }
.grid .tablet-to-thirtythree {
@@ -564,7 +646,7 @@ footer {
.grid .tablet-to-thirtythree.only {
margin-left: 68%;
margin-right: 0; }
- .grid .tablet-to-thirtythree.firstOnly {
+ .grid .tablet-to-thirtythree.firstonly {
margin-left: 36%;
margin-right: 64%; }
.grid .tablet-to-thirty {
@@ -574,7 +656,7 @@ footer {
.grid .tablet-to-thirty.only {
margin-left: 71.2%;
margin-right: 0; }
- .grid .tablet-to-thirty.firstOnly {
+ .grid .tablet-to-thirty.firstonly {
margin-left: 32.8%;
margin-right: 67.2%; }
.grid .tablet-to-twentyfive {
@@ -584,7 +666,7 @@ footer {
.grid .tablet-to-twentyfive.only {
margin-left: 76%;
margin-right: 0; }
- .grid .tablet-to-twentyfive.firstOnly {
+ .grid .tablet-to-twentyfive.firstonly {
margin-left: 28%;
margin-right: 72%; }
.grid .tablet-to-twenty {
@@ -594,7 +676,7 @@ footer {
.grid .tablet-to-twenty.only {
margin-left: 80.8%;
margin-right: 0; }
- .grid .tablet-to-twenty.firstOnly {
+ .grid .tablet-to-twenty.firstonly {
margin-left: 23.2%;
margin-right: 76.8%; }
.grid .tablet-to-ten {
@@ -604,7 +686,7 @@ footer {
.grid .tablet-to-ten.only {
margin-left: 90.4%;
margin-right: 0; }
- .grid .tablet-to-ten.firstOnly {
+ .grid .tablet-to-ten.firstonly {
margin-left: 13.6%;
margin-right: 86.4%; }
.grid .tablet-to-ninety,
@@ -629,8 +711,7 @@ footer {
.grid .tablet-to-ten:nth-child(6n) {
margin-right: 0;
margin-left: 0; } }
-/* Tablet Down To Phone */
-@media (max-width: 767px) {
+@media (max-width: 64.312em) {
body {
font-size: 112.5%; }
@@ -676,7 +757,7 @@ footer {
.grid .phone-to-ninety.only {
margin-left: 13.6%;
margin-right: 0; }
- .grid .phone-to-ninety.firstOnly {
+ .grid .phone-to-ninety.firstonly {
margin-left: 90.4%;
margin-right: 9.6%; }
.grid .phone-to-eighty {
@@ -686,7 +767,7 @@ footer {
.grid .phone-to-eighty.only {
margin-left: 23.2%;
margin-right: 0; }
- .grid .phone-to-eighty.firstOnly {
+ .grid .phone-to-eighty.firstonly {
margin-left: 80.8%;
margin-right: 19.2%; }
.grid .phone-to-seventyfive {
@@ -696,7 +777,7 @@ footer {
.grid .phone-to-seventyfive.only {
margin-left: 28%;
margin-right: 0; }
- .grid .phone-to-seventyfive.firstOnly {
+ .grid .phone-to-seventyfive.firstonly {
margin-left: 76%;
margin-right: 24%; }
.grid .phone-to-seventy {
@@ -706,7 +787,7 @@ footer {
.grid .phone-to-seventy.only {
margin-left: 32.8%;
margin-right: 0; }
- .grid .phone-to-seventy.firstOnly {
+ .grid .phone-to-seventy.firstonly {
margin-left: 71.2%;
margin-right: 28.8%; }
.grid .phone-to-sixtysix {
@@ -716,7 +797,7 @@ footer {
.grid .phone-to-sixtysix.only {
margin-left: 36%;
margin-right: 0; }
- .grid .phone-to-sixtysix.firstOnly {
+ .grid .phone-to-sixtysix.firstonly {
margin-left: 68%;
margin-right: 32%; }
.grid .phone-to-sixty {
@@ -726,7 +807,7 @@ footer {
.grid .phone-to-sixty.only {
margin-left: 42.4%;
margin-right: 0; }
- .grid .phone-to-sixty.firstOnly {
+ .grid .phone-to-sixty.firstonly {
margin-left: 61.6%;
margin-right: 38.4%; }
.grid .phone-to-fifty {
@@ -736,7 +817,7 @@ footer {
.grid .phone-to-fifty.only {
margin-left: 52%;
margin-right: 0; }
- .grid .phone-to-fifty.firstOnly {
+ .grid .phone-to-fifty.firstonly {
margin-left: 52%;
margin-right: 48%; }
.grid .phone-to-forty {
@@ -746,7 +827,7 @@ footer {
.grid .phone-to-forty.only {
margin-left: 61.6%;
margin-right: 0; }
- .grid .phone-to-forty.firstOnly {
+ .grid .phone-to-forty.firstonly {
margin-left: 42.4%;
margin-right: 57.6%; }
.grid .phone-to-thirtythree {
@@ -756,7 +837,7 @@ footer {
.grid .phone-to-thirtythree.only {
margin-left: 68%;
margin-right: 0; }
- .grid .phone-to-thirtythree.firstOnly {
+ .grid .phone-to-thirtythree.firstonly {
margin-left: 36%;
margin-right: 64%; }
.grid .phone-to-thirty {
@@ -766,7 +847,7 @@ footer {
.grid .phone-to-thirty.only {
margin-left: 71.2%;
margin-right: 0; }
- .grid .phone-to-thirty.firstOnly {
+ .grid .phone-to-thirty.firstonly {
margin-left: 32.8%;
margin-right: 67.2%; }
.grid .phone-to-twentyfive {
@@ -776,7 +857,7 @@ footer {
.grid .phone-to-twentyfive.only {
margin-left: 76%;
margin-right: 0; }
- .grid .phone-to-twentyfive.firstOnly {
+ .grid .phone-to-twentyfive.firstonly {
margin-left: 28%;
margin-right: 72%; }
.grid .phone-to-twenty {
@@ -786,7 +867,7 @@ footer {
.grid .phone-to-twenty.only {
margin-left: 80.8%;
margin-right: 0; }
- .grid .phone-to-twenty.firstOnly {
+ .grid .phone-to-twenty.firstonly {
margin-left: 23.2%;
margin-right: 76.8%; }
.grid .phone-to-ten {
@@ -796,11 +877,10 @@ footer {
.grid .phone-to-ten.only {
margin-left: 90.4%;
margin-right: 0; }
- .grid .phone-to-ten.firstOnly {
+ .grid .phone-to-ten.firstonly {
margin-left: 13.6%;
margin-right: 86.4%; } }
-/* Phones */
-@media (max-width: 480px) {
+@media (max-width: 37.5em) {
body,
nav li {
font-size: 100%; }
@@ -885,55 +965,33 @@ body {
font-size: 1.5rem;
line-height: 1.4em; }
-body.cv .bio {
- background: #f1e3c6; }
-
-.project-detail h2 {
- font-size: 1.25rem;
- color: black; }
-
-.mile-end {
- background: #E29020;
- color: #2A231F;
- text-shadow: none; }
- .mile-end section {
- background: #E29020; }
- .mile-end h1 {
- text-transform: uppercase;
- font-weight: 200;
- letter-spacing: .05rem; }
- .mile-end p {
- text-indent: 0;
- margin-top: 1rem; }
- .mile-end ul li {
- margin-top: .4rem;
- color: #F0EEEC;
- text-shadow: 0 1px 0 #c18344; }
- .mile-end ul li:first-child {
- margin-top: 0; }
- .mile-end small {
- color: #F0EEEC;
- text-shadow: 0 1px 0 #c18344; }
-
-/* Desktop */
-@media (min-width: 1024px) {
+@media (min-width: 75em) {
body {
font-size: 150%;
width: 70%; } }
-/* Tablet Up To Desktop */
-@media (min-width: 768px) and (max-width: 1023px) {
+@media (min-width: 64.375em) and (max-width: 74.937em) {
body {
font-size: 137.5%;
width: 80%; } }
-/* Tablet Down To Phone */
-@media (max-width: 767px) {
+@media (max-width: 64.312em) {
body {
font-size: 125%;
width: 85%; } }
-/* Phone */
-@media (max-width: 480px) {
+@media (max-width: 37.5em) {
body {
- font-size: 100%;
+ font-size: 112.5%;
width: 90% !important; }
body p {
- width: 90% !important; } }
+ width: 90% !important; }
+
+ h2,
+ h3,
+ h4,
+ h5 {
+ font-size: 1.875em;
+ line-height: 1.3em; }
+
+ h5 {
+ font-size: 1.375em; } }
+body {
+ font-size: 100%; }
74 assets/css/scss/_mixins.scss
View
@@ -7,12 +7,24 @@
font-feature-settings: "liga", "dlig";
}
-// $colCount: 2;
-// $colSpan: 1;
-// $gutter: 4%;
+@mixin border-radius ($radius) {
+ -webkit-border-radius: $radius;
+ -moz-border-radius: $radius;
+ border-radius: $radius;
+}
-// $width: $colSpan * ((100% - $gutter) / $colCount);
+// @mixin column-count () {
+// -webkit-column-count: 5;
+// -webkit-column-gap: .75em;
+// -moz-column-count: 5;
+// -moz-column-gap: .75em;
+// -o-column-count: 5;
+// -o-column-gap: .75em;
+// column-count: 5;
+// column-gap: .75em;
+// }
+// Fix $colSpan and $gutter propogation.
@mixin width($colCount: 2, $colSpan: 1, $gutter: 4%) {
width: $colSpan * ((100% - $gutter) / $colCount);
@@ -27,7 +39,7 @@
margin-right: 0;
}
-@mixin firstOnly($colCount: 2, $colSpan: 1, $gutter: 4%) {
+@mixin firstonly($colCount: 2, $colSpan: 1, $gutter: 4%) {
margin-left: $gutter + ($colSpan * ((100% - $gutter) / $colCount));
margin-right: 100% - ($gutter + ($colSpan * ((100% - $gutter) / $colCount)));
}
@@ -43,53 +55,7 @@
@include only($colCount, $colSpan, $gutter);
}
- &.firstOnly {
- @include firstOnly($colCount, $colSpan, $gutter);
+ &.firstonly {
+ @include firstonly($colCount, $colSpan, $gutter);
}
-}
-
-
-
-
-// width: $colSpan * ((100% - $gutter) / $colCount);
-
-// 100% - $width
-
-// 100% - 2$width + $gutter
-
-
-// @mixin width() {$colSpan * ((100% - $gutter) / $colCount)}
-
-
-
-// @mixin name() {
-// @include columns();
-// }
-
-
-// $gutter: 4%;
-
-
-
-// @mixin columns($colCount, $colSpan: 1) {
-// $width: $colSpan * ((100% - $gutter) / $colCount);
-// width: $width;
-// }
-
-
-
-
-// @mixin first() {
-// @content;
-// $width: ($colSpan * (100% - $gutter) / $colCount);
-// margin-left: 100% - width;
-// }
-
-// .seventy {
-// $colCount: 2;
-// $colSpan: 1
-
-// @include columns();
-
-
-// }
+}
323 assets/css/scss/_proto.scss
View
@@ -18,11 +18,34 @@
}
.center {
- margin: 0 auto;
+ margin-right: auto !important;
+ margin-left: auto !important;
width: $centerWidth;
text-align: center;
+ // Note: Questionable whether to include or not?
+ float: none !important;
+
+ &.ten,
+ &.twenty,
+ &.twentyfive,
+ &.thirty,
+ &.thirtythree,
+ &.forty,
+ &.fifty,
+ &.sixty,
+ &.sixtysix,
+ &.seventy,
+ &.seventyfive,
+ &.eighty,
+ &.ninety {
+ width: inherit;
+ text-align: inherit;
+ }
}
+.left {
+ margin-left: $gutter * 2 !important;
+}
.right {
float: right;
@@ -32,41 +55,36 @@
}
}
+.inline {
+ display: inline-block;
+}
+
.grid .block {
float: left;
}
+
+// Context has to be established for clears to work correctly.
+
.grid {
.hundred {
width: 100%;
}
.ninety {
- @include columns(10, 9) //{
- // // $colCount: 10;
- // // $colSpan: 9;
- // }
+ @include columns(10, 9)
}
.eighty {
- @include columns(5, 4) //{
- // $colCount: 5;
- // $colSpan: 4;
- // }
+ @include columns(5, 4)
}
.seventyfive {
- @include columns(4, 3) //{
- // $colCount: 4;
- // $colSpan: 3;
- // }
+ @include columns(4, 3)
}
.seventy {
- @include columns(10, 7) //{
- // $colCount: 10;
- // $colSpan: 7;
- // }
+ @include columns(10, 7)
}
.sixtysix {
@@ -74,10 +92,7 @@
}
.sixty {
- @include columns(5, 3) //{
- // $colCount: 5;
- // $colSpan: 3;
- // }
+ @include columns(5, 3)
}
.fifty {
@@ -105,10 +120,55 @@
}
.ten {
- @include columns(10) //{
- // $colCount: 10;
- // $colSpan: 1;
- // }
+ @include columns(10);
+ }
+
+ // TODO: nth-match to replace :nth-of-type
+
+ // .desktop-to-ninety:nth-child(6n),
+ // .desktop-to-eighty:nth-child(6n),
+ // .desktop-to-seventyfive:nth-child(6n),
+ // .desktop-to-seventy:nth-child(6n),
+ // .desktop-to-sixty:nth-child(6n),
+ // .desktop-to-sixtysix:nth-child(6n),
+ .fifty:nth-of-type(2n+2),
+ .thirtythree:nth-of-type(3n+3),
+ .twentyfive:nth-of-type(4n+4),
+ .twenty:nth-child(5n+5),
+ .ten:nth-of-type(10n+10),
+ .fifty2:nth-of-type(2n+2),
+ .thirtythree2:nth-of-type(3n+3),
+ .twentyfive2:nth-of-type(4n+4)
+ .ten + .ninety,
+ .twenty + .eighty,
+ .twentyfive + .seventyfive,
+ .thirty + .seventy,
+ .thirtythree + .sixtysix,
+ .forty + .sixty,
+ // .fifty + .fifty,
+ .sixtysix + .thirtythree,
+ .sixty + .forty,
+ .seventy + .thirty,
+ .seventyfive + .twentyfive,
+ .eighty + .twenty,
+ .ninety + .ten {
+ margin-right: 0;
+ margin-left: 0;
+ }
+
+ // Targets the last in a row.
+ .fifty:nth-of-type(2n),
+ .thirtythree:nth-of-type(3n+1),
+ .twentyfive:nth-of-type(4n+1),
+ .twenty:nth-child(5n+1) {
+ clear: left;
+ }
+
+ // Is it worth adding common combinations out to a certain degree of
+ // permutations, or can this be achieved through Sass loops?
+ .ten + .ten + .eighty {
+ margin-right: 0;
+ margin-left: 0;
}
.ninety,
@@ -129,150 +189,114 @@
}
- // // First
- // .ninety.first {
- // @include first(10, 9);
- // }
-
- // .eighty.first {
- // @include first(5, 4);
- // }
-
- // .seventyfive.first {
- // @include first(4, 3);
- // }
+ // First - description here.
- // .seventy.first {
- // @include first(10, 7);
- // }
-
- // .sixtysix.first {
- // @include first(3, 2);
- // }
+ .ninety.first {
+ @include first(10, 9);
+ }
- // .sixty.first {
- // @include first(5, 3);
- // }
+ .eighty.first {
+ @include first(5, 4);
+ }
- // .fifty.first {
- // @include first(2);
- // }
+ .seventyfive.first {
+ @include first(4, 3);
+ }
- // .forty.first {
- // @include first(5, 2);
- // }
+ .seventy.first {
+ @include first(10, 7);
+ }
- // .thirtythree.first {
- // @include first(3);
- // }
+ .sixtysix.first {
+ @include first(3, 2);
+ }
- // .thirty.first {
- // @include first(10, 3);
- // }
+ .sixty.first {
+ @include first(5, 3);
+ }
- // .twentyfive.first {
- // @include first(4);
- // }
+ .fifty.first {
+ @include first(2);
+ }
- // .twenty.first {
- // @include first(5);
- // }
+ .forty.first {
+ @include first(5, 2);
+ }
- // .ten.first {
- // @include first(10);
- // }
+ .thirtythree.first {
+ @include first(3);
+ }
- // // Only
- // .ninety.only {
- // @include only(10, 9);
- // }
+ .thirty.first {
+ @include first(10, 3);
+ }
- // .eighty.only {
- // @include only(5, 4);
- // }
+ .twentyfive.first {
+ @include first(4);
+ }
- // .seventyfive.only {
- // @include only(4, 3);
- // }
+ .twenty.first {
+ @include first(5);
+ }
- // .seventy.only {
- // @include only(10, 7);
- // }
+ .ten.first {
+ @include first(10);
+ }
- // .sixtysix.only {
- // @include only(3, 2);
- // }
- // .sixty.only {
- // @include only(5, 3);
- // }
+ // Only - description here.
- // .fifty.only {
- // @include only(2);
- // }
+ .ninety.only {
+ @include only(10, 9);
+ }
- // .forty.only {
- // @include only(5, 2);
- // }
+ .eighty.only {
+ @include only(5, 4);
+ }
- // .thirtythree.only {
- // @include only(3);
- // }
+ .seventyfive.only {
+ @include only(4, 3);
+ }
- // .thirty.only {
- // @include only(10, 3);
- // }
+ .seventy.only {
+ @include only(10, 7);
+ }
- // .twentyfive.only {
- // @include only(4);
- // }
+ .sixtysix.only {
+ @include only(3, 2);
+ }
- // .twenty.only {
- // @include only(5);
- // }
+ .sixty.only {
+ @include only(5, 3);
+ }
- // .ten.only {
- // @include only(10);
- // }
+ .fifty.only {
+ @include only(2);
+ }
+ .forty.only {
+ @include only(5, 2);
+ }
- // .desktop-to-ninety:nth-child(6n),
- // .desktop-to-eighty:nth-child(6n),
- // .desktop-to-seventyfive:nth-child(6n),
- // .desktop-to-seventy:nth-child(6n),
- // .desktop-to-sixty:nth-child(6n),
- // .desktop-to-sixtysix:nth-child(6n),
- .fifty:nth-child(2n),
- // .desktop-to-forty:nth-child(6n),
- .thirtythree:nth-child(3n),
- // .desktop-to-thirty:nth-child(6n),
- .twentyfive:nth-child(4n),
- .twenty:nth-child(5n),
- .ten:nth-child(6n),
+ .thirtythree.only {
+ @include only(3);
+ }
- .ten + .ninety,
- .twenty + .eighty,
- .twentyfive + .seventyfive,
- .thirty + .seventy,
- .thirtythree + .sixtythree,
- .forty + .sixty,
- .sixtysix + .thirtythree,
- .sixty + .forty,
- .seventy + .thirty,
- .seventyfive + .twentyfive,
- .eighty + .twenty,
- .ninety + .ten {
- margin-right: 0;
- margin-left: 0;
+ .thirty.only {
+ @include only(10, 3);
}
-
- .ten + .ten + .eighty,
- {
- margin-right: 0;
- margin-left: 0;
+
+ .twentyfive.only {
+ @include only(4);
}
+ .twenty.only {
+ @include only(5);
+ }
+ .ten.only {
+ @include only(10);
+ }
}
.not-desktop {
@@ -287,9 +311,9 @@
display: none;
}
-/* Desktop */
+// Desktop
-@media (min-width: $desktopWidth) {
+@media (min-width: $widthLg) {
body {
font-size: 134%;
@@ -401,9 +425,9 @@
}
}
-/* Tablet Up To Desktop */
+// Tablet Up To Desktop
-@media (min-width: $tabletWidth) and (max-width: $desktopWidth - 1px) {
+@media (min-width: $widthMed) and (max-width: $widthLg - 0.063em) {
.tablet {
display: block;
@@ -527,9 +551,9 @@
}
-/* Tablet Down To Phone */
+// Tablet Down To Phone
-@media (max-width:$tabletWidth - 1px) {
+@media (max-width:$widthMed - 0.063em) {
body {
font-size: 112.5%;
@@ -688,10 +712,11 @@
// }
}
}
-
-/* Phones */
-@media (max-width: $phoneWidth) {
+
+// Phone
+
+@media (max-width: $widthSm) {
body,
nav li {
119 assets/css/scss/_responsive-layout.scss
View
@@ -27,93 +27,94 @@ body {
// Page specific
-body.cv {
- .bio {
- background: $cream;
- }
-}
-
-.project-detail {
- h2 {
- font-size: 1.25rem; // 21px
- color: $black;
- }
-}
-
-.mile-end {
- background: #E29020;
- color: #2A231F;
- text-shadow: none;
-
-
- section {
- background: #E29020;
- }
-
- h1 {
- text-transform: uppercase;
- font-weight: 200;
- letter-spacing: .05rem;
- }
-
- p {
- text-indent: 0;
- margin-top: 1rem;
- }
-
- ul li {
- margin-top: .4rem;
- color: #F0EEEC;
- text-shadow: 0 1px 0 darken(#CE9C6A, 10%);
-
- &:first-child {
- margin-top: 0;
- }
- }
-
- small {
- color: #F0EEEC;
- text-shadow: 0 1px 0 darken(#CE9C6A, 10%);
- }
-}
-/* Desktop */
+// Desktop
-@media (min-width: $desktopWidth) {
+@media (min-width: $widthLg) {
body {
font-size: 150%;
width: 70%;
}
}
-/* Tablet Up To Desktop */
+// Tablet Up To Desktop
-@media (min-width: $tabletWidth) and (max-width: $desktopWidth - 1px) {
+@media (min-width: $widthMed) and (max-width: $widthLg - 0.063em) {
body {
font-size: 137.5%;
width: 80%;
}
}
-/* Tablet Down To Phone */
+// Tablet Down To Phone
-@media (max-width: $tabletWidth - 1px) {
+@media (max-width: $widthMed - 0.063em) {
body {
font-size: 125%;
width: 85%;
}
}
-/* Phone */
+// Phone
-@media (max-width:$phoneWidth) {
+@media (max-width:$widthSm) {
body {
- font-size: 100%;
+ font-size: 112.5%;
+ // font-size: 100%;
width: 90% !important;
p {
width: 90% !important;
}
}
-}
+
+ h2,
+ h3,
+ h4,
+ h5 {
+ font-size: 1.875em;
+ line-height: 1.3em;
+ }
+
+ h5 {
+ font-size: 1.375em;
+ }
+}
+
+body {
+
+ font-size: 100%;
+}
+
+
+
+// @media screen and (min-width: 20.000em) { // 320px
+// }@media screen and (min-width: 25.000em) { // 400px
+// }@media screen and (max-width: 37.438em) { // 599px
+// }@media screen and (min-width: 37.500em) { // 600px
+// body {
+// font-size: 112.5%}
+// h2, h3, h4, h5 {
+// font-size: 1.875em;
+// line-height: 1.3em;
+// }
+// h5 {
+// font-size: 1.375em;
+// }
+
+// }@media screen and (min-width: 64.375em) { // 1030px
+// body {
+// font-size: 137.5%}
+
+// }@media screen and (min-width: 75.000em) and (min-height:31.250em) { // 1200px and 500px
+// body {
+// font-size: 150%}
+
+// }@media screen and (min-width: 103.125em) and (min-height:50.000em) { // 1650px and 800px
+// body {
+// font-size: 162.5%}
+// .container {
+// max-width: 1360px;
+
+// }@media screen and (min-height:43.750em) { // 700px
63 assets/css/scss/_variables.scss
View
@@ -12,14 +12,65 @@ $DemoFail: #f0d8d8;
// Media Query
// FIX: These need to be thought over more thoroughly
-$desktopWidth: 1024px;
-$tabletWidth: 768px;
-$phoneWidth: 480px;
+$widthXlg: 103.125em; // 1650px
+$widthLg: 75.000em; // 1200px
+$widthMed: 64.375em; // 1030px
+$widthSm: 37.500em; // 600px
+
+// @media screen and (min-width: 20.000em) { // 320px
+// }@media screen and (min-width: 25.000em) { // 400px
+// }@media screen and (max-width: 37.438em) { // 599px
+// }@media screen and (min-width: 37.500em) { // 600px
+// body {
+// font-size: 112.5%}
+// h2, h3, h4, h5 {
+// font-size: 1.875em;
+// line-height: 1.3em;
+// }
+// h5 {
+// font-size: 1.375em;
+// }
+
+// }@media screen and (min-width: 64.375em) { // 1030px
+// body {
+// font-size: 137.5%}
+
+// }@media screen and (min-width: 75.000em) and (min-height:31.250em) { // 1200px and 500px
+// body {
+// font-size: 150%}
+
+// }@media screen and (min-width: 103.125em) and (min-height:50.000em) { // 1650px and 800px
+// body {
+// font-size: 162.5%}
+// .container {
+// max-width: 1360px;
+
+// }@media screen and (min-height:43.750em) { // 700px
+
+
// FIX: Define these later
-// $heightSm: ;
-// $heightMed: ;
-// $heightLg: ;
+$heightSm: 31.250em; // 500px
+$heightMed: 43.750em; // 700px
+$heightLg: 50.000em; // 800px
+
+
+
+// These are from Kabam
+// Media Query Width
+// FIX: Ensure there isn't a break from
+// $desktopWidth: 76em; // 1024px;
+// $widthLg: 78em;
+// $widthMed: 48em; // 768px;
+// $widthSm: 32em; // 480px;
+
+// Media Query Height
+// $heightSm: 45em; // 720px;
+// $heightMed: 55em; // 880px;
+// $heightLg: 65em; // 1040px;
+// These are from Kabam
+
+
// Colors
$textColor: #333333;
Please sign in to comment.
Something went wrong with that request. Please try again.