mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-30 09:20:02 +02:00
Code Issues Releases Wiki Activity

refactor: fix table margin in demo page

Browse Source
This commit is contained in:
BcRikko
2018-12-09 10:37:58 +09:00
parent c61e17ac03
commit 06ac77abfe
2 changed files with 61 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
index.html
View File

@@ -132,44 +132,46 @@
</div>
</section>
<section class="container with-title" style="display:flex">
<section class="container with-title">
<h2 class="title">Table</h2>
<table class="table is-bordered is-centered" style="margin:15px 15px 5px 0;">
<thead>
<tr>
<th>Table.is-bordered</th>
<th>Table.is-centered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
</tbody>
</table>
<table class="table is-bordered is-dark" style="margin:15px 4px 5px 15px">
<thead>
<tr>
<th>Table.is-dark</th>
<th>Table.is-bordered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
</tbody>
</table>
<div class="tables">
<table class="table is-bordered is-centered">
<thead>
<tr>
<th>Table.is-bordered</th>
<th>Table.is-centered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
</tbody>
</table>
<table class="table is-bordered is-dark">
<thead>
<tr>
<th>Table.is-dark</th>
<th>Table.is-bordered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="container with-title">
@@ -223,7 +225,7 @@
<i class="icon twitch"></i>
<i class="icon twitch is-medium"></i>
<i class="icon twitch is-large"></i>
<i class="icon reddit"></i>
<i class="icon reddit is-medium"></i>
<i class="icon reddit is-large"></i>

21
style.css
View File

@@ -16,6 +16,27 @@ div.containers > .container {
max-width: 400px;
}
div.tables {
display: flex;
flex-wrap: wrap;
}
div.tables > .table {
min-width: 350px;
max-width: calc(50% - 2rem);
}
div.tables > .table:first-child {
margin-right: 2rem;
margin-bottom: 2rem;
}
@media screen and (max-width: 768px) {
div.tables > .table {
max-width: 100%;
margin-right: 0;
}
}
.balloon.container .balloon {
max-width: 600px;
margin: 2rem 2rem;