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 2022-04-07 19:25:43 -04:00
parent 2b6c7abf39
commit 3e3443573a
3 changed files with 66 additions and 51 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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>
<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(url)$
[<a href="$url$">Paper</a>]
$endif$
</span> <br>
$author$. <br>
$if(booktitle)$
In $booktitle$.</br>
In $booktitle$.<br>
$endif$
$if(journal)$
$journal$, $volume$($number$).</br>
$journal$, $volume$($number$).<br>
$endif$
$if(school)$
$school$.</br>
$school$.<br>
$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)$
$note$ <br>
$endif$