Skip to content

Commit

Permalink
Rename beamer safely to beam
Browse files Browse the repository at this point in the history
In the long term, I think it is a better decision to rename the beamer theme to beam to better distinguish the project from the original beamer class. The original beamer.css file is kept for compatibility. Please, consider switching to beam.css
  • Loading branch information
rnd195 committed May 4, 2023
1 parent 936bfc6 commit a0f35be
Show file tree
Hide file tree
Showing 9 changed files with 150 additions and 22 deletions.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

[Marp](https://marp.app/) is used to create presentations in Markdown. In this repository, you may find simple CSS themes that I have created. Namely:

- `beamer`, based on [LaTeX's beamer class](https://github.com/josephwright/beamer)
- `beam`, based on [LaTeX's beamer class](https://github.com/josephwright/beamer)
- download the [Computer Modern Unicode font family](https://ctan.org/pkg/cm-unicode?lang=en) for best results
- follow the [tutorial](how-to/beamer_custom.md) to change the primary colors
- follow the [tutorial](how-to/beam_custom.md) to change the primary colors

![beamer sample](./samples/beamer.png)
![beam sample](./samples/beam.png)

- `border`, based on the `default` Marp theme

Expand Down Expand Up @@ -39,11 +39,11 @@ Assuming you're using the VSCode Marp extension… In VSCode, open

### License

The `beamer` theme is licensed under [GNU GPLv3](https://github.com/rnd195/my-marp-themes/blob/main/LICENSE_beamer). The rest of the repository is licensed under the [MIT License](https://github.com/rnd195/my-marp-themes/blob/main/LICENSE).
The `beamer`-inspired theme is licensed under [GNU GPLv3](https://github.com/rnd195/my-marp-themes/blob/main/LICENSE_beamer). The rest of the repository is licensed under the [MIT License](https://github.com/rnd195/my-marp-themes/blob/main/LICENSE).



### Attribution

The `beamer`, `border`, and `gradient` themes are based on the `default` Marp themes made by [yhatt](https://github.com/marp-team/marp-core/tree/main/themes). The `border` and `gradient` themes import the [Inter](https://fonts.google.com/specimen/Inter) font by [Rasmus Andersson](https://rsms.me/).
The `beam`, `border`, and `gradient` themes are based on the `default` Marp themes made by [yhatt](https://github.com/marp-team/marp-core/tree/main/themes). The `border` and `gradient` themes import the [Inter](https://fonts.google.com/specimen/Inter) font by [Rasmus Andersson](https://rsms.me/).

126 changes: 126 additions & 0 deletions beam.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
/* @theme beam */

@import "default";

:root {
font-family: "CMU Sans Serif", "Segoe UI", Helvetica, sans-serif;
--main: #1f38c5;
--secondary: #141414;
}

section {
background-color: #ffffff;
/* bottom two-coloured bar in base64 svg */
background-image:
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjUwbW0iIGhlaWdodD0iNS4zNTQ2bW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI1MCA1LjM1NDYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMC4zNDcgLTkxLjAyOCkiPgo8cmVjdCB4PSIyMC4zNDciIHk9IjkxLjAyOCIgd2lkdGg9IjEyNSIgaGVpZ2h0PSI1LjM1NDYiIGZpbGw9IiMxNDE0MTQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLXdpZHRoPSIwIi8+CjxwYXRoIGQ9Im0xNDUuMzUgOTMuNzA1di0yLjY3NzNoMTI1djUuMzU0NmgtMTI1eiIgZmlsbD0iIzFmMzhjNSIgc3Ryb2tlLXdpZHRoPSIwIi8+CjwvZz4KPC9zdmc+);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 150% 1em;
padding: 2em;
}

header {
font-size: 0.6em;
/* this text-align is important */
text-align: right;
/* I don't like this absolute positioning, but it works */
position: absolute;
top: 96.2%;
width: 100%;
right: 0;
left: -51%;
color: white;
}

footer {
font-size: 0.6em;
position: absolute;
/* this text-align is important */
text-align: left;
top: 96.2%;
width: 100%;
right: 0;
left: 50.8%;
color: white;
}

h1, h2, h3, h4, h5, h6 {
color: #141414;
}

/* only apply to the first occurrence of h1 */
h1:nth-of-type(1) {
font-family: "CMU Bright", "Segoe UI Semibold";
color: #ffffff;
background-color: var(--main);
border-top: 0.3em solid var(--main);
padding: 0;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 1.5em;
text-indent: 0.5em;
}

code {
background-color: rgba(100, 100, 100, 0.2);
}

/* formatting page numbers */
section::after {
font-size: 0.6em;
/* https://github.com/yhatt/marp/issues/263 */
content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
position: absolute;
text-align: right;
top: 96.2%;
width: 100%;
right: 0;
left: -0.5em;
color: white;
}

/* inline math was too large wrt text */
.katex {
font: normal 1.05em KaTeX_Main, 'Times New Roman', serif
}

/* the "center" keyword centers the image - may break, careful */
img[alt~="center"] {
display: block;
margin: 0 auto;
}

/* || SECTION CLASS: title */
/* title page - only to be used as for a single slide */
/* <!-- _class: title --> */
section.title>h1 {
font-family: "CMU Bright", "Segoe UI Semibold";
color: #ffffff;
background-color: var(--main);
border-radius: 25px;
text-align: center;
top: 25%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 80%;
padding-bottom: 0.2em;
height: auto;
}

/* remake this to be positioned with respect to h1 */
section.title>p {
position: relative;
text-align: center;
top: 35px;
}

/* || SECTION CLASS: tinytext */
/* new class that makes p, ul, and blockquote text smaller */
/* might be useful for the References slide, use <!-- _class: tinytext --> */
section.tinytext>p, section.tinytext>ul, section.tinytext>blockquote {
font-size: 0.65em;
}
12 changes: 7 additions & 5 deletions beamer.css
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
/* @theme beamer */
/* Duplicate of the beam theme, file kept for compatibility */
/* Please consider using beam instead as this file may be removed in the future */

@import "default";

:root {
font-family: "CMU Sans Serif", "Segoe UI", Helvetica, sans-serif;
--beamer-main: #1f38c5;
--beamer-secondary: #141414;
--main: #1f38c5;
--secondary: #141414;
}

section {
Expand Down Expand Up @@ -52,8 +54,8 @@ h1, h2, h3, h4, h5, h6 {
h1:nth-of-type(1) {
font-family: "CMU Bright", "Segoe UI Semibold";
color: #ffffff;
background-color: var(--beamer-main);
border-top: 0.3em solid var(--beamer-main);
background-color: var(--main);
border-top: 0.3em solid var(--main);
padding: 0;
position: absolute;
top: 0;
Expand Down Expand Up @@ -98,7 +100,7 @@ img[alt~="center"] {
section.title>h1 {
font-family: "CMU Bright", "Segoe UI Semibold";
color: #ffffff;
background-color: var(--beamer-main);
background-color: var(--main);
border-radius: 25px;
text-align: center;
top: 25%;
Expand Down
File renamed without changes
10 changes: 10 additions & 0 deletions how-to/beam_custom.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# Changing primary `beam` colors

1. In your `beam.css` file, change the hex color code in the custom property `--main: #1f38c5` to a different color
- For example `#008000`
2. Open the `bar.svg` file using a text editor and search for `#1f38c5`. Replace `#1f38c5` with a different color, e.g., `#008000`. Save the `.svg` file.
3. Encode the `.svg` file to base64 format. For instance, you may use the following webapp: https://fffuel.co/eeencode/. Drag and drop the `.svg` file and copy the Data URI (`data:image/svg+xml;...`)

4. In your `beam.css` file, locate `section` and the `background-image` property. Replace the original URI with the new URI generated in step 3.
5. 🎉🎉🎉

10 changes: 0 additions & 10 deletions how-to/beamer_custom.md

This file was deleted.

4 changes: 2 additions & 2 deletions samples/beamer-template.md → samples/beam-template.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
marp: true
theme: beamer
theme: beamarp
paginate: true
size: 4:3
header: This is a header
Expand All @@ -9,7 +9,7 @@ title: Marp custom themes
---
<!-- _class: title -->

# A very long title of my beamer presentation
# A very long title of my beamer-esque presentation
<br/>

Author's name
Expand Down
Binary file added samples/beam.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed samples/beamer.png
Binary file not shown.

0 comments on commit a0f35be

Please sign in to comment.