mirror of
https://github.com/nicolas-cusan/destyle.css.git
synced 2025-08-30 16:30:01 +02:00
Update docs
This commit is contained in:
Nicolas Cusan
BIN
android-chrome-192x192.png
Normal file
BIN
android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
android-chrome-512x512.png
Normal file
BIN
android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
apple-touch-icon.png
Normal file
BIN
apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
302
compare.html
Normal file
302
compare.html
Normal file
@@ -0,0 +1,302 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Destyle.css - Compared to other resets</title>
|
||||
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
|
||||
<link rel="stylesheet" href="destyle.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<meta name="google-site-verification" content="6NN30tyC1Cm8FIYA9_PwrI8vf_dqvILEXn220VFXdVs" />
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-147083107-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-147083107-1');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<main class="compare-layout">
|
||||
<header class="header">
|
||||
<a class="header-back" href="/destyle.css/">← Back</a>
|
||||
<h1 class="header-title">Compare resets</h1>
|
||||
<div class="header-note">
|
||||
<div class="header-note-icon">⚠️</div>
|
||||
<p class="header-note-content">
|
||||
Use a larger screen to view a side-by-side comparison
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="compare">
|
||||
<div class="compare-item">
|
||||
<div class="compare-item-header">
|
||||
<h2 class="compare-title">
|
||||
<a href="/destyle.css/">Destyle.css</a>
|
||||
</h2>
|
||||
|
||||
<a class="compare-btn" href="test.html">
|
||||
<span class="compare-btn-label">
|
||||
View destyle.css test page
|
||||
</span>
|
||||
<span class="compare-btn-icon">
|
||||
↗︎
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
class="compare-frame"
|
||||
src="test.html"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div class="compare-item">
|
||||
<div class="compare-item-header">
|
||||
<h2 class="compare-title">
|
||||
<a href="http://necolas.github.io/normalize.css/">
|
||||
Normalize.css
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<a class="compare-btn" href="normalize.html">
|
||||
<span class="compare-btn-label">
|
||||
View normalize.css test page
|
||||
</span>
|
||||
<span class="compare-btn-icon">
|
||||
↗︎
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
class="compare-frame"
|
||||
src="normalize.html"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div class="compare-item">
|
||||
<div class="compare-item-header">
|
||||
<h2 class="compare-title">
|
||||
<a href="https://meyerweb.com/eric/tools/css/reset/">
|
||||
Eric Meyer's reset
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<a class="compare-btn" href="reset.html">
|
||||
<span class="compare-btn-label">
|
||||
View Eric Meyer's reset test page
|
||||
</span>
|
||||
<span class="compare-btn-icon">
|
||||
↗︎
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
class="compare-frame"
|
||||
src="reset.html"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<div class="container footer-container">
|
||||
<div class="bs">
|
||||
<div class="bs-label">Tested with:</div>
|
||||
|
||||
<a href="https://www.browserstack.com">
|
||||
<svg
|
||||
class="bs-logo"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 490.1 105.6"
|
||||
style="enable-background: new 0 0 490.1 105.6"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<style type="text/css">
|
||||
.st0 {
|
||||
fill: #f4b960;
|
||||
}
|
||||
.st1 {
|
||||
fill: #e66f32;
|
||||
}
|
||||
.st2 {
|
||||
fill: #e43c41;
|
||||
}
|
||||
.st3 {
|
||||
fill: #bdd041;
|
||||
}
|
||||
.st4 {
|
||||
fill: #6db54c;
|
||||
}
|
||||
.st5 {
|
||||
fill: #aedae6;
|
||||
}
|
||||
.st6 {
|
||||
fill: #56b8de;
|
||||
}
|
||||
.st7 {
|
||||
fill: #00b1d5;
|
||||
}
|
||||
.st8 {
|
||||
fill: url(#SVGID_1_);
|
||||
}
|
||||
.st9 {
|
||||
fill: #221f1f;
|
||||
}
|
||||
.st10 {
|
||||
fill: #ffffff;
|
||||
}
|
||||
.st11 {
|
||||
fill: #000111;
|
||||
}
|
||||
</style>
|
||||
<title>Browserstack-logo-white</title>
|
||||
<circle class="st0" cx="52.8" cy="52.8" r="52.8" />
|
||||
<circle class="st1" cx="47.5" cy="47.5" r="47.5" />
|
||||
<circle class="st2" cx="53.8" cy="41.1" r="41.1" />
|
||||
<circle class="st3" cx="57.1" cy="44.4" r="37.8" />
|
||||
<circle class="st4" cx="54.3" cy="47.2" r="35.1" />
|
||||
<circle class="st5" cx="48.8" cy="41.7" r="29.5" />
|
||||
<circle class="st6" cx="53.6" cy="36.8" r="24.7" />
|
||||
<circle class="st7" cx="56.6" cy="39.9" r="21.7" />
|
||||
<radialGradient
|
||||
id="SVGID_1_"
|
||||
cx="53.45"
|
||||
cy="63.02"
|
||||
r="18.57"
|
||||
gradientTransform="matrix(1 0 0 -1 0 106)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0" style="stop-color: #797979" />
|
||||
<stop offset="1" style="stop-color: #4c4c4c" />
|
||||
</radialGradient>
|
||||
<circle class="st8" cx="53.5" cy="43" r="18.6" />
|
||||
<circle class="st9" cx="53.5" cy="43" r="18.6" />
|
||||
<ellipse
|
||||
transform="matrix(0.4094 -0.9123 0.9123 0.4094 2.8913 76.9251)"
|
||||
class="st10"
|
||||
cx="60.9"
|
||||
cy="36.2"
|
||||
rx="5.7"
|
||||
ry="3.7"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M122.5,32.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h16.6c9.5,0,13.9,4.4,13.9,11c0.2,3.7-1.8,7.2-5.2,8.8v0.1
|
||||
c3.7,1.5,6.1,5.2,6,9.3c0,8.2-5.6,12.2-15.4,12.2h-16c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1L122.5,32.6L122.5,32.6z M139.6,49.1
|
||||
c3.9,0,6.4-2.2,6.4-5.4s-2.4-5.5-6.4-5.5h-8.9c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1v10.2c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0
|
||||
H139.6L139.6,49.1z M130.6,66.9h9.3c4.3,0,6.8-2.3,6.8-5.8s-2.4-5.7-6.7-5.7h-9.3c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1v10.7
|
||||
C130.3,66.8,130.4,66.9,130.6,66.9C130.6,66.9,130.6,66.9,130.6,66.9L130.6,66.9z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M159.9,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V44.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6
|
||||
c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v2.5h0.1c1.5-2.2,4.2-3.8,8.2-3.8c2.4,0,4.8,0.8,6.6,2.4c0.3,0.3,0.4,0.5,0.1,0.8l-3.5,4.1
|
||||
c-0.2,0.3-0.6,0.4-0.9,0.2c0,0,0,0-0.1,0c-1.4-0.9-3-1.4-4.7-1.4c-4.1,0-6,2.7-6,7.4v15.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0
|
||||
H159.9L159.9,73.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M182.9,65.8c-0.8-2.3-1.1-4.8-1.1-7.2c-0.1-2.5,0.3-4.9,1.1-7.2c1.8-5.1,6.6-8.1,13.1-8.1s11.2,3,13,8.1
|
||||
c0.8,2.3,1.1,4.8,1.1,7.2c0.1,2.5-0.3,4.9-1.1,7.2c-1.8,5.1-6.6,8.1-13,8.1S184.7,71,182.9,65.8z M201.9,64c0.5-1.7,0.8-3.6,0.7-5.4
|
||||
c0.1-1.8-0.1-3.7-0.7-5.4c-0.9-2.5-3.3-4-5.9-3.8c-2.6-0.2-5.1,1.4-6,3.8c-0.5,1.8-0.8,3.6-0.7,5.4c-0.1,1.8,0.1,3.7,0.7,5.4
|
||||
c0.9,2.5,3.4,4,6,3.8C198.6,68,201,66.5,201.9,64L201.9,64z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M241.9,73.3c-0.4,0-0.7-0.3-0.8-0.6L235,53.9h-0.1l-6.2,18.7c-0.1,0.4-0.4,0.6-0.8,0.6h-5.4
|
||||
c-0.4,0-0.7-0.3-0.8-0.6l-10-28.1c-0.1-0.2,0-0.5,0.2-0.6c0.1,0,0.2-0.1,0.3,0h6.3c0.4,0,0.8,0.2,0.9,0.6l6.1,19.3h0.1l6-19.3
|
||||
c0.1-0.4,0.5-0.6,0.9-0.6h4.7c0.4,0,0.7,0.2,0.9,0.6l6.4,19.3h0.1l5.8-19.3c0.1-0.4,0.5-0.7,0.9-0.6h6.3c0.2-0.1,0.5,0.1,0.5,0.3
|
||||
c0,0.1,0,0.2,0,0.3l-10,28.1c-0.1,0.4-0.4,0.6-0.8,0.6L241.9,73.3L241.9,73.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M259.3,69.3c-0.2-0.2-0.3-0.6-0.1-0.8c0,0,0,0,0.1-0.1l3.7-3.6c0.3-0.2,0.7-0.2,0.9,0c2.6,2.1,5.9,3.3,9.3,3.3
|
||||
c3.9,0,5.9-1.5,5.9-3.5c0-1.8-1.1-2.9-5.2-3.2l-3.4-0.3c-6.4-0.6-9.7-3.6-9.7-8.6c0-5.7,4.4-9.2,12.3-9.2c4.2-0.1,8.4,1.2,11.9,3.6
|
||||
c0.3,0.2,0.3,0.5,0.2,0.8c0,0,0,0,0,0.1l-3.2,3.6c-0.2,0.3-0.6,0.3-0.9,0.1c-2.5-1.5-5.4-2.4-8.3-2.4c-3.1,0-4.8,1.3-4.8,3
|
||||
s1.1,2.7,5.2,3.1l3.4,0.3c6.6,0.6,9.8,3.8,9.8,8.6c0,5.8-4.6,9.9-13.3,9.9C268,74,263.2,72.4,259.3,69.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M291.2,65.8c-0.8-2.3-1.2-4.7-1.1-7.2c-0.1-2.5,0.3-4.9,1-7.2c1.8-5.1,6.6-8.1,12.9-8.1c6.5,0,11.2,3.1,13,8.1
|
||||
c0.7,2.1,1,4.1,1,8.8c0,0.3-0.3,0.6-0.6,0.6c0,0-0.1,0-0.1,0h-19.5c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1c0,0.8,0.2,1.5,0.5,2.2
|
||||
c1,2.9,3.5,4.4,7.1,4.4c2.7,0.1,5.4-0.9,7.4-2.8c0.2-0.3,0.7-0.4,1-0.1c0,0,0,0,0,0l3.9,3.2c0.2,0.1,0.3,0.5,0.2,0.7
|
||||
c0,0.1-0.1,0.1-0.1,0.1c-2.7,2.9-7.2,5-13,5C297.8,73.9,293,70.9,291.2,65.8z M310.4,52.8c-0.9-2.4-3.2-3.8-6.2-3.8
|
||||
s-5.4,1.4-6.2,3.8c-0.3,0.8-0.4,1.6-0.4,2.5c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0h12.4c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1
|
||||
C310.8,54.5,310.6,53.6,310.4,52.8L310.4,52.8z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M323.6,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V44.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6
|
||||
c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v2.5h0.1c1.5-2.2,4.2-3.8,8.2-3.8c2.4,0,4.8,0.8,6.6,2.4c0.3,0.3,0.4,0.5,0.1,0.8l-3.5,4.1
|
||||
c-0.2,0.3-0.6,0.4-0.9,0.2c0,0,0,0-0.1,0c-1.4-0.9-3-1.4-4.7-1.4c-4.1,0-6,2.7-6,7.4v15.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0
|
||||
H323.6L323.6,73.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M346.5,68.5c-0.3-0.2-0.4-0.6-0.2-0.9c0,0,0,0,0,0l4.1-4.4c0.2-0.3,0.6-0.3,0.9-0.1c0,0,0,0,0,0
|
||||
c3.5,2.7,7.7,4.2,12.1,4.4c5.3,0,8.4-2.5,8.4-6c0-3-2-4.9-8.1-5.7l-2.4-0.3c-8.6-1.1-13.5-4.9-13.5-11.8c0-7.5,5.9-12.4,15.1-12.4
|
||||
c5.1-0.1,10.1,1.4,14.5,4.2c0.3,0.1,0.4,0.4,0.2,0.7c0,0.1-0.1,0.1-0.1,0.2l-3.1,4.5c-0.2,0.3-0.6,0.4-0.9,0.2
|
||||
c-3.2-2.1-6.9-3.2-10.7-3.2c-4.5,0-7,2.3-7,5.5c0,2.9,2.2,4.8,8.2,5.6l2.4,0.3c8.6,1.1,13.3,4.9,13.3,12c0,7.3-5.7,12.8-16.8,12.8
|
||||
C356.3,73.9,350,71.5,346.5,68.5z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M393.3,73.8c-6.4,0-8.8-2.9-8.8-8.6V49.8c0-0.2-0.1-0.3-0.3-0.4c0,0,0,0-0.1,0H382c-0.3,0-0.6-0.2-0.7-0.5
|
||||
c0,0,0,0,0-0.1v-4.1c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h2.1c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1v-8c0-0.3,0.3-0.6,0.6-0.6
|
||||
c0,0,0,0,0.1,0h6c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v8c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0h4.2c0.3,0,0.6,0.2,0.7,0.5
|
||||
c0,0,0,0,0,0.1v4.1c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0h-4.2c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1V65c0,2.1,0.9,2.7,3,2.7h1.6
|
||||
c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v4.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0L393.3,73.8L393.3,73.8z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M421.2,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1v-2.1h0c-1.5,2-4.5,3.4-8.9,3.4c-5.8,0-10.6-2.8-10.6-8.9
|
||||
c0-6.4,4.9-9.3,12.7-9.3h6.4c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1v-1.4c0-3.3-1.7-4.9-7-4.9c-2.6-0.1-5.1,0.6-7.2,2
|
||||
c-0.3,0.2-0.7,0.2-0.9-0.1c0,0,0,0,0-0.1l-2.4-4c-0.2-0.2-0.1-0.6,0.1-0.8c0,0,0,0,0,0c2.6-1.7,6-2.9,11.2-2.9
|
||||
c9.6,0,13.2,3,13.2,10.2v19.1c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0H421.2L421.2,73.3z M420.4,63.4v-2.2c0-0.2-0.1-0.3-0.3-0.4
|
||||
c0,0,0,0-0.1,0h-5.2c-4.7,0-6.8,1.2-6.8,3.9c0,2.4,1.9,3.6,5.5,3.6C417.9,68.4,420.4,66.8,420.4,63.4L420.4,63.4z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M433.1,65.8c-0.7-2.3-1.1-4.8-1-7.2c-0.1-2.4,0.3-4.9,1-7.2c1.8-5.2,6.7-8.1,13.1-8.1c4.2-0.2,8.2,1.5,11,4.6
|
||||
c0.2,0.2,0.2,0.6,0,0.8c0,0,0,0-0.1,0.1l-4.1,3.3c-0.3,0.2-0.7,0.2-0.9-0.1c0,0,0,0,0-0.1c-1.5-1.7-3.6-2.6-5.9-2.5
|
||||
c-2.8,0-5,1.3-5.9,3.8c-0.5,1.8-0.8,3.6-0.7,5.4c-0.1,1.8,0.1,3.7,0.7,5.5c0.9,2.5,3.1,3.8,5.9,3.8c2.2,0.1,4.4-0.9,5.9-2.6
|
||||
c0.2-0.3,0.6-0.3,0.9-0.1c0,0,0,0,0,0l4.1,3.3c0.3,0.2,0.3,0.5,0.1,0.8c0,0,0,0-0.1,0.1c-2.9,3-6.9,4.6-11,4.5
|
||||
C439.8,73.9,435,71.1,433.1,65.8z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M482.8,73.3c-0.4,0-0.8-0.2-1-0.6l-8-12.3l-4.3,4.6v7.7c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0h-6
|
||||
c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V32.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v23.8
|
||||
l10.8-11.8c0.3-0.4,0.8-0.6,1.2-0.6h6.7c0.2,0,0.4,0.1,0.4,0.3c0,0.1,0,0.3-0.1,0.3l-10.1,10.7L490,72.7c0.1,0.2,0.1,0.4,0,0.5
|
||||
c-0.1,0.1-0.2,0.1-0.3,0.1H482.8L482.8,73.3z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="credits">
|
||||
©2021 by <a href="https://www.nicolascusan.com">Nicolas Cusan</a>.
|
||||
|
||||
Follow me on <a href="https://twitter.com/n_cusan">Twitter</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,4 @@
|
||||
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
|
||||
/*! destyle.css v3.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
|
||||
|
||||
/* Reset box-model and set borders */
|
||||
/* ============================================ */
|
||||
@@ -70,7 +70,6 @@ h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
font-weight: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -147,7 +146,6 @@ a {
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
@@ -201,13 +199,14 @@ sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content */
|
||||
/* Replaced content */
|
||||
/* ============================================ */
|
||||
|
||||
/**
|
||||
* Prevent vertical alignment issues.
|
||||
*/
|
||||
|
||||
svg,
|
||||
img,
|
||||
embed,
|
||||
object,
|
||||
@@ -219,7 +218,9 @@ iframe {
|
||||
/* ============================================ */
|
||||
|
||||
/**
|
||||
* Reset form fields to make them styleable
|
||||
* Reset form fields to make them styleable.
|
||||
* 1. Make form elements stylable across systems iOS especially.
|
||||
* 2. Inherit text-transform from parent.
|
||||
*/
|
||||
|
||||
button,
|
||||
@@ -227,7 +228,7 @@ input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
-webkit-appearance: none; /* 1 */
|
||||
appearance: none;
|
||||
vertical-align: middle;
|
||||
color: inherit;
|
||||
@@ -235,9 +236,9 @@ textarea {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
border-radius: 0;
|
||||
text-align: inherit;
|
||||
text-transform: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -255,29 +256,7 @@ textarea {
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
* Correct cursors for clickable elements.
|
||||
*/
|
||||
|
||||
button,
|
||||
@@ -285,46 +264,25 @@ button,
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
[type="button"][disabled],
|
||||
[type="reset"][disabled],
|
||||
[type="submit"][disabled] {
|
||||
button:disabled,
|
||||
[type="button"]:disabled,
|
||||
[type="reset"]:disabled,
|
||||
[type="submit"]:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
* Improve outlines for Firefox and unify style with input elements & buttons.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove arrow in IE10 & IE11
|
||||
*/
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
select:disabled {
|
||||
opacity: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -345,19 +303,8 @@ fieldset {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -403,7 +350,7 @@ textarea {
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
* 2. Fix font inheritance.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
@@ -442,16 +389,19 @@ summary {
|
||||
* Remove outline for editable content.
|
||||
*/
|
||||
|
||||
[contenteditable] {
|
||||
outline: none;
|
||||
[contenteditable]:focus {
|
||||
outline: auto;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
/* Tables */
|
||||
/* ============================================ */
|
||||
|
||||
/**
|
||||
1. Correct table border color inheritance in all Chrome and Safari.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-color: inherit; /* 1 */
|
||||
}
|
||||
|
||||
caption {
|
||||
@@ -468,22 +418,3 @@ th {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Misc */
|
||||
/* ============================================ */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
@@ -1,100 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Destyle.css - Compared to other resets</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="stylesheet" href="destyle.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<meta name="google-site-verification" content="6NN30tyC1Cm8FIYA9_PwrI8vf_dqvILEXn220VFXdVs" />
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-147083107-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-147083107-1');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<main class="compare-container">
|
||||
<header class="header">
|
||||
<a class="header-back" href="/destyle.css/">👈 Back</a>
|
||||
<h1 class="header-title">Compare resets</h1>
|
||||
|
||||
<p class="header-note">
|
||||
⚠️ Use a larger screen to view a side-by-side comparison
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="compare">
|
||||
<div class="compare-item">
|
||||
<div class="compare-item-header">
|
||||
<h2 class="compare-title">
|
||||
<a href="/destyle.css/">Destyle.css</a>
|
||||
</h2>
|
||||
|
||||
<a class="compare-btn" href="test.html">
|
||||
View destyle.css test page
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
class="compare-frame"
|
||||
src="test.html"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div class="compare-item">
|
||||
<div class="compare-item-header">
|
||||
<h2 class="compare-title">
|
||||
<a href="http://necolas.github.io/normalize.css/">
|
||||
Normalize.css
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<a class="compare-btn" href="normalize.html">
|
||||
View normalize.css test page
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
class="compare-frame"
|
||||
src="normalize.html"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<div class="compare-item">
|
||||
<div class="compare-item-header">
|
||||
<h2 class="compare-title">
|
||||
<a href="https://meyerweb.com/eric/tools/css/reset/">
|
||||
Eric Meyer's reset
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<a class="compare-btn" href="reset.html">
|
||||
View Eric Meyer's reset test page
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<iframe
|
||||
class="compare-frame"
|
||||
src="reset.html"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
©2019 — Made with love by
|
||||
<a href="https://twitter.com/n_cusan">Nicolas Cusan</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 561 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
BIN
docs/favicon.ico
BIN
docs/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,15 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="26px" height="26px" viewBox="0 0 26 26" enable-background="new 0 0 26 26" xml:space="preserve">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#333333" d="M12.999,0C5.821,0,0,5.82,0,13c0,5.744,3.725,10.617,8.891,12.335
|
||||
c0.65,0.119,0.888-0.283,0.888-0.627c0-0.309-0.011-1.127-0.018-2.211c-3.616,0.785-4.379-1.744-4.379-1.744
|
||||
c-0.591-1.5-1.443-1.9-1.443-1.9c-1.18-0.807,0.089-0.791,0.089-0.791c1.305,0.092,1.991,1.342,1.991,1.342
|
||||
c1.16,1.984,3.042,1.412,3.783,1.08c0.118-0.842,0.454-1.414,0.826-1.738c-2.887-0.33-5.922-1.443-5.922-6.426
|
||||
c0-1.419,0.507-2.58,1.338-3.488c-0.134-0.329-0.58-1.651,0.127-3.44c0,0,1.091-0.35,3.575,1.333
|
||||
c1.037-0.289,2.149-0.433,3.255-0.438c1.104,0.005,2.216,0.149,3.255,0.438c2.482-1.682,3.57-1.333,3.57-1.333
|
||||
c0.711,1.79,0.264,3.111,0.131,3.44c0.832,0.909,1.336,2.069,1.336,3.488c0,4.994-3.041,6.094-5.936,6.414
|
||||
c0.467,0.402,0.881,1.195,0.881,2.408c0,1.738-0.015,3.139-0.015,3.566c0,0.348,0.233,0.752,0.894,0.625
|
||||
C22.279,23.611,26,18.742,26,13C26,5.82,20.18,0,12.999,0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
300
docs/index.html
300
docs/index.html
@@ -1,300 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>
|
||||
Destyle.css - a clean slate for writing CSS without user agent styles
|
||||
</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
|
||||
<link rel="stylesheet" href="destyle.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<meta name="google-site-verification" content="6NN30tyC1Cm8FIYA9_PwrI8vf_dqvILEXn220VFXdVs" />
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-147083107-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-147083107-1');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<h1 class="main-title">Destyle.css</h1>
|
||||
<h2 class="sub-title">
|
||||
Opinionated reset stylesheet that provides a clean slate for styling
|
||||
your html.
|
||||
</h2>
|
||||
|
||||
<ul class="features">
|
||||
<li>
|
||||
Ensures consistency across browsers (thanks
|
||||
<a href="http://necolas.github.io/normalize.css/">normalize.css</a>)
|
||||
</li>
|
||||
<li>Removes spacing (margin & padding) and resets font-size and line-height</li>
|
||||
<li>Sets some sensible defaults (see <a href="https://github.com/nicolas-cusan/destyle.css/blob/master/Readme.md#rules">docs</a>)</li>
|
||||
<li>Resets font-size and line-height</li>
|
||||
<li>Prevents the necessity of reseting (most) user agent styles</li>
|
||||
<li>
|
||||
Prevents style inspector bloat by only targeting what is necessary
|
||||
</li>
|
||||
<li>Contributes to the separation of presentation and semantics</li>
|
||||
<li>
|
||||
Works well with all kind of styling approaches, atomic libraries like
|
||||
<a href="https://tachyons.io/">tachyons</a>, component based styling
|
||||
like css-in-js in <a href="https://reactjs.org">React</a>, good 'ol
|
||||
css, ...
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="install">
|
||||
<code>
|
||||
<a href="https://www.npmjs.com/package/destyle.css">npm</a> install
|
||||
--save destyle.css
|
||||
</code>
|
||||
|
||||
<div class="install-links">
|
||||
<a
|
||||
class="install-link install-link-first"
|
||||
href="https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css"
|
||||
>View source on GitHub</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="install-link"
|
||||
href="https://yarnpkg.com/en/package/destyle.css"
|
||||
>CDN</a
|
||||
>
|
||||
<span>–</span>
|
||||
<a
|
||||
class="install-link"
|
||||
href="https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a class="btn" href="compare.html">See it in action</a>
|
||||
<a
|
||||
class="btn btn-outline"
|
||||
href="https://github.com/nicolas-cusan/destyle.css/blob/master/Readme.md"
|
||||
>
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<div class="social">
|
||||
<a href="https://github.com/nicolas-cusan/destyle.css/">
|
||||
<img src="github.svg" alt="View on Github" />
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
|
||||
class="twitter-share-button"
|
||||
data-size="large"
|
||||
data-text="Destyle.css - a clean slate for writing CSS without user agent styles"
|
||||
data-url="https://nicolas-cusan.github.io/destyle.css/"
|
||||
data-show-count="false"
|
||||
>Tweet</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bs">
|
||||
<div class="bs-label">
|
||||
Tested with:
|
||||
</div>
|
||||
|
||||
<a href="https://www.browserstack.com">
|
||||
<svg
|
||||
class="bs-logo"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 490.1 105.6"
|
||||
style="enable-background:new 0 0 490.1 105.6;"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<style type="text/css">
|
||||
.st0 {
|
||||
fill: #f4b960;
|
||||
}
|
||||
.st1 {
|
||||
fill: #e66f32;
|
||||
}
|
||||
.st2 {
|
||||
fill: #e43c41;
|
||||
}
|
||||
.st3 {
|
||||
fill: #bdd041;
|
||||
}
|
||||
.st4 {
|
||||
fill: #6db54c;
|
||||
}
|
||||
.st5 {
|
||||
fill: #aedae6;
|
||||
}
|
||||
.st6 {
|
||||
fill: #56b8de;
|
||||
}
|
||||
.st7 {
|
||||
fill: #00b1d5;
|
||||
}
|
||||
.st8 {
|
||||
fill: url(#SVGID_1_);
|
||||
}
|
||||
.st9 {
|
||||
fill: #221f1f;
|
||||
}
|
||||
.st10 {
|
||||
fill: #ffffff;
|
||||
}
|
||||
.st11 {
|
||||
fill: #000111;
|
||||
}
|
||||
</style>
|
||||
<title>Browserstack-logo-white</title>
|
||||
<circle class="st0" cx="52.8" cy="52.8" r="52.8" />
|
||||
<circle class="st1" cx="47.5" cy="47.5" r="47.5" />
|
||||
<circle class="st2" cx="53.8" cy="41.1" r="41.1" />
|
||||
<circle class="st3" cx="57.1" cy="44.4" r="37.8" />
|
||||
<circle class="st4" cx="54.3" cy="47.2" r="35.1" />
|
||||
<circle class="st5" cx="48.8" cy="41.7" r="29.5" />
|
||||
<circle class="st6" cx="53.6" cy="36.8" r="24.7" />
|
||||
<circle class="st7" cx="56.6" cy="39.9" r="21.7" />
|
||||
<radialGradient
|
||||
id="SVGID_1_"
|
||||
cx="53.45"
|
||||
cy="63.02"
|
||||
r="18.57"
|
||||
gradientTransform="matrix(1 0 0 -1 0 106)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0" style="stop-color:#797979" />
|
||||
<stop offset="1" style="stop-color:#4C4C4C" />
|
||||
</radialGradient>
|
||||
<circle class="st8" cx="53.5" cy="43" r="18.6" />
|
||||
<circle class="st9" cx="53.5" cy="43" r="18.6" />
|
||||
<ellipse
|
||||
transform="matrix(0.4094 -0.9123 0.9123 0.4094 2.8913 76.9251)"
|
||||
class="st10"
|
||||
cx="60.9"
|
||||
cy="36.2"
|
||||
rx="5.7"
|
||||
ry="3.7"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M122.5,32.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h16.6c9.5,0,13.9,4.4,13.9,11c0.2,3.7-1.8,7.2-5.2,8.8v0.1
|
||||
c3.7,1.5,6.1,5.2,6,9.3c0,8.2-5.6,12.2-15.4,12.2h-16c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1L122.5,32.6L122.5,32.6z M139.6,49.1
|
||||
c3.9,0,6.4-2.2,6.4-5.4s-2.4-5.5-6.4-5.5h-8.9c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1v10.2c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0
|
||||
H139.6L139.6,49.1z M130.6,66.9h9.3c4.3,0,6.8-2.3,6.8-5.8s-2.4-5.7-6.7-5.7h-9.3c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1v10.7
|
||||
C130.3,66.8,130.4,66.9,130.6,66.9C130.6,66.9,130.6,66.9,130.6,66.9L130.6,66.9z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M159.9,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V44.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6
|
||||
c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v2.5h0.1c1.5-2.2,4.2-3.8,8.2-3.8c2.4,0,4.8,0.8,6.6,2.4c0.3,0.3,0.4,0.5,0.1,0.8l-3.5,4.1
|
||||
c-0.2,0.3-0.6,0.4-0.9,0.2c0,0,0,0-0.1,0c-1.4-0.9-3-1.4-4.7-1.4c-4.1,0-6,2.7-6,7.4v15.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0
|
||||
H159.9L159.9,73.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M182.9,65.8c-0.8-2.3-1.1-4.8-1.1-7.2c-0.1-2.5,0.3-4.9,1.1-7.2c1.8-5.1,6.6-8.1,13.1-8.1s11.2,3,13,8.1
|
||||
c0.8,2.3,1.1,4.8,1.1,7.2c0.1,2.5-0.3,4.9-1.1,7.2c-1.8,5.1-6.6,8.1-13,8.1S184.7,71,182.9,65.8z M201.9,64c0.5-1.7,0.8-3.6,0.7-5.4
|
||||
c0.1-1.8-0.1-3.7-0.7-5.4c-0.9-2.5-3.3-4-5.9-3.8c-2.6-0.2-5.1,1.4-6,3.8c-0.5,1.8-0.8,3.6-0.7,5.4c-0.1,1.8,0.1,3.7,0.7,5.4
|
||||
c0.9,2.5,3.4,4,6,3.8C198.6,68,201,66.5,201.9,64L201.9,64z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M241.9,73.3c-0.4,0-0.7-0.3-0.8-0.6L235,53.9h-0.1l-6.2,18.7c-0.1,0.4-0.4,0.6-0.8,0.6h-5.4
|
||||
c-0.4,0-0.7-0.3-0.8-0.6l-10-28.1c-0.1-0.2,0-0.5,0.2-0.6c0.1,0,0.2-0.1,0.3,0h6.3c0.4,0,0.8,0.2,0.9,0.6l6.1,19.3h0.1l6-19.3
|
||||
c0.1-0.4,0.5-0.6,0.9-0.6h4.7c0.4,0,0.7,0.2,0.9,0.6l6.4,19.3h0.1l5.8-19.3c0.1-0.4,0.5-0.7,0.9-0.6h6.3c0.2-0.1,0.5,0.1,0.5,0.3
|
||||
c0,0.1,0,0.2,0,0.3l-10,28.1c-0.1,0.4-0.4,0.6-0.8,0.6L241.9,73.3L241.9,73.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M259.3,69.3c-0.2-0.2-0.3-0.6-0.1-0.8c0,0,0,0,0.1-0.1l3.7-3.6c0.3-0.2,0.7-0.2,0.9,0c2.6,2.1,5.9,3.3,9.3,3.3
|
||||
c3.9,0,5.9-1.5,5.9-3.5c0-1.8-1.1-2.9-5.2-3.2l-3.4-0.3c-6.4-0.6-9.7-3.6-9.7-8.6c0-5.7,4.4-9.2,12.3-9.2c4.2-0.1,8.4,1.2,11.9,3.6
|
||||
c0.3,0.2,0.3,0.5,0.2,0.8c0,0,0,0,0,0.1l-3.2,3.6c-0.2,0.3-0.6,0.3-0.9,0.1c-2.5-1.5-5.4-2.4-8.3-2.4c-3.1,0-4.8,1.3-4.8,3
|
||||
s1.1,2.7,5.2,3.1l3.4,0.3c6.6,0.6,9.8,3.8,9.8,8.6c0,5.8-4.6,9.9-13.3,9.9C268,74,263.2,72.4,259.3,69.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M291.2,65.8c-0.8-2.3-1.2-4.7-1.1-7.2c-0.1-2.5,0.3-4.9,1-7.2c1.8-5.1,6.6-8.1,12.9-8.1c6.5,0,11.2,3.1,13,8.1
|
||||
c0.7,2.1,1,4.1,1,8.8c0,0.3-0.3,0.6-0.6,0.6c0,0-0.1,0-0.1,0h-19.5c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1c0,0.8,0.2,1.5,0.5,2.2
|
||||
c1,2.9,3.5,4.4,7.1,4.4c2.7,0.1,5.4-0.9,7.4-2.8c0.2-0.3,0.7-0.4,1-0.1c0,0,0,0,0,0l3.9,3.2c0.2,0.1,0.3,0.5,0.2,0.7
|
||||
c0,0.1-0.1,0.1-0.1,0.1c-2.7,2.9-7.2,5-13,5C297.8,73.9,293,70.9,291.2,65.8z M310.4,52.8c-0.9-2.4-3.2-3.8-6.2-3.8
|
||||
s-5.4,1.4-6.2,3.8c-0.3,0.8-0.4,1.6-0.4,2.5c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0h12.4c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1
|
||||
C310.8,54.5,310.6,53.6,310.4,52.8L310.4,52.8z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M323.6,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V44.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6
|
||||
c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v2.5h0.1c1.5-2.2,4.2-3.8,8.2-3.8c2.4,0,4.8,0.8,6.6,2.4c0.3,0.3,0.4,0.5,0.1,0.8l-3.5,4.1
|
||||
c-0.2,0.3-0.6,0.4-0.9,0.2c0,0,0,0-0.1,0c-1.4-0.9-3-1.4-4.7-1.4c-4.1,0-6,2.7-6,7.4v15.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0
|
||||
H323.6L323.6,73.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M346.5,68.5c-0.3-0.2-0.4-0.6-0.2-0.9c0,0,0,0,0,0l4.1-4.4c0.2-0.3,0.6-0.3,0.9-0.1c0,0,0,0,0,0
|
||||
c3.5,2.7,7.7,4.2,12.1,4.4c5.3,0,8.4-2.5,8.4-6c0-3-2-4.9-8.1-5.7l-2.4-0.3c-8.6-1.1-13.5-4.9-13.5-11.8c0-7.5,5.9-12.4,15.1-12.4
|
||||
c5.1-0.1,10.1,1.4,14.5,4.2c0.3,0.1,0.4,0.4,0.2,0.7c0,0.1-0.1,0.1-0.1,0.2l-3.1,4.5c-0.2,0.3-0.6,0.4-0.9,0.2
|
||||
c-3.2-2.1-6.9-3.2-10.7-3.2c-4.5,0-7,2.3-7,5.5c0,2.9,2.2,4.8,8.2,5.6l2.4,0.3c8.6,1.1,13.3,4.9,13.3,12c0,7.3-5.7,12.8-16.8,12.8
|
||||
C356.3,73.9,350,71.5,346.5,68.5z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M393.3,73.8c-6.4,0-8.8-2.9-8.8-8.6V49.8c0-0.2-0.1-0.3-0.3-0.4c0,0,0,0-0.1,0H382c-0.3,0-0.6-0.2-0.7-0.5
|
||||
c0,0,0,0,0-0.1v-4.1c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h2.1c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1v-8c0-0.3,0.3-0.6,0.6-0.6
|
||||
c0,0,0,0,0.1,0h6c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v8c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0h4.2c0.3,0,0.6,0.2,0.7,0.5
|
||||
c0,0,0,0,0,0.1v4.1c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0h-4.2c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1V65c0,2.1,0.9,2.7,3,2.7h1.6
|
||||
c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v4.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0L393.3,73.8L393.3,73.8z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M421.2,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1v-2.1h0c-1.5,2-4.5,3.4-8.9,3.4c-5.8,0-10.6-2.8-10.6-8.9
|
||||
c0-6.4,4.9-9.3,12.7-9.3h6.4c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1v-1.4c0-3.3-1.7-4.9-7-4.9c-2.6-0.1-5.1,0.6-7.2,2
|
||||
c-0.3,0.2-0.7,0.2-0.9-0.1c0,0,0,0,0-0.1l-2.4-4c-0.2-0.2-0.1-0.6,0.1-0.8c0,0,0,0,0,0c2.6-1.7,6-2.9,11.2-2.9
|
||||
c9.6,0,13.2,3,13.2,10.2v19.1c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0H421.2L421.2,73.3z M420.4,63.4v-2.2c0-0.2-0.1-0.3-0.3-0.4
|
||||
c0,0,0,0-0.1,0h-5.2c-4.7,0-6.8,1.2-6.8,3.9c0,2.4,1.9,3.6,5.5,3.6C417.9,68.4,420.4,66.8,420.4,63.4L420.4,63.4z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M433.1,65.8c-0.7-2.3-1.1-4.8-1-7.2c-0.1-2.4,0.3-4.9,1-7.2c1.8-5.2,6.7-8.1,13.1-8.1c4.2-0.2,8.2,1.5,11,4.6
|
||||
c0.2,0.2,0.2,0.6,0,0.8c0,0,0,0-0.1,0.1l-4.1,3.3c-0.3,0.2-0.7,0.2-0.9-0.1c0,0,0,0,0-0.1c-1.5-1.7-3.6-2.6-5.9-2.5
|
||||
c-2.8,0-5,1.3-5.9,3.8c-0.5,1.8-0.8,3.6-0.7,5.4c-0.1,1.8,0.1,3.7,0.7,5.5c0.9,2.5,3.1,3.8,5.9,3.8c2.2,0.1,4.4-0.9,5.9-2.6
|
||||
c0.2-0.3,0.6-0.3,0.9-0.1c0,0,0,0,0,0l4.1,3.3c0.3,0.2,0.3,0.5,0.1,0.8c0,0,0,0-0.1,0.1c-2.9,3-6.9,4.6-11,4.5
|
||||
C439.8,73.9,435,71.1,433.1,65.8z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M482.8,73.3c-0.4,0-0.8-0.2-1-0.6l-8-12.3l-4.3,4.6v7.7c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0h-6
|
||||
c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V32.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v23.8
|
||||
l10.8-11.8c0.3-0.4,0.8-0.6,1.2-0.6h6.7c0.2,0,0.4,0.1,0.4,0.3c0,0.1,0,0.3-0.1,0.3l-10.1,10.7L490,72.7c0.1,0.2,0.1,0.4,0,0.5
|
||||
c-0.1,0.1-0.2,0.1-0.3,0.1H482.8L482.8,73.3z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
©2020 — Made with love by
|
||||
<a href="https://twitter.com/n_cusan">Nicolas Cusan</a>
|
||||
</footer>
|
||||
|
||||
<script
|
||||
async
|
||||
src="https://platform.twitter.com/widgets.js"
|
||||
charset="utf-8"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
363
docs/style.css
363
docs/style.css
@@ -1,363 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600');
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 16px/1.4 'Fira Sans', sans-serif;
|
||||
color: #333;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Home
|
||||
========================================================== */
|
||||
|
||||
.container {
|
||||
padding: 30px 20px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 400px) {
|
||||
.container {
|
||||
padding: 60px 20px 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 2em;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.features {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.features li {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.features li::before {
|
||||
content: '☑️';
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
left: 0;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.features a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.install {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.install code {
|
||||
display: block;
|
||||
background-color: #f4f4f4;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.install-links {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.install span,
|
||||
.install a {
|
||||
color: dodgerblue;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.install a:active,
|
||||
.install a:focus,
|
||||
.install a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.install span,
|
||||
.install-link {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.install span::before,
|
||||
.install span::after {
|
||||
content: '\00a0';
|
||||
}
|
||||
|
||||
.install-link-first {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.actions {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: dodgerblue;
|
||||
color: #fff;
|
||||
padding: 0.7em 1.4em;
|
||||
font-weight: 600;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 2px solid dodgerblue;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
.btn + .btn {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.social {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.social a {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.social a:not(:last-child) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.social {
|
||||
margin-left: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bs {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.bs-label {
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.bs-logo {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
/* Footer
|
||||
========================================================== */
|
||||
|
||||
.footer {
|
||||
background-color: #f4f4f4;
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Compare
|
||||
========================================================== */
|
||||
|
||||
.compare-container {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 30px 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.header {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.header-back {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 20px;
|
||||
padding-top: 0.4em;
|
||||
}
|
||||
|
||||
.header-back:active,
|
||||
.header-back:focus,
|
||||
.header-back:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.header-note {
|
||||
margin-top: 20px;
|
||||
font-size: 95%;
|
||||
padding: 10px;
|
||||
background-color: lemonchiffon;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.header-note {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Compare */
|
||||
|
||||
.compare {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 749px) {
|
||||
.compare {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 20px 70px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.compare {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-item {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.compare-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
width: 33.33333%;
|
||||
padding: 20px 20px 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.compare-item-header {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: none;
|
||||
flex: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.compare-title a:active,
|
||||
.compare-title a:focus,
|
||||
.compare-title a:hover {
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.compare-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-btn {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.compare-btn {
|
||||
font-size: 85%;
|
||||
text-decoration: none;
|
||||
}
|
||||
.compare-btn:active,
|
||||
.compare-btn:focus,
|
||||
.compare-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-frame {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.compare-frame {
|
||||
display: block;
|
||||
width: 100%;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
6
icon.svg
Normal file
6
icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||
<circle cx="8" cy="8" r="6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 402 B |
@@ -4,9 +4,9 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Iframe Content</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<link rel="stylesheet" href="destyle.css">
|
||||
<meta name="google-site-verification" content="6NN30tyC1Cm8FIYA9_PwrI8vf_dqvILEXn220VFXdVs" />
|
||||
</head>
|
||||
297
index.html
Normal file
297
index.html
Normal file
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>
|
||||
Destyle.css - Opinionated reset stylesheet that provides a clean slate for
|
||||
styling your html.
|
||||
</title>
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<link rel="stylesheet" href="destyle.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<meta
|
||||
name="google-site-verification"
|
||||
content="6NN30tyC1Cm8FIYA9_PwrI8vf_dqvILEXn220VFXdVs"
|
||||
/>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=UA-147083107-1"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag("config", "UA-147083107-1");
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container container-main">
|
||||
<h1 class="main-title">Destyle.css</h1>
|
||||
<h2 class="sub-title">
|
||||
Opinionated reset stylesheet that provides<br class="sub-title-break" />a clean slate for
|
||||
styling your html.
|
||||
</h2>
|
||||
|
||||
<h3 class="list-title">Features</h3>
|
||||
<ul class="list" role="list">
|
||||
<li>Ensures consistency across browsers as much as possible</li>
|
||||
<li>Prevents the necessity of reseting user agent styles</li>
|
||||
<li>
|
||||
Prevents style inspector bloat by only targeting what is necessary
|
||||
</li>
|
||||
<li>Removes margins & paddings</li>
|
||||
<li>Removes default font styles and ensures proper inheritance</li>
|
||||
<li>Contributes to the separation of presentation and semantics</li>
|
||||
<li>
|
||||
Sets sensible default styles (see
|
||||
<a
|
||||
href="https://github.com/nicolas-cusan/destyle.css/blob/master/Readme.md#rules"
|
||||
>docs</a
|
||||
>)
|
||||
</li>
|
||||
<li>Well suited for utility class libraries and large codebases</li>
|
||||
<li>
|
||||
Made for modern browsers only, therefor small in size (~0.95kb)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="list-title">Get it</h3>
|
||||
<ul class="list" role="list">
|
||||
<li>
|
||||
<code>
|
||||
<a href="https://www.npmjs.com/package/destyle.css">npm</a> install
|
||||
--save destyle.css
|
||||
</code>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
class="install-link"
|
||||
href="https://yarnpkg.com/en/package/destyle.css"
|
||||
>CDN</a
|
||||
>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
class="install-link"
|
||||
href="https://raw.githubusercontent.com/nicolas-cusan/destyle.css/master/destyle.css"
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="actions">
|
||||
<a class="btn" href="compare.html">See it in action</a>
|
||||
<a
|
||||
class="btn btn-outline"
|
||||
href="https://github.com/nicolas-cusan/destyle.css"
|
||||
>
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="bs">
|
||||
<div class="bs-label">Tested with:</div>
|
||||
|
||||
<a href="https://www.browserstack.com">
|
||||
<svg
|
||||
class="bs-logo"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 490.1 105.6"
|
||||
style="enable-background: new 0 0 490.1 105.6"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<style type="text/css">
|
||||
.st0 {
|
||||
fill: #f4b960;
|
||||
}
|
||||
.st1 {
|
||||
fill: #e66f32;
|
||||
}
|
||||
.st2 {
|
||||
fill: #e43c41;
|
||||
}
|
||||
.st3 {
|
||||
fill: #bdd041;
|
||||
}
|
||||
.st4 {
|
||||
fill: #6db54c;
|
||||
}
|
||||
.st5 {
|
||||
fill: #aedae6;
|
||||
}
|
||||
.st6 {
|
||||
fill: #56b8de;
|
||||
}
|
||||
.st7 {
|
||||
fill: #00b1d5;
|
||||
}
|
||||
.st8 {
|
||||
fill: url(#SVGID_1_);
|
||||
}
|
||||
.st9 {
|
||||
fill: #221f1f;
|
||||
}
|
||||
.st10 {
|
||||
fill: #ffffff;
|
||||
}
|
||||
.st11 {
|
||||
fill: #000111;
|
||||
}
|
||||
</style>
|
||||
<title>Browserstack-logo-white</title>
|
||||
<circle class="st0" cx="52.8" cy="52.8" r="52.8" />
|
||||
<circle class="st1" cx="47.5" cy="47.5" r="47.5" />
|
||||
<circle class="st2" cx="53.8" cy="41.1" r="41.1" />
|
||||
<circle class="st3" cx="57.1" cy="44.4" r="37.8" />
|
||||
<circle class="st4" cx="54.3" cy="47.2" r="35.1" />
|
||||
<circle class="st5" cx="48.8" cy="41.7" r="29.5" />
|
||||
<circle class="st6" cx="53.6" cy="36.8" r="24.7" />
|
||||
<circle class="st7" cx="56.6" cy="39.9" r="21.7" />
|
||||
<radialGradient
|
||||
id="SVGID_1_"
|
||||
cx="53.45"
|
||||
cy="63.02"
|
||||
r="18.57"
|
||||
gradientTransform="matrix(1 0 0 -1 0 106)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0" style="stop-color: #797979" />
|
||||
<stop offset="1" style="stop-color: #4c4c4c" />
|
||||
</radialGradient>
|
||||
<circle class="st8" cx="53.5" cy="43" r="18.6" />
|
||||
<circle class="st9" cx="53.5" cy="43" r="18.6" />
|
||||
<ellipse
|
||||
transform="matrix(0.4094 -0.9123 0.9123 0.4094 2.8913 76.9251)"
|
||||
class="st10"
|
||||
cx="60.9"
|
||||
cy="36.2"
|
||||
rx="5.7"
|
||||
ry="3.7"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M122.5,32.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h16.6c9.5,0,13.9,4.4,13.9,11c0.2,3.7-1.8,7.2-5.2,8.8v0.1
|
||||
c3.7,1.5,6.1,5.2,6,9.3c0,8.2-5.6,12.2-15.4,12.2h-16c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1L122.5,32.6L122.5,32.6z M139.6,49.1
|
||||
c3.9,0,6.4-2.2,6.4-5.4s-2.4-5.5-6.4-5.5h-8.9c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1v10.2c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0
|
||||
H139.6L139.6,49.1z M130.6,66.9h9.3c4.3,0,6.8-2.3,6.8-5.8s-2.4-5.7-6.7-5.7h-9.3c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1v10.7
|
||||
C130.3,66.8,130.4,66.9,130.6,66.9C130.6,66.9,130.6,66.9,130.6,66.9L130.6,66.9z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M159.9,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V44.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6
|
||||
c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v2.5h0.1c1.5-2.2,4.2-3.8,8.2-3.8c2.4,0,4.8,0.8,6.6,2.4c0.3,0.3,0.4,0.5,0.1,0.8l-3.5,4.1
|
||||
c-0.2,0.3-0.6,0.4-0.9,0.2c0,0,0,0-0.1,0c-1.4-0.9-3-1.4-4.7-1.4c-4.1,0-6,2.7-6,7.4v15.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0
|
||||
H159.9L159.9,73.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M182.9,65.8c-0.8-2.3-1.1-4.8-1.1-7.2c-0.1-2.5,0.3-4.9,1.1-7.2c1.8-5.1,6.6-8.1,13.1-8.1s11.2,3,13,8.1
|
||||
c0.8,2.3,1.1,4.8,1.1,7.2c0.1,2.5-0.3,4.9-1.1,7.2c-1.8,5.1-6.6,8.1-13,8.1S184.7,71,182.9,65.8z M201.9,64c0.5-1.7,0.8-3.6,0.7-5.4
|
||||
c0.1-1.8-0.1-3.7-0.7-5.4c-0.9-2.5-3.3-4-5.9-3.8c-2.6-0.2-5.1,1.4-6,3.8c-0.5,1.8-0.8,3.6-0.7,5.4c-0.1,1.8,0.1,3.7,0.7,5.4
|
||||
c0.9,2.5,3.4,4,6,3.8C198.6,68,201,66.5,201.9,64L201.9,64z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M241.9,73.3c-0.4,0-0.7-0.3-0.8-0.6L235,53.9h-0.1l-6.2,18.7c-0.1,0.4-0.4,0.6-0.8,0.6h-5.4
|
||||
c-0.4,0-0.7-0.3-0.8-0.6l-10-28.1c-0.1-0.2,0-0.5,0.2-0.6c0.1,0,0.2-0.1,0.3,0h6.3c0.4,0,0.8,0.2,0.9,0.6l6.1,19.3h0.1l6-19.3
|
||||
c0.1-0.4,0.5-0.6,0.9-0.6h4.7c0.4,0,0.7,0.2,0.9,0.6l6.4,19.3h0.1l5.8-19.3c0.1-0.4,0.5-0.7,0.9-0.6h6.3c0.2-0.1,0.5,0.1,0.5,0.3
|
||||
c0,0.1,0,0.2,0,0.3l-10,28.1c-0.1,0.4-0.4,0.6-0.8,0.6L241.9,73.3L241.9,73.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M259.3,69.3c-0.2-0.2-0.3-0.6-0.1-0.8c0,0,0,0,0.1-0.1l3.7-3.6c0.3-0.2,0.7-0.2,0.9,0c2.6,2.1,5.9,3.3,9.3,3.3
|
||||
c3.9,0,5.9-1.5,5.9-3.5c0-1.8-1.1-2.9-5.2-3.2l-3.4-0.3c-6.4-0.6-9.7-3.6-9.7-8.6c0-5.7,4.4-9.2,12.3-9.2c4.2-0.1,8.4,1.2,11.9,3.6
|
||||
c0.3,0.2,0.3,0.5,0.2,0.8c0,0,0,0,0,0.1l-3.2,3.6c-0.2,0.3-0.6,0.3-0.9,0.1c-2.5-1.5-5.4-2.4-8.3-2.4c-3.1,0-4.8,1.3-4.8,3
|
||||
s1.1,2.7,5.2,3.1l3.4,0.3c6.6,0.6,9.8,3.8,9.8,8.6c0,5.8-4.6,9.9-13.3,9.9C268,74,263.2,72.4,259.3,69.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M291.2,65.8c-0.8-2.3-1.2-4.7-1.1-7.2c-0.1-2.5,0.3-4.9,1-7.2c1.8-5.1,6.6-8.1,12.9-8.1c6.5,0,11.2,3.1,13,8.1
|
||||
c0.7,2.1,1,4.1,1,8.8c0,0.3-0.3,0.6-0.6,0.6c0,0-0.1,0-0.1,0h-19.5c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1c0,0.8,0.2,1.5,0.5,2.2
|
||||
c1,2.9,3.5,4.4,7.1,4.4c2.7,0.1,5.4-0.9,7.4-2.8c0.2-0.3,0.7-0.4,1-0.1c0,0,0,0,0,0l3.9,3.2c0.2,0.1,0.3,0.5,0.2,0.7
|
||||
c0,0.1-0.1,0.1-0.1,0.1c-2.7,2.9-7.2,5-13,5C297.8,73.9,293,70.9,291.2,65.8z M310.4,52.8c-0.9-2.4-3.2-3.8-6.2-3.8
|
||||
s-5.4,1.4-6.2,3.8c-0.3,0.8-0.4,1.6-0.4,2.5c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0h12.4c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1
|
||||
C310.8,54.5,310.6,53.6,310.4,52.8L310.4,52.8z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M323.6,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V44.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6
|
||||
c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v2.5h0.1c1.5-2.2,4.2-3.8,8.2-3.8c2.4,0,4.8,0.8,6.6,2.4c0.3,0.3,0.4,0.5,0.1,0.8l-3.5,4.1
|
||||
c-0.2,0.3-0.6,0.4-0.9,0.2c0,0,0,0-0.1,0c-1.4-0.9-3-1.4-4.7-1.4c-4.1,0-6,2.7-6,7.4v15.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0
|
||||
H323.6L323.6,73.3z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M346.5,68.5c-0.3-0.2-0.4-0.6-0.2-0.9c0,0,0,0,0,0l4.1-4.4c0.2-0.3,0.6-0.3,0.9-0.1c0,0,0,0,0,0
|
||||
c3.5,2.7,7.7,4.2,12.1,4.4c5.3,0,8.4-2.5,8.4-6c0-3-2-4.9-8.1-5.7l-2.4-0.3c-8.6-1.1-13.5-4.9-13.5-11.8c0-7.5,5.9-12.4,15.1-12.4
|
||||
c5.1-0.1,10.1,1.4,14.5,4.2c0.3,0.1,0.4,0.4,0.2,0.7c0,0.1-0.1,0.1-0.1,0.2l-3.1,4.5c-0.2,0.3-0.6,0.4-0.9,0.2
|
||||
c-3.2-2.1-6.9-3.2-10.7-3.2c-4.5,0-7,2.3-7,5.5c0,2.9,2.2,4.8,8.2,5.6l2.4,0.3c8.6,1.1,13.3,4.9,13.3,12c0,7.3-5.7,12.8-16.8,12.8
|
||||
C356.3,73.9,350,71.5,346.5,68.5z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M393.3,73.8c-6.4,0-8.8-2.9-8.8-8.6V49.8c0-0.2-0.1-0.3-0.3-0.4c0,0,0,0-0.1,0H382c-0.3,0-0.6-0.2-0.7-0.5
|
||||
c0,0,0,0,0-0.1v-4.1c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h2.1c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1v-8c0-0.3,0.3-0.6,0.6-0.6
|
||||
c0,0,0,0,0.1,0h6c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v8c0,0.2,0.1,0.3,0.3,0.4c0,0,0,0,0.1,0h4.2c0.3,0,0.6,0.2,0.7,0.5
|
||||
c0,0,0,0,0,0.1v4.1c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0h-4.2c-0.2,0-0.4,0.1-0.4,0.3c0,0,0,0,0,0.1V65c0,2.1,0.9,2.7,3,2.7h1.6
|
||||
c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v4.9c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0L393.3,73.8L393.3,73.8z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M421.2,73.3c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1v-2.1h0c-1.5,2-4.5,3.4-8.9,3.4c-5.8,0-10.6-2.8-10.6-8.9
|
||||
c0-6.4,4.9-9.3,12.7-9.3h6.4c0.2,0,0.4-0.1,0.4-0.3c0,0,0,0,0-0.1v-1.4c0-3.3-1.7-4.9-7-4.9c-2.6-0.1-5.1,0.6-7.2,2
|
||||
c-0.3,0.2-0.7,0.2-0.9-0.1c0,0,0,0,0-0.1l-2.4-4c-0.2-0.2-0.1-0.6,0.1-0.8c0,0,0,0,0,0c2.6-1.7,6-2.9,11.2-2.9
|
||||
c9.6,0,13.2,3,13.2,10.2v19.1c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0H421.2L421.2,73.3z M420.4,63.4v-2.2c0-0.2-0.1-0.3-0.3-0.4
|
||||
c0,0,0,0-0.1,0h-5.2c-4.7,0-6.8,1.2-6.8,3.9c0,2.4,1.9,3.6,5.5,3.6C417.9,68.4,420.4,66.8,420.4,63.4L420.4,63.4z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M433.1,65.8c-0.7-2.3-1.1-4.8-1-7.2c-0.1-2.4,0.3-4.9,1-7.2c1.8-5.2,6.7-8.1,13.1-8.1c4.2-0.2,8.2,1.5,11,4.6
|
||||
c0.2,0.2,0.2,0.6,0,0.8c0,0,0,0-0.1,0.1l-4.1,3.3c-0.3,0.2-0.7,0.2-0.9-0.1c0,0,0,0,0-0.1c-1.5-1.7-3.6-2.6-5.9-2.5
|
||||
c-2.8,0-5,1.3-5.9,3.8c-0.5,1.8-0.8,3.6-0.7,5.4c-0.1,1.8,0.1,3.7,0.7,5.5c0.9,2.5,3.1,3.8,5.9,3.8c2.2,0.1,4.4-0.9,5.9-2.6
|
||||
c0.2-0.3,0.6-0.3,0.9-0.1c0,0,0,0,0,0l4.1,3.3c0.3,0.2,0.3,0.5,0.1,0.8c0,0,0,0-0.1,0.1c-2.9,3-6.9,4.6-11,4.5
|
||||
C439.8,73.9,435,71.1,433.1,65.8z"
|
||||
/>
|
||||
<path
|
||||
class="st11"
|
||||
d="M482.8,73.3c-0.4,0-0.8-0.2-1-0.6l-8-12.3l-4.3,4.6v7.7c0,0.3-0.3,0.6-0.6,0.6c0,0,0,0-0.1,0h-6
|
||||
c-0.3,0-0.6-0.2-0.7-0.5c0,0,0,0,0-0.1V32.6c0-0.3,0.3-0.6,0.6-0.6c0,0,0,0,0.1,0h6c0.3,0,0.6,0.2,0.7,0.5c0,0,0,0,0,0.1v23.8
|
||||
l10.8-11.8c0.3-0.4,0.8-0.6,1.2-0.6h6.7c0.2,0,0.4,0.1,0.4,0.3c0,0.1,0,0.3-0.1,0.3l-10.1,10.7L490,72.7c0.1,0.2,0.1,0.4,0,0.5
|
||||
c-0.1,0.1-0.2,0.1-0.3,0.1H482.8L482.8,73.3z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="credits">
|
||||
©2021 by <a href="https://www.nicolascusan.com">Nicolas Cusan</a>.
|
||||
|
||||
Follow me on <a href="https://twitter.com/n_cusan">Twitter</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script
|
||||
async
|
||||
src="https://platform.twitter.com/widgets.js"
|
||||
charset="utf-8"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,9 +4,9 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML5 Test Page</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css">
|
||||
<meta name="google-site-verification" content="6NN30tyC1Cm8FIYA9_PwrI8vf_dqvILEXn220VFXdVs" />
|
||||
</head>
|
||||
@@ -4,9 +4,9 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML5 Test Page</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
|
||||
<meta name="google-site-verification" content="6NN30tyC1Cm8FIYA9_PwrI8vf_dqvILEXn220VFXdVs" />
|
||||
</head>
|
||||
19
site.webmanifest
Normal file
19
site.webmanifest
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "Destyle.css",
|
||||
"short_name": "Destyle.css",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
353
style.css
Normal file
353
style.css
Normal file
@@ -0,0 +1,353 @@
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 1.2rem/1.4 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
color: #333;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 1rem;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
||||
"Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
/* Home
|
||||
========================================================== */
|
||||
|
||||
.container {
|
||||
max-width: 52rem;
|
||||
flex: 1 0 auto;
|
||||
padding-left: 1.3rem;
|
||||
padding-right: 1.3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.container {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.container-main {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.container-main {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 2.3em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 1.4em;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.sub-title-break {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.sub-title-break {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.list li {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.list li::before {
|
||||
content: "●";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.list a {
|
||||
border-bottom: 4px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 0.5em 1.4em;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn + .btn {
|
||||
margin-left: 1.2rem;
|
||||
}
|
||||
|
||||
/* Footer
|
||||
========================================================== */
|
||||
|
||||
.footer {
|
||||
/* background-color: #f4f4f4; */
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
flex: none;
|
||||
font-size: 1.1rem;
|
||||
color: rgba(51, 51, 51, 0.7);
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
padding-left: 1.3rem;
|
||||
padding-right: 1.3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1250px) {
|
||||
.footer-container {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.credits {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.credits a {
|
||||
border-bottom: 4px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.bs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bs-label {
|
||||
margin-right: 10px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.bs-logo {
|
||||
width: 130px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Compare
|
||||
========================================================== */
|
||||
|
||||
.compare-layout {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
padding: 1.3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1250px) {
|
||||
.header {
|
||||
padding: 2rem 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-back {
|
||||
border-bottom: 4px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.6em;
|
||||
font-weight: 700;
|
||||
padding-top: 0.6rem;
|
||||
}
|
||||
|
||||
.header-note {
|
||||
padding: 1rem 1.4rem;
|
||||
background-color: lemonchiffon;
|
||||
margin-top: 1.6rem;
|
||||
display: flex;
|
||||
font-size: 95%;
|
||||
}
|
||||
|
||||
.header-note-icon {
|
||||
flex: none;
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
.header-note-content {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 950px) {
|
||||
.header-note {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Compare */
|
||||
|
||||
.compare {
|
||||
width: 100%;
|
||||
padding: 3rem 1.3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 950px) {
|
||||
.compare {
|
||||
padding: 0 1.3rem;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
gap: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1250px) {
|
||||
.compare {
|
||||
gap: 4rem;
|
||||
padding: 0 4rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-item {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media (min-width: 950px) {
|
||||
.compare-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 33.33333%;
|
||||
margin-bottom: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 2px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 950px) {
|
||||
.compare-item-header {
|
||||
flex: none;
|
||||
margin-bottom: 0;
|
||||
background-color: #ddd;
|
||||
border-radius: 8px 8px 0 0;
|
||||
height: 1.4rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-size: .9rem;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
|
||||
.compare-item-header::before {
|
||||
content: "";
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: #aaa;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 5px;
|
||||
box-shadow: 18px 0 0 0 #aaa, 36px 0 0 0 #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.compare-title a:active,
|
||||
.compare-title a:focus,
|
||||
.compare-title a:hover {
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
@media (min-width: 950px) {
|
||||
.compare-title {
|
||||
margin-bottom: 0;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.compare-btn {
|
||||
border-bottom: 4px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.compare-btn-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 950px) {
|
||||
.compare-btn {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.compare-btn:active,
|
||||
.compare-btn:focus,
|
||||
.compare-btn:hover {
|
||||
color: dodgerblue;
|
||||
}
|
||||
|
||||
.compare-btn-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.compare-btn-icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
padding: 0.2rem 0.5rem;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.compare-frame {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 950px) {
|
||||
.compare-frame {
|
||||
display: block;
|
||||
width: 100%;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -4,9 +4,9 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTML5 Test Page</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<link rel="stylesheet" href="destyle.css">
|
||||
<meta name="google-site-verification" content="6NN30tyC1Cm8FIYA9_PwrI8vf_dqvILEXn220VFXdVs" />
|
||||
</head>
|
||||
Reference in New Issue
Block a user