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 @@
{{ title }} {{ description }}