From a26de243da1a42ea9abc4953c1906cf558493883 Mon Sep 17 00:00:00 2001 From: altaf-creator Date: Thu, 4 Apr 2024 16:41:10 +0700 Subject: initial commit for personal git repo server --- .gitignore | 6 +- about/index.html | 179 ++-- academic/index.html | 0 blog/index.html | 142 +-- blog/post.html | 62 ++ blog/simpliCity/beta02/index.html | 274 +++--- blog/simpliCity/well-that-was-dumb/index.html | 386 ++++---- data/posts.json | 26 + data/posts/0.md | 2 + data/posts/1.md | 32 + index.html | 270 +++--- packages/markdown-it-container.mjs | 139 +++ projects/index.html | 236 ++--- projects/simpliCity/index.html | 222 ++--- projects/tank-shooter/index.html | 228 ++--- scripts/blog.js | 113 +++ scripts/onload.js | 35 +- scripts/scroll.js | 156 ++-- scripts/video.js | 32 +- style.css | 1176 +++++++++++++------------ 20 files changed, 2062 insertions(+), 1654 deletions(-) create mode 100644 academic/index.html create mode 100644 blog/post.html create mode 100644 data/posts.json create mode 100644 data/posts/0.md create mode 100644 data/posts/1.md create mode 100644 packages/markdown-it-container.mjs create mode 100644 scripts/blog.js diff --git a/.gitignore b/.gitignore index 50db685..0be2b3a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,3 @@ -temp -conf -logs +temp +conf +logs diff --git a/about/index.html b/about/index.html index 530b38b..ded10f1 100644 --- a/about/index.html +++ b/about/index.html @@ -1,94 +1,85 @@ - - - - - - - - - - About Me • altaf-creator - - - - - -

- About Me - Projects - (dev)Blog -

- -

- Student -
- Software Development -
- 🇮🇩 Indonesia -
- athaalaa@gmail.com -
- altaf-creator -
- altaf-creator -
- athaalaa.altaf9 -
-

- About Me
- Hey there! I'm Altaf. I am a middle school student from - Indonesia who likes to code as a hobby. I mostly make games and websites, but also likes to try - new things. -

- -

- Socials -
- - - - - -

- - - + + + + + + + + + + About Me • altaf-creator + + + + + +

+ About Me + Projects + (dev)Blog +

+ +

+ Student +
+ Software Development +
+ 🇮🇩 Indonesia +
+ athaalaa@gmail.com +
+ altaf-creator +
+ altaf-creator +
+ athaalaa.altaf9 +
+

+ About Me
+ Hey there! I'm Altaf. I am a middle school student from + Indonesia who likes to code as a hobby. I mostly make games and websites, but also likes to try + new things. +

+ +

+ Socials +
+ + + + + + +

+ + + diff --git a/academic/index.html b/academic/index.html new file mode 100644 index 0000000..e69de29 diff --git a/blog/index.html b/blog/index.html index 89ad846..51554e8 100644 --- a/blog/index.html +++ b/blog/index.html @@ -1,69 +1,73 @@ - - - - - - - - - - Blog • altaf-creator - - - - - -

- About Me - Projects - (dev)Blog -

- -

- Blog -

Devlog, simpliCity

- This Week's Devlog: Well that was dumb. (33nd Week of 2023) -

Wed, 16 August 2023

Devlog

- A new website! (again) -

Fri, 11 August 2023

simpliCity

- beta0.2: The Visual Update is Out! -

Wed, 26 July 2023

- -

- - - + + + + + + + + + + Blog • altaf-creator + + + + + + +

+ About Me + Projects + (dev)Blog +

+ +

+ Blog +

+ Devlog + simpliCity +

+ Well that was dumb. (33nd Week of 2023) +

Wed, 16 August 2023

Devlog

+ A new website! (again) +

Fri, 11 August 2023

simpliCity

+ beta0.2: The Visual Update is Out! +

Wed, 26 July 2023

+ +

+ + + diff --git a/blog/post.html b/blog/post.html new file mode 100644 index 0000000..b172f9f --- /dev/null +++ b/blog/post.html @@ -0,0 +1,62 @@ + + + + + + + + + + Blog / Loading... • altaf-creator + + + + + + + + + + +

+ About Me + Projects + (dev)Blog +

+ + +

+ +

Loading title...

+ Date
+ Written by author +

Hello, world!

i'm exhausted.

+ + + diff --git a/blog/simpliCity/beta02/index.html b/blog/simpliCity/beta02/index.html index c2a29a8..b9b348d 100644 --- a/blog/simpliCity/beta02/index.html +++ b/blog/simpliCity/beta02/index.html @@ -1,138 +1,138 @@ - - - - - - - - - - Blog / beta0.2: The Visual Update is Out! • altaf-creator - - - - - - - - -

- About Me - Projects - (dev)Blog -

- - -

- -

- simpliCity -

beta0.2: The Visual Update is Out!

- Wednesday, 26 July 2023
- Written by altaf-creator -

Introduction

Hello, friends! Today, I'm excited to announce that simpliCity beta0.2: The Visual Update is OUT NOW! - 🥳
This update contains a lot of content features, bugfixes, and improvements from the last - update.

Notable Additions

Starting from NEW buildings, there is now;

Factories
A soup restaurant
Restoran Padang
miniMart
Big Ben
Fountains
House remodel + new models
School remodel
Lamp remodel
Connected roads
Fences

- -

And then the new game ambience;

Better ambient lightning
Better skybox coloring
Clouds!
Better ambience
Window lights

- -

Last but certainly not least, big changes to UI!

a COMPLETE UI overhaul
Loading screen
UI Sounds
Hotbar organization

Changes & Bugfixes

Citizen arrival and depart rate modifications
Performance optimizations
Small improvements
Land expansions are now limited to 3x3
Useful tooltips
Better tooltip positioning
Fixed credit overlapping text

Closing

- And that's (probably) the end of the beta0.2 update. You can already update the game on steam right - now! I wanted to say thank you everyone for all of your support, suggestions, and help on building - simpliCity.

- Once again, thank you everyone for reading.
- This is Altaf.
- Stay safe, and see you in the next update on The Altaf (dev)Blog! -

- - Steam News Link: https://steamcommunity.com/games/2381230/announcements/detail/3680055105769610135 -

- - + + + + + + + + + + Blog / beta0.2: The Visual Update is Out! • altaf-creator + + + + + + + + +

+ About Me + Projects + (dev)Blog +

+ + +

+ +

+ simpliCity +

beta0.2: The Visual Update is Out!

+ Wednesday, 26 July 2023
+ Written by altaf-creator +

Introduction

Hello, friends! Today, I'm excited to announce that simpliCity beta0.2: The Visual Update is OUT NOW! + 🥳
This update contains a lot of content features, bugfixes, and improvements from the last + update.

Notable Additions

Starting from NEW buildings, there is now;

Factories
A soup restaurant
Restoran Padang
miniMart
Big Ben
Fountains
House remodel + new models
School remodel
Lamp remodel
Connected roads
Fences

+ +

And then the new game ambience;

Better ambient lightning
Better skybox coloring
Clouds!
Better ambience
Window lights

+ +

Last but certainly not least, big changes to UI!

a COMPLETE UI overhaul
Loading screen
UI Sounds
Hotbar organization

Changes & Bugfixes

Citizen arrival and depart rate modifications
Performance optimizations
Small improvements
Land expansions are now limited to 3x3
Useful tooltips
Better tooltip positioning
Fixed credit overlapping text

Closing

+ And that's (probably) the end of the beta0.2 update. You can already update the game on steam right + now! I wanted to say thank you everyone for all of your support, suggestions, and help on building + simpliCity.

+ Once again, thank you everyone for reading.
+ This is Altaf.
+ Stay safe, and see you in the next update on The Altaf (dev)Blog! +

+ + Steam News Link: https://steamcommunity.com/games/2381230/announcements/detail/3680055105769610135 +

+ + \ No newline at end of file diff --git a/blog/simpliCity/well-that-was-dumb/index.html b/blog/simpliCity/well-that-was-dumb/index.html index 8489006..4d33bf3 100644 --- a/blog/simpliCity/well-that-was-dumb/index.html +++ b/blog/simpliCity/well-that-was-dumb/index.html @@ -1,193 +1,193 @@ - - - - - - - - - - Blog / This Week's Devlog: Well that was dumb. (33nd Week of 2023) • altaf-creator - - - - - - - - -

- About Me - Projects - (dev)Blog -

- - -

- -

- Devlog, simpliCity -

This Week's Devlog: Well that was dumb. (33nd Week of 2023) -

- Wednesday, 16 August 2023
- Written by altaf-creator -

Opening

Hello, friends! Welcome back to the 5th.. or 6th.. (later editor note: it's 5th) weekly devlog! I - want to apologize for not posting weekly devlogs for the past few weeks. In this devlog, I would - like to tell you about my new projects and a stupid accident that I have did / occured.

New Projects

Usually after I published a new update for my games, I often take a break for a few days or weeks. I - also sometimes like to start a new side-project. And in this week, I have started some - side-projects. Some of them are;

This website update.
A new game. I have some different ideas for my new game, so I am currently deciding which game - should I make for this new project.

Now you may wonder, why did I create a new game? Well it was because...

The (dumb?) Accident

Long story short, I have accidentally teleported simpliCity project folder to a higher dimension that - no human could ever even begin to comperhend, aka deleted all the project files.
The long story - is...

- -

The Beginning

It was a normal day. I was thinking of backing up simpliCity using GitHub. Because currently, - simpliCity project folder doesn't have any more copies apart from my drive. A month before, I have - made a (local) Git repository in my drive. So uploading the simpliCity repo to GitHub should be - simple, right?

- -

The Problem

First, I made a new repo in GitHub, connect the git repo to the GitHub repo using git remote, - rename the master branch to main, and push it to GitHub using git push-

fatal: The push operation includes a file which exceeds GitHub's file size restriction of 100MB

..Alright then. Turns out I included the temporary, automatically-generated Unity project files and - folder. To fix this, I added the .gitignore template for Unity to tell Git to simply ignore the - files and folder, and upload it again-

fatal: The push operation includes a file which exceeds GitHub's file size restriction of 100MB

Still the same error. Turns out that I have to remove the history of the ignored file, alias I have - to make git forget about all of the temp files. And this is where I messed up.

After executing the command to do that, I accidentally removed the entire Git commit history. "That's - fine," I thought. So I executed another command to finish an operation, and I noticed something - weird in the files. -

The Assets folder, aka the most important folder in the project, is gone. I have no idea what - I did there, but the project was gone. I was panicking, spammed Ctrl + Z in VSCode and Windows - Explorer, checked the recycle bin, and tried to undo the previous git operation, and tried to fetch - the last commit. -
I forgot that the entire git commit history is gone. Git cannot help me. The project is also not - yet uploaded to GitHub, so the only current copy of the project is on my disk, and it's gone. -

I was confused, didn't know what just happened. So I tried downloading various data recovery tool, - because I know when a file is deleted, it's not entirely erased from the disk, just flagged as empty - and other programs can overwrite it. And it works! ..for just a few files. The Assets folder was - already overwritten with another data. I have tried many, many programs, and nothing works.
- Which means the Assets folder, is permanently deleted. I was sad, confused, and shocked (nah not - really, but kinda sad). I really did permanently delete almost a year worth of work, and the - worst part, I didn't know how and also can avoid it by being more careful.

- -

The Light at The End of The Tunnel?

I did mention that I did not have any more copies for the current simpliCity project file (which is - beta0.2.1), turns out that I actually have one old copy of beta0.1 (modified) project file. I - also have the latest beta0.2 build, and all of the assets.

So, what does that mean? Well it can mean that I can recover my project, but it needs more work. How - you may ask?

First, I will decompile my game to get all the new scripts from the latest build using ILSpy. -
Download the old copy, and open it in Unity.
Update all the scripts to the new one.
Update all of the old objects to the new one to adapt to the new scripts.
Update all of the old assets to the new assets in my OneDrive.
Finish it up and polish it. And it's done! It will not be an exact copy, but all of the new - features should still be recovered. And probably will be improved.

But this needs time. For now, I have decided to stop simpliCity development, and start a new - projects. Why? My gamedev journey is still long, and I cannot stick to the same projects for months - or years. I decided that this is the time for me to move on, and learn new things.

What does it mean for simpliCity?

This means that simpliCity development will be on hold for quite some time until I recovered the - project. This also means that I will make a new game! Yay! Finally!

What can we learn

What can we learn from my mistake?

Back up all of your projects and files. Do NOT have only 1 copy of your project. Have it on a - second drive, and also online services like Google Drive and OneDrive. Do this so if something - happens to the original, you still have a copy of it.
Back up regularly. If you have a back-up but it's old, that is still the same (but better) than - having no back-ups at all. Back up your project every week or at least month.
Be careful in things that you don't know. Especially file management and Git. Git is hard. And - annoying.
It's time to learn new things and move on. It is ok to make a big project and spend years on it, - but you should also try and making many side-projects and improve over time.

Closing

We have reached the end of this devlog. becase I feel I want to say sorry to everyone for - dissapointing you because of this mistake. I also want to say please learn from this mistake. Better - be safe than sorry! Also thank you, thank you everyone for staying with me in this journey. -

- And that's it for this week. Thank you so much everyone for reading.
- This is Altaf.
- Stay safe, and see you next week on The Altaf (dev)Blog! -

- - - + + + + + + + + + + Blog / This Week's Devlog: Well that was dumb. (33nd Week of 2023) • altaf-creator + + + + + + + + +

+ About Me + Projects + (dev)Blog +

+ + +

+ +

+ Devlog, simpliCity +

This Week's Devlog: Well that was dumb. (33nd Week of 2023) +

+ Wednesday, 16 August 2023
+ Written by altaf-creator +

Opening

Hello, friends! Welcome back to the 5th.. or 6th.. (later editor note: it's 5th) weekly devlog! I + want to apologize for not posting weekly devlogs for the past few weeks. In this devlog, I would + like to tell you about my new projects and a stupid accident that I have did / occured.

New Projects

Usually after I published a new update for my games, I often take a break for a few days or weeks. I + also sometimes like to start a new side-project. And in this week, I have started some + side-projects. Some of them are;

This website update.
A new game. I have some different ideas for my new game, so I am currently deciding which game + should I make for this new project.

Now you may wonder, why did I create a new game? Well it was because...

The (dumb?) Accident

Long story short, I have accidentally teleported simpliCity project folder to a higher dimension that + no human could ever even begin to comperhend, aka deleted all the project files.
The long story + is...

+ +

The Beginning

It was a normal day. I was thinking of backing up simpliCity using GitHub. Because currently, + simpliCity project folder doesn't have any more copies apart from my drive. A month before, I have + made a (local) Git repository in my drive. So uploading the simpliCity repo to GitHub should be + simple, right?

+ +

The Problem

First, I made a new repo in GitHub, connect the git repo to the GitHub repo using git remote, + rename the master branch to main, and push it to GitHub using git push-

fatal: The push operation includes a file which exceeds GitHub's file size restriction of 100MB

..Alright then. Turns out I included the temporary, automatically-generated Unity project files and + folder. To fix this, I added the .gitignore template for Unity to tell Git to simply ignore the + files and folder, and upload it again-

fatal: The push operation includes a file which exceeds GitHub's file size restriction of 100MB

Still the same error. Turns out that I have to remove the history of the ignored file, alias I have + to make git forget about all of the temp files. And this is where I messed up.

After executing the command to do that, I accidentally removed the entire Git commit history. "That's + fine," I thought. So I executed another command to finish an operation, and I noticed something + weird in the files. +

The Assets folder, aka the most important folder in the project, is gone. I have no idea what + I did there, but the project was gone. I was panicking, spammed Ctrl + Z in VSCode and Windows + Explorer, checked the recycle bin, and tried to undo the previous git operation, and tried to fetch + the last commit. +
I forgot that the entire git commit history is gone. Git cannot help me. The project is also not + yet uploaded to GitHub, so the only current copy of the project is on my disk, and it's gone. +

I was confused, didn't know what just happened. So I tried downloading various data recovery tool, + because I know when a file is deleted, it's not entirely erased from the disk, just flagged as empty + and other programs can overwrite it. And it works! ..for just a few files. The Assets folder was + already overwritten with another data. I have tried many, many programs, and nothing works.
+ Which means the Assets folder, is permanently deleted. I was sad, confused, and shocked (nah not + really, but kinda sad). I really did permanently delete almost a year worth of work, and the + worst part, I didn't know how and also can avoid it by being more careful.

+ +

The Light at The End of The Tunnel?

I did mention that I did not have any more copies for the current simpliCity project file (which is + beta0.2.1), turns out that I actually have one old copy of beta0.1 (modified) project file. I + also have the latest beta0.2 build, and all of the assets.

So, what does that mean? Well it can mean that I can recover my project, but it needs more work. How + you may ask?

First, I will decompile my game to get all the new scripts from the latest build using ILSpy. +
Download the old copy, and open it in Unity.
Update all the scripts to the new one.
Update all of the old objects to the new one to adapt to the new scripts.
Update all of the old assets to the new assets in my OneDrive.
Finish it up and polish it. And it's done! It will not be an exact copy, but all of the new + features should still be recovered. And probably will be improved.

But this needs time. For now, I have decided to stop simpliCity development, and start a new + projects. Why? My gamedev journey is still long, and I cannot stick to the same projects for months + or years. I decided that this is the time for me to move on, and learn new things.

What does it mean for simpliCity?

This means that simpliCity development will be on hold for quite some time until I recovered the + project. This also means that I will make a new game! Yay! Finally!

What can we learn

What can we learn from my mistake?

Back up all of your projects and files. Do NOT have only 1 copy of your project. Have it on a + second drive, and also online services like Google Drive and OneDrive. Do this so if something + happens to the original, you still have a copy of it.
Back up regularly. If you have a back-up but it's old, that is still the same (but better) than + having no back-ups at all. Back up your project every week or at least month.
Be careful in things that you don't know. Especially file management and Git. Git is hard. And + annoying.
It's time to learn new things and move on. It is ok to make a big project and spend years on it, + but you should also try and making many side-projects and improve over time.

Closing

We have reached the end of this devlog. becase I feel I want to say sorry to everyone for + dissapointing you because of this mistake. I also want to say please learn from this mistake. Better + be safe than sorry! Also thank you, thank you everyone for staying with me in this journey. +

+ And that's it for this week. Thank you so much everyone for reading.
+ This is Altaf.
+ Stay safe, and see you next week on The Altaf (dev)Blog! +

+ + + diff --git a/data/posts.json b/data/posts.json new file mode 100644 index 0000000..240b4d7 --- /dev/null +++ b/data/posts.json @@ -0,0 +1,26 @@ +{ "posts": + [ + { + "id" : 0, + "title" : "beta0.2: The Visual Update is Out!", + "description" : "", + "date" : "Wed, 26 July 2023", + "author" : "altaf-creator", + "tags" : ["simpliCity", "Devlog"], + "thumbnail" : "/assets/images/blog/beta0.2_cover.png", + "banner" : "/assets/images/blog/beta0.2_banner.png", + "path" : "/data/posts/0.md" + }, + { + "id" : 1, + "title" : "Well that was dumb. (33nd Week of 2023)", + "description" : "", + "date" : "Wed, 16 August 2023", + "author" : "altaf-creator", + "tags" : ["simpliCity", "Devlog"], + "thumbnail" : "/assets/images/blog/33_cover.png", + "banner" : "/assets/images/blog/33_banner.png", + "path" : "/data/posts/1.md" + } + ] +} diff --git a/data/posts/0.md b/data/posts/0.md new file mode 100644 index 0000000..9884eb2 --- /dev/null +++ b/data/posts/0.md @@ -0,0 +1,2 @@ +# hello, wolrd! +0.md diff --git a/data/posts/1.md b/data/posts/1.md new file mode 100644 index 0000000..f4c6bbd --- /dev/null +++ b/data/posts/1.md @@ -0,0 +1,32 @@ +-+-+-+ +# Opening +Hello, friends! Welcome back to the 5th.. or 6th.. (later editor note: it's 5th) weekly devlog! I want to apologize for not posting weekly devlogs for the past few weeks. In this devlog, I would like to tell you about my new projects and a stupid accident that I have did / occurred. ++-+-+- + +-+-+-+ +# New Projects +Usually after I published a new update for my games, I often take a break for a few days or weeks. I also sometimes like to start a new side-project. And in this week, I have started some side-projects. Some of them are; + +1. This website update. +2. A new game. I have some different ideas for my new game, so I am currently deciding which game should I make for this new project. + +Now you may wonder, why did I create a new game? Well it was because... ++-+-+- + +-+-+-+ +# New Projects +Usually after I published a new update for my games, I often take a break for a few days or weeks. I also sometimes like to start a new side-project. And in this week, I have started some side-projects. Some of them are; + +1. This website update. +2. A new game. I have some different ideas for my new game, so I am currently deciding which game should I make for this new project. + +Now you may wonder, why did I create a new game? Well it was because... ++-+-+- + +-+-+-+ +# The (dumb?) Accident +Long story short, I have accidentally teleported simpliCity project folder to a higher dimension that no human could ever even begin to comperhend, aka. deleted all the project files. +The long story is... + + ++-+-+- diff --git a/index.html b/index.html index e39384d..eb540e1 100644 --- a/index.html +++ b/index.html @@ -1,131 +1,139 @@ - - - - - - - - - - - This is altaf-creator - - - - - - -

- About Me - Projects - (dev)Blog -

- - -

- Altaf -

- simpliCity - ↗ -

- Hey there! -
- I'm a middle school student from Indonesia who likes to code as a hobby. -
- Learn more about me → -

Project Highlights

- - simpliCity - - -

- - Tank Shooter - - -

- - MarkdownEditor - - -

- View More -

Blog Posts

Devlog, simpliCity

- This Week's Devlog: Well that was dumb. (33nd Week of 2023) -

Wed, 16 August 2023

simpliCity

- beta0.2: The Visual Update is Out! -

Wed, 26 July 2023

- View More -

Socials

- - - - - -

- - - + + + + + + + + + + + This is altaf-creator + + + + + + +

+ About Me + Projects + (dev)Blog +

+ + +

+ Altaf +

+ simpliCity + ↗ +

+ Hey there! +
+ I'm a middle school student from Indonesia who likes to code as a hobby. +
+ Learn more about me → +

Project Highlights

+ + simpliCity + + +

+ + Tank Shooter + + +

+ + MarkdownEditor + + +

+ View More +

Academic History

Blog Posts

Devlog, simpliCity

+ This Week's Devlog: Well that was dumb. (33nd Week of 2023) +

Wed, 16 August 2023

simpliCity

+ beta0.2: The Visual Update is Out! +

Wed, 26 July 2023

+ View More +

Socials

+ + + + + + +

+ + + diff --git a/packages/markdown-it-container.mjs b/packages/markdown-it-container.mjs new file mode 100644 index 0000000..2643284 --- /dev/null +++ b/packages/markdown-it-container.mjs @@ -0,0 +1,139 @@ +// Process block-level custom containers +// +export default function container_plugin (md, name, options) { + // Second param may be useful if you decide + // to increase minimal allowed marker length + function validateDefault (params/*, markup */) { + return params.trim().split(' ', 2)[0] === name + } + + function renderDefault (tokens, idx, _options, env, slf) { + // add a class to the opening tag + if (tokens[idx].nesting === 1) { + tokens[idx].attrJoin('class', name) + } + + return slf.renderToken(tokens, idx, _options, env, slf) + } + + options = options || {} + + const min_markers = 3 + const marker_str = options.marker || ':' + const marker_char = marker_str.charCodeAt(0) + const marker_len = marker_str.length + const validate = options.validate || validateDefault + const render = options.render || renderDefault + + function container (state, startLine, endLine, silent) { + let pos + let auto_closed = false + let start = state.bMarks[startLine] + state.tShift[startLine] + let max = state.eMarks[startLine] + + // Check out the first character quickly, + // this should filter out most of non-containers + // + if (marker_char !== state.src.charCodeAt(start)) { return false } + + // Check out the rest of the marker string + // + for (pos = start + 1; pos <= max; pos++) { + if (marker_str[(pos - start) % marker_len] !== state.src[pos]) { + break + } + } + + const marker_count = Math.floor((pos - start) / marker_len) + if (marker_count < min_markers) { return false } + pos -= (pos - start) % marker_len + + const markup = state.src.slice(start, pos) + const params = state.src.slice(pos, max) + if (!validate(params, markup)) { return false } + + // Since start is found, we can report success here in validation mode + // + if (silent) { return true } + + // Search for the end of the block + // + let nextLine = startLine + + for (;;) { + nextLine++ + if (nextLine >= endLine) { + // unclosed block should be autoclosed by end of document. + // also block seems to be autoclosed by end of parent + break + } + + start = state.bMarks[nextLine] + state.tShift[nextLine] + max = state.eMarks[nextLine] + + if (start < max && state.sCount[nextLine] < state.blkIndent) { + // non-empty line with negative indent should stop the list: + // - ``` + // test + break + } + + if (marker_char !== state.src.charCodeAt(start)) { continue } + + if (state.sCount[nextLine] - state.blkIndent >= 4) { + // closing fence should be indented less than 4 spaces + continue + } + + for (pos = start + 1; pos <= max; pos++) { + if (marker_str[(pos - start) % marker_len] !== state.src[pos]) { + break + } + } + + // closing code fence must be at least as long as the opening one + if (Math.floor((pos - start) / marker_len) < marker_count) { continue } + + // make sure tail has spaces only + pos -= (pos - start) % marker_len + pos = state.skipSpaces(pos) + + if (pos < max) { continue } + + // found! + auto_closed = true + break + } + + const old_parent = state.parentType + const old_line_max = state.lineMax + state.parentType = 'container' + + // this will prevent lazy continuations from ever going past our end marker + state.lineMax = nextLine + + const token_o = state.push('container_' + name + '_open', 'div', 1) + token_o.markup = markup + token_o.block = true + token_o.info = params + token_o.map = [startLine, nextLine] + + state.md.block.tokenize(state, startLine + 1, nextLine) + + const token_c = state.push('container_' + name + '_close', 'div', -1) + token_c.markup = state.src.slice(start, pos) + token_c.block = true + + state.parentType = old_parent + state.lineMax = old_line_max + state.line = nextLine + (auto_closed ? 1 : 0) + + return true + } + + md.block.ruler.before('fence', 'container_' + name, container, { + alt: ['paragraph', 'reference', 'blockquote', 'list'] + }) + md.renderer.rules['container_' + name + '_open'] = render + md.renderer.rules['container_' + name + '_close'] = render +}; diff --git a/projects/index.html b/projects/index.html index b2477c7..9af538a 100644 --- a/projects/index.html +++ b/projects/index.html @@ -1,118 +1,118 @@ - - - - - - - - - - Projects • altaf-creator - - - - - -

- About Me - Projects - (dev)Blog -

- -

- Projects -

- - simpliCity - - -

- - Tank Shooter - - -

- - MarkdownEditor - -

- - Depths of Knowledge - -

- - Farmer's Universe - -

- - OpenQuran - -

- - Flappy Duck - -

- - Ball Run - -

- - Space Shooter Game - -

- - Easy Math Game - -

- - micro:bit Calculator - -

- - C Wordle - -

- - - + + + + + + + + + + Projects • altaf-creator + + + + + +

+ About Me + Projects + (dev)Blog +

+ +

+ Projects +

+ + simpliCity + + +

+ + Tank Shooter + + +

+ + MarkdownEditor + +

+ + Depths of Knowledge + +

+ + Farmer's Universe + +

+ + OpenQuran + +

+ + Flappy Duck + +

+ + Ball Run + +

+ + Space Shooter Game + +

+ + Easy Math Game + +

+ + micro:bit Calculator + +

+ + C Wordle + +

+ + + diff --git a/projects/simpliCity/index.html b/projects/simpliCity/index.html index dd2a876..943e715 100644 --- a/projects/simpliCity/index.html +++ b/projects/simpliCity/index.html @@ -1,111 +1,111 @@ - - - - - - - - - - - simpliCity • altaf-creator - - - - - - - -

- About Me - Projects - (dev)Blog -

- - - -

- -

What is simpliCity?

simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.

Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!

This Game Offers:

30+ different buildings
Save & load system
Simple worker system
Relaxing feel & atmosphere
Simple residential system
Sandbox mode if you want no challanges at all

Gameplay

The gameplay of the game is simple. You start with an empty island in the middle of the ocean. You start building houses, trees, and offices. Residents will come to your city and you can expand the city into whatever you'd like!

Feedback & Discord

Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our Discord Server!

Minimum System Requirements

Operating System: Windows 8+ 64-bit
Processor: Intel Dual Core 2GHz
Memory: 2 GB of RAM
Graphics: Intergrated Graphics Card
DirectX: Version 11
Storage: 512 MB available space

Downloads

- Buy Latest Version on Steam (beta0.2) - Download Latest Demo (demo0.1) -

Older Versions (coming soon)

- alpha2.3.1 - alpha2.3 - alpha2.2 - alpha2.1 - alpha2.0 -

Changelogs (coming soon)

- View Changelogs -

- - - + + + + + + + + + + + simpliCity • altaf-creator + + + + + + + +

+ About Me + Projects + (dev)Blog +

+ + + +

+ +

What is simpliCity?

simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.

Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!

This Game Offers:

30+ different buildings
Save & load system
Simple worker system
Relaxing feel & atmosphere
Simple residential system
Sandbox mode if you want no challanges at all

Gameplay

Feedback & Discord

Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our Discord Server!

Minimum System Requirements

Operating System: Windows 8+ 64-bit
Processor: Intel Dual Core 2GHz
Memory: 2 GB of RAM
Graphics: Intergrated Graphics Card
DirectX: Version 11
Storage: 512 MB available space

Downloads

+ Buy Latest Version on Steam (beta0.2) + Download Latest Demo (demo0.1) +

Older Versions (coming soon)

+ alpha2.3.1 + alpha2.3 + alpha2.2 + alpha2.1 + alpha2.0 +

Changelogs (coming soon)

+ View Changelogs +

+ + + diff --git a/projects/tank-shooter/index.html b/projects/tank-shooter/index.html index 3a79dc9..62e2795 100644 --- a/projects/tank-shooter/index.html +++ b/projects/tank-shooter/index.html @@ -1,114 +1,114 @@ - - - - - - - - - - - simpliCity • altaf-creator - - - - - - - -

- About Me - Projects - (dev)Blog -

- - - -

- -

What is simpliCity?

simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.

Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!

This Game Offers:

30+ different buildings
Save & load system
Simple worker system
Relaxing feel & atmosphere
Simple residential system
Sandbox mode if you want no challanges at all

Gameplay

Feedback & Discord

Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our Discord Server!

Minimum System Requirements

Operating System: Windows 8+ 64-bit
Processor: Intel Dual Core 2GHz
Memory: 2 GB of RAM
Graphics: Intergrated Graphics Card
DirectX: Version 11
Storage: 512 MB available space

Downloads

- Buy Latest Version on Steam (beta0.2) - Download Latest Demo (demo0.1) -

Older Versions (coming soon)

- alpha2.3.1 - alpha2.3 - alpha2.2 - alpha2.1 - alpha2.0 -

Changelogs (coming soon)

- View Changelogs -

- - - + + + + + + + + + + + simpliCity • altaf-creator + + + + + + + +

+ About Me + Projects + (dev)Blog +

+ + + +

+ +

What is simpliCity?

simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.

Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!

This Game Offers:

30+ different buildings
Save & load system
Simple worker system
Relaxing feel & atmosphere
Simple residential system
Sandbox mode if you want no challanges at all

Gameplay

Feedback & Discord

Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our Discord Server!

Minimum System Requirements

Operating System: Windows 8+ 64-bit
Processor: Intel Dual Core 2GHz
Memory: 2 GB of RAM
Graphics: Intergrated Graphics Card
DirectX: Version 11
Storage: 512 MB available space

Downloads

+ Buy Latest Version on Steam (beta0.2) + Download Latest Demo (demo0.1) +

Older Versions (coming soon)

+ alpha2.3.1 + alpha2.3 + alpha2.2 + alpha2.1 + alpha2.0 +

Changelogs (coming soon)

+ View Changelogs +

+ + + diff --git a/scripts/blog.js b/scripts/blog.js new file mode 100644 index 0000000..cef9a28 --- /dev/null +++ b/scripts/blog.js @@ -0,0 +1,113 @@ +var evaluatedTags = ""; +const clamp = (val, min, max) => Math.min(Math.max(val, min), max) + +function postList(n = 0) { + fetch("/data/posts.json") + .then((response) => response.json()) + .then((data) => { + n = clamp(n, 0, data.posts.length); + if (n < 1) { + n = data.posts.length; + } + + // i ❤ for loops + for (var i = n - 1; i >= 0; i--) { + console.log("dkfjlaafjsdk" + i) + postCard(data.posts[i]); + } + }); +} + +function postCard(post) { + var blogContainer = document.getElementById("blog-container"); + + var title = post.title; + var date = post.date; + var author = post.author; + var tags = post.tags; + var thumbnail = post.thumbnail; + var id = post.id; + + evaluatedTags = ""; + tags.forEach(createTags) + + var template = ` +

+ ${evaluatedTags} +

+ ${title} +

${date}

+ ` + + blogContainer.innerHTML += template; +} + +function createTags(tag) { + evaluatedTags += `${tag}` +} + +function getUrlVars() { + var vars = [], hash; + var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); + for (var i = 0; i < hashes.length; i++) { + hash = hashes[i].split('='); + vars.push(hash[0]); + vars[hash[0]] = hash[1]; + } + return vars; +} + +// DEPENDENCIES +// * /scripts/scroll.js +function loadPost(n) { + const md = markdownit({ + 'html': true + }) + + fetch("/data/posts.json") + .then((response) => response.json()) + .then((data) => { + var post = data.posts[n]; + + var banner = document.getElementById("banner"); + var title = document.getElementById("title"); + var date = document.getElementById("date"); + var author = document.getElementById("author"); + var tags = document.getElementById("tag-container"); + var content = document.getElementById("content"); + + banner.src = post.banner; + title.innerHTML = post.title; + date.innerHTML = post.date; + author.innerHTML = post.author; + post.tags.forEach(createTags); + tags.innerHTML = evaluatedTags; + + fetch(post.path) + .then((response) => response.text()) + .then((data) => { + data = data.replaceAll("-+-+-+", ` +

+`) + data = data.replaceAll("+-+-+-", ` +

+`) + + console.log(data); + + + var result = md.render(data); + content.innerHTML = result; + }).then(() => addNodes()); + }); +} diff --git a/scripts/onload.js b/scripts/onload.js index 165f80d..9d9226e 100644 --- a/scripts/onload.js +++ b/scripts/onload.js @@ -1,15 +1,20 @@ -function addNodes() { - const collection = document.getElementsByTagName("section"); - const container = document.getElementById("progressContainer"); - - for (var i = 0; i < collection.length; i++) { - var node = document.createElement("a"); - node.className = "node"; - container.appendChild(node); - if (collection.item(i).getAttribute('id') == null) { - collection.item(i).setAttribute('id', `section-${i}`); - } - node.setAttribute('id', `node-${i}`) - node.href = `#${collection.item(i).getAttribute('id')}` - } -} +function addNodes() { + const collection = document.getElementsByTagName("section"); + const container = document.getElementById("progressContainer"); + + for (var i = 0; i < collection.length; i++) { + var node = document.createElement("a"); + node.className = "node"; + container.appendChild(node); + if (collection.item(i).getAttribute('id') == null) { + collection.item(i).setAttribute('id', `section-${i}`); + } + node.setAttribute('id', `node-${i}`) + node.href = `#${collection.item(i).getAttribute('id')}` + } +} + +function blog(n) { + // addNodes is called in loadPost(n); + loadPost(n); +} diff --git a/scripts/scroll.js b/scripts/scroll.js index 6c20890..f745db4 100644 --- a/scripts/scroll.js +++ b/scripts/scroll.js @@ -1,76 +1,80 @@ -document.addEventListener('scroll', function () { - progress(); - hideSidebar(); -}); - -function progress() { - const sections = document.getElementsByTagName("section"); - const nodes = document.getElementsByClassName("node"); - - if (nodes[0]) { - for (var i = 0; i < sections.length; i++) { - if (isInViewport(sections[i])) { - nodes[i].style.width = "22px"; - nodes[i].style.height = "22px"; - nodes[i].style.backgroundColor = "black"; - } - else { - nodes[i].style.width = "13px"; - nodes[i].style.height = "13px"; - nodes[i].style.backgroundColor = "#555"; - } - } - } -} - -function hideSidebar() { - const sidebar = document.getElementById("sidebar"); - const progressContainer = document.getElementById("progressContainer"); - const sections = document.getElementsByTagName("section"); - - if (screen.width <= 600) { - if (window.scrollY >= 100) { - sidebar.style.left = "-80px"; - - for (var i = 0; i < sections.length; i++) { - sections[i].style.marginLeft = 0; - } - - if (progressContainer) { - progressContainer.style.left = "-11px"; - } - } - else { - sidebar.style.left = "0"; - - for (var i = 0; i < sections.length; i++) { - sections[i].style.marginLeft = "70px"; - } - - if (progressContainer) { - progressContainer.style.left = "61px"; - } - } - } - else { - sidebar.style.left = "0"; - progressContainer.style.left = "61px"; - } -} - -function isInViewport(element) { - const rect = element.getBoundingClientRect(); - const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0); - const visibleWidth = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0); - const elementHeight = rect.height; - const elementWidth = rect.width; - const halfElementHeight = elementHeight / 2; - const halfElementWidth = elementWidth / 2; - - return ( - visibleHeight >= halfElementHeight && - visibleWidth >= halfElementWidth - ); -} - - +document.addEventListener('scroll', function () { + progress(); + hideSidebar(); +}); + +function progress() { + const sections = document.getElementsByTagName("section"); + const nodes = document.getElementsByClassName("node"); + + if (nodes[0]) { + for (var i = 0; i < sections.length; i++) { + if (isInViewport(sections[i])) { + nodes[i].style.width = "22px"; + nodes[i].style.height = "22px"; + nodes[i].style.backgroundColor = "black"; + } + else { + nodes[i].style.width = "13px"; + nodes[i].style.height = "13px"; + nodes[i].style.backgroundColor = "#555"; + } + } + } +} + +function hideSidebar() { + const sidebar = document.getElementById("sidebar"); + const progressContainer = document.getElementById("progressContainer"); + const sections = document.getElementsByTagName("section"); + + if (!progressContainer) { + return; + } + + if (screen.width <= 600) { + if (window.scrollY >= 100) { + sidebar.style.left = "-80px"; + + for (var i = 0; i < sections.length; i++) { + sections[i].style.marginLeft = 0; + } + + if (progressContainer) { + progressContainer.style.left = "-11px"; + } + } + else { + sidebar.style.left = "0"; + + for (var i = 0; i < sections.length; i++) { + sections[i].style.marginLeft = "70px"; + } + + if (progressContainer) { + progressContainer.style.left = "61px"; + } + } + } + else { + sidebar.style.left = "0"; + progressContainer.style.left = "61px"; + } +} + +function isInViewport(element) { + const rect = element.getBoundingClientRect(); + const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0); + const visibleWidth = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0); + const elementHeight = rect.height; + const elementWidth = rect.width; + const halfElementHeight = elementHeight / 2; + const halfElementWidth = elementWidth / 2; + + return ( + visibleHeight >= halfElementHeight && + visibleWidth >= halfElementWidth + ); +} + + diff --git a/scripts/video.js b/scripts/video.js index e1d5948..b74587e 100644 --- a/scripts/video.js +++ b/scripts/video.js @@ -1,16 +1,16 @@ -function playVideo(elementId) { - var element = document.getElementById(elementId); - - element.style.visibility = "visible"; - element.style.opacity = "100%"; - element.play(); -} - -function stopVideo(elementId) { - var element = document.getElementById(elementId); - - element.style.visibility = "hidden"; - element.style.opacity = "0%"; - element.pause(); - element.currentTime = 0; -} +function playVideo(elementId) { + var element = document.getElementById(elementId); + + element.style.visibility = "visible"; + element.style.opacity = "100%"; + element.play(); +} + +function stopVideo(elementId) { + var element = document.getElementById(elementId); + + element.style.visibility = "hidden"; + element.style.opacity = "0%"; + element.pause(); + element.currentTime = 0; +} diff --git a/style.css b/style.css index c5e207a..b1a0729 100644 --- a/style.css +++ b/style.css @@ -1,577 +1,599 @@ -@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,150;0,200;0,400;0,500;0,600;0,700;0,800;1,100;1,150;1,200;1,400;1,500;1,600;1,700;1,800&display=swap'); - -:root { - --accent1: #00BA62; - --accent2: #008C94; - --accent: #00A37B; -} - -::-moz-selection { /* Code for Firefox */ - color: white; - background: black; -} - -::selection { - color: white; - background: black; -} - -html { - overflow-x: none; -} - -body { - margin: 0; - padding: 0; - height: 100vh; - width: 100%; - font-family: 'JetBrains Mono', monospace; - word-wrap: break-word; - text-overflow: ellipsis; -} - -h1 { - font-size: 1.7rem; -} - -section { - padding-inline: 50px; - min-height: 100%; - border-top: 2px solid rgba(0, 0, 0, 0.7); - position: relative; - z-index: 2; - margin-left: 70px; - background-color: white; - transition: margin-left .3s; -} - -hr { - border: none; - background-color: black; - height: 2px; - margin: 20px; -} - -pre::before { - content: "> "; - color: #00A37B; -} - -pre { - font-size: large; - background-color: #00000010; - padding: 10px; - border-radius: 5px; - color: #444; -} - -.desktop { - visibility: visible; -} - -.center { - text-align: center; -} - -.normal-section { - padding-bottom: 30px; - min-height: 0; - height: fit-content; -} - -.heading { - font-size: 2.5rem; - font-weight: 600; - display: block; - margin-top: 1rem; - margin-bottom: 1rem; -} - -.colored-text { - background: -webkit-linear-gradient(45deg, var(--accent1), var(--accent2)); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.floating-nav-container { - display: block; - position: fixed; - top: 20px; - right: 20px; - filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.15)); - z-index: 9999; -} - -.floating-nav { - box-sizing: border-box; - background-color: white; - padding: 20px; - height: 50px; - display: flex; - gap: 20px; - align-items: center; - clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px)); -} - -.sidebar { - background-color: white; - position: fixed; - height: 100%; - width: 70px; - border-right: 2px solid rgba(0, 0, 0, 0.7); - z-index: 9998; - display: flex; - flex-direction: column; - align-items: center; - transition: left .3s; -} - -.sidebar > span { - font-size: xx-large; - text-orientation: sideways; - writing-mode: vertical-lr; - margin-top: 30px; - display: block; - text-overflow: ellipsis; - white-space: nowrap; - word-wrap: break-word; - overflow: hidden; - box-sizing: border-box; - max-height: 80% !important; -} - -.sidebar-img { - height: 50px; - clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px)); - margin-top: 20px; -} - -.home-img { - height: 100%; - width: 100%; - margin: 0; - background-size: cover; - background-position: center; - position: absolute; - top: 0; - right: 0; -} - -.sidebar-progress-container { - width: 20px; - height: 100vh; - position: fixed; - top: 0; - left: 61px; - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - z-index: 10000; - transition: left .3s; -} - -.node { - width: 13px; - height: 13px; - margin-top: 50px; - margin-bottom: 50px; - background-color: #555; - border-radius: 20px; - transition: all .3s cubic-bezier(0, .38, .48, 1.35); -} - -@keyframes title { - from { - bottom: 30%; - color: transparent; - letter-spacing: -10px; - } - - to { - letter-spacing: clamp(10px, -0.875rem + 5vw, 30px); - color: #FFFFFF5A; - bottom: 46%; - } -} - -.home-title { - right: 0; - font-weight: 800; - font-size: clamp(1rem, -0.875rem + 20vw, 400px); - color: #FFFFFF5A; - position: fixed; - text-align: center; - width: calc(100% - 70px); - line-height: 65%; - bottom: 46%; - z-index: 0; - letter-spacing: clamp(10px, -0.875rem + 5vw, 30px); - animation-name: title; - animation-duration: 3s; - user-select: none; -} - -.div-sizing { - width: 100%; - max-width: 1200px; - padding: 30px; - box-sizing: border-box; -} - -.img { - clip-path: polygon(0 20.00px, 20px 20px, 20.00px 0, calc(100% - 20.00px) 0, calc(100% - 20px) 20px, 100% 20.00px, 100% calc(100% - 20.00px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20.00px) 100%, 20.00px 100%, 20px calc(100% - 20px), 0 calc(100% - 20.00px)); -} - -.center-grid { - display: grid; - place-items: center; - min-height: 100vh; - width: 100%; -} - -.center-absolute { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.grid { - display: grid; - grid-auto-flow: column; -} - -.big-text { - font-size: clamp(1rem, -0.875rem + 30vw, 2rem); - max-width: 80%; -} - -.link { - text-decoration: none; - background: linear-gradient(180deg, transparent calc(100% - 2px), black 0); - /* thanks MIT very cool */ - transition: all .2s; - color: black; - background-color: transparent; - z-index: 9999; -} - -.link:hover { - background: linear-gradient(180deg, #00000021 calc(100% - 2px), black 0); - color: #000000FA; -} - -.link:focus { - color: #00000085; - background: linear-gradient(180deg, #00000021 calc(100% - 1px), black 0); -} - -.flex { - flex-grow: 1; -} - -.flex-container { - display: flex; - flex-direction: row; - width: 100%; - flex-wrap: wrap; -} - -.flex-center { - flex-direction: column; - place-items: center; -} - -.flex-center-content { - place-content: center; -} - -.flex-container-normal { - display: flex; - width: 100%; - flex-wrap: wrap; -} - -.flex-container-column { - flex-direction: column; - height: 100%; -} - -.flex-right { - display: flex; - flex-direction: row; - justify-content: right; -} - -.item-left { - place-self: start; -} - -.item-center { - place-self: center; -} - -.full-img-card { - background-color: var(--accent); - margin: 5px; - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} - -.full-img-card > a { - text-decoration: none; - box-sizing: border-box; - position: relative; - overflow: hidden; -} - -.full-img-card > a:hover { - box-shadow: inset white 0 0 0 4px, rgba(0, 0, 0, 0.3) 0 0 10px 1px; -} - -.full-img-card > a:focus { - background-color: rgba(0, 0, 0, 0.1); - box-shadow: inset white 0 0 0 2.5px, rgba(0, 0, 0, 0.3) 0 0 10px 1px; -} - -.full-img-card > a:active { - background-color: rgba(0, 0, 0, 0.24) !important; -} - -.full-img-card > a > span { - font-size: 2rem; - font-weight: 500; - color: white; - position: absolute; - bottom: 2rem; - left: 2rem; -} - -.full-img-card > a:hover > span { - background: linear-gradient(180deg, transparent calc(100% - 2px), white 0); -} - -.banner-bottom-bar { - height: auto; - width: 100%; - background-color: #0008; - backdrop-filter: blur(10px); - position: absolute; - bottom: 0; - left: 0; - z-index: 4; - align-items: center; - color: white; -} - -.banner-top-bar > img { - height: 40px; -} - -.banner-bottom-bar > i { - font-size: 1.1rem; - display: inline-block; -} - -.banner-top-bar { - position: fixed; - z-index: 3; - height: 69px; - width: 100%; - background-color: #0008; - backdrop-filter: blur(10px); - top: 0; - left: 70px; - color: white; - box-sizing: border-box; - align-content: center; -} - -.banner-video { - position: absolute; - z-index: 4; - top: 0; - left: 0; - min-width: calc(100vw - 70px); - min-height: 100%; - width: calc(100vw - 70px); - height: auto; - background-size: cover; - overflow: hidden; - object-fit: cover; - opacity: 0; - transition: all .5s; - visibility: hidden; -} - -.card { - height: 200px; - max-width: 800px; - width: 100%; - display: flex; - flex-direction: row; - box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 2px; - margin-bottom: 15px; - margin-top: 15px; -} - -.card:hover { - box-shadow: rgba(0, 0, 0, 0.15) 0 0 15px 4px; -} - -.card > * { - flex: 1 1; - width: 50%; -} - -.card > div { - position: relative; - padding: 15px; -} - -.card > div > .link { - font-size: 1.5rem; - font-weight: 600; -} - -.card > div > .button { - position: absolute; - bottom: 15px; - right: 15px; -} - -.card > div > .flex-container-normal { - margin-bottom: 10px; -} - -.card > img { - object-fit: cover; -} - -.gallery-card { - flex: 1 0 400px; - height: 300px; -} - -.gradient-overlay { - width: 100%; - height: 100%; - background: linear-gradient(5deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 70%); -} - -.gradient-overlay:hover { - background: linear-gradient(5deg, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0) 80%); -} - -.fill-div { - display: block; -} - -.button { - display: inline-block; - width: fit-content; - padding: 15px; - background-color: var(--accent); - color: white; - text-decoration: none; - margin: 10px; - transition: background-color .2s; - box-shadow: none; - position: relative; - align-content: center; -} - -.button:hover { - background-color: var(--accent2); -} - -.button:active { - box-shadow: inset white 0 0 0 3px, rgba(0, 0, 0, 0.4) 0 0 12px 1px !important; -} - -.button:focus { - box-shadow: inset white 0 0 0 2px, rgba(0, 0, 0, 0.4) 0 0 12px 1px; -} - -.banner-shadow { - filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.4)); -} - -.button-disabled, .button-disabled:hover, .button-disabled:active, .button-disabled:focus { - cursor: not-allowed; - opacity: .5; - background-color: var(--accent1); - box-shadow: none !important; -} - -.banner { - max-width: 100%; - height: 500px; - object-fit: cover; - width: 100%; - box-sizing: border-box; -} - -#simpliCity-img { - z-index: 4; - background-image: url(/assets/images/game-hero/simpliCity.png); - background-size: cover; - background-position: center; -} - -#simpliCity-link { - position: absolute; - right: 30px; - bottom: 30px; - background-color: transparent; - background: linear-gradient(180deg, transparent calc(100% - 2px), white 0); - font-size: large; - color: white; -} - -#simpliCity-link:hover { - color: #ffffffbe; - background: linear-gradient(180deg, transparent calc(100% - 2px), #ffffffbe 0); -} - -#simpliCity-link:focus { - color: #ffffff79; - background: linear-gradient(180deg, transparent calc(100% - 1px), #ffffff79 0); -} - -@media only screen and (max-width: 600px) { - .desktop { - visibility: collapse; - display: none; - } - - .flex { - flex-direction: column; - } - - .card { - flex-direction: column; - height: 400px; - } - - .card > * { - width: 100%; - height: 50%; - box-sizing: border-box; - } - - section { - padding-inline: 10px; - } - - .gallery-card { - flex: 1 0 300px; - } - - .banner-top-bar { - left: 0; - } -} +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,150;0,200;0,400;0,500;0,600;0,700;0,800;1,100;1,150;1,200;1,400;1,500;1,600;1,700;1,800&display=swap'); + +:root { + --accent1: #00BA62; + --accent2: #008C94; + --accent: #00A37B; +} + +::-moz-selection { /* Code for Firefox */ + color: white; + background: black; +} + +::selection { + color: white; + background: black; +} + +html { + overflow-x: none; +} + +body { + margin: 0; + padding: 0; + height: 100vh; + width: 100%; + font-family: 'JetBrains Mono', monospace; + word-wrap: break-word; + text-overflow: ellipsis; +} + +h1 { + font-size: 1.7rem; +} + +section { + padding-inline: 50px; + min-height: 100%; + border-top: 2px solid rgba(0, 0, 0, 0.7); + position: relative; + z-index: 2; + margin-left: 70px; + background-color: white; + transition: margin-left .3s; +} + +hr { + border: none; + background-color: black; + height: 2px; + margin: 20px; +} + +pre::before { + content: "> "; + color: #00A37B; +} + +pre { + font-size: large; + background-color: #00000010; + padding: 10px; + border-radius: 5px; + color: #444; + white-space: pre-wrap; +} + +.desktop { + visibility: visible; +} + +.center { + text-align: center; +} + +.normal-section { + padding-bottom: 30px; + min-height: 0; + height: fit-content; +} + +.heading { + font-size: 2.5rem; + font-weight: 600; + display: block; + margin-top: 1rem; + margin-bottom: 1rem; +} + +.colored-text { + background: -webkit-linear-gradient(45deg, var(--accent1), var(--accent2)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.floating-nav-container { + display: block; + position: fixed; + top: 20px; + right: 20px; + filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.15)); + z-index: 9999; +} + +.floating-nav { + box-sizing: border-box; + background-color: white; + padding: 20px; + height: 50px; + display: flex; + gap: 20px; + align-items: center; + clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px)); +} + +.sidebar { + background-color: white; + position: fixed; + height: 100%; + width: 70px; + border-right: 2px solid rgba(0, 0, 0, 0.7); + z-index: 9998; + display: flex; + flex-direction: column; + align-items: center; + transition: left .3s; +} + +.sidebar > span { + font-size: xx-large; + text-orientation: sideways; + writing-mode: vertical-lr; + margin-top: 30px; + display: block; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: break-word; + overflow: hidden; + box-sizing: border-box; + max-height: 80% !important; +} + +.sidebar-img { + height: 50px; + clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px)); + margin-top: 20px; +} + +.home-img { + height: 100%; + width: 100%; + margin: 0; + background-size: cover; + background-position: center; + position: absolute; + top: 0; + right: 0; +} + +.sidebar-progress-container { + width: 20px; + height: 100vh; + position: fixed; + top: 0; + left: 61px; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + z-index: 10000; + transition: left .3s; +} + +.node { + width: 13px; + height: 13px; + margin-top: 50px; + margin-bottom: 50px; + background-color: #555; + border-radius: 20px; + transition: all .3s cubic-bezier(0, .38, .48, 1.35); +} + +@keyframes title { + from { + bottom: 30%; + color: transparent; + letter-spacing: -10px; + } + + to { + letter-spacing: clamp(10px, -0.875rem + 5vw, 30px); + color: #FFFFFF5A; + bottom: 46%; + } +} + +.home-title { + right: 0; + font-weight: 800; + font-size: clamp(1rem, -0.875rem + 20vw, 400px); + color: #FFFFFF5A; + position: fixed; + text-align: center; + width: calc(100% - 70px); + line-height: 65%; + bottom: 46%; + z-index: 0; + letter-spacing: clamp(10px, -0.875rem + 5vw, 30px); + animation-name: title; + animation-duration: 3s; + user-select: none; +} + +.div-sizing { + width: 100%; + max-width: 1200px; + padding: 30px; + box-sizing: border-box; +} + +.img { + clip-path: polygon(0 20.00px, 20px 20px, 20.00px 0, calc(100% - 20.00px) 0, calc(100% - 20px) 20px, 100% 20.00px, 100% calc(100% - 20.00px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20.00px) 100%, 20.00px 100%, 20px calc(100% - 20px), 0 calc(100% - 20.00px)); +} + +.center-grid { + display: grid; + place-items: center; + min-height: 100vh; + width: 100%; +} + +.center-absolute { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.grid { + display: grid; + grid-auto-flow: column; +} + +.big-text { + font-size: clamp(1rem, -0.875rem + 30vw, 2rem); + max-width: 80%; +} + +.link { + text-decoration: none; + background: linear-gradient(180deg, transparent calc(100% - 2px), black 0); + /* thanks MIT very cool */ + transition: all .2s; + color: black; + background-color: transparent; + z-index: 9999; +} + +.link:hover { + background: linear-gradient(180deg, #00000021 calc(100% - 2px), black 0); + color: #000000FA; +} + +.link:focus { + color: #00000085; + background: linear-gradient(180deg, #00000021 calc(100% - 1px), black 0); +} + +.flex { + flex-grow: 1; +} + +.flex-container { + display: flex; + flex-direction: row; + width: 100%; + flex-wrap: wrap; +} + +.flex-center { + flex-direction: column; + place-items: center; +} + +.flex-center-content { + place-content: center; +} + +.flex-container-normal { + display: flex; + width: 100%; + flex-wrap: wrap; +} + +.flex-container-column { + flex-direction: column; + height: 100%; +} + +.flex-right { + display: flex; + flex-direction: row; + justify-content: right; +} + +.chip-container { + margin-left: -5px; +} + +.chip { + background-image: linear-gradient(45deg, var(--accent1), var(--accent2)); + padding: 7px; + display: block; + color: white; + margin-inline: 5px; + box-sizing: border-box; +} + +.item-left { + place-self: start; +} + +.item-center { + place-self: center; +} + +.full-img-card { + background-color: var(--accent); + margin: 5px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +.full-img-card > a { + text-decoration: none; + box-sizing: border-box; + position: relative; + overflow: hidden; +} + +.full-img-card > a:hover { + box-shadow: inset white 0 0 0 4px, rgba(0, 0, 0, 0.3) 0 0 10px 1px; +} + +.full-img-card > a:focus { + background-color: rgba(0, 0, 0, 0.1); + box-shadow: inset white 0 0 0 2.5px, rgba(0, 0, 0, 0.3) 0 0 10px 1px; +} + +.full-img-card > a:active { + background-color: rgba(0, 0, 0, 0.24) !important; +} + +.full-img-card > a > span { + font-size: 2rem; + font-weight: 500; + color: white; + position: absolute; + bottom: 2rem; + left: 2rem; +} + +.full-img-card > a:hover > span { + background: linear-gradient(180deg, transparent calc(100% - 2px), white 0); +} + +.banner-bottom-bar { + height: auto; + width: 100%; + background-color: #0008; + backdrop-filter: blur(10px); + position: absolute; + bottom: 0; + left: 0; + z-index: 4; + align-items: center; + color: white; +} + +.banner-top-bar > img { + height: 40px; +} + +.banner-bottom-bar > i { + font-size: 1.1rem; + display: inline-block; +} + +.banner-top-bar { + position: fixed; + z-index: 3; + height: 69px; + width: 100%; + background-color: #0008; + backdrop-filter: blur(10px); + top: 0; + left: 70px; + color: white; + box-sizing: border-box; + align-content: center; +} + +.banner-video { + position: absolute; + z-index: 4; + top: 0; + left: 0; + min-width: calc(100vw - 70px); + min-height: 100%; + width: calc(100vw - 70px); + height: auto; + background-size: cover; + overflow: hidden; + object-fit: cover; + opacity: 0; + transition: all .5s; + visibility: hidden; +} + +.card { + height: 200px; + max-width: 800px; + width: 100%; + display: flex; + flex-direction: row; + box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 2px; + margin-bottom: 15px; + margin-top: 15px; +} + +.card:hover { + box-shadow: rgba(0, 0, 0, 0.15) 0 0 15px 4px; +} + +.card > * { + flex: 1 1; + width: 50%; +} + +.card > div { + position: relative; + padding: 15px; +} + +.card > div > .link { + font-size: 1.5rem; + font-weight: 600; +} + +.card > div > .button { + position: absolute; + bottom: 15px; + right: 15px; +} + +.card > div > .flex-container-normal { + margin-bottom: 10px; +} + +.card > img { + object-fit: cover; +} + +.gallery-card { + flex: 1 0 400px; + height: 300px; +} + +.gradient-overlay { + width: 100%; + height: 100%; + background: linear-gradient(5deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 70%); +} + +.gradient-overlay:hover { + background: linear-gradient(5deg, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0) 80%); +} + +.fill-div { + display: block; +} + +.button { + display: inline-block; + width: fit-content; + padding: 15px; + background-color: var(--accent); + color: white; + text-decoration: none; + margin: 10px; + transition: background-color .2s; + box-shadow: none; + position: relative; + align-content: center; +} + +.button:hover { + background-color: var(--accent2); +} + +.button:active { + box-shadow: inset white 0 0 0 3px, rgba(0, 0, 0, 0.4) 0 0 12px 1px !important; +} + +.button:focus { + box-shadow: inset white 0 0 0 2px, rgba(0, 0, 0, 0.4) 0 0 12px 1px; +} + +.button-social { + font-size: 1.3rem; + text-align: center; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.banner-shadow { + filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.4)); +} + +.button-disabled, .button-disabled:hover, .button-disabled:active, .button-disabled:focus { + cursor: not-allowed; + opacity: .5; + background-color: var(--accent1); + box-shadow: none !important; +} + +.banner { + max-width: 100%; + height: 500px; + object-fit: cover; + width: 100%; + box-sizing: border-box; +} + +#simpliCity-img { + z-index: 4; + background-image: url(/assets/images/game-hero/simpliCity.png); + background-size: cover; + background-position: center; +} + +#simpliCity-link { + position: absolute; + right: 30px; + bottom: 30px; + background-color: transparent; + background: linear-gradient(180deg, transparent calc(100% - 2px), white 0); + font-size: large; + color: white; +} + +#simpliCity-link:hover { + color: #ffffffbe; + background: linear-gradient(180deg, transparent calc(100% - 2px), #ffffffbe 0); +} + +#simpliCity-link:focus { + color: #ffffff79; + background: linear-gradient(180deg, transparent calc(100% - 1px), #ffffff79 0); +} + +@media only screen and (max-width: 600px) { + .desktop { + visibility: collapse; + display: none; + } + + .flex { + flex-direction: column; + } + + .card { + flex-direction: column; + height: 400px; + } + + .card > * { + width: 100%; + height: 50%; + box-sizing: border-box; + } + + section { + padding-inline: 10px; + } + + .gallery-card { + flex: 1 0 300px; + } + + .banner-top-bar { + left: 0; + } +} -- cgit v1.2.3