alexmwalker

/*! Import Foundry Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500');


/* ===================== */
:root {
  --typescale: 1.1; /* The type scaling factor relative to the <p>. ( h4 > h3 > h2 > h1). This DEFAULT scale is set low for phones. Media Queries scale it up for larger screens */
  --typescale-lg: 1.25; /* increase the typescale on larger (non-mobile) screens */   
  
  --baselineratio: calc(16/9); /* This is the 'line-height:basefont size' ratio ( i.e 16/9 = 1.777778)*/

alexmwalker

alexmwalker

$categories: 'essentials', 'cost-of-living', 'bundles', 'high-impact';

@each $category in $categories {
  .category-#{$category} {
    font-size: 2;
    height: 2;
    width: 2;
  }

alexmwalker

/* Large devices (laptops, 64em and up)*/

  .device {
    background-position: 66.666% top;
  }
  .device:after {
    content: "Laptop";
  }
  .laptop-only{

alexmwalker

/*! Import Foundry Fonts */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&display=swap");
/* ===================== */
:root {
  --typescale: 1.11;
  /* The type scaling factor relative to the <p>. ( h4 > h3 > h2 > h1). This DEFAULT scale is set low for phones. Media Queries scale it up for larger screens */
  --typescale-lg: 1.2;
  /* Increase the typescale on larger (non-mobile) screens */
  --baselineratio: calc(
    16 / 10

alexmwalker

alexmwalker

:root {
  --typescale: 1.15;
  --typescale-lg: 1.25;
  --baselineratio: calc(22 / 16);
  --basegrid: 22px;
  --basegrid-tablet: 28px;
  --basegrid-laptop: 32px;
  --basegrid-wide: 36px;
  --baseline: calc(var(--baselineratio) * 1rem);
  --basefont: calc(var(--basegrid) / var(--baselineratio));

alexmwalker

      <h1>Loading latest data from Raisely</h1>
		
      <table class="ladder">
          <thead><tr><td> </td><td>Name: </td><td>Total</td></tr></thead>
          <tbody id = "stage">
              <!-- The Raisely JSON data gets injected in here --> 
          </tbody>
      </table>
		

alexmwalker

.page-template-default,
body #wrapper {
    position: relative;
}

body #wrapper:before,
body #wrapper:after {
    display: block;
    position: fixed;
    content: '';

alexmwalker