justin-site/css/style.scss

217 lines
3.1 KiB
SCSS
Raw Normal View History

2015-01-05 04:43:45 +00:00
$break-point: 45em;
$bg-color: #EEEEEE;
$main-color: #2196F3;
$acc-color: #C51162;
$base-font-size: 16px;
2022-03-18 02:19:41 +00:00
$main-pad: 0.75em;
$mini-pad: 0.25em;
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 {
@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
}
}
2015-01-05 04:43:45 +00:00
.container > * {
width: $break-point;
2022-03-18 02:19:41 +00:00
margin: $main-pad;
}
@media all and (max-width: $break-point) {
2015-01-05 04:43:45 +00:00
.container > * {
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;
2015-01-05 04:43:45 +00:00
background: white;
}
2015-01-05 04:43:45 +00:00
.topbar > * {
max-width: 100%;
h1 h2 {
color: $main-color;
}
}
2015-01-05 04:43:45 +00:00
// Bar containing picture and contact info.
.bio-bar {
@include flexed;
2022-03-18 02:19:41 +00:00
flex-direction: column;
justify-content: space-around;
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;
}
2015-01-05 04:43:45 +00:00
.bio-bar {
2022-03-18 02:19:41 +00:00
flex-direction: row;
order: 1;
}
}
.picture {
// @include flex(1 1);
2022-03-18 02:19:41 +00:00
padding: $main-pad;
}
.contact {
// @include flex(1 1);
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 {
// @include flex(2 1);
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 {
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 {
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
}
#bibcell {
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 span {
font-family: 'Roboto', sans-serif;
font-weight: 500;
}
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
}