105 lines
11 KiB
HTML
105 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="../dist/mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Minimal, responsive, 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 - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
|
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
|
|
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
|
<style>
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
|
#logo-body { position: relative; background: -webkit-linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); background: linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); height: -webkit-calc(100vh - 48px); height: calc(100vh - 48px); overflow: hidden; text-align: center; }
|
|
#description { color: #f5f5f5; font-family: 'Noto Sans', sans-serif; position: absolute; top: 49vh; width: 100%; margin: 0; }
|
|
#top-heading { color: #f5f5f5; font-size: 2.8em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); position: absolute; margin: 0; top: 35vh; width: 100%; height: 20vh; min-height: 42px; font-family: 'Noto Sans', sans-serif; }
|
|
#top-vtag-cont { width: 100%; text-align: center; }
|
|
#top-version-tag { padding: 8px 8px; font-size: 1.2em; font-weight: 700; font-family: 'Noto Sans', sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); position: absolute; top: 55vh; width: 40px; background: #4527a0; border-radius: 6px; margin: 0; margin-left: -30px; }
|
|
@media screen and (max-height:480px), screen and (max-width: 480px) { #top-version-tag { display: none; } #description { top: 60vh;}}
|
|
#mt1 { position: absolute; bottom: 0; left: -7vw; width: 0; height: 0; border-left: 12vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #07020d; }
|
|
#mt1:after { content: ""; position: absolute; left: -1.4vw; border-left: 1.4vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #150627; z-index: 2; }
|
|
#mt2 { position: absolute; bottom: -0.4vw; left: 10vw; width: 0; height: 0; border-left: 7vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #120520; z-index: 3; }
|
|
#mt2:after { content: ""; position: absolute; left: -1.3vw; border-left: 1.3vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #1b0833; z-index: 4; }
|
|
#mt3 { position: absolute; bottom: 0; right: 17.75vw; width: 0; height: 0; border-left: 8vw solid transparent; border-right: 7vw solid transparent; border-bottom: 6vw solid #1b0833; z-index: 5; }
|
|
#mt3:after { content: ""; position: absolute; left: -8vw; border-left: 8vw solid transparent; border-right: 1.4vw solid transparent; border-bottom: 6vw solid #220a40; z-index: 6; }
|
|
#mt4 { position: absolute; bottom: -0.25vw; right: 8vw; width: 0; height: 0; border-left: 7.5vw solid transparent; border-right: 7.25vw solid transparent; border-bottom: 6.5vw solid #150627; z-index: 3;}
|
|
#mt4:after { content: ""; position: absolute; left: -7.5vw; border-left: 7.5vw solid transparent; border-right: 1.7vw solid transparent; border-bottom: 6.5vw solid #1f0a3b; z-index: 2;}
|
|
#mt5 { position: absolute; bottom: 0; right: -6.5vw; width: 0; height: 0; border-left: 9vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 8vw solid #0e041a; }
|
|
#mt5:after { content: ""; position: absolute; left: -9vw; border-left: 9vw solid transparent; border-right: 2vw solid transparent; border-bottom: 8vw solid #1b0833; z-index: 2; }
|
|
@media screen and (max-width: 767px) {
|
|
#mt1 { left: -10.5vw; border-left: 18vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #07020d; }
|
|
#mt1:after { left: -2.1vw; border-left: 2.1vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #150627; }
|
|
#mt2 { bottom: -0.6vw; left: 15vw; border-left: 10.5vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #120520; }
|
|
#mt2:after { left: -1.95vw; border-left: 1.95vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #1b0833; }
|
|
#mt3 { right: 26.625vw; border-left: 12vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 9vw solid #1b0833; }
|
|
#mt3:after { left: -12vw; border-left: 12vw solid transparent; border-right: 2.1vw solid transparent; border-bottom: 9vw solid #220a40; }
|
|
#mt4 { bottom: -0.375vw; right: 12vw; border-left: 11.25vw solid transparent; border-right: 10.875vw solid transparent; border-bottom: 9.75vw solid #150627; }
|
|
#mt4:after { left: -11.25vw; border-left: 11.25vw solid transparent; border-right: 2.55vw solid transparent; border-bottom: 9.75vw solid #1f0a3b; }
|
|
#mt5 { right: -9.75vw; border-left: 13.5vw solid transparent; border-right: 15.75vw solid transparent; border-bottom: 12vw solid #0e041a; }
|
|
#mt5:after { left: -13.5vw; border-left: 13.5vw solid transparent; border-right: 3vw solid transparent; border-bottom: 12vw solid #1b0833;}
|
|
}
|
|
#codename { position: absolute; bottom: 2px; right: 3px; color: #616161; z-index: 5; font-size: 0.55em; font-family: 'Noto Sans', sans-serif; }
|
|
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
|
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
|
.box-colored.red { background: #e53935; } .box-centered { text-align: center; }
|
|
.box-centered > .card.fluid { -webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start;
|
|
justify-content: flex-start; -webkit-align-self: auto; align-self: auto;}
|
|
[class^='col-'] .card.fluid { margin: 2px 0 20px; } [class^='fore-'] { font-family: monospace, monospace;}
|
|
.fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;} li a { text-decoration: none;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="logo-body">
|
|
<p id="description">minimal, responsive, style-agnostic CSS framework</p>
|
|
<h1 id="top-heading"><span style="font-size: 1.45em; font-family: 'Noto Sans', sans-serif;">m</span>ini<span style="font-size:0.65em; color: #4527a0; font-family: 'Noto Sans', sans-serif;">.css</span></h1>
|
|
<p id="top-vtag-cont"><mark id="top-version-tag">v2.2</mark></p>
|
|
<div id="mt1"></div><div id="mt2"></div><div id="mt3"></div><div id="mt4"></div><div id="mt5"></div>
|
|
<small id="codename">Fermion</small>
|
|
</div>
|
|
<header class="sticky">
|
|
<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
|
|
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
|
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
|
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
|
</header>
|
|
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
|
|
<label class="close" for="navigation-toggle"></label>
|
|
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
|
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
|
</nav>
|
|
<!-- Insert your page content here-->
|
|
<main>
|
|
<br />
|
|
<div class="tabs">
|
|
<input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
|
|
<label for="tab1" aria-hidden="true">Tab 1</label>
|
|
<div>
|
|
<h3>Tab 1</h3>
|
|
<p>This is the first tab's content.</p>
|
|
</div>
|
|
<input type="radio" name="tab-group" id="tab2" aria-hidden="true">
|
|
<label for="tab2" aria-hidden="true">Tab 2</label>
|
|
<div>
|
|
<h3>Tab 2</h3>
|
|
<p>This is the second tab's content.</p>
|
|
</div>
|
|
<input type="radio" name="tab-group" id="tab3" aria-hidden="true">
|
|
<label for="tab3" aria-hidden="true">Tab 3</label>
|
|
<div>
|
|
<h3>Tab 3</h3>
|
|
<p>This is the third tab's content.</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- End of page content-->
|
|
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>.<br/>
|
|
<small>Icons made by <a href="http://www.freepik.com" title="Freepik"><small>Freepik</small></a> from <a href="http://www.flaticon.com" title="Flaticon"><small>www.flaticon.com</small></a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank"><small>CC 3.0 BY</small></a></small></footer>
|
|
</body>
|
|
</html>
|