From f06123d3643898fcf49d168175c1ddcbc9c8b042 Mon Sep 17 00:00:00 2001 From: Robert Ziehl Date: Wed, 16 Oct 2024 14:56:37 -0600 Subject: [PATCH] Initial commit - first post --- .gitignore | 2 + CNAME | 1 + Gemfile | 5 + Gemfile.lock | 74 ++++ _categories/coding.md | 6 + _categories/game-design.md | 6 + _config.yml | 3 + _data/navigation.yml | 6 + _includes/navigation.html | 16 + _layouts/category.html | 16 + _layouts/default.html | 21 ++ _layouts/post.html | 15 + _posts/2024-10-16-state-of-the-engine.md | 66 ++++ _sass/main.scss | 85 +++++ about.html | 30 ++ articles.html | 17 + assets/css/normalize.css | 427 +++++++++++++++++++++++ assets/css/skeleton.css | 418 ++++++++++++++++++++++ assets/css/styles.scss | 3 + assets/images/avatar.png | Bin 0 -> 2316 bytes categories.html | 17 + index.html | 9 + 22 files changed, 1243 insertions(+) create mode 100644 .gitignore create mode 100644 CNAME create mode 100644 Gemfile create mode 100644 Gemfile.lock create mode 100644 _categories/coding.md create mode 100644 _categories/game-design.md create mode 100644 _config.yml create mode 100644 _data/navigation.yml create mode 100644 _includes/navigation.html create mode 100644 _layouts/category.html create mode 100644 _layouts/default.html create mode 100644 _layouts/post.html create mode 100644 _posts/2024-10-16-state-of-the-engine.md create mode 100644 _sass/main.scss create mode 100644 about.html create mode 100644 articles.html create mode 100644 assets/css/normalize.css create mode 100644 assets/css/skeleton.css create mode 100644 assets/css/styles.scss create mode 100644 assets/images/avatar.png create mode 100644 categories.html create mode 100644 index.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..79ca516 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.jekyll-cache/ +_site/ \ No newline at end of file diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..ae6e565 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +robzed.com \ No newline at end of file diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..10f0a8d --- /dev/null +++ b/Gemfile @@ -0,0 +1,5 @@ +# frozen_string_literal: true + +source "https://rubygems.org" + +gem "jekyll", "4.3.4" diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..f56d232 --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,74 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.8.7) + public_suffix (>= 2.0.2, < 7.0) + bigdecimal (3.1.8) + colorator (1.1.0) + concurrent-ruby (1.3.4) + em-websocket (0.5.3) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0) + eventmachine (1.2.7) + ffi (1.17.0-x86_64-darwin) + forwardable-extended (2.6.0) + google-protobuf (4.28.2-x86_64-darwin) + bigdecimal + rake (>= 13) + http_parser.rb (0.8.0) + i18n (1.14.6) + concurrent-ruby (~> 1.0) + jekyll (4.3.4) + addressable (~> 2.4) + colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (~> 1.0) + jekyll-sass-converter (>= 2.0, < 4.0) + jekyll-watch (~> 2.0) + kramdown (~> 2.3, >= 2.3.1) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (>= 0.3.6, < 0.5) + pathutil (~> 0.9) + rouge (>= 3.0, < 5.0) + safe_yaml (~> 1.0) + terminal-table (>= 1.8, < 4.0) + webrick (~> 1.7) + jekyll-sass-converter (3.0.0) + sass-embedded (~> 1.54) + jekyll-watch (2.2.1) + listen (~> 3.0) + kramdown (2.4.0) + rexml + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.4) + listen (3.9.0) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + mercenary (0.4.0) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (6.0.1) + rake (13.2.1) + rb-fsevent (0.11.2) + rb-inotify (0.11.1) + ffi (~> 1.0) + rexml (3.3.8) + rouge (4.4.0) + safe_yaml (1.0.5) + sass-embedded (1.79.5-x86_64-darwin) + google-protobuf (~> 4.27) + terminal-table (3.0.2) + unicode-display_width (>= 1.1.1, < 3) + unicode-display_width (2.6.0) + webrick (1.8.2) + +PLATFORMS + x86_64-darwin-23 + +DEPENDENCIES + jekyll (= 4.3.4) + +BUNDLED WITH + 2.3.26 diff --git a/_categories/coding.md b/_categories/coding.md new file mode 100644 index 0000000..cc38759 --- /dev/null +++ b/_categories/coding.md @@ -0,0 +1,6 @@ +--- +layout: category +name: Coding +category: coding +--- +All things tech related. \ No newline at end of file diff --git a/_categories/game-design.md b/_categories/game-design.md new file mode 100644 index 0000000..d1b88ce --- /dev/null +++ b/_categories/game-design.md @@ -0,0 +1,6 @@ +--- +layout: category +name: Game Design +category: game-design +--- +More design related topics. \ No newline at end of file diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c91f137 --- /dev/null +++ b/_config.yml @@ -0,0 +1,3 @@ +collections: + categories: + output: true \ No newline at end of file diff --git a/_data/navigation.yml b/_data/navigation.yml new file mode 100644 index 0000000..56bd069 --- /dev/null +++ b/_data/navigation.yml @@ -0,0 +1,6 @@ +- name: Home + link: / +- name: About + link: /about.html +- name: Articles + link: /articles.html \ No newline at end of file diff --git a/_includes/navigation.html b/_includes/navigation.html new file mode 100644 index 0000000..549b23f --- /dev/null +++ b/_includes/navigation.html @@ -0,0 +1,16 @@ + \ No newline at end of file diff --git a/_layouts/category.html b/_layouts/category.html new file mode 100644 index 0000000..04f89ed --- /dev/null +++ b/_layouts/category.html @@ -0,0 +1,16 @@ +--- +layout: default +--- + +
+
+

