improved grid mechanism
This commit is contained in:
parent
3520c8ac6a
commit
85ddfd3b5a
4 changed files with 30 additions and 23 deletions
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
20
index.html
20
index.html
|
@ -16,7 +16,7 @@
|
|||
<a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn btn-sm btn-close">×</button>
|
||||
<button class="btn sm btn-close">×</button>
|
||||
<div class="container">
|
||||
<div class="hero">
|
||||
<div class="row">
|
||||
|
@ -42,33 +42,33 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="c4">
|
||||
<div class="c4 col">
|
||||
<div class="card">
|
||||
<h3>Documentation</h3>
|
||||
<div class="block">
|
||||
<p>Don't worry it will be quick and straightforward.</p>
|
||||
<p>Just a test</p>
|
||||
</div>
|
||||
<a href="h/docs.html" class="btn">Docs</a>
|
||||
</div>
|
||||
<a href="h/docs.html" class="btn info big">Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c4">
|
||||
<div class="c4 col">
|
||||
<div class="card">
|
||||
<h3>Download</h3>
|
||||
<div class="block">
|
||||
<p>Download BRUT</p>
|
||||
</div>
|
||||
<a href="h/docs.html" class="btn">Download</a>
|
||||
</div>
|
||||
<a href="h/docs.html" class="btn err big">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c4">
|
||||
<div class="c4 col">
|
||||
<div class="card">
|
||||
<h3>Examples</h3>
|
||||
<div class="block">
|
||||
<p>To give you an idea.</p>
|
||||
</div>
|
||||
<a href="h/examples.html" class="btn">Examples</a>
|
||||
</div>
|
||||
<a href="h/examples.html" class="btn ok big">Examples</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -24,20 +24,24 @@ body, textarea, input, select {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.block {
|
||||
padding: 6px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
/* is like a block with a border */
|
||||
.card {
|
||||
.card, .block {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
border: solid 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.col > .card, .col > .block { height: 100%; }
|
||||
.row > .card, .row > .block { width: 100%; }
|
||||
|
||||
.block {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.col .bot {
|
||||
margin-top: auto;
|
||||
.bot {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.hero {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
.row {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
@ -11,10 +11,13 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.col > *, .row > * { padding: 5px; }
|
||||
.col.no-padding > *, .row.no-padding > * { padding: 0; }
|
||||
|
||||
.table, .c12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue