mirror_css/destyle
1
0
Fork 0
mirror of https://github.com/nicolas-cusan/destyle.css.git synced 2025-08-30 16:30:01 +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" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<header class="header"> <main class="compare-container">
<a class="header-back" href="index.html">👈 Back</a> <header class="header">
<h1 class="header-title">Compare resets</h1> <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> <p class="header-note">
</header> ⚠️ Use a larger screen to view side-by-side comparison
</p>
</header>
<div class="compare"> <div class="compare">
<div class="compare-item"> <div class="compare-item">
<h2 class="compare-title"><a href="index.html">Destyle.css</a></h2> <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>
</main>
<div class="compare-item"> <footer class="footer">
<h2 class="compare-title"> ©2019 — Made with love by
<a href="http://necolas.github.io/normalize.css/">Normalize.css</a> <a href="https://twitter.com/n_cusan">Nicolas Cusan</a>
</h2> </footer>
<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>
</body> </body>
</html> </html>

5
index.html
View File

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

100
style.css
View File

@@ -1,8 +1,15 @@
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600'); @import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600');
html {
height: 100%;
}
body { body {
font: 16px/1.4 'Fira Sans', sans-serif; font: 16px/1.4 'Fira Sans', sans-serif;
color: #333; color: #333;
height: 100%;
display: flex;
flex-direction: column;
} }
/* General /* General
@@ -12,11 +19,12 @@ body {
padding: 30px 20px; padding: 30px 20px;
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
flex: 1 0 auto;
} }
@media (min-width: 400px) { @media (min-width: 400px) {
.container { .container {
padding: 50px 20px; padding: 60px 20px 70px;
} }
} }
@@ -41,16 +49,44 @@ body {
vertical-align: middle; 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
========================================================== */ ========================================================== */
.compare-container {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
.header { .header {
margin: 20px;
position: relative; position: relative;
text-align: center; 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 { .header-title {
@@ -60,8 +96,8 @@ body {
.header-back { .header-back {
position: absolute; position: absolute;
top: 0; top: 30px;
left: 0; left: 20px;
padding-top: 0.4em; padding-top: 0.4em;
} }
@@ -72,9 +108,10 @@ body {
} }
.header-note { .header-note {
padding-top: 30px; margin-top: 20px;
font-size: 95%; font-size: 95%;
margin-bottom: 30px; padding: 10px;
background-color: lemonchiffon;
} }
@media (min-width: 750px) { @media (min-width: 750px) {
@@ -86,17 +123,44 @@ body {
/* Compare */ /* Compare */
.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 { .compare-item {
padding: 0 20px 20px; margin-bottom: 30px;
} }
@media (min-width: 750px) { @media (min-width: 750px) {
.compare-item { .compare-item {
float: left; display: flex;
flex-direction: column;
width: 33.33333%; 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; margin-bottom: 4px;
} }
@media (min-width: 750px) {
.compare-title {
margin-bottom: 0;
}
}
.compare-btn { .compare-btn {
text-decoration: underline;
} }
@media (min-width: 750px) { @media (min-width: 750px) {
.compare-btn { .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 { .compare-frame {
display: block; display: block;
width: 100%; width: 100%;
flex: 1 0 auto;
} }
} }