justhsu
/
justin-site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix CSS to work on mobile screens.

This commit is contained in:
Justin Hsu 2015-01-05 21:36:11 -08:00
parent 45b881de51
commit 166ce8b6af
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/style.scss
View File

@ -15,6 +15,8 @@ $acc-color: #C51162;
@include establish-baseline; @include establish-baseline;
$text-pad: rhythm(0.5);
@mixin flexed { @mixin flexed {
@include display-flex; @include display-flex;
@include flex-wrap(nowrap); @include flex-wrap(nowrap);
@ -61,8 +63,7 @@ body {
.container > * { .container > * {
width: $break-point; width: $break-point;
margin: rhythm(0.5); margin: $text-pad;
padding: rhythm(0.5);
} }
@media all and (max-width: 700px) { @media all and (max-width: 700px) {
@ -120,12 +121,12 @@ body {
.picture { .picture {
@include flex(1 1); @include flex(1 1);
padding: rhythm(0.5); padding: $text-pad;
} }
.contact { .contact {
@include flex(1 1); @include flex(1 1);
padding: rhythm(0.5); padding: $text-pad;
h3 { h3 {
color: $main-color; color: $main-color;
@ -135,6 +136,7 @@ body {
// About cell ~ 2x sidebar in normal mode // About cell ~ 2x sidebar in normal mode
.about { .about {
@include flex(2 1); @include flex(2 1);
padding: $text-pad;
} }
@media all and (max-width: $break-point) { @media all and (max-width: $break-point) {
@ -148,19 +150,19 @@ body {
background: $main-color; background: $main-color;
color: white; color: white;
@include adjust-font-size-to(3em,1/2); @include adjust-font-size-to(3em,1/2);
padding: rhythm(0.5); padding: $text-pad;
} }
#mini-header-alt { #mini-header-alt {
background: $acc-color; background: $acc-color;
color: white; color: white;
@include adjust-font-size-to(3em,1/2); @include adjust-font-size-to(3em,1/2);
padding: rhythm(0.5); padding: $text-pad;
} }
// Main unit for sections. // Main unit for sections.
#card { #card {
padding: rhythm(0.5); padding: $text-pad;
@include single-box-shadow(0, 11px, 5px, -10px); @include single-box-shadow(0, 11px, 5px, -10px);
background: white; background: white;
h1 { h1 {
@ -187,12 +189,16 @@ body {
code { code {
font-family: 'Inconsolata', monospace; font-family: 'Inconsolata', monospace;
font-weight: 500; font-weight: 500;
};
} }
#drafts, #conference-publications {
padding: $text-pad;
} }
#bibcell { #bibcell {
vertical-align: top; vertical-align: top;
padding: rhythm(1/2); padding: $text-pad;
} }
// Latex parsed as {H} turns into spans, make these bold. // Latex parsed as {H} turns into spans, make these bold.

1
templates/main.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title> Justin Hsu </title> <title> Justin Hsu </title>
<link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto:500,300,300italic' <link href='http://fonts.googleapis.com/css?family=Roboto:500,300,300italic'
rel='stylesheet' type='text/css'> rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet'