Reduce font size across site
- change footer background to line above Resume: - add LinkedIn - fix Unicode expand icon not showing on mobile
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
|
||||
// base colors {{{ //
|
||||
|
||||
$base02: #515151;
|
||||
$base03: #747369;
|
||||
$base04: #a09f93;
|
||||
$base05: #d3d0c8;
|
||||
@@ -34,30 +35,36 @@ $base-dark-orange: #d27b53;
|
||||
|
||||
// mixins {{{ //
|
||||
|
||||
$max-page-width: 52em;
|
||||
// $max-page-width: 52em;
|
||||
$max-page-width: 45em;
|
||||
$phone-width: 800px;
|
||||
|
||||
@mixin side-padding-rem($n) {
|
||||
@mixin side-padding-rem($n) {// {{{
|
||||
padding-left: $n * 1rem;
|
||||
padding-right: $n * 1rem;
|
||||
}
|
||||
}// }}}
|
||||
|
||||
@mixin vert-padding-rem($n) {
|
||||
@mixin side-margin-em($n) {// {{{
|
||||
margin-left: $n * 1em;
|
||||
margin-right: $n * 1em;
|
||||
}// }}}
|
||||
|
||||
@mixin vert-padding-rem($n) {// {{{
|
||||
padding-top: $n * 1rem;
|
||||
padding-bottom: $n * 1rem;
|
||||
}
|
||||
}// }}}
|
||||
|
||||
@mixin vert-margin-em($n) {
|
||||
margin-top: $n * 1em;
|
||||
margin-bottom: $n * 1em;
|
||||
}
|
||||
@mixin vert-margin-rem($n) {// {{{
|
||||
margin-top: $n * 1rem;
|
||||
margin-bottom: $n * 1rem;
|
||||
}// }}}
|
||||
|
||||
@mixin auto-center() {
|
||||
@mixin auto-center() {// {{{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}// }}}
|
||||
|
||||
@mixin article-body() {
|
||||
@mixin article-body() {// {{{
|
||||
/* background-color: #e6e6fa; */
|
||||
background-color: #cbbeb5;
|
||||
color: #2d2d2d;
|
||||
@@ -69,9 +76,9 @@ $phone-width: 800px;
|
||||
@media (max-width: $max-page-width) {
|
||||
@include side-padding-rem(2);
|
||||
}
|
||||
}
|
||||
}// }}}
|
||||
|
||||
@mixin a-color($color) {
|
||||
@mixin a-color($color) {// {{{
|
||||
a {
|
||||
color: $color;
|
||||
&:visited {
|
||||
@@ -81,7 +88,7 @@ $phone-width: 800px;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}// }}}
|
||||
|
||||
// }}} mixins //
|
||||
|
||||
@@ -97,7 +104,8 @@ body {
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
line-height: 1.5;
|
||||
font-size: 100%;
|
||||
// font-size: 100%;
|
||||
font-size: 15px;
|
||||
/* font-family: 'Source Code Pro', monospace; */
|
||||
font-family: 'Hack', monospace;
|
||||
display: flex;
|
||||
@@ -153,41 +161,62 @@ header {
|
||||
}
|
||||
|
||||
footer {
|
||||
// base {{{ //
|
||||
|
||||
@include a-color(#747369);
|
||||
// background-color: #393939;
|
||||
// max-width: $max-page-width;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
$vertical-margin: .2em;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
font-size: 0.8em;
|
||||
color: #747369;
|
||||
// bottom: 0;
|
||||
// position: absolute;
|
||||
// width: 100%;
|
||||
|
||||
// }}} base //
|
||||
|
||||
.container {
|
||||
background-color: #393939;
|
||||
max-width: 62em;
|
||||
.container {// {{{
|
||||
// max-width: $max-page-width;
|
||||
// min-width: $max-page-width;
|
||||
@include auto-center();
|
||||
@include vert-padding-rem(.1);
|
||||
}
|
||||
// @include vert-padding-rem(.1);
|
||||
@include side-padding-rem(0);
|
||||
|
||||
$vertical-margin: .2em;
|
||||
|
||||
#copyright {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
@include a-color(#747369);
|
||||
}
|
||||
|
||||
#social-icons {
|
||||
position: relative;
|
||||
padding-left: 3px;
|
||||
|
||||
img {
|
||||
height: 1.5em;
|
||||
@include vert-margin-em(.2);
|
||||
padding-left: .5em;
|
||||
opacity: .6;
|
||||
#footer-row {
|
||||
// background-color: #393939;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-content {
|
||||
$side-padding: 2.5em;
|
||||
@include vert-padding-rem(.35);
|
||||
border-style: solid;
|
||||
border-width: 1px 0 0 0;
|
||||
border-color: rgba(81, 81, 81, .75);
|
||||
|
||||
#copyright {
|
||||
// padding-left: .85em;
|
||||
padding-left: $side-padding;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
@include a-color(#747369);
|
||||
}
|
||||
|
||||
#social-icons {
|
||||
position: relative;
|
||||
padding-right: $side-padding;
|
||||
// padding-right: .9em;
|
||||
|
||||
img {
|
||||
height: 1.5em;
|
||||
@include vert-margin-rem(.2);
|
||||
padding-left: .5em;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}// }}}
|
||||
|
||||
@media (max-width: $max-page-width) {
|
||||
margin-top: 0;
|
||||
@@ -215,8 +244,20 @@ p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1 { font-size: 2rem }
|
||||
h2 { font-size: 1.5rem }
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
|
||||
@media (max-width: $phone-width) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
|
||||
@media (max-width: $phone-width) {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
h3 { font-size: 1.25rem }
|
||||
h4 { font-size: 1rem }
|
||||
h5 { font-size: .875rem }
|
||||
@@ -243,10 +284,6 @@ header {// {{{
|
||||
}
|
||||
}// }}}
|
||||
|
||||
footer {// {{{
|
||||
@include a-color(#747369);
|
||||
}// }}}
|
||||
|
||||
.page-not-found {// {{{
|
||||
h1 {
|
||||
text-align: center;
|
||||
@@ -273,11 +310,12 @@ footer {// {{{
|
||||
|
||||
#homepage {// {{{
|
||||
#about {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.1rem;
|
||||
|
||||
h2 {
|
||||
margin-top: 1.25rem;
|
||||
font-size: 2rem;
|
||||
// font-size: 2rem;
|
||||
font-size: 1.9rem;
|
||||
color: $base-yellow;
|
||||
text-align: center;
|
||||
|
||||
@@ -445,78 +483,152 @@ footer {// {{{
|
||||
}// }}}
|
||||
|
||||
#contact-info {// {{{
|
||||
@include vert-padding-rem(0.5);
|
||||
display: flex;
|
||||
align-content: center;
|
||||
@include side-margin-em(0);
|
||||
// @include vert-padding-rem(0.5);
|
||||
@include a-color($base-sky-blue);
|
||||
// min-width: $max-page-width;
|
||||
@media (min-width: 1200px) {
|
||||
.container{
|
||||
min-width: $max-page-width;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
flex-grow: 1;
|
||||
font-size: .9em;
|
||||
|
||||
.row {
|
||||
// flex-grow: 1;
|
||||
color: $base05;
|
||||
|
||||
img {
|
||||
height: 1em;
|
||||
// @media (max-width: $phone-width) {
|
||||
// height: 1.5em;
|
||||
// }
|
||||
}
|
||||
|
||||
div[class^="col"] {
|
||||
@include side-padding-rem(0);
|
||||
// text-align: center;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.url-info {
|
||||
margin-left: 5px;
|
||||
// position: relative;
|
||||
// left: -8px;
|
||||
@media (max-width: $phone-width) {
|
||||
// display: none;
|
||||
// font-size: 10px;
|
||||
font-size: .8em;
|
||||
}
|
||||
}
|
||||
|
||||
#email {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#website {
|
||||
text-align: right;
|
||||
}
|
||||
}// }}}
|
||||
|
||||
#resume {// {{{
|
||||
a {
|
||||
a {// {{{
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}// }}}
|
||||
|
||||
h1 {
|
||||
h1 {// {{{
|
||||
color: $base-orange;
|
||||
}
|
||||
margin-top: 1rem;
|
||||
|
||||
.date {
|
||||
@media (max-width: $phone-width) {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
}// }}}
|
||||
h2 {// {{{
|
||||
color: $base-orange;
|
||||
margin-top: .5rem;
|
||||
|
||||
@media (max-width: $phone-width) {
|
||||
font-size: 1.2em;
|
||||
margin-top: .75rem;
|
||||
}
|
||||
}// }}}
|
||||
|
||||
.date {// {{{
|
||||
padding-top: .8em;
|
||||
float: right;
|
||||
color: $base03;
|
||||
}
|
||||
|
||||
@media (max-width: $phone-width) {
|
||||
padding-top: 0em;
|
||||
}
|
||||
}// }}}
|
||||
|
||||
.project {
|
||||
@include vert-padding-rem(.2);
|
||||
|
||||
h2 {
|
||||
color: $base-sky-blue;
|
||||
display: inline;
|
||||
#projects {// {{{
|
||||
h1 {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1.2em;
|
||||
}
|
||||
.project {// {{{
|
||||
@include vert-padding-rem(.2);
|
||||
|
||||
.project-link {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
h2 {
|
||||
color: $base-sky-blue;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline;
|
||||
background-color: transparent;
|
||||
img {
|
||||
height: 1.2em;
|
||||
}
|
||||
|
||||
.project-link {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.down-triangle {
|
||||
// fill: blue;
|
||||
height: 1.2em;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.btn {// {{{
|
||||
display: inline;
|
||||
background-color: transparent;
|
||||
margin-bottom: 5px;
|
||||
padding-left: 7px;
|
||||
|
||||
&:focus, &:active {
|
||||
outline: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}// }}}
|
||||
|
||||
// }}}
|
||||
|
||||
// [id^="details-"] {
|
||||
// margin-top: .5em;
|
||||
// }
|
||||
}
|
||||
}// }}}
|
||||
|
||||
#education {// {{{
|
||||
.institution {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 5px;
|
||||
padding-left: 7px;
|
||||
|
||||
&:focus, &:active {
|
||||
outline: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// [id^="details-"] {
|
||||
// margin-top: .5em;
|
||||
// }
|
||||
.date {
|
||||
padding-top: 0;
|
||||
}
|
||||
}// }}}
|
||||
|
||||
@media (max-width: $phone-width) {
|
||||
font-size: 14px;
|
||||
// font-size: 1em;
|
||||
}
|
||||
|
||||
}// }}}
|
||||
@@ -577,12 +689,12 @@ footer {// {{{
|
||||
|
||||
h1.site-title {// {{{
|
||||
text-align: center;
|
||||
/* font-size: 3.5em; */
|
||||
font-size: 4.8em;
|
||||
font-size: 4.2em;
|
||||
// color: #66cccc;
|
||||
color: $base05;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
// margin-top: 1rem;
|
||||
// margin-bottom: 0.75rem;
|
||||
@include vert-margin-rem(.75);
|
||||
|
||||
@include a-color($base-sky-blue);
|
||||
a {
|
||||
@@ -594,15 +706,22 @@ h1.site-title {// {{{
|
||||
}
|
||||
|
||||
@media (max-width: $phone-width) {
|
||||
// font-size: 3em;
|
||||
font-size: 3.5em;
|
||||
@include vert-margin-rem(.3);
|
||||
// font-size: 2.5em;
|
||||
font-size: 2em;
|
||||
// font-size: 2em;
|
||||
|
||||
.surrounding {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}// }}}
|
||||
|
||||
.hero-logo img {
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
// display: none;
|
||||
// width: $max-page-width;
|
||||
}
|
||||
|
||||
.nav-bar {// {{{
|
||||
|
||||
Reference in New Issue
Block a user