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

👍 説明要素を修正

Browse Source
This commit is contained in:
BcRikko
2018-09-26 17:43:05 +09:00
parent a72b99dda3
commit 965d50a914
8 changed files with 155 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
css/nes.css
View File

@@ -108,6 +108,10 @@ a {
text-decoration: none; text-decoration: none;
} }
p:not(:last-child) {
margin-bottom: 1rem;
}
@keyframes blink { @keyframes blink {
0% { 0% {
opacity: 1; opacity: 1;
@@ -356,7 +360,6 @@ a {
.container { .container {
position: relative; position: relative;
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
margin: auto;
} }
.container::before, .container::after { .container::before, .container::after {
@@ -391,11 +394,13 @@ a {
.container.-with-title { .container.-with-title {
display: flex; display: flex;
flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
padding-top: 2rem; padding-top: 2rem;
} }
.container.-with-title.-center { .container.-with-title.-center {
align-items: center;
justify-content: 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; 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 { dl.description {
width: 100%; 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; position: relative;
grid-column: 1;
float: left; float: left;
margin-right: 1.5rem;
} }
.description > dt.-colon::after { dl.description > dt.-colon::after {
position: absolute; position: absolute;
top: 0; top: 0;
right: -1.5rem; right: -1.5rem;
z-index: -1; z-index: -1;
content: ":"; content: ":";
} }
dl.description > dd {
grid-column: 2;
}
/*# sourceMappingURL=nes.css.map */ /*# sourceMappingURL=nes.css.map */

2
css/nes.css.map
View File

File diff suppressed because one or more lines are too long

4
css/nes.min.css vendored
View File

File diff suppressed because one or more lines are too long

82
index.html
View File

@@ -95,18 +95,76 @@
<section class="container"> <section class="container">
<h2 class="title -is-3">Description</h2> <h2 class="title -is-3">Description</h2>
<section class="container -with-title -center _dark" style="width: 170px; margin: 0;"> <h3 class="title -is-4">description list</h3>
<label class="title">ENlX</label> <dl class="description">
<dl class="description"> <dt>Description list</dt>
<dt class="-colon">LV</dt> <dd>Lorem ipsum dolor sit amet</dd>
<dd class="_right">19</dd> <dt>Consectetur</dt>
<dt class="-colon">HP</dt> <dd>adipiscing elit</dd>
<dd class="_right">62</dd> <dt>sed do eiusmod</dt>
<dt class="-colon">MP</dt> <dd>tempor incididunt ut labore et dolore magna aliqua</dd>
<dd class="_right">11</dd> </dl>
<dt class="">G</dt>
<dd class="_right">6871</dd> <h3 class="title -is-4">with colon</h3>
</dl> <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>
</section> </section>
</main> </main>

4
scss/base/generic.scss
View File

@@ -20,3 +20,7 @@ a {
color: $black; color: $black;
text-decoration: none; text-decoration: none;
} }
p:not(:last-child) {
margin-bottom: 1rem;
}

3
scss/elements/container.scss
View File

@@ -1,7 +1,6 @@
.container { .container {
position: relative; position: relative;
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
margin: auto;
&::before, &::before,
&::after { &::after {
@@ -36,10 +35,12 @@
&.-with-title { &.-with-title {
display: flex; display: flex;
flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
padding-top: 2rem; padding-top: 2rem;
&.-center { &.-center {
align-items: center;
justify-content: center; justify-content: center;
} }

16
scss/elements/description.scss
View File

@@ -1,10 +1,16 @@
.description { dl.description {
width: 100%; display: grid;
grid-template: auto / 15rem 1fr;
grid-gap: 0.8rem 2rem;
&:not(:last-child) {
margin-bottom: 1.5rem;
}
> dt { > dt {
position: relative; position: relative;
grid-column: 1;
float: left; float: left;
margin-right: 1.5rem;
&.-colon::after { &.-colon::after {
position: absolute; position: absolute;
@@ -14,4 +20,8 @@
content: ":"; content: ":";
} }
} }
> dd {
grid-column: 2;
}
} }

42
style.css
View File

@@ -2,6 +2,48 @@ body {
margin: 2rem; 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 { .github-link {
position: absolute; position: absolute;
top: 10px; top: 10px;