diff --git a/src/scss/elements/footer.scss b/src/scss/elements/footer.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scss/elements/header.scss b/src/scss/elements/header.scss new file mode 100644 index 0000000..963f916 --- /dev/null +++ b/src/scss/elements/header.scss @@ -0,0 +1,10 @@ +@mixin styling { + display: flex; + justify-content: space-between; + width: 100vw; + height: variables.$header-Y; + background-color: rgb(10,10,10); + + p { margin-left: 10px; } + section { height: 100%; } +} \ No newline at end of file diff --git a/src/scss/elements/main.scss b/src/scss/elements/main.scss new file mode 100644 index 0000000..9edcbcd --- /dev/null +++ b/src/scss/elements/main.scss @@ -0,0 +1,24 @@ +@use "./terminal"; + +@mixin input { + font-size: 1.2rem; + background-color: transparent; + border: 0; + outline: 0; + width: 90%; + /* Pester me when this gets undrafted */ + caret-shape: block; + + &:disabled { color: white } +} + +@mixin styling { + @include terminal.formatting; + + width: 100vw; + height: calc(99.3vh - $header-Y - $footer-Y); + padding: 5px; + overflow-y: auto; + + input { @include input; } +} \ No newline at end of file diff --git a/src/scss/terminal.scss b/src/scss/elements/terminal.scss similarity index 92% rename from src/scss/terminal.scss rename to src/scss/elements/terminal.scss index db0ddb9..57d917e 100644 --- a/src/scss/terminal.scss +++ b/src/scss/elements/terminal.scss @@ -17,11 +17,14 @@ } } -@mixin formatting { - @include stdout-layouts; - +@mixin term-elements { .return { margin-top: 25px; } .shell-prompt { display: flex; } +} + +@mixin formatting { + @include stdout-layouts; + @include term-elements; p { @include color-matrix; diff --git a/src/scss/fonts.scss b/src/scss/font.scss similarity index 67% rename from src/scss/fonts.scss rename to src/scss/font.scss index b17287e..1900afa 100644 --- a/src/scss/fonts.scss +++ b/src/scss/font.scss @@ -1,8 +1,10 @@ @font-face { - font-display: swap; - font-family: 'Terminus'; - font-style: normal; - font-weight: 500; + font: { + family: 'Terminus'; + display: swap; + style: normal; + weight: 500; + }; src: url('/Terminus.woff2') format('woff2'); } diff --git a/src/scss/global.scss b/src/scss/global.scss new file mode 100644 index 0000000..cd4cfb6 --- /dev/null +++ b/src/scss/global.scss @@ -0,0 +1,44 @@ +@forward "./font.scss"; + +@use "./elements/header.scss"; +@use "./elements/main.scss"; +@use "./elements/footer.scss"; + +$header-Y: 30px; +$footer-Y: 30px; +$component-padding: 20px; + +:root { + color-scheme: dark; + + --body-background-color: rgb(0,0,0); + --hf-button-hover-color: rgb(255,255,255); +} +::selection { + background-color: rgb(255,255,255); + color: rgb(0,0,0); +} +::spelling-error { + text-decoration: none +} + +body { + box-sizing: border-box; + margin: 0; + overflow: hidden; + background-color: var(--body-background-color); +} +button { + background-color: transparent; + border: 0; +} +a { + color: white; + cursor: unset; + + &:hover, &:active, &:link { text-decoration: none; } +} + +header { @include header.styling; } +main { @include main.styling; } +footer { @include footer.styling; } \ No newline at end of file diff --git a/src/scss/variables.scss b/src/scss/variables.scss deleted file mode 100644 index 90e5f50..0000000 --- a/src/scss/variables.scss +++ /dev/null @@ -1,3 +0,0 @@ -$header-Y: 30px; -$footer-Y: 30px; -$component-padding: 20px; \ No newline at end of file