neobeam.css

/*!
 * Neobeam - A modern take on LaTeX beamer | Default
 *
 * @theme neobeam
 * @author Embracket / mikael-ros
 *
 * @auto-scaling true
 * @size 16:9 1920px 1090px
 * @size 4:3 960px 720px
 */

/***********/
/* Imports */
/***********/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Math&display=swap');
@import "default";

/************/
/* Defaults */
/************/
:root {
    --build-multiplier: 100; /* Might need to be set to 1 in some cases to fix color issues */
    
    /* -- Colors -- */
    /* Primary, and variations */
    --primary:          #4d85d1;
    --saturation-multiplier: 1;
    --saturation-decreaser: 1;
    --brightness-multiplier: 1;
    --brightness-decreaser: 2;
    --color-shift: 30;
    
    /* Font configuration */
    --default-font: "Roboto";
    --monospace-font: "Roboto Mono";
    --math-font: "Noto Sans Math";

    --font-size: 28px;

    /* You shouldn't need to modify any below this point, unless you want to */
    --lighter-primary:  hsl(from var(--primary) h calc(s - var(--saturation-decreaser) * var(--build-multiplier) * .2) calc(l + var(--brightness-multiplier) * var(--build-multiplier) * .045));
    --darker-primary:   hsl(from var(--primary) h calc(s + var(--saturation-multiplier) * var(--build-multiplier) * .01) calc(l - var(--brightness-decreaser) * var(--build-multiplier) * .075));
    --darkest-primary:  hsl(from var(--primary) h calc(s + var(--saturation-multiplier) * var(--build-multiplier) * .01) calc(l - var(--brightness-decreaser) * var(--build-multiplier) * .15));
 
    --text-color:           hsl(from var(--primary) h calc(s - var(--saturation-decreaser) * var(--build-multiplier) * .9) calc(l - var(--brightness-decreaser) * var(--build-multiplier) * .5));
    --text-color-lighter:   hsl(from var(--text-color) h s calc(l + var(--brightness-multiplier) * var(--build-multiplier) * .1));
    --text-color-lightest:  hsl(from var(--text-color) h s calc(l + var(--brightness-multiplier) * var(--build-multiplier) * .2));

    --text-color-negative:          hsl(from var(--primary) h calc(s - var(--saturation-decreaser) * var(--build-multiplier) * .1) calc(l + var(--brightness-multiplier) * var(--build-multiplier) * .3));
    --text-color-negative-lightest: hsl(from var(--text-color-negative) h s calc(l + var(--brightness-multiplier) * var(--build-multiplier) * .1));
    --text-color-negative-lighter:  hsl(from var(--text-color-negative) h s calc(l + var(--brightness-multiplier) * var(--build-multiplier) * .2));
    --text-color-negative-darker:   hsl(from var(--text-color-negative) h s calc(l - var(--brightness-decreaser) * var(--build-multiplier) * .1));

    --highlight-color-one:      var(--primary);
    --highlight-color-two:      hsl(from var(--primary) calc(h + var(--color-shift)) calc(s - var(--saturation-decreaser) * var(--build-multiplier) * .15) calc(l + var(--brightness-multiplier) * var(--build-multiplier) * .1));
    --highlight-color-three:    hsl(from var(--primary) calc(h - var(--color-shift)) calc(s - var(--saturation-decreaser) * var(--build-multiplier) * .15) calc(l + var(--brightness-multiplier) * var(--build-multiplier) * .1));

    --definition-height: 1.5em;
    --header-height: 2.5rem;
    --footer-height: calc(.6*var(--header-height));

    --top-margin: calc(1.5*var(--header-height));
    --left-right-margin: calc((var(--header-height) + var(--footer-height))/2);
    --bottom-margin: calc(1.5*var(--footer-height));
    --margin: var(--top-margin)
              var(--left-right-margin)
              var(--bottom-margin)
              var(--left-right-margin);
    --text-padding: .5em;

    --border-radius-softer: calc(1.25*var(--border-radius-default));
    --border-radius-default: 0.8rem;
    --border-radius-harder: calc(0.75*var(--border-radius-default));

    --background-color: var(--text-color-negative-lighter);

    font-family: var(--default-font);
    font-size: var(--font-size);
    line-height: 1.5;
    color: var(--text-color);
}

/* Unset unwanted rules and set some defaults */
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    
    box-sizing: border-box;
}

/*-----------------------------------------------------------*/
/**********************/
/* Basic text styling */
/**********************/
section > h1,
section > h2,
section > h3,
section > h4,
section > h5,
section > h6 {
    color: var(--text-color-lighter);
    margin: .25em 0;
}

/*-----------------------------------------------------------*/
/************/
/* Sections */
/************/
section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    
    background: var(--background-color);

    padding: var(--margin);
}

/*-----------------------------------------------------------*/
/*********************/
/* Footers & headers */
/*********************/

/* Both share common styling */
section header, footer {
    --_height: var(--height, fit-content);
    --_radius: var(--radius, var(--text-padding));

    position: absolute;
    left: 0;

    height: var(--_height);
    width: 100%;

    display: flex;
    align-items: center;

    /* Hide overflowing text */
    overflow: hidden;
    text-overflow: ellipsis;

    background-color: var(--primary);
    color: var(--text-color-negative);
}

/* Headers */
section header {
    /* Position at top */
    top: 0;
    
    /* Compensate for radius */
    padding: var(--_radius);
    --height: calc(var(--header-height) + .5*var(--_radius));
    --radius: var(--border-radius-default);

    font-weight: 600;
    font-size: 1.25rem;

    border-radius: 0 0 var(--_radius) var(--_radius);
}

/* Footers */
footer {
    /* Position at bottom */
    bottom: 0;

    --height: var(--footer-height);
    
    font-size: 0.65rem;
}

/* The pagination index */
section::after {
    content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    bottom: 0; /* Remove margin */
    right: var(--text-padding);

    height: var(--footer-height);
    line-height: var(--footer-height);
    width: calc(2*var(--footer-height)); /* Give more space as necessary */
    color: var(--text-color-negative);
    font-size: calc(0.65 * var(--font-size)); /* For some reason simply writing 0.65rem won't do here */

    text-overflow: ellipsis;
    overflow: hidden;

    z-index: 2;
}

/* * = strong, currently */
footer > * {
    position: relative;
    --_bg-color: var(--bg-color, var(--darker-primary));
    --radius: calc(var(--height) / 2);

    height: 100%;
    line-height: var(--height);
    flex: 1; /* Share space evenly */
    
    padding: var(--_radius);
    text-align: center;
    font-weight: initial; /* Reset weight */
    
    background-color: var(--_bg-color);
    
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0 var(--text-padding);
    
    z-index: 2;
}

/* All fields but the first */
footer > *:nth-child(n+2) {
    --radius-space: calc(.5 * var(--radius));
    /* Compensate for radius */
    margin-left: calc(-2 * var(--radius-space));
    padding-left: calc(var(--text-padding) + var(--radius-space));
    
}

/* First field */
footer > *:nth-child(1) {
    --bg-color: var(--darkest-primary);
    text-align: left;
    z-index: 3;
}

/* Last field */
footer > *:last-child {
    --bg-color: var(--primary);
    text-align: right;

    border-radius: 0;
    z-index: 1;

    /* Leave space for pagination number */
    --pagination-space: calc(2*var(--footer-height) + 2 * var(--text-padding));
    margin-left: calc(-2 * var(--radius-space) - var(--pagination-space));
    padding-left: calc(var(--text-padding) + var(--radius-space));
    padding-right: var(--pagination-space);
}

/*-----------------------------------------------------------*/
/***************/
/* Title slide */
/***************/

section.title {
    display: flex;
    gap: 1em;
    
    /* Position everything in middle */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0; /* Remove otherwise present padding */
}

section.title > * {
    margin: 0;
    font-weight: 500;
}

/* Title blob */
section.title h1 {
    width: fit-content;
    max-width: 80%;

    padding: var(--text-padding) calc(2*var(--text-padding));

    background-color: var(--primary);
    color: var(--text-color-negative);
    border-radius: var(--border-radius-default);
}

section.title blockquote {
    all: unset; /* Unset any settings brought on by other blockquote styling */
    color: var(--text-color-lightest);
}

/* Logo */
section.title img[alt*="logo"] {
    --offset: -5%;
    --rotate: -45deg;

    /* Position in lower right, by default */
    position: absolute;
    margin: 0;
    right:  var(--offset);
    bottom: 0;

    width: 350px;
    object-fit: contain;

    /* Rotate it slightly */
    transform: rotate(var(--rotate));
    opacity: 0.5;
}

/* Logo left side */
section.title img[alt~="logo-left"] {
    /* Position in lower left */
    right:  unset;
    left: var(--offset);
    --rotate: 45deg;
}

/*-----------------------------------------------------------*/
/*********/
/* Lists */
/*********/

ul, ol {
    line-height: 1.75;
    margin: calc(.5*var(--text-padding)) 0;
    padding: 0 1em; /* Compensate for list number / dot */
}

/*-----------------------------------------------------------*/
/********************************/
/* Quotes, tables & code blocks */
/********************************/

/* Styling applied to both */
blockquote, pre, table {
    --_block-bg-color: var(--block-bg-color, var(--text-color-negative));
    --radius: var(--border-radius-default);
    min-width: 40%;
    width: fit-content;
    max-width: 60%;

    padding: var(--text-padding);
    margin: calc(.75*var(--text-padding)) 0;

    border-radius: var(--radius);
    background-color: var(--_block-bg-color);

    color: var(--text-color-lighter);
}
/*===================*/

/* Quotes */
blockquote {
    border-left: solid calc(.5*var(--text-padding)) var(--text-color-negative-darker);
}

/* Definition blocks */
blockquote:has(> h4) {
    display: flex;
    flex-direction: column;

    padding: 0;
    border: none; /* Remove line */
    --block-fg-color: var(--highlight-color-one);
    --block-bg-color: hsl(from var(--block-fg-color) h calc(s - var(--saturation-decreaser) * var(--build-multiplier) * .1) calc(l - var(--brightness-decreaser) * var(--build-multiplier) * .075));

    color: var(--text-color-negative-lightest);
}

blockquote:has(> h4) > * {
    margin: 0;
    padding: var(--text-padding);
    border-radius: var(--radius);
}

/* The selector is redundant, it's just for clarity */
blockquote:has(> h4) h4{
    flex-basis: var(--definition-height); /* Take up that height */
    background-color: var(--block-fg-color);
}

blockquote:has(> h4) p{
    min-height: var(--definition-height);
}

blockquote:has(> h4):nth-of-type(2n){
    --block-fg-color: var(--highlight-color-two);
}

blockquote:has(> h4):nth-of-type(3n){
    --block-fg-color: var(--highlight-color-three);
}
/*===================*/

/* Code blocks */
pre, code, samp {
    font-family: var(--monospace-font);

    /* Unset default theme setting */
    border: none; 
    line-height: unset;
}

/*===================*/

/* Tables */
table {
    color: var(--text-color-lighter);
    border: solid .1em var(--text-color-negative-darker);
    padding: 0; /* No internal padding. Inhereted from the settings higher up */
    border-spacing: 0; /* Remove weird table spacing */
}

table tr td, table th {
    padding: calc(.5*var(--text-padding)) var(--text-padding); 
    --border: solid .1em var(--text-color-negative);
    border-right: var(--border);
    border-bottom: var(--border);
}

/* Last rows elements should not have a bottom border */
table tr:last-child td {
    border-bottom: none;
}

/* Last column shouldnt have a right border */
table th:last-child, tr td:last-child {
    border-right: none;
}

table th:first-child {
    border-top-left-radius: var(--radius);
}

table th:last-child {
    border-top-right-radius: var(--radius);
}

table th{
    background-color: var(--lighter-primary);
    border-bottom-width: .25em;
    color: var(--text-color-negative);
}

/* Every other row */
table tr:nth-of-type(2n-1){
    background-color: var(--text-color-negative-lightest);
}

/*-----------------------------------------------------------*/
/**********/
/* Images */
/**********/
img {
    display: block;
    width: fit-content;
    max-width: 50%;
    margin: var(--text-padding) 0;

    border-radius: var(--border-radius-default);

    background-color: transparent !important; /* Support for transparent backgrounds */
}

img[alt*="left"], img[alt*="right"] {
    margin: var(--text-padding);
}

img[alt*="left"]{
    float:left;
}

img[alt*="center"]{
    margin: var(--text-padding) auto;
}

img[alt*="right"]{
    float:right;
}

/* The heading (level 6) that comes after an img is treated as a caption */
:has(img)+h6 {
    color: var(--text-color-lightest);
    font-weight: initial;
    margin-top: calc(-2*var(--text-padding));
    font-size: .8em;
}

/*-----------------------------------------------------------*/
/*******************/
/* Inline elements */
/*******************/

:not(pre) > code, mark {
    --_hl-color: var(--hl-color, var(--text-color-negative));
    background-color: var(--_hl-color);
    color: var(--text-color-lightest);
}

/* :not(pre) selects code only when it is not inside a code block */
:not(pre) > code {
    font-family: var(--monospace-font);
    padding: calc(.25*var(--text-padding)) var(--text-padding);
    border-radius: 1em;
}

mark {
    --hl-color: hsl(from var(--highlight-color-two) h calc(s + var(--saturation-multiplier) * var(--build-multiplier) * .15) calc(l + var(--brightness-multiplier) * var(--build-multiplier) * .1));
    padding: 0 calc(.25*var(--text-padding));
    border-radius: .25em;
}

abbr {
    color: var(--text-color-lightest);
}

var, samp {
    color: var(--highlight-color-two);
}

q {
    font-weight: 300;
    font-style: italic;
}

audio {
    margin: var(--text-padding) 0;
}

.katex {
    font-family: var(--math-font);
    font-size: 0.9em;
}

.katex p{
    margin-left: initial;
}