diff --git a/package.json b/package.json index 5c58dbe..7805186 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@angular/platform-browser": "^11.0.0", "@angular/platform-browser-dynamic": "^11.0.0", "@angular/router": "^11.0.0", + "@fontsource/fira-code": "^4.5.0", "@fortawesome/angular-fontawesome": "0.8", "@fortawesome/fontawesome-free": "^5.7.2", "@fortawesome/fontawesome-svg-core": "^1.2.35", diff --git a/src/assets/meta-preview.png b/src/assets/meta-preview.png new file mode 100644 index 0000000..ab54a3a Binary files /dev/null and b/src/assets/meta-preview.png differ diff --git a/src/components/home.component.pug b/src/components/home.component.pug index 5976138..05c7d6a 100644 --- a/src/components/home.component.pug +++ b/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 diff --git a/src/components/home.component.scss b/src/components/home.component.scss index aca4903..33717a4 100644 --- a/src/components/home.component.scss +++ b/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 { diff --git a/src/components/home.component.ts b/src/components/home.component.ts index cb79b3f..d26f27c 100644 --- a/src/components/home.component.ts +++ b/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' } diff --git a/src/components/main.component.ts b/src/components/main.component.ts index 58bdbd8..98d1340 100644 --- a/src/components/main.component.ts +++ b/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) } diff --git a/src/index.html b/src/index.html index f6e2534..0adc802 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,21 @@ -