wip

src/components/home.component.pug

@@ -23,7 +23,7 @@
 
 .bottom-half
     .container
-        .d-flex.m-auto
+        .d-flex.m-auto.mb-5
             a.btn.btn-lg.btn-primary.ms-auto.me-3([href]='releaseURL', target='_blank')
                 fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
                 span Latest release
@@ -48,9 +48,9 @@
     .section.section-a
         .container
             .row
-                .col
+                .col-12.col-xl-4
                     img.screenshot([src]='screenshots.window')
-                .col
+                .col-12.col-xl-8
                     h1 The important stuff
                     ul
                         li Runs on #[strong Windows, Mac and Linux]
@@ -68,7 +68,7 @@
     .section.section-b
         .container
             .row
-                .col
+                .col-12.col-xl-8
                     h1 Terminal features
                     ul
                         li Multiple #[strong nested panes]
@@ -78,15 +78,15 @@
                         li Optional #[strong quake mode] (terminal docked to a side of the screen)
                         li Optional #[strong global hotkey] to focus/hide the terminal
                         li Bracketed paste
-                .col
+                .col-12.col-xl-4
                     img.screenshot([src]='screenshots.tabs')
 
     .section.section-a
         .container
             .row
-                .col
+                .col-12.col-xl-4
                     img.screenshot([src]='screenshots.ssh')
-                .col
+                .col-12.col-xl-8
                     h1 SSH Client
                     ul
                         li SSH2 client with a connection manager
@@ -101,7 +101,7 @@
     .section.section-b
         .container
             .row
-                .col
+                .col-12.col-xl-8
                     h1 Windows, but nice
                     ul
                         li Support for #[strong different shells] in the same window
@@ -109,15 +109,15 @@
                         li Explorer menu integration
                         li Optional #[strong portable mode]
                         li Current directory detection that works
-                .col
+                .col-12.col-xl-4
                     img.screenshot([src]='screenshots.win')
 
     .section.section-a
         .container
             .row
-                .col
+                .col-12.col-xl-4
                     img.screenshot([src]='screenshots.serial')
-                .col
+                .col-12.col-xl-8
                     h1 Serial Terminal
                     ul
                         li Multiple #[strong connection profiles]
@@ -134,6 +134,7 @@
                 li Themes #[strong customizable with CSS]
                 li Extensible via #[strong plugins] (in JS)
                 li A bunch of color schemes already included
+                li Telnet client
                 li #[strong Font ligatures] and font fallback
                 li #[strong Clickable URLs], IPs and paths
                 li #[strong WinSCP] integration

src/components/home.component.scss

@@ -1,11 +1,21 @@
 @import "../theme/vars.scss";
+@import "~@fontsource/fira-code/latin.css";
 
 :host {
     font-size: 20px;
+    font-family: 'Fira Code', monospace;
+
+    button, a, .quote {
+        font-family: $font-family-sans-serif;
+    }
 }
 
 .top-half {
     background: linear-gradient(#0c141c, #15202b);
+
+    h1 {
+        font-size: 80px;
+    }
 }
 
 .navbar {
@@ -26,6 +36,7 @@ h1 {
     font-weight: bold;
     font-size: 48px;
     text-shadow: 0 0 1px black;
+    margin: 0 0 25px;
 }
 
 .intro {
@@ -38,15 +49,16 @@ iframe {
     margin: auto;
     position: relative;
     top: 20vw;
-    margin-top: -18vw;
+    margin-top: -16vw;
 
-    width: 60vw;
-    height: 42vw;
+    width: calc(min(max(480px, 60vw), 100vw));
+    height: calc(max(460px, 42vw));
     overflow: hidden;
     border-radius: 5px;
     box-shadow: 0 0 2px black, 0 0 50px #6ef2ff05, 0 0 150px #6854ff14;
 }
 
+
 .bottom-half {
     padding-top: 24vw;
 }
@@ -69,13 +81,17 @@ iframe {
             font-size: 14px;
         }
     }
+
+    @media (max-width: 600px) {
+        & { display: none;}
+    }
 }
 
 strong {
-    background: #9400ff57;
+    background: #849dff;
     font-weight: normal;
     padding: 2px 7px;
-    text-shadow: 0 0 2px black;
+    color: black;
 }
 
 .section {

src/components/home.component.ts

@@ -1,4 +1,4 @@
-import * as semverGT from 'semver/functions/gt'
+import * as semverCompare from 'semver/functions/compare-loose'
 import { HttpClient } from '@angular/common/http'
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { InstanceInfo, Version } from '../api'
@@ -86,7 +86,7 @@ export class HomeComponent {
 
     async ngAfterViewInit () {
         const versions = await this.http.get('/api/1/versions').toPromise()
-        versions.sort((a, b) => semverGT(a.version, b.version))
+        versions.sort((a, b) => -semverCompare(a.version, b.version))
         this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, versions[0])
         this.iframe.nativeElement.src = '/terminal'
     }

src/components/main.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
+import { Title } from '@angular/platform-browser'
 import { AppConnectorService } from '../services/appConnector.service'
 
 import { faCog, faFile, faPlus, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
@@ -29,6 +30,7 @@ export class MainComponent {
     @ViewChild('iframe') iframe: ElementRef
 
     constructor (
+        titleService: Title,
         public appConnector: AppConnectorService,
         private http: HttpClient,
         public loginService: LoginService,
@@ -36,6 +38,7 @@ export class MainComponent {
         private config: ConfigService,
         private router: Router,
     ) {
+        titleService.setTitle('Tabby')
         window.addEventListener('message', this.connectorRequestHandler)
     }