theme.css

/* base variables */

/* Edit the CSS properties in this file to create a custom
   Distill theme. Only edit values in the right column
   for each row; values shown are the CSS defaults.
   To return any property to the default,
   you may set its value to: unset
   All rows must end with a semi-colon.                      */

/* Optional: embed custom fonts here with `@import`          */
/* This must remain at the top of this file.                 */

@import url('https://assets.ipums.org/_css/font-faces.css');

html {
  /*-- Main font sizes --*/
  --title-size:      50px;
  --body-size:       1.06rem;
  --code-size:       14px;
  --aside-size:      12px;
  --fig-cap-size:    13px;
  /*-- Main font colors --*/
  --title-color:     #00263A;
  --header-color:    #00263A;
  --body-color:      #00263A;
  --aside-color:     rgba(0, 0, 0, 0.6);
  --fig-cap-color:   rgba(0, 0, 0, 0.6);
  /*-- Specify custom fonts ~~~ must be imported above   --*/
  --heading-font:    cabrito_sans_norm_regular;
  --mono-font:       Menlo, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  --body-font:       cabrito_sans_norm_regular;
  --navbar-font:     cabrito_sans_norm_regular;  /* websites + blogs only */
}

/*-- ARTICLE METADATA --*/
d-byline {
  --heading-size:    0.6rem;
  --heading-color:   rgba(0, 0, 0, 0.5);
  --body-size:       0.8rem;
  --body-color:      rgba(0, 0, 0, 0.8);
}

/*-- ARTICLE TABLE OF CONTENTS --*/
.d-contents {
  --heading-size:    18px;
  --contents-size:   13px;
}

/*-- ARTICLE APPENDIX --*/
d-appendix {
  --heading-size:    15px;
  --heading-color:   rgba(0, 0, 0, 0.65);
  --text-size:       0.8em;
  --text-color:      rgba(0, 0, 0, 0.5);
}

/*-- WEBSITE HEADER + FOOTER --*/
/* These properties only apply to Distill sites and blogs  */

.distill-site-header {
  --title-size:       18px;
  --text-color:       rgba(255, 255, 255, 0.8);
  --text-size:        15px;
  --hover-color:      white;
  --bkgd-color:       #00263A;
}

.distill-site-footer {
  --text-color:       rgba(255, 255, 255, 0.8);
  --text-size:        15px;
  --hover-color:      white;
  --bkgd-color:       #00263A;
}

/*-- Additional custom styles --*/
/* Add any additional CSS rules below                      */

h1{
  font-family: 'cabrito_sans_norm_regular';
  text-transform: uppercase;
  color: #00263A;
}

d-title h1{
  font-weight: 500;
}

d-article h1{
  font-size: 36px;
  line-height: 1.1em;
  font-weight: 100;
}

d-article h2{
    font-size: 30px;
    font-family: "cabrito_sans_cond_demi";
    text-transform: uppercase;
    color: #00263A;
    font-weight: 100;
}

d-article h3{
  font-size: 26px;
  font-family: 'cabrito_sans_cond_demi';
  color: #00263A;
  margin-top: 1.5rem;
  margin-bottom: 1em;
  font-weight: 100;
}

d-article h4{
  font-size: 24px;
  font-family: 'cabrito_sans_norm_regular';
  color: #00263A;
  text-transform: unset;
  margin-top: 1.5rem;
  margin-bottom: 1em;
  font-weight: 100;
}

d-article h5{
  font-size: 24px;
  font-family: 'cabrito_sans_cond_demi';
  color: #00263A;
  margin-top: 1.5rem;
  margin-bottom: 1em;
  font-weight: 100;
}

d-article li {
    margin-bottom: 0;
    margin-left: 1rem;
    padding-left: 0;
    color: #00263A;
}

d-article table {
    color: #00263A;
}
.d-contents nav > ul > li > a {
    font-weight: 100;
}

body{
  font-family: 'cabrito_subset';
}

b, strong {
  font-family: "cabrito_sans_cond_demi";
  font-weight: 100;
}

p>a {
    color: #98579B
}

li>a {
    color: #98579B;
}

.btn {
    font-family: "cabrito_subset";
    font-size: 16px;
    background-color: #F0E6F0;
    margin-bottom: 20px;
    border-width: 1px;
    padding-top: 6px;
    padding-bottom: 6px;
    cursor: pointer;
}

.distill-site-header .title {
    text-transform: uppercase;
    line-height: 38px;
    vertical-align: middle;
}

.distill-site-header .logo img{
  max-height: 50px; /* Makes logo bigger, default was 20px */
  vertical-align: middle;
  margin-bottom: 0;
}

.distill-site-header .nav-right {
    float: right;
    line-height: 38px;
    vertical-align: middle;
}

.distill-site-header .nav-left {
    display: inline-block;
    line-height: 38px;
    vertical-align: middle;
}

.algolia-autocomplete {
  line-height: 25px;
}

d-article iframe {
    border: 0;
    margin-bottom: 0;
    width: 100%;
}

d-article aside a {
  color: #98579B;
}

@media(max-width: 767px){
  aside{
    width: 50%;
    position: relative;
    left: 25%;
    padding-bottom: 20px;
  }
}

code {
  font-family: Menlo, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

/* Prevent leaflet widgets from appearing above navbar */ 
.header {
  z-index: 1001;
}

d-article iframe {
  margin-bottom: 2em;
  margin-top: 2em;
}