diff --git a/package.json b/package.json index a9f1c54..f116cb0 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "watch:sass": "sass --watch src/scss:src/css", - "build:sass": "sass src/css:src/css", + "build:sass": "sass src/scss:src/css", "watch:eleventy": "eleventy --serve", "build:eleventy": "eleventy", "start": "npm-run-all build:sass --parallel watch:*", diff --git a/src/_includes/base.njk b/src/_includes/base.njk index 79aa453..af125e0 100644 --- a/src/_includes/base.njk +++ b/src/_includes/base.njk @@ -6,7 +6,7 @@ {% if title %}{{ title }} | {% endif %}{{ meta.siteName }} - + {% if layout != "landing.njk" %}{% else %}{% endif %} {{ content | safe }} diff --git a/src/_includes/landing.njk b/src/_includes/landing.njk index 93fc422..cdebf85 100644 --- a/src/_includes/landing.njk +++ b/src/_includes/landing.njk @@ -1,8 +1,30 @@ ---- -layout: base.njk ---- -{% include "header.njk" %} -
- {{ content | safe }} -
-{% include "footer.njk" %} \ No newline at end of file + + + + + + + {% if title %}{{ title }} | {% endif %}{{ meta.siteName }} + + + + + +
+
{{ content | safe }}
+ + Enter site + +
+ + diff --git a/src/_includes/landing/button.njk b/src/_includes/landing/button.njk new file mode 100644 index 0000000..e69de29 diff --git a/src/css/global.css b/src/css/global.css index b32b27a..9bed408 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -85,7 +85,7 @@ html { } body { - background-color: rgb(64, 62, 60); + background-color: #141013; color: rgb(255, 252, 240); } @@ -95,9 +95,6 @@ body { main, article { - padding: 1em; - color: #802659; - box-shadow: 0 8px rgb(52, 51, 49); font-size: 1rem; } main.page, @@ -106,16 +103,9 @@ article.page { border-image: url(../img/nine-patch.png) 32 round; -webkit-border-image: url(../img/nine-patch.png) 32 round; background-color: rgb(255, 252, 240); -} -main.cover, -article.cover { - border-color: black; - border-style: solid; - border-width: 64px; - border-image: url(../img/book-border.png) 32 repeat; - -webkit-border-image: url(../img/book-border.png) 32 repeat; - background-color: #793a80; - image-rendering: pixelated; + color: #802659; + box-shadow: 0 8px rgb(52, 51, 49); + padding: 1em; } @media screen and (min-width: 600px) { main, diff --git a/src/css/global.css.map b/src/css/global.css.map index e846048..94cd371 100644 --- a/src/css/global.css.map +++ b/src/css/global.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/global.scss","../scss/_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACpDF;;AAAA;AAAA;;AAAA;AASA;;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OAvBG;EAwBH;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AChDF;ED2BF;AAAA;IAyBI;IACA;IACA;IACA;;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AC3EF;EDqEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAQI;;;AAIJ;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AC/IA;EDqIF;IAYI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA","file":"global.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/global.scss","../scss/_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACpDF;;AAAA;AAAA;;AAAA;AASA;;AAAA;AAAA;;AAAA;AAYA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA,OA7BC;EA8BD;EACA;;ACrCF;ED0BF;AAAA;IAeI;IACA;IACA;IACA;;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AChEF;ED0DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IAQI;;;AAIJ;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACpIA;ED0HF;IAYI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA","file":"global.css"} \ No newline at end of file diff --git a/src/css/landing.css b/src/css/landing.css new file mode 100644 index 0000000..b01194a --- /dev/null +++ b/src/css/landing.css @@ -0,0 +1,167 @@ +/* +Flexoki (https://stephango.com/flexoki) +MIT License + +Copyright (c) 2023 Steph Ango + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ +/* + +FONT: LINUX LIBERTINE +=============================================================================== +License: GPL and OFL 1.1 + +For license text, see: +- https://gils.nexus/font/GPL.txt +- https://gils.nexus/font/OFL-1.1.txt + +*/ +@font-face { + font-family: "Linux Libertine"; + font-style: normal; + src: local("Linux Libertine"), url("../font/LinLibertine_Rah.ttf"); +} +@font-face { + font-family: "Linux Libertine"; + font-style: normal; + font-weight: 600; + src: local("Linux Libertine Semibold"), url("../font/LinLibertine_RZah.ttf"); +} +@font-face { + font-family: "Linux Libertine"; + font-style: normal; + font-weight: 700; + src: local("Linux Libertine Bold"), url("../font/LinLibertine_RBah.ttf"); +} +@font-face { + font-family: "Linux Libertine"; + font-style: italic; + src: local("Linux Libertine Italic"), url("../font/LinLibertine_RIah.ttf"); +} +@font-face { + font-family: "Linux Libertine"; + font-style: italic; + font-weight: 600; + src: local("Linux Libertine Semibold Italic"), url("../font/LinLibertine_RZIah.ttf"); +} +@font-face { + font-family: "Linux Libertine"; + font-style: italic; + font-weight: 700; + src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf"); +} +/* + +VARIABLES +=============================================================================== + +*/ +/* + +COLORS +=============================================================================== + +*/ +:root { + font-size: 14pt; + font-family: "Linux Libertine", "Times New Roman", Times, serif; + line-height: 1.25; +} + +body { + background-color: #141013; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; +} +@media screen and (min-width: 600px) { + body { + flex-direction: row; + } +} + +main article { + width: 100%; + max-width: 500px; + height: auto; + max-height: 500px; + overflow: scroll; + padding: 10px; + border: solid white; + color: white; + font-size: 1rem; +} +main article blockquote { + background: #30272e; + border-bottom: solid white; + padding: 10px; + font-size: 1.25em; +} +main article blockquote h1 { + margin-top: 10px; + font-weight: bold; +} +main article blockquote h1::after { + content: ""; + margin-left: 10px; + width: 10px; + height: 24px; + background: white; + display: inline-block; + vertical-align: bottom; + animation: cursor-blink 1.5s steps(1) infinite; +} +@keyframes cursor-blink { + 0% { + background: transparent; + } + 50% { + background: white; + } +} +main article :first-child { + margin-top: 0; +} +main article p { + margin-top: 10px; +} +main article ol, +main article ul { + all: revert; + margin-bottom: 0; + padding-left: 1em; +} +main img { + display: block; + margin: auto; + margin-top: 10px; + image-rendering: pixelated; +} + +aside { + max-width: 216px; + image-rendering: pixelated; +} + +/*# sourceMappingURL=landing.css.map */ diff --git a/src/css/landing.css.map b/src/css/landing.css.map new file mode 100644 index 0000000..dd3b600 --- /dev/null +++ b/src/css/landing.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACpDF;;AAAA;AAAA;;AAAA;AAYA;;AAAA;AAAA;;AAAA;AAYA;EAEI;EACA;EAEF;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,KAlCO;;ACGP;EDuBF;IAUI;;;;AAKF;EACE;EACA,WAzCQ;EA0CR;EACA,YA3CQ;EA4CR;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA,SAzDG;EA0DH;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EASA;;AARA;EACE;IACE;;EAEF;IACE;;;AAOR;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AAIJ;EACE;EACA;EACA,YAxGK;EAyGL;;;AAIJ;EACE,WA1Ga;EA2Gb","file":"landing.css"} \ No newline at end of file diff --git a/src/css/reset.css b/src/css/reset.css index 1376d14..fe01ec6 100644 --- a/src/css/reset.css +++ b/src/css/reset.css @@ -287,3 +287,7 @@ img { display: block; max-inline-size: 100%; } + +blockquote { + margin: 0; +} \ No newline at end of file diff --git a/src/font/alkhemikal.ttf b/src/font/alkhemikal.ttf new file mode 100644 index 0000000..3919a81 Binary files /dev/null and b/src/font/alkhemikal.ttf differ diff --git a/src/font/font.json b/src/font/font.json new file mode 100644 index 0000000..15680bc --- /dev/null +++ b/src/font/font.json @@ -0,0 +1,3 @@ +{ + "eleventyExcludeFromCollections": true +} \ No newline at end of file diff --git a/src/img/img.json b/src/img/img.json new file mode 100644 index 0000000..15680bc --- /dev/null +++ b/src/img/img.json @@ -0,0 +1,3 @@ +{ + "eleventyExcludeFromCollections": true +} \ No newline at end of file diff --git a/src/img/landing-button.png b/src/img/landing-button.png new file mode 100644 index 0000000..61216f5 Binary files /dev/null and b/src/img/landing-button.png differ diff --git a/src/img/padayon.png b/src/img/padayon.png new file mode 100644 index 0000000..1b77f6f Binary files /dev/null and b/src/img/padayon.png differ diff --git a/src/index.md b/src/index.md index c39e3c4..5fcbe84 100644 --- a/src/index.md +++ b/src/index.md @@ -2,3 +2,14 @@ layout: landing.njk date: Last Modified --- + +> You've arrived at the edge of a clearing. +> +> The air is thick with an energy, which seemingly converges on at this place. +> +> # Continue? (Y/N) + +My name is Gil (he/they), and I'm a software/game developer and writer. You can find me online at: + +* Microblog: [hol.ogra.ph/@gil](https://hol.ogra.ph/@gil) +* Code: [ide.ogra.ph/gil](https://ide.ogra.ph/gil) diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss index 8fe81e6..247d4f4 100644 --- a/src/scss/_colors.scss +++ b/src/scss/_colors.scss @@ -52,4 +52,6 @@ $blue-600: rgb(32, 94, 166); $purple-400: rgb(139, 126, 200); $purple-600: rgb(94, 64, 157); $magenta-400: rgb(206, 93, 151); -$magenta-600: rgb(160, 47, 111); \ No newline at end of file +$magenta-600: rgb(160, 47, 111); + +$bg: #141013; \ No newline at end of file diff --git a/src/scss/global.scss b/src/scss/global.scss index e23aed8..868a3cb 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -17,7 +17,6 @@ COLORS =============================================================================== */ -$bg: colors.$base-800; $fg: scale-color(colors.$magenta-600, $lightness: -20%); $fg-logo: colors.$magenta-600; $link: colors.$green-600; @@ -30,7 +29,7 @@ html { } body { - background-color: #{colors.$base-800}; + background-color: #{colors.$bg}; color: #{colors.$paper}; } @@ -40,9 +39,6 @@ body { main, article { - padding: 1em; - color: $fg; - box-shadow: 0 8px #{colors.$base-850}; font-size: 1rem; &.page { @@ -50,16 +46,9 @@ article { border-image: url(../img/nine-patch.png) 32 round; -webkit-border-image: url(../img/nine-patch.png) 32 round; background-color: #{colors.$paper}; - } - - &.cover { - border-color: black; - border-style: solid; - border-width: 64px; - border-image: url(../img/book-border.png) 32 repeat; - -webkit-border-image: url(../img/book-border.png) 32 repeat; - background-color: #793a80; - image-rendering: pixelated; + color: $fg; + box-shadow: 0 8px #{colors.$base-850}; + padding: 1em; } @include breakpoint("sm") { diff --git a/src/scss/landing.scss b/src/scss/landing.scss new file mode 100644 index 0000000..7b8fe35 --- /dev/null +++ b/src/scss/landing.scss @@ -0,0 +1,123 @@ +@use "colors"; +@use "fonts"; +@use "mixins" as *; + +/* + +VARIABLES +=============================================================================== + +*/ +$gutter: 10px; +$padding: $gutter; +$max-width: 500px; +$max-height: $max-width; +$avatar-width: 216px; + +/* + +COLORS +=============================================================================== + +*/ +$fg: white; +$fg-logo: colors.$magenta-600; +$link: colors.$green-600; +$bg-hover: scale-color(colors.$green-400, $alpha: -75%); +$bg-highlight: scale-color(colors.$magenta-600, $alpha: -75%); + +:root { + font: { + size: 14pt; + family: "Linux Libertine", "Times New Roman", Times, serif; + } + line-height: 1.25; +} + +body { + background-color: #{colors.$bg}; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: $gutter; + @include breakpoint("sm") { + flex-direction: row; + } +} + +main { + article { + width: 100%; + max-width: $max-width; + height: auto; + max-height: $max-height; + overflow: scroll; + padding: #{$padding}; + + border: solid #{$fg}; + color: #{$fg}; + + font-size: 1rem; + + blockquote { + background: lighten(colors.$bg, $amount: 10%); + border-bottom: solid white; + padding: $gutter; + font-size: 1.25em; + + h1 { + margin-top: #{$gutter}; + font-weight: bold; + } + + h1::after { + content: ""; + margin-left: #{$gutter}; + width: 10px; + height: 24px; + background: #{$fg}; + display: inline-block; + vertical-align: bottom; + @keyframes cursor-blink { + 0% { + background: transparent; + } + 50% { + background: #{$fg}; + } + } + animation: cursor-blink 1.5s steps(1) infinite; + } + } + + :first-child { + margin-top: 0; + } + + p { + margin-top: #{$gutter}; + } + + ol, + ul { + all: revert; + margin-bottom: 0; + padding-left: 1em; + } + } + + img { + display: block; + margin: auto; + margin-top: $gutter; + image-rendering: pixelated; + } +} + +aside { + max-width: $avatar-width; + image-rendering: pixelated; +} diff --git a/src/scss/scss.json b/src/scss/scss.json new file mode 100644 index 0000000..15680bc --- /dev/null +++ b/src/scss/scss.json @@ -0,0 +1,3 @@ +{ + "eleventyExcludeFromCollections": true +} \ No newline at end of file