Indents

src/App.vue

@@ -149,11 +149,11 @@ const darkThemeOverrides: GlobalThemeOverrides = {
 }
 
 .column {
-    height: 100%;  /* allows both columns to span the full height of the browser window */
-    display: flex;
-    flex-direction: column;  /* stacks the left and right headers above the bottom content */
-    flex-wrap: nowrap;
-    margin: 8px;
+  height: 100%;  /* allows both columns to span the full height of the browser window */
+  display: flex;
+  flex-direction: column;  /* stacks the left and right headers above the bottom content */
+  flex-wrap: nowrap;
+  margin: 8px;
 }
 .column-content {
   display: flex;
@@ -163,12 +163,12 @@ const darkThemeOverrides: GlobalThemeOverrides = {
 }
 
 #main-column {
-    /* flex-shrink: 0;  /* makes sure that content is not cut off in a smaller browser window */ /* [OCDkirby: so that was a fucking lie.] */
-    flex-shrink: 1;
-    flex-grow: 4;
-    align-self: center;
-    align-items: center;
-    gap: 16px;
+  /* flex-shrink: 0;  /* makes sure that content is not cut off in a smaller browser window */ /* [OCDkirby: so that was a fucking lie.] */
+  flex-shrink: 1;
+  flex-grow: 4;
+  align-self: center;
+  align-items: center;
+  gap: 16px;
 }
 
 #right-column {
@@ -183,12 +183,12 @@ const darkThemeOverrides: GlobalThemeOverrides = {
 }
 
 .top-main {
-    flex-shrink: 0;
+  flex-shrink: 0;
 }
 
 .top-right {
-    flex-shrink: 0;
-    display: flex;
+  flex-shrink: 0;
+  display: flex;
     
 }
 

src/components/ContentCard.vue

@@ -23,33 +23,33 @@ import '../assets/text-styles.css';
 </template>
 
 <style scoped>
-    .n-card {
-        max-width: 400px;
-        min-width: 400px;
-    }
+  .n-card {
+    max-width: 400px;
+    min-width: 400px;
+  }
 
-    .card-wrapper {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-    }
-    
-    .icon-wrapper {
-        margin: 10px 20px 10px 0px;
-        border: 2px;
-        border-radius: 2px;
-        border-color: black; /* TODO fixme */
-    }
+  .card-wrapper {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+  }
+  
+  .icon-wrapper {
+    margin: 10px 20px 10px 0px;
+    border: 2px;
+    border-radius: 2px;
+    border-color: black; /* TODO fixme */
+  }
 
-    .card-icon {
-        font-size: 100px;
-    }
+  .card-icon {
+    font-size: 100px;
+  }
 
-    .content-wrapper {
-        flex-shrink: 1;
-    }
+  .content-wrapper {
+    flex-shrink: 1;
+  }
 
-    #card-body {
-        word-wrap: break-word;
-    }
+  #card-body {
+    word-wrap: break-word;
+  }
 </style>

src/components/MainCard.vue

@@ -11,19 +11,19 @@ defineProps({
 </script>
 
 <style scoped>
-    .n-card {
-        max-width: 300px;
-    }
+  .n-card {
+    max-width: 300px;
+  }
 </style>
 
 <template>
-    <n-card hoverable>
-        <template #cover>
-            <img :src="themex == null ? './assets/logo-light.png' : './assets/logo-dark.png'">
-        </template>
-        <template #header>
-            RPCSX is your PlayStation 4 emulator.
-        </template>
-        <div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own.</div>
-    </n-card>
+  <n-card hoverable>
+      <template #cover>
+        <img :src="themex == null ? './assets/logo-light.png' : './assets/logo-dark.png'">
+      </template>
+      <template #header>
+        RPCSX is your PlayStation 4 emulator.
+      </template>
+      <div class="body-text">Use only with lawfully obtained archival copies of PS4 games you physically own.</div>
+  </n-card>
 </template>