diff --git a/assets/styles/index.scss b/assets/styles/index.scss index 5715305..f57e567 100644 --- a/assets/styles/index.scss +++ b/assets/styles/index.scss @@ -1,101 +1,99 @@ @use 'colours'; .container { - min-height: 100vh; - padding: 0 0.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100vh; + min-height: 100vh; + padding: 0 0.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; } .footer { - width: 100%; - height: 100px; - border-top: 1px solid #eaeaea; - display: flex; - justify-content: center; - align-items: center; + width: 100%; + height: 100px; + border-top: 1px solid #eaeaea; + display: flex; + justify-content: center; + align-items: center; } .footer a:hover { - color: #0070f3; + color: #0070f3; } .footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; - color: #eaeaea; + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; + color: #eaeaea; } .title a { - color: #0070f3; - text-decoration: none; + color: #0070f3; + text-decoration: none; } .title a:hover, .title a:focus, .title a:active { - text-decoration: underline; + text-decoration: underline; } .title { - margin: 0; - line-height: 1.15; - font-size: 4rem; + margin: 0; + line-height: 1.15; + font-size: 4rem; } .title, .description { - text-align: center; - color: #eaeaea + text-align: center; + color: #eaeaea; } .description { - line-height: 1.5; - font-size: 1.5rem; + line-height: 1.5; + font-size: 1.5rem; } .code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; + background: #fafafa; + border-radius: 5px; + padding: 0.75rem; + font-size: 1.1rem; + font-family: Menlo, Monaco, Lucida Console, Liberation Mono, + DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; } .grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; - margin-top: 3rem; + display: grid; + align-items: center; + justify-content: center; + grid-template-columns: 1fr 1fr 1fr; } .card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; + margin: 0 0 1rem 0; + font-size: 1.5rem; } .card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; + margin: 0; + font-size: 1.25rem; + line-height: 1.5; } .logo { - height: 1em; - margin-left: 0.5rem; + height: 1em; + margin-left: 0.5rem; } @media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } + .grid { + width: 90%; + grid-template-columns: 1fr 1fr; + } } diff --git a/components/LinkCard.vue b/components/LinkCard.vue index 8fe3ba9..ab2c7ad 100644 --- a/components/LinkCard.vue +++ b/components/LinkCard.vue @@ -1,13 +1,12 @@ @@ -19,7 +18,7 @@ export default { color: inherit; text-decoration: none; border: 2px solid #000; - border-radius: 10px; + border-radius: 20px; transition: color 0.15s ease, border-color 0.15s ease; } @@ -34,4 +33,12 @@ export default { color: #0070f3 !important; border-color: #0070f3; } + +@media (max-width: 600px) { + .card { + margin: 0.5rem; + padding: 1.25rem; + width: 9rem; + } +} diff --git a/pages/index.vue b/pages/index.vue index c8aabb9..4d7380b 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -10,7 +10,26 @@ import '@/assets/styles/index.scss'; spaces.

- + + + + +