To receive notifications about scheduled maintenance, please subscribe to the mailing-list gitlab-operations@sympa.ethz.ch. You can subscribe to the mailing-list at https://sympa.ethz.ch

Commit c0dd6586 authored by kchung's avatar kchung 🚴🏻
Browse files

MES: elaborated a bit

parent 73851c21
......@@ -4,37 +4,27 @@ Warning: the template is not yet completed.
## Dependency
- Since we are using [Vite](https://vitejs.dev/) as front-end, [Node.js](https://nodejs.org/en/) version >=12.0.0 is required.
- Since we are using [Vite](https://vitejs.dev/) as front-end and [Reveal.js](https://revealjs.com/) for the slides, [Node.js](https://nodejs.org/en/) version >=12.0.0 is required.
## How to use
First, initialize a plain JavaScript Vite project
Clone this repository to your local directory
```bash
npm init @vitejs/app reveal-vite --template vanilla
git clone git@gitlab.ethz.ch:kchung/reveal-js-ifd-theme.git
```
Install dependencies
Install dependencies (package.json should have revealjs and vite as devDependencies)
```bash
cd reveal-vite
npm install
npm i -D reveal.js
```
Now, add this submodule to your presentation folder
```bash
git submodule add git@gitlab.ethz.ch:kchung/ifd-theme.git
```
- Note: if you have some conflict with .gitignore, use -f flag
Copy ifd-theme/main_setup.js to ./main.js
Edit index.html to create reveal.js slides
Then, start a local server to bundle and serve the presentation
```bash
npm run dev
```
Now, you can access to your slidese from your brower on localhost, port 3000 (localhost:3000)
......@@ -372,37 +372,68 @@ html {
background-color: #FFFFFF; }
.reveal .slides section.stack {
background-color: transparent; }
.reveal .slides section .grid-wrapper {
.reveal .slides section .wrapper-header {
box-sizing: border-box;
grid-column-gap: 10vmin;
grid-row-gap: 5vmin;
grid-template-areas: "header" "title" "description";
grid-template-rows: 4.5vmin 1fr;
height: 100%;
min-height: 100%;
padding: 3vh 4vw 1vh 4vw;
}
.reveal .slides section .wrapper-footer {
display: grid;
box-sizing: border-box;
grid-column-gap: 10vmin;
grid-row-gap: 5vmin;
grid-template-areas: "title" "description" "footer";
grid-template-rows: 4.5vmin 1fr;
min-height: 100%;
padding: 3vh 4vw 1vh 4vw;
}
.reveal .slides section .header {
align-items: center;
display: flex;
grid-area: header;
justify-content: space-between;
}
.reveal .slides section .footer {
align-items: center;
display: flex;
grid-area: footer;
justify-content: space-between;
}
.reveal .slides section .logo {
.reveal .slides section .logo-eth{
display: flex;
background-repeat: no-repeat;
background-size: auto 100%;
display: inline-block;
grid-area: header;
margin-right: 0vmin;
background-image: url("./figures/eth_logo_kurz_pos.svg");
height: 1.5vw;
width: 10vw;
}
/* default section logo */
.reveal .slides section .eth--logo {
background-image: url("./figures/eth_logo_kurz_pos.svg");
padding-right: 77vw;
height: 1.5vw;}
.reveal .slides section .ifd--logo {
.reveal .slides section .logo-ifd{
display: flex;
background-repeat: no-repeat;
background-size: auto 100%;
background-image: url("./figures/ifd_logo_pos.svg");
height: 3vw;}
height: 2.5vw;
width: 7vw;
}
.reveal .slides section .b-title{
display: flex;
color: gray;
font-size: 3.5vh;
font-weight: 600;
}
@media (max-width: 960px){
.reveal .slides section .b-title{
font-size: 3.5vw;
}
}
.reveal .slides section h1 {
align-self: center;
......@@ -505,35 +536,30 @@ html {
color: #E0E0E0;
margin-left: 25vw;
width: calc(100vw - 4vmin - 25vw); }
@media (max-width: 768px) {
.reveal .slides section.title {
height: calc(100vh - 4vmin);
margin: 2vmin;
width: calc(100vw - 4vmin); } }
.reveal .slides section.title .grid-wrapper {
grid-template-areas: "header header" "content content" ". credit";
grid-template-columns: auto 80%;
grid-template-rows: 6vmin 1fr auto;
grid-column-gap: 10vmin; }
.reveal .slides section.title .eth--logo {
.reveal .slides section.title .logo-eth{
background-image: url("./figures/eth_logo_kurz_pos_inverted.svg");
padding-right: calc(78vw - 48vmin);
height: 7vh;
width: 30vmin; }
.reveal .slides section.title .ifd--logo {
height: 3.5vw;
}
.reveal .slides section.title .logo-ifd {
background-image: url("./figures/ifd_logo_pos_inverted.svg");
height: 5vh;
width: 30vmin; }
height: 2.2vw;
}
.reveal .slides section.title .content {
margin-top: 20vh;
align-self: center;
grid-area: content; }
grid-area: content;
}
.reveal .slides section.title h1 {
text-align: center;
color: #E0E0E0;
font-size: 6.5vh;
}
}
.reveal .slides section.title h2 {
text-align: right;
color: #E0E0E0;
......@@ -559,13 +585,25 @@ html {
@media (max-width: 960px) {
.reveal .slides section.title .grid-wrapper {
grid-template-areas: "header" "content" "credit";
grid-template-columns: auto; }
grid-template-columns: auto;
}
.reveal .slides section.title {
height: calc(100vh - 20vmin);
margin: 6vmin;
width: calc(100vw - 10vmin); }
.reveal .slides section.title h1{
font-size: 5vw;
}
.reveal .slides section.title h2{
font-size: 4vw;
}
.reveal .slides section.title .credit {
justify-self: end; }
.reveal .slides section.title .credit .name {
font-size: 2vw;
}
font-size: 3vw;
}
}
@media (min-width: 1280px) {
.reveal .slides section.title h1 {
grid-area: title; } }
......@@ -582,6 +620,6 @@ html {
font-size: 5vw;
}
.reveal .slides section.end .text{
margin-top: 20vw;
margin-top: 40vh;
}
......@@ -2,12 +2,75 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/svg+xml" href="./ifd-theme/figures/ifd_logo_pos.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>IFD Presentation</title>
</head>
<body>
<div id="app"></div>
<div class="reveal pattern--eth">
<div class="slides">
<!-- begin title -->
<section class="title" id="title">
<div class="wrapper-header">
<div class="header">
<div class="logo-eth"></div>
<div class="logo-ifd"></div>
</div>
<div class="content">
<h1>Title of Your Presentation</h1>
<h2>- sub title</h2>
</div>
<div class="credit">
<hr/>
<div class="name">Your name</div>
</div>
</div>
</section>
<!-- end title -->
<!-- begin slide -->
<section id="blank" data-transition="none">
<div class="wrapper-footer">
<h1>Slide with Logos at the Bottom</h1>
<div class="description">
<hr/>
Descriptions
</div>
<div class="footer">
<div class="logo-eth"></div>
<div class="b-title">You can put some text here</div>
<div class="logo-ifd"></div>
</div>
</div>
</section>
<!-- end slide -->
<!-- begin slide -->
<section id="blank" data-transition="none">
<div class="wrapper-header">
<div class="header">
<div class="logo-eth"></div>
<div class="b-title">You can add time:&nbsp;<span id="dat"></span></div>
<div class="logo-ifd"></div>
</div>
<h1>Slide with Logos at the Top</h1>
<div class="description">
<hr/>
Descriptions
</div>
</div>
</section>
<!-- end slide -->
<!-- begin slide -->
<section class="end">
<div class="text">
Thank you
</div>
</section>
<!-- end slide -->
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>
......@@ -18,3 +18,8 @@ deck.initialize({ hash: true, slideNumber: true,
},
plugins: [RevealMath, RevealZoom, RevealMarkdown, RevealNotes]
})
// To add time in the slide
var d = new Date()
document.getElementById("dat").innerHTML = d.toLocaleDateString();
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment