Skip to content

Commit

Permalink
style: Use Grid Layout instead of Flexbox
Browse files Browse the repository at this point in the history
  • Loading branch information
Korilakkuma committed Nov 19, 2023
1 parent 9775ffc commit 3dc9425
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 20 deletions.
28 changes: 12 additions & 16 deletions app.css
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@ header,
overflow: hidden;
}

aside > section {
display: grid;
grid-template-rows: repeat(3, auto);
grid-template-columns: repeat(3, auto);
gap: 12px;
margin-top: 12px;
}

header,
aside {
background-color: #000;
Expand Down Expand Up @@ -120,14 +128,6 @@ aside > img {
transform: scale(0.5);
}

.section > section {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-top: 12px;
}

h1 {
font-family: "Lucida Grande", Calibri, Helvetica, Arial, sans-serif;
font-size: calc(64 * ((100vw - 320px) / (1280 - 320)) + 64px);
Expand Down Expand Up @@ -189,9 +189,9 @@ h1 > span:last-child {
}

nav {
display: flex;
flex-direction: row;
justify-content: space-between;
display: grid;
grid-template-columns: repeat(2, auto);
gap: 12px;
margin-top: 48px;
}

Expand All @@ -205,7 +205,6 @@ nav > a:first-of-type {
}

nav > a:last-of-type {
margin-left: 12px;
color: #c000c0;
background-color: rgb(0 0 0 / 0%);
}
Expand All @@ -222,14 +221,12 @@ nav > a:last-of-type:hover {
}

aside h3 {
min-width: 90px;
text-transform: uppercase;
}

pre {
width: 480px; /* HACK */
max-width: 480px; /* HACK */
padding: 8px 16px;
margin-left: 16px;
overflow-x: auto;
font-size: 16px;
color: #212121;
Expand All @@ -238,7 +235,6 @@ pre {

button[type="button"] {
padding: 12px 16px;
margin-left: 16px;
font-size: 16px;
color: #eee;
text-transform: uppercase;
Expand Down
4 changes: 0 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,9 @@ <h2>Let's Begin !</h2>
<h3>npm</h3>
<pre id="pre-npm"><code>$ npm install --save xsound</code></pre>
<button id="button-npm" type="button">copy</button>
</section>
<section>
<h3>Yarn</h3>
<pre id="pre-yarn"><code>$ yarn add xsound</code></pre>
<button id="button-yarn" type="button">copy</button>
</section>
<section>
<h3>CDN</h3>
<pre id="pre-cdn"><code>&lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.jsdelivr.net/npm/xsound@latest/build/xsound.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<button id="button-cdn" type="button">copy</button>
Expand Down

0 comments on commit 3dc9425

Please sign in to comment.