{{ page.name }}

+ +
    + {% assign filtered_posts = site.posts | where: 'category', page.category %} + {% for post in filtered_posts %} +
  • {{ post.title }}
    • + {% endfor %} +
+
+
diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..f5caa86 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,21 @@ + + + + + Rob Zed Games - {{ page.title }} + + + + + +
+
+ {% include navigation.html %} + {{ content }} +
+
+
+

© Robert Ziehl, 2024

+
+ + \ No newline at end of file diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..bdd6cb9 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,15 @@ +--- +layout: default +--- +

{{ page.title | capitalize }}

+
{{ page.subtitle | capitalize }}
+ +

+ {{ page.date | date_to_string }} + {% assign category = site.categories | where: 'short_name', page.category | first %} + {% if category %} + - {{ category.name }} + {% endif %} +

+ +{{ content }} \ No newline at end of file diff --git a/_posts/2024-10-16-state-of-the-engine.md b/_posts/2024-10-16-state-of-the-engine.md new file mode 100644 index 0000000..0d0a9b3 --- /dev/null +++ b/_posts/2024-10-16-state-of-the-engine.md @@ -0,0 +1,66 @@ +--- +layout: post +category: coding +subtitle: And Drawing Lines In The Sand +--- + +I have been working on the same side project for three years now (although bits and pieces date back later than that) and I feel like it's a good time to reflect on how far I have come and what the next steps are. + +Here's some rough metrics for the current codebase: + +* **24722** lines of code (actual source lines, not whitespace or comments. This also excludes all open source dependencies) +* **2895** comments +* **379** todos +* **5926** lines of JSON data (the game is fairly data driven although a good chunk of this is a massive map file that features a 2D grid) + +*Full disclosure*: I am coding my game engine from scratch using [SDL2](https://www.libsdl.org/) and C++ as the foundation. I opted not to use a commercially available engine like Unity or Unreal for my game. + +So yes, that means I need more time up front to actually build my own engine as a trade-off against the continuous cost of version changes. This could still be [a more time consuming approach](https://moonstoneequation.com/a-warning-to-others/) for me but honestly I find it more productive. But the age old question of *"are you making a game or an engine?"* comes to mind and as a programmer first, it's easy to get wrapped up in coding technical details (I am definitely guilty of this). + +Now though, I need to realistically focus on the game itself. + +--- + +I think while I have a lot of the systems in place or at least rough versions of them, a pragmatic line in the sand would be the difference between production ready technical aspects and actual gameplay. Production ready things would include handling integrated versus dedicated GPUs, UTF-8 support, a full featured settings screen, remapping controls, high DPI support, achievements and testing different CPU architectures. + +My core focus now will be on the main gameplay to get something playable and fun. Then I think I will extend that to the first vertical slice and polishing that as much as possible. This is an exercise that the developers of Hollow Knight, Team Cherry did. It helps set the standard for what the rest of the game should look like plus it also makes +a good cut-off point for a demo (which I think is becoming more and more important with Steam Next Fest being a key marketing opportunity for indies). + +After that I will begin roughing out the rest of the world, making the story playable from beginning to end. +Then probably some rounds of polish, playtesting and finally all those production ready criteria mentioned above as well as optimization. + +--- + +As of today this is quick overview of some of the main systems in my engine: + +* **AI**: Behaviour trees. Needs unit testing to iron out any edge case bugs but otherwise it's dangerous enough to make something functional as demonstrated with the first creature in the game. Pathfinding needs to be implemented still. +* **Animation**: Frame based animations implemented with different frame lengths supported as well as events that can be triggered on specific frames which helps +for playing sounds and actually doing certain behaviours. +* **Audio**: There is a basic engine done with Fmod. Still needs panning and fading over time effects, some basic 2d location for sound would be nice to have too. +* **Collision**: Basic bounding box checks for now, will need some work for sure especially with some of the more physics based entities. +* **Cutscenes**: Mostly there, a few events still needed and some bugs need to be worked out. +* **ECS**: Custom solution, using it more as an organizational pattern as opposed to an optimization one right now. Quite a lot of components already completed, proving to be quite reusable. +* **Input**: Very simple implementation right now. Needs controller support and maybe a more data-driven approach to which actions get triggered in what context. +* **Map Editor**: Very early stages. Missing a lot of functionality. +* **Message Queue**: Decent implementation that can be used across broader systems. Ability to add additional information with a message would be nice. +* **Rendering**: Mostly good. Water rendering will need to be implemented properly and particle systems need to be finished. Lighting is pretty much done though. +* **Resource Loading**: Pretty good system in place. I have a side project to make this even more data driven so I can really simplify all the serialization code. +* **Saves**: Entities get saved properly for the most part. Map changes do not as well as some other game state. +* **Tests**: I think there’s a basic test runner and maybe some of the math tests but otherwise severely lacking. +* **UI Framework**: Mostly there. Dropdowns, scrollbars and text inputs all need some fixes. Multiline paragraphs still haven't been implemented. + +So not a bad base overall, it could be better, there's lots of gaps but my spare time has been dedicated to this very sporadically. I think it's enough to whip up a prototype so that's my turning point from initial engine to game prototype. On rainy days when I need a break from my current task list I might pick something engine related to improve or maybe work on some dev tools (like an in-game console, hot reloading or debug view). They might speed up development in some situations. + +--- + +But going full circle back to the beginning of this post, I am really curious to see by the end of this project, years from now, what the metrics will look like. I find posts like [this classic](https://kotaku.com/the-exceptional-beauty-of-doom-3s-source-code-5975610) great for providing some similar stats. + +> *To put things into perspective: Dyad has 193k lines of code, all C++. Doom 3 has 601k, Quake III has 229k and Quake II has 136k. That puts Dyad somewhere in between Quake II and Quake III. These are large projects.* + +Dwarf Fortress is supposedly [700K LOC](https://stackoverflow.blog/2021/12/31/700000-lines-of-code-20-years-and-one-developer-how-dwarf-fortress-is-built/) (although Tarn Adams did the metric by searching for `;` characters and not using a tool like `sloc`). + +These are by no means an objective level of quality or perfection but they are fun perspectives to indulge in from time to time. + +--- + +In the next post, I want to continue this chain of thought and talk about actually building out a game idea. \ No newline at end of file diff --git a/_sass/main.scss b/_sass/main.scss new file mode 100644 index 0000000..c637708 --- /dev/null +++ b/_sass/main.scss @@ -0,0 +1,85 @@ +.header { + margin-top: 6rem; + text-align: center; +} + +.about-header { + margin-top: 4rem; + text-align: center; +} + +/* Navbar */ +.navbar { + display: none; +} +.navbar + .docs-section { + border-top-width: 0; } +.navbar, +.navbar-spacer { + display: block; + width: 100%; + height: 6.5rem; + background: #fff; + z-index: 99; + border-top: 1px solid #eee; + border-bottom: 1px solid #eee; } +.navbar-spacer { + display: none; } +.navbar > .container { + width: 100%; } +.navbar-list { + list-style: none; + margin-bottom: 0; } +.navbar-item { + position: relative; + float: left; + margin-bottom: 0; } +.navbar-link { + text-transform: uppercase; + font-size: 11px; + font-weight: 600; + letter-spacing: .2rem; + margin-right: 35px; + text-decoration: none; + line-height: 6.5rem; + color: #222; } +.navbar-link.active { + color: #33C3F0; } +.has-docked-nav .navbar { + position: fixed; + top: 0; + left: 0; } +.has-docked-nav .navbar-spacer { + display: block; } +/* Re-overiding the width 100% declaration to match size of % based container */ +.has-docked-nav .navbar > .container { + width: 80%; +} + +.footer { + text-align: center; +} + +.avatar { + margin-top: 6rem; + margin-left: auto; + margin-right: auto; + background-image: url('../../assets/images/avatar.png'); + width: 96px; + height: 96px; + background-size: cover; + background-position: top center; + border-radius: 50%; +} + +.post-title { + margin-top: 4rem; +} + +.post-subtitle { + color: #666; +} + +.post-date { + color: #888; +} \ No newline at end of file diff --git a/about.html b/about.html new file mode 100644 index 0000000..fc2aa42 --- /dev/null +++ b/about.html @@ -0,0 +1,30 @@ +--- +layout: default +title: About +--- + +
+
+
+
+
+

About

+
+
+

Hi, I'm Rob! And I'm currently working on an unannounced game.

+ +

I'm doing the art, code, music, sound effects and writing all myself so it's still quite a way out.

+ +

+ I think there needs to be more games designed for mental health, not necessarily touching on the topic but just serving as pure escapism. + We all need a break from the stress of day to day life. I hope this game can provide that for anyone who plays it. +

+

+ It's going to be an adventure, light hearted and down to earth. Expect some humour and shenanigans. As well as a lot of interactivity, secrets and surprises. +

+ +

In the meanwhile, I'm going to be writing about my progress and thoughts as I go along.

+ +

Stay tuned!

+
+
\ No newline at end of file diff --git a/articles.html b/articles.html new file mode 100644 index 0000000..1608411 --- /dev/null +++ b/articles.html @@ -0,0 +1,17 @@ +--- +layout: default +title: Blog +--- +
+
+

Articles

+ + +
+
\ No newline at end of file diff --git a/assets/css/normalize.css b/assets/css/normalize.css new file mode 100644 index 0000000..81c6f31 --- /dev/null +++ b/assets/css/normalize.css @@ -0,0 +1,427 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} \ No newline at end of file diff --git a/assets/css/skeleton.css b/assets/css/skeleton.css new file mode 100644 index 0000000..f28bf6c --- /dev/null +++ b/assets/css/skeleton.css @@ -0,0 +1,418 @@ +/* +* Skeleton V2.0.4 +* Copyright 2014, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 12/29/2014 +*/ + + +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– +- Grid +- Base Styles +- Typography +- Links +- Buttons +- Forms +- Lists +- Code +- Tables +- Spacing +- Utilities +- Clearing +- Media Queries +*/ + + +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; } +.column, +.columns { + width: 100%; + float: left; + box-sizing: border-box; } + +/* For devices larger than 400px */ +@media (min-width: 400px) { + .container { + width: 85%; + padding: 0; } +} + +/* For devices larger than 550px */ +@media (min-width: 550px) { + .container { + width: 80%; } + .column, + .columns { + margin-left: 4%; } + .column:first-child, + .columns:first-child { + margin-left: 0; } + + .one.column, + .one.columns { width: 4.66666666667%; } + .two.columns { width: 13.3333333333%; } + .three.columns { width: 22%; } + .four.columns { width: 30.6666666667%; } + .five.columns { width: 39.3333333333%; } + .six.columns { width: 48%; } + .seven.columns { width: 56.6666666667%; } + .eight.columns { width: 65.3333333333%; } + .nine.columns { width: 74.0%; } + .ten.columns { width: 82.6666666667%; } + .eleven.columns { width: 91.3333333333%; } + .twelve.columns { width: 100%; margin-left: 0; } + + .one-third.column { width: 30.6666666667%; } + .two-thirds.column { width: 65.3333333333%; } + + .one-half.column { width: 48%; } + + /* Offsets */ + .offset-by-one.column, + .offset-by-one.columns { margin-left: 8.66666666667%; } + .offset-by-two.column, + .offset-by-two.columns { margin-left: 17.3333333333%; } + .offset-by-three.column, + .offset-by-three.columns { margin-left: 26%; } + .offset-by-four.column, + .offset-by-four.columns { margin-left: 34.6666666667%; } + .offset-by-five.column, + .offset-by-five.columns { margin-left: 43.3333333333%; } + .offset-by-six.column, + .offset-by-six.columns { margin-left: 52%; } + .offset-by-seven.column, + .offset-by-seven.columns { margin-left: 60.6666666667%; } + .offset-by-eight.column, + .offset-by-eight.columns { margin-left: 69.3333333333%; } + .offset-by-nine.column, + .offset-by-nine.columns { margin-left: 78.0%; } + .offset-by-ten.column, + .offset-by-ten.columns { margin-left: 86.6666666667%; } + .offset-by-eleven.column, + .offset-by-eleven.columns { margin-left: 95.3333333333%; } + + .offset-by-one-third.column, + .offset-by-one-third.columns { margin-left: 34.6666666667%; } + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } + + .offset-by-one-half.column, + .offset-by-one-half.columns { margin-left: 52%; } + +} + + +/* Base Styles +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* NOTE +html is set to 62.5% so that all the REM measurements throughout Skeleton +are based on 10px sizing. So basically 1.5rem = 15px :) */ +html { + font-size: 62.5%; } +body { + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222; } + + +/* Typography +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 2rem; + font-weight: 300; } +h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} +h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } +h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } +h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } +h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } +h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } + +/* Larger than phablet */ +@media (min-width: 550px) { + h1 { font-size: 5.0rem; } + h2 { font-size: 4.2rem; } + h3 { font-size: 3.6rem; } + h4 { font-size: 3.0rem; } + h5 { font-size: 2.4rem; } + h6 { font-size: 1.5rem; } +} + +p { + margin-top: 0; } + + +/* Links +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +a { + color: #1EAEDB; } +a:hover { + color: #0FA0CE; } + + +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; + height: 38px; + padding: 0 30px; + color: #555; + text-align: center; + font-size: 11px; + font-weight: 600; + line-height: 38px; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border-radius: 4px; + border: 1px solid #bbb; + cursor: pointer; + box-sizing: border-box; } +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.button:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + color: #333; + border-color: #888; + outline: 0; } +.button.button-primary, +button.button-primary, +input[type="submit"].button-primary, +input[type="reset"].button-primary, +input[type="button"].button-primary { + color: #FFF; + background-color: #33C3F0; + border-color: #33C3F0; } +.button.button-primary:hover, +button.button-primary:hover, +input[type="submit"].button-primary:hover, +input[type="reset"].button-primary:hover, +input[type="button"].button-primary:hover, +.button.button-primary:focus, +button.button-primary:focus, +input[type="submit"].button-primary:focus, +input[type="reset"].button-primary:focus, +input[type="button"].button-primary:focus { + color: #FFF; + background-color: #1EAEDB; + border-color: #1EAEDB; } + + +/* Forms +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea, +select { + height: 38px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid #D1D1D1; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; } +/* Removes awkward default styles on some inputs for iOS */ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } +textarea { + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; } +input[type="email"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="text"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + border: 1px solid #33C3F0; + outline: 0; } +label, +legend { + display: block; + margin-bottom: .5rem; + font-weight: 600; } +fieldset { + padding: 0; + border-width: 0; } +input[type="checkbox"], +input[type="radio"] { + display: inline; } +label > .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } + + +/* Lists +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +ul { + list-style: circle inside; } +ol { + list-style: decimal inside; } +ol, ul { + padding-left: 0; + margin-top: 0; } +ul ul, +ul ol, +ol ol, +ol ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } +li { + margin-bottom: 1rem; } + + +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; } +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; } + + +/* Tables +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; } +th:first-child, +td:first-child { + padding-left: 0; } +th:last-child, +td:last-child { + padding-right: 0; } + + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +button, +.button { + margin-bottom: 1rem; } +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; } +pre, +blockquote, +dl, +figure, +table, +p, +ul, +ol, +form { + margin-bottom: 2.5rem; } + + +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.u-full-width { + width: 100%; + box-sizing: border-box; } +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; } +.u-pull-right { + float: right; } +.u-pull-left { + float: left; } + + +/* Misc +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #E1E1E1; } + + +/* Clearing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +/* Self Clearing Goodness */ +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; } + + +/* Media Queries +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* +Note: The best way to structure the use of media queries is to create the queries +near the relevant code. For example, if you wanted to change the styles for buttons +on small devices, paste the mobile query code up in the buttons section and style it +there. +*/ + + +/* Larger than mobile */ +@media (min-width: 400px) {} + +/* Larger than phablet (also point when grid becomes active) */ +@media (min-width: 550px) {} + +/* Larger than tablet */ +@media (min-width: 750px) {} + +/* Larger than desktop */ +@media (min-width: 1000px) {} + +/* Larger than Desktop HD */ +@media (min-width: 1200px) {} diff --git a/assets/css/styles.scss b/assets/css/styles.scss new file mode 100644 index 0000000..4e445d8 --- /dev/null +++ b/assets/css/styles.scss @@ -0,0 +1,3 @@ +--- +--- +@import "main"; \ No newline at end of file diff --git a/assets/images/avatar.png b/assets/images/avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..438627c76bb750bc586670e12e0080c8ded798ca GIT binary patch literal 2316 zcma)8YfzI{8vbOoWf52%DRD%gJGPb9g^w00u1G14HidvUgw!O2I$6nZ2@#aw7)hiZ zMNNfiYYYWUwu_WY45%Rq5|VGJ0#+bji;zeH1k5G@$z>ptkc1?S(_QP>3;a6g%sX?Q z_j%sueb2dgU>`ETZ<8MY00GG#?>PhjtGwG)fbT2b1y|gZ^Xzou5OO!rD%(5*0KUD+ zdy)>Hsxywm{Wx@J-`ojeA#I~77Lz)BZu+A+`nvV2U&HwYCkoBSxQ zMyL4q1>d1_sHF8tDOcAtyxy?7<;SKp!Y0)lgO+?#$Az^?2z_mF(O2-SU`7{T;Y`h$ zkT6cb{;bvsoO&!vaH*8y(2Hz&`EBy_T$%(AzlVL_|LzS7ZvkepqHdIds_Rhk!6oF* z*r-lo_^u8EJJdrXG-llqpgXJM3Jnx^;?XF`lZdiwv(sGVNA?Rk+INHJ_Zq`b-ZFTQ zc|5_%dMA5**!(7hV?>@UFT4S?@k zz`9i6^=jb5=v8Mw^#*$5$VQ<;J@K|=8YGXK*b>7P!W;%5Re4%B>EAfvO&P0>&uTBl~ti(Vqz)!988*d=dAP6bCBOh z*YL(Os6??4=~jwePN%1+-gBp1j!}))nva~-zzG5Hu`y6JY?2}FhC*=66e?s+_EJAFJ%|=sO3fNLN4rPt0AU>8F zHC0b^+H7hPr@Pw z>4xtKFv@fOhKR0Wl{Yjq$#Yg*F zZ~F}Fgv z8jrS$_WncWaMgP7ZT6LH^-f%kiG6YfR;xJr(^bZ?nZ2JAy6ZD+He?g+%}cP)72VqU z70@AsoR%aZl$1n2vrNM6&Z9M;s zm4CmRa1YV1RI)@erVhN8Fp@wuIkUZ<8_mOvE93RsCu4FoK0mD9H%^&Au_a`32 zI47H98te_m=EMT&|l4J~b0Ox{9zU zo@;6YCt?sP(!%3>NJ8VbTjRpMF(;_66W=(W>68ujg#PZBdQNY9AWs@u6j87SA5^)H z%o7fF2;_m+mXd7-`9pOSFKf)%ulvFc?2_dLo>d#%oV>&>H{bQ^YY@rvoX+qMtmQ*WxSj~Z{M|mS$N1Q zHx4oIlGA*ubx=fR%B2#1dTk=Lg-Vf0T(#Hd$Nn>>^A70bR+r^;u6ud|F~zdAGHizJ z8opT3NnFV!lw)QS_byeIOc~tGr(|?(swM5V2twB+Mu%0;q!e4#zAKNZ{TvNJAI6XRWf&Ilp+755=F64vg(jI!}gSlch@2C2R5#th#?*|;yCnZ zoNGjpjV?Y8`PCDuR7AfS3mt?52ktFXAS*aJIk4%TCjGYedjllz-M6Q8_otuz46Y&# ArT_o{ literal 0 HcmV?d00001 diff --git a/categories.html b/categories.html new file mode 100644 index 0000000..1ec9b90 --- /dev/null +++ b/categories.html @@ -0,0 +1,17 @@ +--- +layout: default +title: Categories +--- +
+
+

Categories

+ + +
+
\ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a58272b --- /dev/null +++ b/index.html @@ -0,0 +1,9 @@ +--- +layout: default +title: Home +--- +
+

Rob Zed Games

+

Currently working on an unannounced title.

+

All art, code, music, sounds and writing done by me.

+
\ No newline at end of file