Skip to content

Instantly share code, notes, and snippets.

@Ddedalus
Last active April 17, 2021 08:31
Show Gist options
  • Save Ddedalus/0c7855c75b0f6aee1b117281eb172af9 to your computer and use it in GitHub Desktop.
Save Ddedalus/0c7855c75b0f6aee1b117281eb172af9 to your computer and use it in GitHub Desktop.
CSS to style HTML preview of slides written in pandoc
/*
1. Place this in
%USERPROFILE%\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.5.16\node_modules\@shd101wyy\mume\styles\preview_theme
2. Add to VSCode settings:
"markdown-preview-enhanced.previewTheme": "slides.css",
*/
/*!
Font definitions takes from:
* LaTeX.css (https://latex.now.sh/)
* MIT Licence
*/
@font-face {
font-family: 'Latin Modern';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url('./fonts/LM-regular.woff2') format('woff2'), url('./fonts/LM-regular.woff') format('woff'), url('./fonts/LM-regular.ttf') format('truetype');
}
@font-face {
font-family: 'Latin Modern';
font-style: italic;
font-weight: normal;
font-display: swap;
src: url('./fonts/LM-italic.woff2') format('woff2'), url('./fonts/LM-italic.woff') format('woff'), url('./fonts/LM-italic.ttf') format('truetype');
}
@font-face {
font-family: 'Latin Modern';
font-style: normal;
font-weight: bold;
font-display: swap;
src: url('./fonts/LM-bold.woff2') format('woff2'), url('./fonts/LM-bold.woff') format('woff'), url('./fonts/LM-bold.ttf') format('truetype');
}
@font-face {
font-family: 'Latin Modern';
font-style: italic;
font-weight: bold;
font-display: swap;
src: url('./fonts/LM-bold-italic.woff2') format('woff2'), url('./fonts/LM-bold-italic.woff') format('woff'), url('./fonts/LM-bold-italic.ttf') format('truetype');
}
@font-face {
font-family: 'Libertinus';
font-style: normal;
font-weight: normal;
font-display: swap;
src: url('./fonts/Libertinus-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Libertinus';
font-style: italic;
font-weight: normal;
font-display: swap;
src: url('./fonts/Libertinus-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Libertinus';
font-style: normal;
font-weight: bold;
font-display: swap;
src: url('./fonts/Libertinus-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Libertinus';
font-style: italic;
font-weight: bold;
font-display: swap;
src: url('./fonts/Libertinus-bold-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Libertinus';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('./fonts/Libertinus-semibold.woff2') format('woff2');
}
@font-face {
font-family: 'Libertinus';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url('./fonts/Libertinus-semibold-italic.woff2') format('woff2');
}
/* Use LaTeX default font and make the letters bigger: better for VS code preview */
body {
font-family: 'Latin Modern', Georgia, Cambria, 'Times New Roman', Times, serif;
font-size: 100%;
}
/* Make equations larger so that they match the text */
.MathJax {
font-size: 1rem !important;
}
/* Justified paragraphs */
p {
text-align: justify;
}
.notes {
background-color: rgb(243, 243, 243);
color: rgb(94, 94, 94);
padding: 5px;
font-size: 80%;
}
/* Visible line between each slide */
h1 {
/* border-top: 1px solid #999999; */
padding-top: 30px;
padding-bottom: 15px;
}
h2 {
/* border-top: 1px solid #999999; */
padding-top: 5px;
}
.columns {
display: flex;
flex-direction: row;
}
.column {
flex-grow: 1;
flex-basis: 50%;
padding-left: 5px;
padding-right: 5px;
}
hr {
border: white;
border-top: 1px solid #999999;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 7pt;
margin-left: auto;
margin-right: auto;
}
/* Make images easier to work with */
/* img {
max-width: 100%;
height: auto;
display: block;
}
textarea {
width: 100%;
} */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment