terminal prompt needs to be recyclable
This commit is contained in:
@ -1,64 +1,27 @@
|
||||
---
|
||||
import Webpage from '../layouts/Webpage.astro';
|
||||
import { Links } from '../ts/links';
|
||||
import Shell from '../components/react/shell';
|
||||
import Motd from '../components/terminal/motd.astro';
|
||||
import Terminal from '../components/react/terminal';
|
||||
---
|
||||
|
||||
<Webpage title="Home">
|
||||
<main>
|
||||
<p>Welcome to rhpidfyre.io!</p>
|
||||
<div class="return"></div>
|
||||
<p>This is a personal website by rhpidfyre / Brandon.</p>
|
||||
<p>You can find my services here or learn about me.</p>
|
||||
<div class="return"></div>
|
||||
<p>You can also contribute or view the source code of my website via the links:</p>
|
||||
<p>{"<"}<a href={Links.RepoGitea} target="_blank">{Links.RepoGitea}</a>{">."}</p>
|
||||
<p>{"<"}<a href={Links.RepoGithub} target="_blank">{Links.RepoGithub}</a>{">."}</p>
|
||||
<div class="return"></div>
|
||||
<p>You can get started with the command: help</p>
|
||||
<div class="return"></div>
|
||||
<noscript>
|
||||
<p><span class="red">=================================================</span></p>
|
||||
<p><span class="red">JavaScript is disabled, functionality will be limited. :(</span></p>
|
||||
<p><span class="red">But, you will not be limited at exploring my services which you can find by navigating towards the top-right.</span></p>
|
||||
<p><span class="red">=================================================</span></p>
|
||||
</noscript>
|
||||
<Shell client:only/>
|
||||
<Motd/>
|
||||
<Terminal client:only/>
|
||||
</main>
|
||||
</Webpage>
|
||||
|
||||
<style lang="scss" is:global>
|
||||
@use "../scss/variables";
|
||||
|
||||
@mixin text-styles {
|
||||
.red { color: rgb(200, 0, 0); }
|
||||
.green { color: rgb(0, 200, 0); }
|
||||
.blue { color: rgb(0, 0, 200); }
|
||||
.cyan { color: rgb(18,167,148); }
|
||||
}
|
||||
|
||||
.shell-prompt { display: flex; }
|
||||
@use "../scss/terminal";
|
||||
|
||||
main {
|
||||
@include terminal.formatting;
|
||||
|
||||
width: 100vw;
|
||||
height: calc(99.3vh - variables.$header-Y - variables.$footer-Y);
|
||||
padding: 5px;
|
||||
overflow-y: auto;
|
||||
|
||||
p {
|
||||
@include text-styles;
|
||||
font-size: 1.2rem;
|
||||
margin: 5px;
|
||||
|
||||
a {
|
||||
font-size: inherit;
|
||||
&:hover { text-decoration: underline; }
|
||||
}
|
||||
span { font-size: inherit }
|
||||
}
|
||||
.return {
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
input {
|
||||
font-size: 1.2rem;
|
||||
|
Reference in New Issue
Block a user