Improve CSS.
- Compactify bib tables. - Use class/id/span/divs properly. - Slightly increase padding. - Right-justify links to publications.
This commit is contained in:
Justin Hsu
parent
2b6c7abf39
commit
3e3443573a
|
|
@ -5,8 +5,8 @@ $acc-color: #C51162;
|
||||||
|
|
||||||
$base-font-size: 16px;
|
$base-font-size: 16px;
|
||||||
|
|
||||||
$main-pad: 0.75em;
|
$main-pad: 1.0em;
|
||||||
$mini-pad: 0.25em;
|
$mini-pad: 0.5em;
|
||||||
|
|
||||||
@mixin flexed {
|
@mixin flexed {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -40,7 +40,7 @@ body {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
#container {
|
||||||
@include flexed;
|
@include flexed;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
@ -58,7 +58,7 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container > * {
|
#container > * {
|
||||||
width: $break-point;
|
width: $break-point;
|
||||||
margin: $main-pad;
|
margin: $main-pad;
|
||||||
}
|
}
|
||||||
|
|
@ -70,7 +70,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Top banner.
|
// Top banner.
|
||||||
.header {
|
#header {
|
||||||
box-shadow: 0 10px 5px -10px;
|
box-shadow: 0 10px 5px -10px;
|
||||||
background: $main-color;
|
background: $main-color;
|
||||||
padding: $main-pad;
|
padding: $main-pad;
|
||||||
|
|
@ -82,7 +82,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
// The top box. About, picture, and contact.
|
// The top box. About, picture, and contact.
|
||||||
.topbox {
|
#topbox {
|
||||||
@include flexed;
|
@include flexed;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
@ -90,7 +90,7 @@ body {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar > * {
|
#topbar > * {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
h1 h2 {
|
h1 h2 {
|
||||||
color: $main-color;
|
color: $main-color;
|
||||||
|
|
@ -98,7 +98,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Bar containing picture and contact info.
|
// Bar containing picture and contact info.
|
||||||
.bio-bar {
|
#bio-bar {
|
||||||
@include flexed;
|
@include flexed;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
@ -106,23 +106,23 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: $break-point) {
|
@media all and (max-width: $break-point) {
|
||||||
.topbox {
|
#topbox {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bio-bar {
|
#bio-bar {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.picture {
|
#picture {
|
||||||
// @include flex(1 1);
|
// @include flex(1 1);
|
||||||
padding: $main-pad;
|
padding: $main-pad;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact {
|
#contact {
|
||||||
// @include flex(1 1);
|
// @include flex(1 1);
|
||||||
padding: $main-pad;
|
padding: $main-pad;
|
||||||
|
|
||||||
|
|
@ -132,7 +132,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: $mini-pad;
|
padding: $mini-pad;
|
||||||
}
|
}
|
||||||
|
|
@ -144,14 +144,14 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Two section headers, different bg colors.
|
// Two section headers, different bg colors.
|
||||||
#mini-header {
|
.mini-header {
|
||||||
background: $main-color;
|
background: $main-color;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
padding: $mini-pad;
|
padding: $mini-pad;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mini-header-alt {
|
.mini-header-alt {
|
||||||
background: $acc-color;
|
background: $acc-color;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
|
|
@ -159,7 +159,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Main unit for sections.
|
// Main unit for sections.
|
||||||
#card {
|
.card {
|
||||||
padding: $main-pad;
|
padding: $main-pad;
|
||||||
box-shadow: 0 11px 5px -10px;
|
box-shadow: 0 11px 5px -10px;
|
||||||
background: white;
|
background: white;
|
||||||
|
|
@ -194,17 +194,27 @@ body {
|
||||||
padding: $mini-pad;
|
padding: $mini-pad;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bibcell {
|
.bibtable {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse:separate;
|
||||||
|
border-spacing:0 $mini-pad;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bibcell {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
padding: $mini-pad;
|
padding: $mini-pad;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Latex parsed as {H} turns into spans, make these bold.
|
// Latex parsed as {H} turns into spans, make these bold.
|
||||||
#titlecell span {
|
.titlecell, .titlecell *, .yearcell {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.linkscell {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
footer * {
|
footer * {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: $main-color;
|
background: $main-color;
|
||||||
|
|
|
||||||
32
index.html
32
index.html
|
|
@ -36,24 +36,24 @@ type='text/css'>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="container" id="flexed">
|
<div id="container" class="flexed">
|
||||||
<div class="header">
|
<div id="header">
|
||||||
<h1> Justin Hsu </h1>
|
<h1> Justin Hsu </h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="topbox" id="card">
|
<div id="topbox" class="card">
|
||||||
<div class="bio-bar">
|
<div id="bio-bar">
|
||||||
<div class="picture">
|
<div id="picture">
|
||||||
<img src="images/round.png" width="160" height="222">
|
<img src="images/round.png" width="160" height="222">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="contact">
|
<div id="contact">
|
||||||
$contacts$
|
$contacts$
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="about">
|
<div id="about">
|
||||||
<div id="mini-header">
|
<div class="mini-header">
|
||||||
About Me
|
About Me
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -61,38 +61,38 @@ type='text/css'>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="card">
|
<div class="card">
|
||||||
<div id="mini-header-alt">
|
<div class="mini-header-alt">
|
||||||
News
|
News
|
||||||
</div>
|
</div>
|
||||||
$news$
|
$news$
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="card">
|
<div class="card">
|
||||||
<div id="mini-header">
|
<div class="mini-header">
|
||||||
Bibliography
|
Bibliography
|
||||||
</div>
|
</div>
|
||||||
<section id="drafts">
|
<section id="drafts">
|
||||||
<h2>Drafts</h2><p>
|
<h2>Drafts</h2><p>
|
||||||
<table>
|
<table class="bibtable">
|
||||||
$drafts$
|
$drafts$
|
||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
<section id="thesis">
|
<section id="thesis">
|
||||||
<h2>Thesis</h2><p>
|
<h2>Thesis</h2><p>
|
||||||
<table>
|
<table class="bibtable">
|
||||||
$thesis$
|
$thesis$
|
||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
<section id="invite">
|
<section id="invite">
|
||||||
<h2>Invited Chapters and Surveys</h2><p>
|
<h2>Invited Chapters and Surveys</h2><p>
|
||||||
<table>
|
<table class="bibtable">
|
||||||
$invite$
|
$invite$
|
||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
<section id="pubs">
|
<section id="pubs">
|
||||||
<h2>Refereed Publications</h2><p>
|
<h2>Refereed Publications</h2><p>
|
||||||
<table>
|
<table class="bibtable">
|
||||||
$pubs$
|
$pubs$
|
||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,33 @@
|
||||||
<tr>
|
<tr>
|
||||||
<!-- $identifier$ -->
|
<!-- $identifier$ -->
|
||||||
<td id="bibcell"> <b> $year$ </b> </td>
|
<td class="bibcell">
|
||||||
<td id="bibcell">
|
<span class="yearcell"> $year$ </span>
|
||||||
<div id="titlecell"> <b> $title$ </b> </div>
|
</td>
|
||||||
$author$. </br>
|
<td class="bibcell">
|
||||||
|
<span class="titlecell">
|
||||||
|
$title$
|
||||||
|
</span>
|
||||||
|
<span class="linkscell">
|
||||||
|
$if(poster)$
|
||||||
|
[<a href="$poster$">Poster</a>]
|
||||||
|
$endif$
|
||||||
|
$if(slides)$
|
||||||
|
[<a href="$slides$">Slides</a>]
|
||||||
|
$endif$
|
||||||
|
$if(url)$
|
||||||
|
[<a href="$url$">Paper</a>]
|
||||||
|
$endif$
|
||||||
|
</span> <br>
|
||||||
|
$author$. <br>
|
||||||
$if(booktitle)$
|
$if(booktitle)$
|
||||||
In $booktitle$.</br>
|
In $booktitle$.<br>
|
||||||
$endif$
|
$endif$
|
||||||
$if(journal)$
|
$if(journal)$
|
||||||
$journal$, $volume$($number$).</br>
|
$journal$, $volume$($number$).<br>
|
||||||
$endif$
|
$endif$
|
||||||
$if(school)$
|
$if(school)$
|
||||||
$school$.</br>
|
$school$.<br>
|
||||||
$endif$
|
$endif$
|
||||||
$if(url)$
|
|
||||||
[<a href="$url$">Paper</a>]
|
|
||||||
$endif$
|
|
||||||
$if(slides)$
|
|
||||||
[<a href="$slides$">Slides</a>]
|
|
||||||
$endif$
|
|
||||||
$if(poster)$
|
|
||||||
[<a href="$poster$">Poster</a>]
|
|
||||||
$endif$
|
|
||||||
<br>
|
|
||||||
$if(note)$
|
$if(note)$
|
||||||
$note$ <br>
|
$note$ <br>
|
||||||
$endif$
|
$endif$
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue