diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5df1b9b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.sass-cache diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..25f2a76 --- /dev/null +++ b/css/main.css @@ -0,0 +1,92 @@ +body, html { + background-color: #1f1f1f; + font-family: helvetica, sans-serif; + width: 100%; + height: 100%; + margin: 0; + padding: 0; } + +@media (max-width: 800px) { + .cont { + display: block !important; + width: 100%; } + .cont .teacup { + height: auto !important; } + .cont .teacup img { + margin-right: 20%; + width: 40% !important; + height: auto !important; + padding-top: 1em; + padding-bottom: 1em; } + .cont .stuffarea { + margin-left: 10%; + padding-right: 0 !important; + width: 80% !important; } + .cont .stuffarea ul.navbar { + padding: 0 !important; + padding-left: 0.5em !important; } } +.cont { + display: inline-flex; + flex-direction: row; + width: 100%; + height: 100%; } + .cont .teacup { + flex: auto; + height: 100%; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + background-color: #1b1b1b; } + .cont .teacup img { + width: 75%; + max-height: 100%; + height: auto; } + .cont .stuffarea { + width: 45%; + height: 100%; + padding-left: 5%; + padding-right: 5%; } + .cont .stuffarea .hiddenarea { + visibility: hidden; + height: 0; + width: 0; + overflow: hidden; + margin: 0; + padding: 0; } + .cont .stuffarea div { + margin: 0; + padding: 0; } + .cont .stuffarea h1 { + margin: 0; + color: #ff0091; } + .cont .stuffarea p { + color: #fff; } + .cont .stuffarea ul.navbar { + padding-left: 1em; + list-style: none; + white-space: nowrap; + padding-bottom: 1em; } + .cont .stuffarea ul.navbar a:focus { + outline: none; + font-style: none; + border: none; } + .cont .stuffarea ul.navbar li { + display: inline-block; + padding: 0.5em; + background-color: #1f1f1f; + margin: -3px; + transition: 0.2s; + color: #dddddd; + border-right: 2px solid #303030; + transform: skewX(-20deg); } + .cont .stuffarea ul.navbar li .button { + transform: skewX(20deg); } + .cont .stuffarea ul.navbar li:first-of-type { + border-left: 2px solid #303030; } + .cont .stuffarea ul.navbar li:hover { + background-color: #303030; + transition: 0.2s; + cursor: pointer; } + +/*# sourceMappingURL=main.css.map */ diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..bc76437 --- /dev/null +++ b/css/main.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAIA,UAAW;EACR,gBAAgB,EAHZ,OAAO;EAIX,WAAW,EAAE,qBAAqB;EAClC,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAGb,yBAA0B;EACvB,KAAM;IACH,OAAO,EAAE,gBAAgB;IACzB,KAAK,EAAE,IAAI;IAEX,aAAQ;MACL,MAAM,EAAE,eAAe;MAEvB,iBAAI;QACD,YAAY,EAAE,GAAG;QACjB,KAAK,EAAE,cAAc;QACrB,MAAM,EAAE,eAAe;QACvB,WAAW,EAAE,GAAG;QAChB,cAAc,EAAE,GAAG;IAIzB,gBAAW;MACR,WAAW,EAAE,GAAG;MAChB,aAAa,EAAE,YAAY;MAC3B,KAAK,EAAE,cAAc;MAErB,0BAAU;QACP,OAAO,EAAE,YAAY;QACrB,YAAY,EAAE,gBAAgB;AAM1C,KAAM;EACH,OAAO,EAAE,WAAW;EACpB,cAAc,EAAE,GAAG;EACnB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EAEZ,aAAQ;IACL,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,OAAO,EAAC,IAAI;IACZ,eAAe,EAAC,MAAM;IACtB,WAAW,EAAC,MAAM;IAClB,gBAAgB,EAAE,OAAe;IAEjC,iBAAI;MACD,KAAK,EAAE,GAAG;MACV,UAAU,EAAE,IAAI;MAChB,MAAM,EAAE,IAAI;EAKlB,gBAAW;IACR,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,IAAI;IACZ,YAAY,EAAE,EAAE;IAChB,aAAa,EAAE,EAAE;IAEjB,4BAAY;MACT,UAAU,EAAE,MAAM;MAClB,MAAM,EAAE,CAAC;MACT,KAAK,EAAE,CAAC;MACR,QAAQ,EAAE,MAAM;MAChB,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC;IAGb,oBAAI;MACD,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC;IAIb,mBAAG;MACA,MAAM,EAAE,CAAC;MACT,KAAK,EAzFP,OAAO;IA4FR,kBAAE;MACC,KAAK,EA5FJ,IAAI;IA+FR,0BAAU;MAEP,YAAY,EAAE,GAAG;MACjB,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,MAAM;MACnB,cAAc,EAAE,GAAG;MAEnB,kCAAQ;QACL,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;QAChB,MAAM,EAAE,IAAI;MAGf,6BAAG;QACA,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,KAAK;QACd,gBAAgB,EA9GrB,OAAO;QA+GF,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,IAAI;QAChB,KAAK,EAAE,OAAe;QACtB,YAAY,EAAE,iBAAsB;QACpC,SAAS,EAAE,aAAa;QAExB,qCAAQ;UACL,SAAS,EAAE,YAAY;MAG7B,2CAAiB;QACd,WAAW,EAAE,iBAAsB;MAEtC,mCAAS;QACN,gBAAgB,EAAE,OAAY;QAC9B,UAAU,EAAE,IAAI;QAChB,MAAM,EAAE,OAAO", +"sources": ["../scss/main.scss"], +"names": [], +"file": "main.css" +} \ No newline at end of file diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000..e263d2b Binary files /dev/null and b/img/favicon.png differ diff --git a/img/teascade.svg b/img/teascade.svg new file mode 100644 index 0000000..4b5a368 --- /dev/null +++ b/img/teascade.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/teascade_cropped.svg b/img/teascade_cropped.svg new file mode 100644 index 0000000..17a45c5 --- /dev/null +++ b/img/teascade_cropped.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index c4523ee..8b6d66b 100644 --- a/index.html +++ b/index.html @@ -1 +1,34 @@ - Hello! + + + + + + +
+
+ +
+ +
+ +
+

Teascade

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis.

+
+
+

Games

+

Games shall be listed here!

+
+
+

Blog

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat hendrerit placerat. Aliquam a dictum arcu, id iaculis metus. Phasellus aliquet suscipit ipsum, ut sollicitudin metus ultrices posuere. Quisque ut leo urna. Aenean ut justo rhoncus, sodales felis ut, ultricies mauris. Nam sed porttitor dui. Aliquam dui lectus, condimentum ac libero non, maximus imperdiet ipsum. Vivamus vehicula nulla arcu, in cursus metus molestie sed. Cras vitae leo libero. Donec in mauris vel mi tincidunt interdum. Aenean pulvinar dolor et libero volutpat varius. Vivamus id ex ut dolor lacinia volutpat a et lectus. Praesent sagittis luctus imperdiet. In mollis ante hendrerit nisl condimentum, vel varius nulla cursus. Nullam iaculis ut erat vitae mattis.

+

Some other contact info and useless garbage about me.

+
+
+
+ + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..c8e0ff4 --- /dev/null +++ b/js/main.js @@ -0,0 +1,35 @@ +function main(page) { + window.currPage = page; + window.currOpacity = 1; + document.getElementById("about-link").attributes.removeNamedItem("href"); + document.getElementById("games-link").attributes.removeNamedItem("href"); + document.getElementById("blog-link").attributes.removeNamedItem("href"); + document.getElementById("about-link").onclick = function () { return openPage("about"); }; + document.getElementById("games-link").onclick = function () { return openPage("games"); }; + document.getElementById("blog-link").onclick = function () { return openPage("blog"); }; +} +function openPage(page) { + if (page == window.currPage) { + return; + } + slideOpacity(function () { + document.getElementById(window.currPage).className = "hiddenarea"; + window.currPage = page; + document.getElementById(page).style.opacity = "0"; + document.getElementById(page).className = ""; + window.history.pushState(page, page, "/" + page + "/"); + slideOpacity(function () { + }, 1.5); + }, -1.5); +} +function slideOpacity(callback, step) { + var currElem = document.getElementById(window.currPage); + var id = setInterval(function () { + window.currOpacity += 0.02 * step; + currElem.style.opacity = "" + window.currOpacity; + if ((window.currOpacity <= 0 && step < 0) || (window.currOpacity >= 1 && step > 0)) { + clearInterval(id); + callback(); + } + }, 2); +} diff --git a/scss/main.scss b/scss/main.scss new file mode 100644 index 0000000..6416882 --- /dev/null +++ b/scss/main.scss @@ -0,0 +1,134 @@ +$pink: #ff0091; +$regular: #fff; +$dark: #1f1f1f; + +body, html { + background-color: $dark; + font-family: helvetica, sans-serif; + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +@media (max-width: 800px) { + .cont { + display: block !important; + width: 100%; + + .teacup { + height: auto !important; + + img { + margin-right: 20%; + width: 40% !important; + height: auto !important; + padding-top: 1em; + padding-bottom: 1em; + } + } + + .stuffarea { + margin-left: 10%; + padding-right: 0 !important; + width: 80% !important; + + ul.navbar { + padding: 0 !important; + padding-left: 0.5em !important; + } + } + } +} + +.cont { + display: inline-flex; + flex-direction: row; + width: 100%; + height: 100%; + + .teacup { + flex: auto; + height: 100%; + text-align: center; + display:flex; + justify-content:center; + align-items:center; + background-color: $dark - #040404; + + img { + width: 75%; + max-height: 100%; + height: auto; + } + + } + + .stuffarea { + width: 45%; + height: 100%; + padding-left: 5%; + padding-right: 5%; + + .hiddenarea { + visibility: hidden; + height: 0; + width: 0; + overflow: hidden; + margin: 0; + padding: 0; + } + + div { + margin: 0; + padding: 0; + } + + + h1 { + margin: 0; + color: $pink; + } + + p { + color: $regular; + } + + ul.navbar { + + padding-left: 1em; + list-style: none; + white-space: nowrap; + padding-bottom: 1em; + + a:focus { + outline: none; + font-style: none; + border: none; + } + + li { + display: inline-block; + padding: 0.5em; + background-color: $dark; + margin: -3px; + transition: 0.2s; + color: $regular - #222; + border-right: 2px solid $dark + #111; + transform: skewX(-20deg); + + .button { + transform: skewX(20deg); + } + } + li:first-of-type { + border-left: 2px solid $dark + #111; + } + li:hover { + background-color: $dark + #111; + transition: 0.2s; + cursor: pointer; + } + } + } +} diff --git a/ts/main.ts b/ts/main.ts new file mode 100644 index 0000000..ee5c08f --- /dev/null +++ b/ts/main.ts @@ -0,0 +1,46 @@ + +interface Window { + currPage: string; + currOpacity: number; +} + + +function main(page: string) { + window.currPage = page; + window.currOpacity = 1; + + document.getElementById("about-link").attributes.removeNamedItem("href"); + document.getElementById("games-link").attributes.removeNamedItem("href"); + document.getElementById("blog-link").attributes.removeNamedItem("href"); + + document.getElementById("about-link").onclick = () => openPage("about"); + document.getElementById("games-link").onclick = () => openPage("games"); + document.getElementById("blog-link").onclick = () => openPage("blog"); +} + +function openPage(page: string) { + if (page == window.currPage) { return; } + + slideOpacity(() => { + document.getElementById(window.currPage).className = "hiddenarea"; + window.currPage = page; + document.getElementById(page).style.opacity = "0"; + document.getElementById(page).className = ""; + window.history.pushState(page, page, `/${page}/`); + slideOpacity(() => { + + }, 1.5); + }, -1.5); +} + +function slideOpacity(callback: () => void, step: number) { + let currElem = document.getElementById(window.currPage); + let id = setInterval(() => { + window.currOpacity += 0.02 * step; + currElem.style.opacity = "" + window.currOpacity; + if ((window.currOpacity <= 0 && step < 0) || (window.currOpacity >= 1 && step > 0)) { + clearInterval(id); + callback(); + } + }, 2); +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..20ab379 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "rootDir": "ts", + "outDir": "js", + "module": "commonjs", + "target": "es5", + "noImplicitAny": false, + "sourceMap": false + }, + "exclude": [ + "node_modules" + ] +}