Skip to content

Instantly share code, notes, and snippets.

<!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>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; }
@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;!'">
@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 / outlook-universe.md
Last active February 18, 2019 12:39
The Outlook Universe
@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 / the-fab-four-outlook-com-dark-mode.html
Last active October 24, 2018 19:05
The Fab Four in Outlook.com dark mode
<div class="rps_ef59"><style type="text/css"><!-- .rps_ef59 html, .rps_ef59 body
{ min-width: 260px; min-height: 100%; padding: 0; margin: 0 auto; background: #fff; }
.rps_ef59 a img
{ border: none; }
.rps_ef59 .x_ReadMsgBody
{ width: 100%; }
.rps_ef59 .x_ExternalClass
{ width: 100%; }
.rps_ef59 .x_ExternalClass *
{ line-height: 100%; }
@hteumeuleu
hteumeuleu / apple-arkit2-ios12-test.html
Created September 26, 2018 15:43
Apple AR Kit 2 in an email test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iOS 12 ARKit 2</title>
<style>
body { font:1em "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; }
a { color:#0070c9; }
</style>
<meta name="x-apple-disable-message-reformatting" />
@hteumeuleu
hteumeuleu / gmail.html
Created August 24, 2018 12:11
Gmail Confidential Mode Email
<html>
<head></head>
<body>
<div style="width: 100%; padding: 24px 0 16px 0; background-color: #f5f5f5; text-align: center;">
<div style="display: inline-block; width: 90%; max-width: 680px; min-width: 280px; text-align: left; font-family: Roboto,Arial,Helvetica,sans-serif; font-size: 13px;" dir="ltr">
<div style="display: block; padding: 0 2px;">
<div style="display: block; background: #fff; height: 2px;"></div>
</div>
<div style="border-left: 1px solid f0f0f0; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;">
<div style="padding: 24px 32px 24px 32px; background: #fff; border-right: 1px solid #eaeaea; border-left: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;">
@hteumeuleu
hteumeuleu / mso-allowpng.html
Created July 6, 2018 13:41
Is AllowPNG actually useful ?
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="fr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>