updated details
This commit is contained in:
Yann Esposito (Yogsototh)
parent
688aea8949
commit
40fb785b84
GPG key ID:
7B19A4C650D59646
2
blunt.min.css
vendored
2
blunt.min.css
vendored
|
|
@ -1 +1 @@
|
|||
/* Copyright 2022 Yann Esposito; MIT licensed */html{font-size:12px}body,textarea,input,select{background:0;border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}*{box-sizing:border-box}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:10px}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}.block{padding:6px;margin:6px}.card{padding:5px;margin:5px;border:solid 2px}.hero{background:#adf;padding:2rem;outline-style:double;outline-width:1rem;margin-top:1rem}@media(min-width:1310px){.container{margin:auto;width:1270px}}pre{background:#eee;padding:10px}code{background:rgba(0,0,0,.1);border:solid 1px rgba(0,0,0,.1);padding:1px}.big{font-size:2em}.huge{font-size:3em}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3}.tb:before{content:"〈"}.tb:after{content:"〉"}.tb:hover:before,.tb:hover:after{opacity:1}.tb:hover:before{content:"《"}.tb:hover:after{content:"》"}.tb:active:before{content:"【"}.tb:active:after{content:"】"}.tb-a{color:#08b}.tb-b{color:#272}.tb-c{color:#c22}.btn{background:#999;border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:2px 0;padding:1rem 2rem;box-shadow:4px 4px rgba(0,0,0,.75)}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777;box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#494}.btn-b:hover{background:#383}.btn-b:active,.btn-b:focus{background:#272}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{padding:.5rem 1rem}.btn-std{width:12rem}.row{display:flex;justify-content:space-evenly}.col{float:left}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}h1,h2,h3,h4,h5,h6{display:table;padding:.25rem;font-size:1rem}h1{font-size:2rem}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{opacity:.3;font-size:1rem}h1:before{content:"# "}h2:before{content:"## "}h3:before{content:"### "}h4:before{content:"#### "}h5:before{content:"##### "}h6:before{content:"###### "}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid #ccc;padding:8px}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid #888}.addon{padding:8px 12px;border-width:2px;border-color:#888;border-style:solid none solid solid}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:50px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}.msg{background:#def;border-left:5px solid #59d;padding:1.5em}.info{background:#def;border-color:#59d}.ok{background:#c8fac8;border-color:#73cf73}.warn{background:#ffd9b4;border-color:#fa6}.err{background:#fed3d3;border-color:#e75d5d}.black,.black *{background:#000;border-color:#444;color:#fff}.fatal,.fatal *{background:#bf2aee;border-color:#9311bb;color:#fff}
|
||||
/* Copyright 2022 Yann Esposito; MIT licensed */html{font-size:12px}body,textarea,input,select{background:0;border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}*{box-sizing:border-box}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:10px}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}.block{padding:6px;margin:6px}.card{padding:5px;margin:5px;border:solid 2px}.col .bot{margin-top:auto}.hero{background:#adf;padding:2rem;outline-style:double;outline-width:.5rem;margin:1rem}@media(min-width:1310px){.container{margin:auto;width:1270px}}pre{background:#eee;padding:10px}code{background:rgba(0,0,0,.1);border:solid 1px rgba(0,0,0,.1);padding:1px}.big{font-size:2em}.huge{font-size:3em}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3}.tb:before{content:"〈"}.tb:after{content:"〉"}.tb:hover:before,.tb:hover:after{opacity:1}.tb:hover:before{content:"《"}.tb:hover:after{content:"》"}.tb:active:before{content:"【"}.tb:active:after{content:"】"}.tb-a{color:#08b}.tb-b{color:#272}.tb-c{color:#c22}.btn{background:#888;border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:2px 0;padding:1rem 2rem;box-shadow:4px 4px rgba(0,0,0,.75)}.btn:hover{background:#777}.btn:active,.btn:focus{background:#666;box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn-a{background:#59d}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#494}.btn-b:hover{background:#090}.btn-b:active,.btn-b:focus{background:#070}.btn-c{background:#d33}.btn-c:hover{background:#d00}.btn-c:active,.btn-c:focus{background:#b00}.btn-sm{padding:.5rem 1rem}.btn-std{width:12rem}.row{display:flex;justify-content:space-evenly;align-item:space-between}.col{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}h1,h2,h3,h4,h5,h6{display:table;padding:.25rem;font-size:1rem}h1{font-size:2rem}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{opacity:.3;font-size:1rem}h1:before{content:"# "}h2:before{content:"## "}h3:before{content:"### "}h4:before{content:"#### "}h5:before{content:"##### "}h6:before{content:"###### "}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid #ccc;padding:8px}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid #888}.addon{padding:8px 12px;border-width:2px;border-color:#888;border-style:solid none solid solid}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:50px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}.msg{background:#ddd;border-left:5px solid #999;padding:1.5em}.info{background:#d1e5fa;border-color:#59d}.ok{background:#c1ecc1;border-color:#73cf73}.warn{background:#ffd9b4;border-color:#fa6}.err{background:#fcbdbd;border-color:#e75d5d}.black,.black *{background:#333;border-color:#000;color:#fff}.attention,.attention *{background:#b74fde;border-color:#9311bb;color:#fff}.fatal,.fatal *{background:#df1023;border-color:#ba0000;color:#fff}
|
||||
177
h/docs.html
177
h/docs.html
|
|
@ -12,19 +12,16 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="../index.html">BLUNT</a>
|
||||
<a class="current" href="#">Docs</a>
|
||||
<!--
|
||||
<a href="bootstrapconverter.html">Bootstrap Converter</a>
|
||||
<a href="examples.html">Examples</a>
|
||||
-->
|
||||
<a href="download.html">Download</a>
|
||||
<a href="examples.html">Examples</a>
|
||||
<a href="https://github.com/owenversteeg/min">Github</a>
|
||||
<a href="https://gitea.esy.fun/yogsototh/bluntcss">Code</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn btn-sm btn-close">×</button>
|
||||
<div class="container">
|
||||
<div>
|
||||
<h1>Buttons</h1>
|
||||
|
|
@ -60,20 +57,60 @@
|
|||
<pre class="block"><a class="btn btn-b btn-sm">btn-sm</a></pre>
|
||||
</div>
|
||||
|
||||
<h1>Messages</h1>
|
||||
<div class="messages">
|
||||
<div class="msg">
|
||||
<strong>Normal Message</strong>
|
||||
This is a normal message with <code>msg</code>.
|
||||
</div>
|
||||
<div class="msg info">
|
||||
<strong><i class="ico">☞</i> Info</strong>
|
||||
This is done by adding <code>info</code> to the class.
|
||||
</div>
|
||||
<div class="msg ok">
|
||||
<strong><i class="ico">☑</i> OK</strong>
|
||||
This is done by adding <code>ok</code> to the class.
|
||||
</div>
|
||||
<div class="msg warn">
|
||||
<strong><i class="ico">☣</i> Warning</strong>
|
||||
This is done by adding <code>warn</code> to the class.
|
||||
</div>
|
||||
<div class="msg err">
|
||||
<strong><i class="ico">☒</i> Error</strong>
|
||||
This is done by adding <code>err</code> to the class.
|
||||
</div>
|
||||
<div class="msg attention">
|
||||
<strong>Attention</strong>
|
||||
This is done by adding <code>attention</code> to the class.
|
||||
</div>
|
||||
<div class="msg fatal">
|
||||
<strong><i class="ico">☣</i> Fatal</strong>
|
||||
This is done by adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
<div class="msg black">
|
||||
<strong>Black</strong>
|
||||
This is done by adding <code>black</code> to the class.
|
||||
</div>
|
||||
<pre><div class="msg">
|
||||
<strong>Alert headline!</strong>
|
||||
Message text
|
||||
</div></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Forms</h1>
|
||||
<div class="block">
|
||||
<input type="text" placeholder="input type="text"">
|
||||
<input type="text" placeholder="input type="text"">
|
||||
</div>
|
||||
<div class="block">
|
||||
<textarea rows="3" placeholder="textarea"></textarea>
|
||||
<textarea rows="3" placeholder="textarea"></textarea>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="addon">$</span><input type="text" placeholder="span class="addon"">
|
||||
<span class="addon">$</span><input type="text" placeholder="span class="addon"">
|
||||
</div>
|
||||
<pre><input type="text">
|
||||
<br><textarea rows="3">
|
||||
<br><span class="addon">$</span><input type="text"></pre>
|
||||
<br><textarea rows="3">
|
||||
<br><span class="addon">$</span><input type="text"></pre>
|
||||
<div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code></span></code> and <code><input></code> tags. Example: <pre>... </span> <input ...</pre><span class="addon">$</span> <input type="text" class="smooth"> <pre>... </span><input ...</pre><span class="addon">$</span><input type="text" class="smooth"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -98,50 +135,50 @@
|
|||
<table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table>
|
||||
<br><br>
|
||||
<pre><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Widgets Sold</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Widgets Sold</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<h1>Icons</h1>
|
||||
<h1>Icons</h1>
|
||||
<div class="icons">
|
||||
<div class="row">
|
||||
<div class="col c6 card">
|
||||
<div class="block"><b>Android Safe</b></div>
|
||||
<i class="ico block" style="line-height: 1.5rem">
|
||||
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||
</i>
|
||||
<div class="block msg" style="line-height: 1.5rem">
|
||||
The "Android Safe" icons work everywhere, tested on hundreds of devices.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c6 card">
|
||||
<div class="block"><b>Total Set</b></div>
|
||||
<i class="ico block" style="line-height: 1.5rem">
|
||||
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||||
</i>
|
||||
<div class="block msg warn">Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)</div>
|
||||
</div>
|
||||
<div class="block"><b>Android Safe</b></div>
|
||||
<i class="ico block" style="line-height: 1.5rem">
|
||||
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||
</i>
|
||||
<div class="block msg" style="line-height: 1.5rem">
|
||||
The "Android Safe" icons work everywhere, tested on hundreds of devices.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col c6 card">
|
||||
<div class="block"><b>Total Set</b></div>
|
||||
<i class="ico block" style="line-height: 1.5rem">
|
||||
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||||
</i>
|
||||
<div class="block msg warn">Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre><i class="ico">Copy and paste icons from above here!</i></pre>
|
||||
<h1>Grids</h1>
|
||||
<div class="row">
|
||||
|
|
@ -216,50 +253,6 @@
|
|||
<pre><h1>Level One Heading</h1></pre>
|
||||
</div>
|
||||
|
||||
<h1>Messages</h1>
|
||||
<div class="messages">
|
||||
<div class="msg">
|
||||
<strong>Normal Message</strong>
|
||||
This is a normal message with <code>msg</code>.
|
||||
</div>
|
||||
<div class="msg black">
|
||||
<strong>Black</strong>
|
||||
This is done by adding <code>black</code> to the class.
|
||||
</div>
|
||||
<div class="msg info">
|
||||
<strong><i class="ico">☞</i> Info</strong>
|
||||
This is done by adding <code>info</code> to the class.
|
||||
</div>
|
||||
<div class="msg ok">
|
||||
<strong><i class="ico">☑</i> OK</strong>
|
||||
This is done by adding <code>ok</code> to the class.
|
||||
</div>
|
||||
<div class="msg warn">
|
||||
<strong><i class="ico">☣</i> Warning</strong>
|
||||
This is done by adding <code>warn</code> to the class.
|
||||
</div>
|
||||
<div class="msg err">
|
||||
<strong><i class="ico">☒</i> Error</strong>
|
||||
This is done by adding <code>err</code> to the class.
|
||||
</div>
|
||||
<div class="msg fatal">
|
||||
<strong><i class="ico">☣</i> Fatal</strong>
|
||||
This is done by adding <code>fatal</code> to the class.
|
||||
</div>
|
||||
<pre><div class="msg">
|
||||
<strong>Alert headline!</strong>
|
||||
Message text
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="krakenholder">
|
||||
<img src="kraken.png" class="kraken" alt="a scary sea monster">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
56
index.html
56
index.html
|
|
@ -1,44 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Blunt</title>
|
||||
<link href="blunt.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Blunt</title>
|
||||
<link href="blunt.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="index.html">BRUT</a>
|
||||
<a href="h/docs.html">Docs</a>
|
||||
<a href="h/download.html">Download</a>
|
||||
<a href="h/examples.html">Examples</a>
|
||||
<a href="https://gitea.esy.fun/yogsototh/bluntcss">Code</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn btn-sm btn-close">×</button>
|
||||
<div class="container">
|
||||
<div class="hero">
|
||||
<div class="row">
|
||||
<div class="c3"></div>
|
||||
<div class="c6">
|
||||
<h1 class="title">BLUNT</h1>
|
||||
<h4 class="mobileonly">A <em>Brutalist</em> and <em>Minimalist</em> CSS framework</h4>
|
||||
<p>
|
||||
This CSS framework is ideal to be used for admin interface where you
|
||||
want to make it clear, this is not for any kind of end user but only
|
||||
advanced technical people.
|
||||
</p>
|
||||
</div>
|
||||
<div class="c3"></div>
|
||||
<div class="row">
|
||||
<div class="c3"></div>
|
||||
<div class="c6">
|
||||
<h1 class="title">BLUNT</h1>
|
||||
<h4 class="mobileonly">A <em>Brutalist</em> and <em>Minimalist</em> CSS framework</h4>
|
||||
<p>
|
||||
This CSS framework is ideal to be used for admin interface where you
|
||||
want to make it clear, this is not for any kind of end user but only
|
||||
advanced technical people.
|
||||
</p>
|
||||
</div>
|
||||
<div class="c3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="row">
|
||||
<div class="col card c3">
|
||||
<div class="col card c6">
|
||||
<h3>Documentation</h3>
|
||||
<div class="block">
|
||||
<p>Don't worry it will be quick and straightforward.</p>
|
||||
</div>
|
||||
<a href="h/docs.html" class="btn btn-a">Docs</a>
|
||||
<a href="h/docs.html" class="btn btn-a act">Docs</a>
|
||||
</div>
|
||||
<div class="col card c3">
|
||||
<div class="col card c6">
|
||||
<h3>Examples</h3>
|
||||
<div class="block">
|
||||
<p>To give you an idea.</p>
|
||||
</div>
|
||||
<a href="h/examples.html" class="btn smooth">Examples</a>
|
||||
<a href="h/examples.html" class="btn act">Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
.tb-c { color: #c22; }
|
||||
|
||||
.btn {
|
||||
background: #999;
|
||||
background: #888;
|
||||
border: solid 2px #000;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #888;
|
||||
background: #777;
|
||||
}
|
||||
|
||||
.btn:active,.btn:focus {
|
||||
background: #777;
|
||||
background: #666;
|
||||
box-shadow: 1px 1px #000;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
|
|
@ -41,33 +41,33 @@
|
|||
}
|
||||
|
||||
.btn-a {
|
||||
background: #0ae;
|
||||
background: #59d;
|
||||
&:hover {
|
||||
background: #09d; /* darken(@btn-a-bg, 5%) */
|
||||
background: #09d;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
background: #08b; /* darken(@btn-a-bg, 10%) */
|
||||
background: #08b;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-b {
|
||||
background: #494;
|
||||
&:hover {
|
||||
background: #383; /* darken(@btn-a-bg, 5%) */
|
||||
background: #090;
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: #272; /* darken(@btn-b-bg, 10%) */
|
||||
background: #070;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-c {
|
||||
background: #d33;
|
||||
&:hover {
|
||||
background: #c22; /* darken(@btn-c-bg, 5%) */
|
||||
background: #d00;
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: #b22; /* darken(@btn-c-bg, 10%) */
|
||||
background: #b00;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,12 +35,16 @@ body, textarea, input, select {
|
|||
border: solid 2px;
|
||||
}
|
||||
|
||||
.col .bot {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #adf;
|
||||
padding: 2rem;
|
||||
outline-style: double;
|
||||
outline-width: 1rem;
|
||||
margin-top: 1rem;
|
||||
outline-width: 0.5rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
@media(min-width:1310px) {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,14 @@
|
|||
.row {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-item: space-between;
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.table, .c12 {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
.msg {
|
||||
background: #def;
|
||||
border-left: 5px solid #59d;
|
||||
background: #ddd;
|
||||
border-left: 5px solid #999;
|
||||
padding: 1.5em;
|
||||
}
|
||||
.info {
|
||||
background: #def;
|
||||
background: #d1e5fa;
|
||||
border-color: #59d;
|
||||
}
|
||||
.ok {
|
||||
background: #c8fac8;
|
||||
background: #c1ecc1;
|
||||
border-color: #73cf73;
|
||||
}
|
||||
.warn {
|
||||
|
|
@ -16,17 +16,22 @@
|
|||
border-color: #fa6;
|
||||
}
|
||||
.err {
|
||||
background: #fed3d3;
|
||||
background: #fcbdbd;
|
||||
border-color: #e75d5d;
|
||||
}
|
||||
.black, .black * {
|
||||
background: #000;
|
||||
border-color: #444;
|
||||
background: #333;
|
||||
border-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fatal, .fatal * {
|
||||
background: #bf2aee;
|
||||
.attention, .attention * {
|
||||
background: #b74fde;
|
||||
border-color: #9311bb;
|
||||
color: #fff;
|
||||
}
|
||||
.fatal, .fatal * {
|
||||
background: #df1023;
|
||||
border-color: #ba0000;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue