Skip to content

Instantly share code, notes, and snippets.

View hakimel's full-sized avatar

Hakim El Hattab hakimel

View GitHub Profile
<html>
<head>
<title>Click me if you can</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@hakimel
hakimel / menu.jsx
Created February 15, 2023 00:09
KodemoMenu with a custom logo
function Menu() {
return (
<KodemoMenu.Root>
<KodemoMenu.Dropdown trigger={<CustomLogo />}>
{/* ... */}
</KodemoMenu.Dropdown>
</KodemoMenu.Root>
);
}
@hakimel
hakimel / stack
Created January 30, 2023 13:12
revea.js markdown presentation with a stack of images
# Slide 1
Here's a stack:
<div class="r-stack">
<img class="fragment" src="https://placekitten.com/450/300" width="450" height="300">
<img class="fragment" src="https://placekitten.com/300/450" width="300" height="450">
<img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
</div>
---
@hakimel
hakimel / stack.md
Created January 30, 2023 13:11
reveal.js presentation with a stack of images

Slide 1

Here's a stack:


@hakimel
hakimel / gmail.css
Created August 24, 2022 17:33
Minimal gmail theme. Remember Inbox? 🥲
/* left sidebar */
.oy8Mbf.aeN {
position: fixed;
left: 0;
margin-left: -250px;
z-index: 100;
transition: none;
}
.oy8Mbf.aeN:hover {
@hakimel
hakimel / get-past-fragments.js
Created June 9, 2022 07:17
Retrieves the total number of fragments that have been stepped past in a reveal.js presentation.
function getUniqueFragments( fragmentElements ) {
return Array.from( fragmentElements )
.map( ( fragment, i ) => fragment.getAttribute( 'data-fragment-index' ) || i )
.filter( (value, index, array) => array.indexOf(value) === index ).length;
}
function getPastFragmentCount() {
const pastSlides = Array.from( Reveal.getSlidesElement().querySelectorAll( 'section.past' ) );
const fragmentsInPastSlides = pastSlides.reduce( ( total, slide ) => {
/* footer */
.aeG, .pfiaof {
display: none;
}
/* hide header logo and hamburger */
.gb_3c {
display: none !important;
}
@keyframes dark-mode-icon-in {
0% { transform: rotate(90deg); }
100% { transform: rotate(0deg); }
}
@keyframes dark-mode-icon-out {
0% { transform: rotate(0deg); }
100% { transform: rotate(-90deg); }
}
@hakimel
hakimel / gist:c7b71eb214b29cb180aa
Last active August 29, 2015 14:17
reveal.js: Go to slide with ID
var indices = Reveal.getIndices( document.getElementById( 'sectionID' ) );
Reveal.slide( indices.h, indices.v );
@hakimel
hakimel / reveal-js-data-state-callback.html
Created May 8, 2014 10:29
reveal.js data-state callback
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
</head>