Skip to content

Instantly share code, notes, and snippets.

@hteumeuleu
hteumeuleu / darkModeHandler.ts
Last active March 30, 2023 14:00
Outlook.com darkModeHandler
import type { ContentHandler } from 'owa-controls-content-handler-base';
import { transformElementForDarkMode } from 'owa-dark-mode-utilities';
import {
ATTR_COLOR,
ATTR_BGCOLOR,
DATA_OG_STYLE_COLOR,
DATA_OG_ATTR_COLOR,
DATA_OG_STYLE_BACKGROUNDCOLOR,
DATA_OG_ATTR_BGCOLOR,
} from 'owa-content-colors-constants';
@hteumeuleu
hteumeuleu / outlook-universe.md
Last active February 18, 2019 12:39
The Outlook Universe
@hteumeuleu
hteumeuleu / vml-oned.html
Created March 21, 2019 11:36
VML onEd Attribute
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<meta charset="UTF-8" />
<title>VML onEd</title>
</head>
<body>
<h1>onEd</h1>
<v:rect fillcolor="green" style="width:100px; height:100px;"></v:rect>
<v:rect fillcolor="yellow" style="position:relative; left:100px; width:100px; height:100px;"></v:rect>
@hteumeuleu
hteumeuleu / amp4email-hello-world.html
Created March 27, 2019 10:55
Hello World in amp4email
<!doctype html>
<html amp4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp4email-boilerplate>body { visibility:hidden }</style>
</head>
<body>
<h1 [text]="'Bonjour ' + state.username + '&nbsp;!'">
<!doctype html>
<html>
<head>
<title>Media Queries</title>
<style type="text/css">
.block { display:inline-block; width:100px; height:100px; color:#fff; background:#333; white-space:nowrap; overflow:hidden; font:16px/100px sans-serif; }
@media only screen and (min-width:320px)
{
.block--1 { background:#001F3F !important; }
<!DOCTYPE html>
<html>
<head>
<title>picture element</title>
</head>
<body>
<h1>picture</h1>
<picture>
<source srcset="https://i.imgur.com/35cz49W.png" media="(max-width: 480px)" />
<source srcset="https://i.imgur.com/X7vSnQV.png" media="(max-width: 640px)" />
<!DOCTYPE html>
<html>
<head>
<title>srcset attribute</title>
</head>
<body>
<h1>srcset</h1>
<img src="https://i.imgur.com/pnUUCFQ.png" srcset="https://i.imgur.com/35cz49W.png 480w, https://i.imgur.com/X7vSnQV.png 640w, https://i.imgur.com/JqqqI8g.png 1440w" sizes="100vw" style="display:block; width:100%; height:auto;" />
</body>
</html>
@hteumeuleu
hteumeuleu / lego-newsletter-FR-20190603.html
Created June 3, 2019 16:20
Plus de 70 nouveaux ensembles LEGO® débarquent pour l'été !
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
@hteumeuleu
hteumeuleu / gmail-view-entire-message-styles.html
Last active June 18, 2019 14:14
Gmail "View Entire Message" styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gmail View Entire Message Bug</title>
<style>.box { background: #3cbc67 !important; }</style>
<style>
div { font-size:0; }
div a { display: block; padding: 20px; color:#fff !important; font-size: 3rem; background: #c44230 !important; }
</style>
@hteumeuleu
hteumeuleu / button-overlapping.html
Last active August 13, 2019 09:46
Example of button overlapping for @irmavdk on #emailgeeks Slack
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>button overlapping</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px; background:#e5f3f6;">
<tr>
<td>