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

24
css/style.scss
View File

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

1
templates/main.html
View File

@ -3,6 +3,7 @@
<head>
<title> Justin Hsu </title>
<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'
rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet'