/* Reset a few global styles and set a sensible default font. */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: sans-serif;
color: #333;
}
/* Theme variables. By defining colours and sizes as CSS variables we can
toggle light/dark mode and adjust font size from JavaScript. */
:root {
--viewer-bg: #111;
--viewer-fg: #fff;
--slide-bg: #111;
--slide-font-size: 16px;
}
/* When the light-mode class is present on we override colours to
create a light theme. */
body.light-mode {
--viewer-bg: #fff;
--viewer-fg: #000;
--slide-bg: #fff;
}
/* Prevent the page from scrolling. The editor and viewer use their own
internal scrolling mechanisms so the body should not introduce an
additional scroll bar. */
html,
body {
overflow: hidden;
}
/* The app uses a two-column layout: the editor on the left and the
presentation viewer on the right. The viewer occupies more space
because slides are typically wide. */
#app {
display: flex;
/* Anchor the application to the viewport so that it never becomes
taller than the window and does not trigger a global scrollbar. */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/* Editor styles */
#editor-pane {
flex: 0 0 40%;
border-right: 1px solid #ddd;
padding: 8px;
overflow: hidden;
height: 100%;
background: #fafafa;
}
#markdown-input {
width: 100%;
height: 100%;
padding: 12px;
font-family: monospace;
font-size: 16px;
border: none;
outline: none;
resize: none;
background: #f7f7f7;
color: #111;
}
/* Viewer styles */
#viewer-pane {
flex: 1;
position: relative;
overflow: hidden;
background: var(--viewer-bg);
color: var(--viewer-fg);
}
/* Container that holds all slides. It uses flexbox to center the
active slide within the available space. By centering here we can
apply a fixed aspect ratio to each slide and avoid content being
clipped in the view. */
#slides-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Responsive layout adjustments based on orientation. When the body
has the .portrait class (set via JavaScript when the viewport is
taller than it is wide), stack the editor and viewer vertically. */
body.portrait #app {
flex-direction: column;
}
body.portrait #editor-pane {
flex: 0 0 40%;
height: 40%;
width: 100%;
border-right: none;
border-bottom: 1px solid #ddd;
}
body.portrait #viewer-pane {
flex: 1;
height: 60%;
width: 100%;
/* Leave space for the controls at the top in mobile portrait mode. */
/* Remove top padding since controls move to the bottom; add bottom
padding to leave room for the mobile control bar. */
padding-top: 0;
padding-bottom: 5.5rem;
}
/* Increase font size and control sizes for mobile portrait mode. On
phones the default slide font size can be too small, and the
navigation controls and settings should be more touch‑friendly. */
body.portrait {
/* Increase base font size for all UI copy on mobile */
font-size: 100%;
}
body.portrait .slide.title-slide h1 {
font-size: 5.5rem;
}
body.portrait #controls button {
font-size: 4rem;
padding: 1rem 1.5rem;
}
body.portrait #controls .control-btn {
font-size: 3.5rem;
}
/* Mobile portrait settings - clean bottom sheet design */
body.portrait #settings-menu {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--viewer-bg);
color: var(--viewer-fg);
border-radius: 16px 16px 0 0;
padding: 1.5rem;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
z-index: 500;
max-height: 60vh;
overflow-y: auto;
transform: translateY(0);
transition: transform 0.3s ease;
}
body.portrait #settings-menu.hidden {
transform: translateY(100%);
}
body.portrait #settings-menu .setting-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid rgba(128, 128, 128, 0.2);
font-size: 1.1rem;
}
body.portrait #settings-menu .setting-item:last-child {
border-bottom: none;
}
body.portrait #settings-menu input[type="checkbox"] {
width: 24px;
height: 24px;
transform: scale(1.5);
}
body.portrait #settings-menu input[type="range"] {
width: 120px;
height: 8px;
-webkit-appearance: none;
background: rgba(128, 128, 128, 0.3);
border-radius: 4px;
outline: none;
}
body.portrait #settings-menu input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--viewer-fg);
cursor: pointer;
border: 2px solid var(--viewer-bg);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
body.portrait #settings-menu input[type="range"]::-webkit-slider-runnable-track {
height: 8px;
background: rgba(128, 128, 128, 0.3);
border-radius: 4px;
}
/* Increase the editor's font size on mobile portrait mode for better
readability. */
body.portrait #markdown-input {
font-size: 2rem;
}
/* Reposition controls to the top right on mobile portrait mode. */
body.portrait #controls {
/* Ensure that the settings panel has space above the control bar */
/* Position mobile controls along the bottom edge and span the
width of the viewer. This avoids overlap with the notch and
provides larger touch targets. */
top: auto;
bottom: calc(env(safe-area-inset-bottom) + 12px);
left: 0;
right: 0;
display: flex;
justify-content: space-around;
padding: 0 12px;
z-index: 200;
}
/* Portrait orientation styling: when the body has the portrait class
(set by JavaScript based on aspect ratio), adjust the layout for
text+image slides so that text appears on top and image below. */
body.portrait .slide.text-image-slide .content {
flex-direction: column;
}
body.portrait .slide.text-image-slide .text-content {
width: 100%;
height: 50%;
padding: 1rem;
overflow: auto;
}
body.portrait .slide.text-image-slide .image-content {
width: 100%;
height: 50%;
}
/* Each slide is initially hidden and becomes visible when the .active
class is applied. We no longer hard‑code dimensions or aspect
ratio in CSS; instead the JavaScript computes the appropriate
width and height to fit the available space while preserving a
16:9 ratio. Slides are relatively positioned so that absolutely
positioned children (like the title background image) are
anchored inside. */
.slide {
display: none;
overflow: hidden;
color: inherit;
position: relative;
}
.slide.active {
display: block;
}
/* Title slide: uses the image as a background. Text is centered and
overlaid using absolute positioning for a clean look. */
/* The title slide uses an absolutely positioned ![]()
element for the
background. The h1 sits above the image and is centered. The
slide itself remains a flex container so that content can be
centered horizontally and vertically. */
/* Title slides use a CSS background image rather than an ![]()
element.
We size it to cover the entire slide without distortion and center
it. The slide is a flex container so that the title text can be
centered relative to its parent. */
/* Title slide styling: use a flex container for centering and rely on
an absolutely positioned ![]()
element for the background. We
intentionally omit background-size/position on the slide itself
because the image is handled via CSS on the ![]()
. */
.slide.title-slide {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
position: relative;
}
/* Centre the title text both horizontally and vertically on the
title slide. Using absolute positioning with a transform
ensures the text remains centred regardless of image size or
flex alignment. */
.slide.title-slide h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
font-size: 4rem;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
margin: 0;
width: 100%;
text-align: center;
}
/* Generic content wrapper used for text-only and text-image slides. */
/* Content wrappers for slides occupy the full width and height of the
slide. They include padding to ensure text is not flush against
the edges. The font size is controlled via a CSS variable that
can be adjusted from JavaScript. */
.slide .content {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
text-align: left;
font-size: var(--slide-font-size);
padding: 2rem;
box-sizing: border-box;
}
/* Text only slide uses a column layout for all its content. */
.slide.text-only-slide .content {
/* On text‑only slides, center the content within the slide both
horizontally and vertically. This avoids long lines hugging the
edges and produces a more balanced appearance. */
padding: 1rem;
justify-content: center;
align-items: center;
}
/* Text-image slide splits the available space into two equal halves. */
.slide.text-image-slide .content {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.slide .text-content {
flex: 1;
padding: 1rem;
overflow: auto;
color: var(--viewer-fg);
}
/* Centre text content on text‑only slides and limit its maximum width.
This prevents lists from spanning the entire width of the slide and
creates comfortable margins. */
.slide.text-only-slide .text-content {
width: 80%;
max-width: 80%;
margin: 0 auto;
/* Use flexbox within the text container to vertically centre
its contents when there are few lines. This ensures text-only
slides appear balanced similar to text-image slides. */
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.slide .text-content h1,
.slide .text-content h2,
.slide .text-content h3 {
margin-bottom: 0.5rem;
color: var(--viewer-fg);
}
.slide .text-content p {
margin-bottom: 0.75rem;
color: var(--viewer-fg);
}
/* Fix list styling and indentation for bullet points */
.slide .text-content ul,
.slide .text-content ol {
margin: 0.75rem 0 0.75rem 1.5rem; /* indent list from slide edge */
padding-left: 0; /* outside markers */
list-style-position: outside;
}
/* Ensure nested lists indent further */
.slide .text-content ul ul,
.slide .text-content ol ol {
margin-left: 1.5rem;
}
.slide .text-content li {
margin-bottom: 0.25rem;
color: var(--viewer-fg);
}
.slide .image-content {
flex: 1;
height: 100%;
/* The image itself will be inserted as an ![]()
element rather than
using background-image. The ![]()
will handle sizing via
object-fit: cover. */
}
/* The ![]()
inside an image-content div fills the available space
while preserving its aspect ratio. object-fit: cover ensures the
image covers the entire area without distortion and crops excess
parts. */
.slide .image-content img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Image-only slide: fills the entire frame */
.slide.image-only-slide {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.slide.image-only-slide .fullscreen-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* The background image on a title slide is implemented with an ![]()
carrying the class .background-image. It is absolutely positioned
and covers the entire slide. A z-index of 0 ensures that
overlaid text appears above it. */
/* If an ![]()
is present on a title slide (older versions), hide it so
the CSS background image takes precedence. Keeping this rule
ensures backward compatibility while avoiding duplicate images. */
/* The ![]()
inside a title slide serves as the background. It is
absolutely positioned and fills the entire slide. object-fit: cover
ensures the image covers the available space without distortion and
crops any excess. A low z-index ensures that the title text
appears on top. */
.slide.title-slide img.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* Ensure non-title slides have a consistent dark background so that
previous slide backgrounds do not bleed through. */
.slide.text-only-slide,
.slide.text-image-slide {
background: var(--slide-bg);
}
/* Navigation controls live in the bottom right corner. */
#controls {
position: absolute;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
right: calc(12px + env(safe-area-inset-right, 0px));
display: flex;
align-items: center;
flex-wrap: nowrap;
}
/* Ensure controls never overflow the viewport width */
#controls button {
flex: 0 0 auto;
}
@media (max-width: 480px), (orientation: portrait) {
#controls {
bottom: 4px;
right: 4px;
display: flex;
flex-direction: row;
align-items: center;
gap: 1px;
max-width: calc(100vw - 8px);
}
#controls button {
font-size: 1rem;
padding: 0;
margin: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Make ALL Material Icons the same size on mobile */
#controls .material-icons {
font-size: 18px !important;
}
/* Override any button font-size since we're using Material Icons */
#controls .control-btn,
#controls .nav-btn,
#controls button {
font-size: 1rem !important;
}
}
#controls button {
margin-left: 6px;
cursor: pointer;
border: none;
background: transparent;
color: var(--viewer-fg);
font-family: inherit;
opacity: 0.5;
transition: opacity 0.2s ease;
padding: 0.25rem 0.5rem;
font-size: 1.5rem;
}
/* Increase opacity on hover to subtly highlight controls */
#controls button:hover {
opacity: 0.9;
}
/* Buttons that are not navigation (settings, toggle editor) are slightly smaller */
#controls .control-btn {
font-size: 1.2rem;
}
/* Shrink share button icon on mobile portrait so controls fit */
/* Remove old portrait-specific share-btn rule as we now shrink buttons via media query */
/* Settings menu styles */
#settings-menu {
position: absolute;
bottom: 2.5rem;
right: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 0.75rem;
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 200px;
z-index: 100;
}
#settings-menu label {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.9rem;
}
#settings-menu input[type="range"] {
flex: 1;
margin-left: 0.5rem;
}
/* When the hidden class is applied to the settings menu, hide it. This
override has higher specificity than the ID selector above. */
/* Hide elements via this helper class */
.hidden {
display: none !important;
}
/* Ensure desktop settings menu works properly - override mobile styles for non-portrait */
body:not(.portrait) #settings-menu {
position: absolute;
bottom: 2.5rem;
right: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 0.75rem;
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 200px;
z-index: 100;
transform: none;
transition: none;
}
body:not(.portrait) #settings-menu.hidden {
display: none !important;
transform: none;
}