justin-site/css/style.scss

214 lines
3.6 KiB
SCSS

@import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/typography/links/link-colors";
@import "compass/typography/links/unstyled-link";
@import "compass/typography/links/hover-link";
@import "compass/typography/vertical_rhythm";
$base-font-size: 16px;
$base-line-height: 24px;
$break-point: 45em;
$bg-color: #EEEEEE;
$main-color: #2196F3;
$acc-color: #C51162;
@include establish-baseline;
@mixin flexed {
@include display-flex;
@include flex-wrap(nowrap);
@include align-items(center);
}
body {
margin: 0;
background: $bg-color;
a {
@include hover-link;
@include link-colors($acc-color);
}
}
// Default table style sets the wrong font weight
// if we set this in body.
* {
font-family: 'roboto', sans-serif;
font-weight: 300;
}
.container {
@include flexed;
@include flex-direction(column);
@include justify-content(flex-start);
h1 {
@include adjust-font-size-to(3em, 1/2);
}
h2 {
@include adjust-font-size-to(2em, 1/2);
}
h3 {
@include adjust-font-size-to(1.5em, 1/2);
}
p {
@include adjust-font-size-to(1em);
}
}
.container > * {
width: $break-point;
margin: rhythm(0.5);
padding: rhythm(0.5);
}
@media all and (max-width: 700px) {
.container > * {
width: 100%;
}
}
// Top banner.
.header {
@include single-box-shadow(0, 10px, 5px, -10px);
background: $main-color;
h1 {
@include adjust-font-size-to(5em,1/2);
color: white;
}
}
// The top box. About, picture, and contact.
.topbox {
@include flexed;
@include flex-direction(row);
@include justify-content(space-around);
background: white;
}
.topbar > * {
max-width: 100%;
h1 h2 {
color: $main-color;
}
}
// Bar containing picture and contact info.
.bio-bar {
@include flexed;
@include flex-direction(column);
@include justify-content(space-around);
@include flex(1 1);
@include order(2);
}
@media all and (max-width: $break-point) {
.topbox {
@include flex-direction(column);
@include align-items(stretch);
}
.bio-bar {
@include flex-direction(row);
@include order(1);
}
}
.picture {
@include flex(1 1);
padding: rhythm(0.5);
}
.contact {
@include flex(1 1);
padding: rhythm(0.5);
h3 {
color: $main-color;
}
}
// About cell ~ 2x sidebar in normal mode
.about {
@include flex(2 1);
}
@media all and (max-width: $break-point) {
.about {
@include order(2);
}
}
// Two section headers, different bg colors.
#mini-header {
background: $main-color;
color: white;
@include adjust-font-size-to(3em,1/2);
padding: rhythm(0.5);
}
#mini-header-alt {
background: $acc-color;
color: white;
@include adjust-font-size-to(3em,1/2);
padding: rhythm(0.5);
}
// Main unit for sections.
#card {
padding: rhythm(0.5);
@include single-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;
}
}
#bibcell {
vertical-align: top;
padding: rhythm(1/2);
}
// 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.
@include unstyled-link;
@include hover-link;
}
}