470 lines
19 KiB
HTML
470 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Live demo styled as of 20161111 -->
|
|
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/f3acf0b06d3784e17b6bf89ed2913e6e53f3c5a0/dist/mini-default.min.css"> -->
|
|
<!-- Local stylesheet -->
|
|
<link rel="stylesheet" href="../../dist/mini-default.min.css">
|
|
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework">
|
|
<meta name="keywords" content="mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
|
<style>
|
|
#header-logo {
|
|
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
|
|
margin-left: -3px; padding: 2px;
|
|
}
|
|
#top-logo {
|
|
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
|
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
#top-header {
|
|
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
|
}
|
|
#top-version-tag {
|
|
padding: 3px 5px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
.box-centered { text-align: center; }
|
|
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
|
.box-colored.red { background: #b71c1c; }
|
|
.card.fluid.box-centered {
|
|
-webkit-box-pack: start;
|
|
-webkit-box-align: start;
|
|
-webkit-justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
-webkit-align-self: auto;
|
|
align-self: auto;
|
|
}
|
|
@media (max-width: 800px) {
|
|
.row.cards {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.card.fluid.box-centered {
|
|
width: auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
|
<a href="#" class="button">Introduction</a>
|
|
<a href="#" class="button">Module Overview</a>
|
|
<a href="#" class="button">Module Demos</a>
|
|
<a href="#" class="button">Flavors</a>
|
|
<a href="#" class="button">Customization</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
|
</div>
|
|
</header>
|
|
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="box-centered">
|
|
<img src="mini-logo.svg" id="top-logo">
|
|
<h1 id="top-header"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
|
<mark class="tag tertiary" id="top-version-tag">v2.0</mark>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Insert your page content here-->
|
|
<main><div class="container" style="padding-top: 20px;">
|
|
<table class="striped">
|
|
<caption>Hacker List</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Surname</th>
|
|
<th>Email</th>
|
|
<th>Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<td>Sum</td>
|
|
<td>$180</td>
|
|
<td>Sum</td>
|
|
<td>$180</td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Name">John</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Lisa</td>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Max</td>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table class="preset">
|
|
<caption>Hacker List</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Surname</th>
|
|
<th>Email</th>
|
|
<th>Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<td>Sum</td>
|
|
<td>$180</td>
|
|
<td>Sum</td>
|
|
<td>$180</td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Name">John</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Lisa</td>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Max</td>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table class="horizontal striped">
|
|
<caption>Hacker List</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Surname</th>
|
|
<th>Email</th>
|
|
<th>Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Name">John</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Lisa</td>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Max</td>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">John</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Lisa</td>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Max</td>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">John</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Lisa</td>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Max</td>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">John</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Lisa</td>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Max</td>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br>
|
|
|
|
<table class="horizontal preset">
|
|
<caption>Hacker List</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Surname</th>
|
|
<th>Email</th>
|
|
<th>Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Name">John</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Lisa</td>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Max</td>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">John</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Lisa</td>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Max</td>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">John</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Lisa</td>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Max</td>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">John</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Lisa</td>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Max</td>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<style> .border-fix > td, .border-fix > th { border-top: 0; } </style>
|
|
|
|
<table class="preset">
|
|
<caption>Hacker List</caption>
|
|
<tbody>
|
|
<tr class="border-fix">
|
|
<th data-label="Name"></th>
|
|
<th data-label="Surname">Surname</td>
|
|
<th data-label="Email">Email</td>
|
|
<th data-label="Handle">Handle</td>
|
|
</tr>
|
|
<tr>
|
|
<th data-label="Name">John</th>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<th data-label="Name">Lisa</th>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<th data-label="Name">Max</th>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<th data-label="Name">Adam</th>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<table class="preset">
|
|
<caption>Hacker List</caption>
|
|
<tbody>
|
|
<tr class="border-fix">
|
|
<th data-label="Name">John</th>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<th data-label="Name">Lisa</th>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<th data-label="Name">Max</th>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<th data-label="Name">Adam</th>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div></main>
|
|
<!-- End of page content-->
|
|
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
|
</body>
|
|
</html> |