yogsototh/brutcss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated css

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2022-09-25 14:20:46 +02:00
parent d94faa8543
commit 688aea8949
Signed by untrusted user who does not match committer: yogsototh
GPG key ID: 7B19A4C650D59646
3 changed files with 19 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
blunt.min.css vendored
View file

@ -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:#ddd;padding:2rem;border:double 1rem;margin-top:1rem}.hero *{font-size:2rem;margin:2rem auto;text-align:center}@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}.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}

22
index.html
View file

@ -3,17 +3,25 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link href="blunt.min.css" rel="stylesheet" type="text/css" />
<title>Blunt</title> <title>Blunt</title>
<style type="text/css"> <link href="blunt.min.css" rel="stylesheet" type="text/css" />
.hero { text-align: center; }
</style>
</head> </head>
<body> <body>
<div class="block"> <div class="container">
<div class="hero"> <div class="hero">
<h1 class="title">BLUNT</h1> <div class="row">
<h4 class="mobileonly">The world's <em>fastest</em> CSS framework</h4> <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> </div>
<div class="block"> <div class="block">

11
src/general.less
View file

@ -36,18 +36,13 @@ body, textarea, input, select {
} }
.hero { .hero {
background: #ddd; background: #adf;
padding: 2rem; padding: 2rem;
border: double 1rem; outline-style: double;
outline-width: 1rem;
margin-top: 1rem; margin-top: 1rem;
} }
.hero * {
font-size: 2rem;
margin: 2rem auto;
text-align: center;
}
@media(min-width:1310px) { @media(min-width:1310px) {
.container { .container {
margin: auto; margin: auto;