justin-site/css/style.scss

228 lines
3.3 KiB
SCSS

$break-point: 600px;
$bg-color: #EEEEEE;
$main-color: #2196F3;
$acc-color: #C51162;
$base-font-size: 16px;
$main-pad: 1.0em;
$mini-pad: 0.5em;
@mixin flexed {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
@mixin hover-link {
text-decoration: none;
&:hover, &:focus {
text-decoration: underline;
}
}
body {
margin: 0;
background: $bg-color;
a {
color: $acc-color;
@include hover-link;
}
}
// Default table style sets the wrong font weight
// if we set this in body.
* {
font-size: $base-font-size;
line-height: 1.5em;
font-family: 'roboto', sans-serif;
font-weight: 300;
}
#container {
@include flexed;
flex-direction: column;
justify-content: flex-start;
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
p {
font-size: 1em;
}
}
#container > * {
width: $break-point;
margin: $main-pad;
}
@media all and (max-width: $break-point) {
#container > * {
width: 100%;
}
}
// Top banner.
#header {
box-shadow: 0 10px 5px -10px;
background: $main-color;
padding: $main-pad;
h1 {
font-size: 4em;
color: white;
}
}
// The top box. About, picture, and contact.
#topbox {
@include flexed;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
background: white;
}
#topbar > * {
max-width: 100%;
h1 h2 {
color: $main-color;
}
}
// Bar containing picture and contact info.
#bio-bar {
@include flexed;
flex-direction: column;
justify-content: flex-start;
order: 2;
}
@media all and (max-width: $break-point) {
#topbox {
flex-direction: column;
align-items: stretch;
}
#bio-bar {
flex-direction: row;
order: 1;
}
}
#picture {
// @include flex(1 1);
padding: $main-pad;
}
#contact {
// @include flex(1 1);
padding: $main-pad;
h2 {
color: $main-color;
}
}
// About cell ~ 2x sidebar in normal mode
#about {
// @include flex(2 1);
padding: $mini-pad;
}
@media all and (max-width: $break-point) {
.about {
order: 2;
}
}
// Two section headers, different bg colors.
.mini-header {
background: $main-color;
color: white;
font-size: 3em;
padding: $mini-pad;
}
.mini-header-alt {
background: $acc-color;
color: white;
font-size: 3em;
padding: $mini-pad;
}
// Main unit for sections.
.card {
padding: $main-pad;
box-shadow: 0 11px 5px -10px;
background: white;
h1 {
background: $main-color;
color: white;
};
h2 {
background: white;
color: $main-color;
};
b, strong {
font-family: 'Roboto', sans-serif;
font-weight: 500;
};
em {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-style: italic;
};
code {
font-family: 'Inconsolata', monospace;
font-weight: 500;
};
}
#drafts, #thesis, #pubs, #invite {
padding: $mini-pad;
}
.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, .titlecell *, .yearcell {
font-family: 'Roboto', sans-serif;
font-weight: 500;
}
.linkscell {
float: right;
}
footer * {
text-align: center;
background: $main-color;
margin: 0;
a {
// Turn off colors. Using both colors together looks bad.
color: inherit;
@include hover-link;
}
}