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