diff --git a/styles/style.css b/styles/style.css index 0da090d56313afa5565b34a1311075cc5da5bb61..815a4d915fbcd45520c9781698e0192dad0cdecd 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,117 +1,122 @@ body { - hyphens: auto; + hyphens: auto; } - + img { - width: 8em; + width: 8em; } -h3 a, h3 a:visited { - color: var(--text); - text-decoration: none; +h3 a, +h3 a:visited { + color: var(--text); + text-decoration: none; } a:hover { - text-decoration: underline; + text-decoration: underline; } article { - display: grid; - grid-template-columns: 1fr 2fr; + display: grid; + grid-template-columns: 1fr 2fr; } article h3 { - grid-column: 2; - grid-row: 1; + display: flex; + align-items: center; + gap: 0.5rem; + grid-column: 2; + grid-row: 1; + margin: 1.5rem 0 1.5rem; } article p { - grid-column: 2; - grid-row: 2; + grid-column: 2; + grid-row: 2; } .example-files { - grid-column: 2; - grid-row:3; - + grid-column: 2; + grid-row: 3; } .article-image { - grid-column: 1; - grid-row: 1 / 5; - display: flex; - justify-content: center; - align-items: center; + grid-column: 1; + grid-row: 1 / 5; + display: flex; + justify-content: center; + align-items: center; } .link-button { - display: inline-block; - padding: 8px 10px; - text-decoration: none; - background-color: var(--accent-bg); - border: 1px solid var(--border); - border-radius: 4px; - line-height: 1; + display: inline-block; + padding: 8px 10px; + text-decoration: none; + background-color: var(--accent-bg); + border: 1px solid var(--border); + border-radius: 4px; + line-height: 1; } .link-button img { - width: 1.5rem; - height: 1.5rem; - line-height: 1; + display: block; + width: 1.5rem; + height: 1.5rem; + line-height: 1; } .link-button:hover { - background-color: #d0d2da; + background-color: #d0d2da; } .git-link { - grid-column: 2; - grid-row: 4; + grid-column: 2; + grid-row: 4; } -.git-link, .download-link { - display: flex; - align-items: center; - line-height: 1.8; +.git-link, +.download-link { + display: flex; + align-items: center; + line-height: 1.8; } -.git-link img, .download-link img { - width: 1.15rem; - height: 1.15rem; - margin: 0.1rem; - margin-right: 0.5em; +.git-link img, +.download-link img { + width: 1.15rem; + height: 1.15rem; + margin: 0.1rem; + margin-right: 0.5em; } @media (max-width: 600px) { - article { - grid-template-columns: 1fr; - } - - article h3 { - justify-self: center; - grid-column: 1; - grid-row: 2; - } - - article p { - grid-column: 1; - grid-row: 3; - } - - .example-files { - grid-column: 1; - grid-row: 4; - - } - - .article-image { - grid-column: 1; - grid-row: 1; - } - - .git-link { - grid-column: 1; - grid-row: 5; - } -} - + article { + grid-template-columns: 1fr; + } + + article h3 { + justify-self: center; + grid-column: 1; + grid-row: 2; + } + + article p { + grid-column: 1; + grid-row: 3; + } + + .example-files { + grid-column: 1; + grid-row: 4; + } + + .article-image { + grid-column: 1; + grid-row: 1; + } + + .git-link { + grid-column: 1; + grid-row: 5; + } +}