mirror_css/destyle
1
0
Fork 0
mirror of https://github.com/nicolas-cusan/destyle.css.git synced 2025-08-30 00:10:21 +02:00
Code Issues Releases Wiki Activity

style compare page

Browse Source
This commit is contained in:
Nicolas Cusan
2019-01-10 17:26:41 +01:00
parent c20905099e
commit 160d753e35
3 changed files with 161 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
compare.html
View File

@@ -9,51 +9,77 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<a class="header-back" href="index.html">👈 Back</a>
<h1 class="header-title">Compare resets</h1>
<main class="compare-container">
<header class="header">
<a class="header-back" href="index.html">👈 Back</a>
<h1 class="header-title">Compare resets</h1>
<p class="header-note">⬅️ Use a larger screen to view side-by-side ➡️</p>
</header>
<p class="header-note">
⚠️ Use a larger screen to view side-by-side comparison
</p>
</header>
<div class="compare">
<div class="compare-item">
<h2 class="compare-title"><a href="index.html">Destyle.css</a></h2>
<div class="compare">
<div class="compare-item">
<div class="compare-item-header">
<h2 class="compare-title"><a href="index.html">Destyle.css</a></h2>
<iframe class="compare-frame" src="test.html" frameborder="0"></iframe>
<a class="compare-btn" href="test.css">
View destyle.css test page
</a>
</div>
<a class="compare-btn" href="test.css">View destyle.css test page 🔴</a>
<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.css">
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.css">
View Eric Meyer's reset test page
</a>
</div>
<iframe
class="compare-frame"
src="reset.html"
frameborder="0"
></iframe>
</div>
</div>
<div class="compare-item">
<h2 class="compare-title">
<a href="http://necolas.github.io/normalize.css/">Normalize.css</a>
</h2>
<a class="compare-btn" href="normalize.css">
View normalize.css test page ⬛️
</a>
<iframe
class="compare-frame"
src="normalize.html"
frameborder="0"
></iframe>
</div>
<div class="compare-item">
<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.css">
View Eric Meyer's resettest page 🔴
</a>
<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>

5
index.html
View File

@@ -23,5 +23,10 @@
</a>
<a class="btn" href="compare.html">Test & Compare</a>
</main>
<footer class="footer">
©2019 — Made with love by
<a href="https://twitter.com/n_cusan">Nicolas Cusan</a>
</footer>
</body>
</html>

100
style.css
View File

@@ -1,8 +1,15 @@
@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: flex;
flex-direction: column;
}
/* General
@@ -12,11 +19,12 @@ body {
padding: 30px 20px;
max-width: 600px;
margin: 0 auto;
flex: 1 0 auto;
}
@media (min-width: 400px) {
.container {
padding: 50px 20px;
padding: 60px 20px 70px;
}
}
@@ -41,16 +49,44 @@ body {
vertical-align: middle;
}
.btn-small {
.btn + .btn {
margin-left: 10px;
}
.footer {
background-color: #f4f4f4;
text-align: center;
padding: 30px 20px;
flex: none;
}
.footer a {
text-decoration: underline;
}
/* Compare
========================================================== */
.compare-container {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
.header {
margin: 20px;
position: relative;
text-align: center;
max-width: 600px;
margin: 0 auto;
padding: 30px 20px;
flex: none;
width: 100%;
}
@media (min-width: 750px) {
.header {
max-width: none;
}
}
.header-title {
@@ -60,8 +96,8 @@ body {
.header-back {
position: absolute;
top: 0;
left: 0;
top: 30px;
left: 20px;
padding-top: 0.4em;
}
@@ -72,9 +108,10 @@ body {
}
.header-note {
padding-top: 30px;
margin-top: 20px;
font-size: 95%;
margin-bottom: 30px;
padding: 10px;
background-color: lemonchiffon;
}
@media (min-width: 750px) {
@@ -86,17 +123,44 @@ body {
/* 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: flex;
flex: 1 0 auto;
}
}
.compare-item {
padding: 0 20px 20px;
margin-bottom: 30px;
}
@media (min-width: 750px) {
.compare-item {
float: left;
display: flex;
flex-direction: column;
width: 33.33333%;
padding: 20px;
padding: 20px 20px 0;
margin-bottom: 0;
}
}
@media (min-width: 750px) {
.compare-item-header {
flex: none;
margin-bottom: 0;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
}
@@ -106,12 +170,25 @@ body {
margin-bottom: 4px;
}
@media (min-width: 750px) {
.compare-title {
margin-bottom: 0;
}
}
.compare-btn {
text-decoration: underline;
}
@media (min-width: 750px) {
.compare-btn {
display: none;
font-size: 85%;
text-decoration: none;
}
.compare-btn:active,
.compare-btn:focus,
.compare-btn:hover {
text-decoration: underline;
}
}
@@ -123,5 +200,6 @@ body {
.compare-frame {
display: block;
width: 100%;
flex: 1 0 auto;
}
}