mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-31 09:41:47 +02:00
👍 説明要素を修正
This commit is contained in:
BcRikko
27
css/nes.css
27
css/nes.css
@@ -108,6 +108,10 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
@@ -356,7 +360,6 @@ a {
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 1.5rem 2rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.container::before, .container::after {
|
||||
@@ -391,11 +394,13 @@ a {
|
||||
|
||||
.container.-with-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.container.-with-title.-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -454,21 +459,31 @@ a {
|
||||
box-shadow: 6px 6px 0 #333, 8px 6px 0 #333, 10px 6px 0 #333, 12px 6px 0 #333, 14px 6px 0 #333, 16px 6px 0 #333, 18px 6px 0 #333, 22px 6px 0 #333, 24px 6px 0 #333, 6px 8px 0 #333, 20px 8px 0 #333, 22px 8px 0 #333, 24px 8px 0 #333, 6px 10px 0 #333, 18px 10px 0 #333, 20px 10px 0 #333, 6px 12px 0 #333, 8px 12px 0 #333, 16px 12px 0 #333, 18px 12px 0 #333, 6px 14px 0 #333, 8px 14px 0 #333, 10px 14px 0 #333, 14px 14px 0 #333, 16px 14px 0 #333, 20px 14px 0 #333, 6px 16px 0 #333, 10px 16px 0 #333, 12px 16px 0 #333, 14px 16px 0 #333, 20px 16px 0 #333, 6px 18px 0 #333, 12px 18px 0 #333, 20px 18px 0 #333, 6px 20px 0 #333, 8px 20px 0 #333, 10px 20px 0 #333, 12px 20px 0 #333, 14px 20px 0 #333, 16px 20px 0 #333, 18px 20px 0 #333, 20px 20px 0 #333;
|
||||
}
|
||||
|
||||
.description {
|
||||
width: 100%;
|
||||
dl.description {
|
||||
display: grid;
|
||||
grid-template: auto / 15rem 1fr;
|
||||
grid-gap: 0.8rem 2rem;
|
||||
}
|
||||
|
||||
.description > dt {
|
||||
dl.description:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
dl.description > dt {
|
||||
position: relative;
|
||||
grid-column: 1;
|
||||
float: left;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.description > dt.-colon::after {
|
||||
dl.description > dt.-colon::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -1.5rem;
|
||||
z-index: -1;
|
||||
content: ":";
|
||||
}
|
||||
|
||||
dl.description > dd {
|
||||
grid-column: 2;
|
||||
}
|
||||
/*# sourceMappingURL=nes.css.map */
|
||||
File diff suppressed because one or more lines are too long
4
css/nes.min.css
vendored
4
css/nes.min.css
vendored
File diff suppressed because one or more lines are too long
82
index.html
82
index.html
@@ -95,18 +95,76 @@
|
||||
|
||||
<section class="container">
|
||||
<h2 class="title -is-3">Description</h2>
|
||||
<section class="container -with-title -center _dark" style="width: 170px; margin: 0;">
|
||||
<label class="title">ENlX</label>
|
||||
<dl class="description">
|
||||
<dt class="-colon">LV</dt>
|
||||
<dd class="_right">19</dd>
|
||||
<dt class="-colon">HP</dt>
|
||||
<dd class="_right">62</dd>
|
||||
<dt class="-colon">MP</dt>
|
||||
<dd class="_right">11</dd>
|
||||
<dt class="">G</dt>
|
||||
<dd class="_right">6871</dd>
|
||||
</dl>
|
||||
<h3 class="title -is-4">description list</h3>
|
||||
<dl class="description">
|
||||
<dt>Description list</dt>
|
||||
<dd>Lorem ipsum dolor sit amet</dd>
|
||||
<dt>Consectetur</dt>
|
||||
<dd>adipiscing elit</dd>
|
||||
<dt>sed do eiusmod</dt>
|
||||
<dd>tempor incididunt ut labore et dolore magna aliqua</dd>
|
||||
</dl>
|
||||
|
||||
<h3 class="title -is-4">with colon</h3>
|
||||
<dl class="description">
|
||||
<dt class="-colon">Description list</dt>
|
||||
<dd>Lorem ipsum dolor sit amet</dd>
|
||||
<dt class="-colon">Consectetur</dt>
|
||||
<dd>adipiscing elit</dd>
|
||||
<dt class="-colon">sed do eiusmod</dt>
|
||||
<dd>tempor incididunt ut labore et dolore magna aliqua</dd>
|
||||
</dl>
|
||||
|
||||
<h3 class="title -is-4">e.g. Dragon Quest-status</h3>
|
||||
<section class="container _dark dq-like-grid">
|
||||
<section class="overview container _dark -with-title -center _dark">
|
||||
<label class=" title">ENlX</label>
|
||||
<p>Hero</p>
|
||||
<dl class="description">
|
||||
<dt class="-colon">LV</dt>
|
||||
<dd class="_right">10</dd>
|
||||
<dt class="-colon">HP</dt>
|
||||
<dd class="_right">58</dd>
|
||||
<dt class="-colon">MP</dt>
|
||||
<dd class="_right">18</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section class="equipment container _dark">
|
||||
<dl class="description">
|
||||
<dt>E</dt>
|
||||
<dd>SWORD</dd>
|
||||
<dt>E</dt>
|
||||
<dd>CLOTHES</dd>
|
||||
<dt>E</dt>
|
||||
<dd>POT LID</dd>
|
||||
<dt>E</dt>
|
||||
<dd>AMULET</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section class="status container _dark">
|
||||
<dl class="description">
|
||||
<dt class="-colon">STRENGTH</dt>
|
||||
<dd class="_right">15</dd>
|
||||
<dt class="-colon">AGILITY</dt>
|
||||
<dd class="_right">36</dd>
|
||||
<dt class="-colon">VITALITY</dt>
|
||||
<dd class="_right">41</dd>
|
||||
<dt class="-colon">INTELLIGENCE</dt>
|
||||
<dd class="_right">7</dd>
|
||||
<dt class="-colon">LUCK</dt>
|
||||
<dd class="_right">6</dd>
|
||||
<dt class="-colon">MAX HP</dt>
|
||||
<dd class="_right">81</dd>
|
||||
<dt class="-colon">MAX MP</dt>
|
||||
<dd class="_right">50</dd>
|
||||
<dt class="-colon">ATTACK POWER</dt>
|
||||
<dd class="_right">57</dd>
|
||||
<dt class="-colon">DEFENSE POWER</dt>
|
||||
<dd class="_right">87</dd>
|
||||
<dt class="">EXP</dt>
|
||||
<dd class="_right">1316</dd>
|
||||
</dl>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -20,3 +20,7 @@ a {
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 1.5rem 2rem;
|
||||
margin: auto;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@@ -36,10 +35,12 @@
|
||||
|
||||
&.-with-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-top: 2rem;
|
||||
|
||||
&.-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
.description {
|
||||
width: 100%;
|
||||
dl.description {
|
||||
display: grid;
|
||||
grid-template: auto / 15rem 1fr;
|
||||
grid-gap: 0.8rem 2rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
> dt {
|
||||
position: relative;
|
||||
grid-column: 1;
|
||||
float: left;
|
||||
margin-right: 1.5rem;
|
||||
|
||||
&.-colon::after {
|
||||
position: absolute;
|
||||
@@ -14,4 +20,8 @@
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
> dd {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
42
style.css
42
style.css
@@ -2,6 +2,48 @@ body {
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.dq-like-grid {
|
||||
display: grid;
|
||||
|
||||
/* prettier-ignore */
|
||||
grid-template:
|
||||
"overview status"
|
||||
"equipment status"
|
||||
/ 210px auto;
|
||||
width: 640px;
|
||||
}
|
||||
|
||||
.dq-like-grid > .overview {
|
||||
grid-area: overview;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dq-like-grid > .overview .description {
|
||||
grid-template: auto / 2rem 1fr;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.dq-like-grid > .equipment {
|
||||
grid-area: equipment;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dq-like-grid > .equipment .description {
|
||||
grid-template: auto / 1rem 1fr;
|
||||
}
|
||||
|
||||
.dq-like-grid > .status {
|
||||
grid-area: status;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dq-like-grid > .status .description {
|
||||
grid-template: auto / 13rem 1fr;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.github-link {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
||||
Reference in New Issue
Block a user