justin-site/css/style.scss

225 lines
3.2 KiB
SCSS
Raw Normal View History

2022-04-13 01:19:39 +00:00
$break-point: 45em;
2015-01-05 04:43:45 +00:00
$bg-color: #EEEEEE;
$main-color: #2196F3;
$acc-color: #C51162;
$base-font-size: 16px;
$main-pad: 1.0em;
$mini-pad: 0.5em;
2015-01-06 05:36:11 +00:00
2015-01-05 04:43:45 +00:00
@mixin flexed {
2022-03-18 02:19:41 +00:00
display: flex;
flex-wrap: nowrap;
align-items: center;
}
@mixin hover-link {
text-decoration: none;
&:hover, &:focus {
text-decoration: underline;
}
}
2015-01-05 04:43:45 +00:00
body {
margin: 0;
background: $bg-color;
2022-03-18 02:19:41 +00:00
2015-01-05 04:43:45 +00:00
a {
2022-03-18 02:19:41 +00:00
color: $acc-color;
2015-01-05 04:43:45 +00:00
@include hover-link;
}
}
2015-01-05 04:43:45 +00:00
// Default table style sets the wrong font weight
// if we set this in body.
* {
2022-03-18 02:19:41 +00:00
font-size: $base-font-size;
line-height: 1.5em;
2015-01-05 04:43:45 +00:00
font-family: 'roboto', sans-serif;
font-weight: 300;
}
#container {
2015-01-05 04:43:45 +00:00
@include flexed;
2022-03-18 02:19:41 +00:00
flex-direction: column;
justify-content: flex-start;
2015-01-05 04:43:45 +00:00
h1 {
2022-03-18 02:19:41 +00:00
font-size: 2em;
2015-01-05 04:43:45 +00:00
}
2018-05-03 06:10:48 +00:00
h2 {
2022-03-18 02:19:41 +00:00
font-size: 1.5em;
2015-01-05 04:43:45 +00:00
}
p {
2022-03-18 02:19:41 +00:00
font-size: 1em;
2015-01-05 04:43:45 +00:00
}
}
#container > * {
2015-01-05 04:43:45 +00:00
width: $break-point;
2022-03-18 02:19:41 +00:00
margin: $main-pad;
}
@media all and (max-width: $break-point) {
2022-04-12 17:23:49 +00:00
#container > * {
2015-01-05 04:43:45 +00:00
width: 100%;
}
}
2015-01-05 04:43:45 +00:00
// Top banner.
#header {
2022-03-18 02:19:41 +00:00
box-shadow: 0 10px 5px -10px;
2015-01-05 04:43:45 +00:00
background: $main-color;
2022-03-18 02:19:41 +00:00
padding: $main-pad;
2015-01-05 04:43:45 +00:00
h1 {
2022-03-18 02:19:41 +00:00
font-size: 4em;
2015-01-05 04:43:45 +00:00
color: white;
}
}
2015-01-05 04:43:45 +00:00
// The top box. About, picture, and contact.
#topbox {
2015-01-05 04:43:45 +00:00
@include flexed;
2022-03-18 02:19:41 +00:00
flex-direction: row;
justify-content: space-around;
2022-04-07 22:31:57 +00:00
align-items: flex-start;
2015-01-05 04:43:45 +00:00
background: white;
}
#topbar > * {
2015-01-05 04:43:45 +00:00
max-width: 100%;
h1 h2 {
color: $main-color;
}
}
2015-01-05 04:43:45 +00:00
// Bar containing picture and contact info.
#bio-bar {
2015-01-05 04:43:45 +00:00
@include flexed;
2022-03-18 02:19:41 +00:00
flex-direction: column;
2022-04-07 22:31:57 +00:00
justify-content: flex-start;
2022-03-18 02:19:41 +00:00
order: 2;
}
2015-01-05 04:43:45 +00:00
@media all and (max-width: $break-point) {
#topbox {
2022-03-18 02:19:41 +00:00
flex-direction: column;
align-items: stretch;
}
#bio-bar {
2022-03-18 02:19:41 +00:00
flex-direction: row;
order: 1;
}
}
#picture {
2022-03-18 02:19:41 +00:00
padding: $main-pad;
}
#contact {
2022-03-18 02:19:41 +00:00
padding: $main-pad;
2018-05-03 06:10:48 +00:00
h2 {
2015-01-05 04:43:45 +00:00
color: $main-color;
}
2015-01-05 04:43:45 +00:00
}
2015-01-05 04:43:45 +00:00
// About cell ~ 2x sidebar in normal mode
#about {
2022-03-18 02:19:41 +00:00
padding: $mini-pad;
2015-01-05 04:43:45 +00:00
}
@media all and (max-width: $break-point) {
.about {
2022-03-18 02:19:41 +00:00
order: 2;
}
}
2015-01-05 04:43:45 +00:00
// Two section headers, different bg colors.
.mini-header {
2015-01-05 04:43:45 +00:00
background: $main-color;
color: white;
2022-03-18 02:19:41 +00:00
font-size: 3em;
padding: $mini-pad;
2015-01-05 04:43:45 +00:00
}
.mini-header-alt {
2015-01-05 04:43:45 +00:00
background: $acc-color;
color: white;
2022-03-18 02:19:41 +00:00
font-size: 3em;
padding: $mini-pad;
2015-01-05 04:43:45 +00:00
}
// Main unit for sections.
.card {
2022-03-18 02:19:41 +00:00
padding: $main-pad;
box-shadow: 0 11px 5px -10px;
2015-01-05 04:43:45 +00:00
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;
2015-01-06 05:36:11 +00:00
};
}
#drafts, #thesis, #pubs, #invite {
2022-03-18 02:19:41 +00:00
padding: $mini-pad;
2015-01-05 04:43:45 +00:00
}
.bibtable {
width: 100%;
border-collapse:separate;
border-spacing:0 $mini-pad;
}
.bibcell {
2015-01-05 04:43:45 +00:00
vertical-align: top;
2022-03-18 02:19:41 +00:00
padding: $mini-pad;
2015-01-05 04:43:45 +00:00
}
// Latex parsed as {H} turns into spans, make these bold.
.titlecell, .titlecell *, .yearcell {
2015-01-05 04:43:45 +00:00
font-family: 'Roboto', sans-serif;
font-weight: 500;
}
.linkscell {
float: right;
}
2015-01-05 04:43:45 +00:00
footer * {
text-align: center;
background: $main-color;
margin: 0;
a {
// Turn off colors. Using both colors together looks bad.
2022-03-18 02:19:41 +00:00
color: inherit;
2015-01-05 04:43:45 +00:00
@include hover-link;
}
2022-03-18 02:19:41 +00:00
}