Another deploy test

.gitea/workflows/build-ssr.yaml

@@ -0,0 +1,23 @@
+name: Gitea Actions Demo
+run-name: ${{ gitea.actor }} is testing out Gitea Actions 🚀
+
+on:
+  workflow_dispatch:
+
+#on:
+#  push:
+#    branches:
+#      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: main
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+      - name: Build app
+        run: |
+          yarn
+          yarn generate
+      - name: Move result to /var/www/koptilnya.xyz
+        run: cp -r .output/. /var/www/koptilnya.xyz

.gitea/workflows/build.yaml

@@ -1,12 +1,13 @@
 name: Gitea Actions Demo
 run-name: ${{ gitea.actor }} is testing out Gitea Actions 🚀
+
 on:
   push:
     branches:
       - main
 
 jobs:
-  Deploy-koptilnya.xyz:
+  build-and-deploy:
     runs-on: main
     steps:
       - name: Check out repository code

app.vue

@@ -1,7 +1,147 @@
 <template>
-  <h1>KOPTILNYA</h1>
+  <header>
-  <h6>ну типа крутое лого</h6>
+    <div class="logo">
+      KP
+      <br>
+      TL
+    </div>
+  </header>
+
+  <div class="grid">
+    <div class="card">
+      <p class="card__title">
+        TeamSpeak
+      </p>
+
+      <img src="/ts.png" alt="TeamSpeak" class="card__image">
+
+      <a class="button card__action" href="https://invite.teamspeak.com/koptilnya.xyz/">
+        Подключиться
+      </a>
+    </div>
+
+    <div class="card">
+      <p class="card__title">
+        Dota 2
+      </p>
+
+      <img src="/dota.png" alt="Dota 2" class="card__image">
+
+      <a class="button card__action" href="steam://run/570">
+        Запустить
+      </a>
+    </div>
+
+    <div class="card">
+      <p class="card__title">
+        Gitea
+      </p>
+
+      <img src="/gitea.svg" alt="Gitea" class="card__image">
+
+      <a class="button card__action" href="https://git.koptilnya.xyz">
+        Перейти
+      </a>
+    </div>
+
+    <div class="card">
+      <p class="card__title">
+        Owncast
+      </p>
+
+      <img src="/obs.png" alt="Open Broadcaster Software" class="card__image">
+
+      <a class="button card__action" href="https://live.koptilnya.xyz">
+        Перейти
+      </a>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 </script>
+
+<style lang="scss">
+@mixin mobile {
+  @media (max-width: 600px) {
+    @content;
+  }
+}
+
+header {
+  text-align: center;
+  padding-block: 16px;
+  margin-bottom: 16px;
+}
+
+.logo {
+  display: inline-block;
+  text-align: center;
+  font-size: 32px;
+  line-height: 1;
+  width: 64px;
+  text-transform: uppercase;
+  font-weight: 700;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(90deg, var(--beaver), var(--walnut-brown));
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+.card {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  justify-items: flex-start;
+  border-radius: 16px;
+  padding: 16px;
+  gap: 16px;
+  background-image: linear-gradient(90deg, var(--chocolate-cosmos), var(--black));
+
+  &__title {
+    font-size: 24px;
+    font-weight: 700;
+  }
+
+  &__image {
+    width: 80px;
+    grid-row: span 2;
+    opacity: 0.7;
+  }
+
+  &__action {
+    grid-row: 2;
+  }
+}
+
+.button {
+  display: inline-block;
+  text-decoration: none;
+  border: none;
+  border-radius: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  background-image: linear-gradient(135deg, var(--beaver) 0%, var(--beaver) 51%, var(--walnut-brown) 110%);
+  background-size: 200% auto;
+  background-color: var(--walnut-brown);
+  background-repeat: repeat;
+  color: var(--white-smoke);
+  font-weight: 500;
+  transition: .15s ease-out;
+  transition-property: color, background-position;
+
+  &:hover:not(:active) {
+    background-position: right center;
+  }
+}
+</style>

assets/styles.scss

@@ -8,6 +8,12 @@
 
 * {
   margin: 0;
+  font-family: "Montserrat", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-size: 14px;
+  font-weight: 400;
+  box-sizing: border-box;
 }
 
 html,
@@ -16,42 +22,20 @@ body {
   height: 100%;
 }
 
-#__nuxt {
+body {
-  height: 100%;
   position: relative;
-  font-family: "Montserrat", sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 100;
-  font-style: normal;
-
-  /* background-image: radial-gradient(circle, var(--black), var(--chocolate-cosmos)); */
   background-color: var(--black);
-  background-size: cover;
   color: var(--white-smoke);
   overflow: hidden;
-
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
 }
 
-h1 {
+#__nuxt {
-  text-align: center;
+  padding: 16px;
-  font-size: 72px;
+  width: 100%;
-  line-height: 1;
+  max-width: 800px;
-  text-transform: uppercase;
+  margin-inline: auto;
-  font-weight: 500;
+  overflow-y: auto;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-image: linear-gradient(90deg, var(--beaver), var(--walnut-brown));
-}
-
-h6 {
-  color: var(--white-smoke);
-  font-size: 10px;
-  line-height: 1;
-  font-weight: 300;
-  opacity: 0.7;
 }

nuxt.config.ts

@@ -4,7 +4,7 @@ export default defineNuxtConfig({
   modules: ['@nuxtjs/google-fonts'],
   googleFonts: {
     families: {
-      Montserrat: [300, 500],
+      Montserrat: [300, 400, 500, 700],
     },
   },
   css: ['@/assets/styles.scss'],

public/gitea.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
+<g>
+	<path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8   c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4   c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
+	<g>
+		<g>
+			<path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2     c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5     c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5     c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3     c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1     C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4     c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7     S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55     c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8     l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/>
+			<path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4     c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1     c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9     c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3     c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3     c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29     c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8     C343.2,346.5,335,363.3,326.8,380.1z"/>
+		</g>
+	</g>
+</g>
+</svg>