From ded596d68271b3785e4432eeff036fe9a686b141 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Sun, 20 Nov 2022 05:45:40 +0530 Subject: Updates Big List of Game Development Tools * Layout Changes --- src/_includes/partials/header.njk | 14 ++-- src/css/styles.css | 147 ++++++++++++++++++++++++++++++++++---- src/posts/big-list-game-dev.njk | 55 ++++++-------- 3 files changed, 160 insertions(+), 56 deletions(-) diff --git a/src/_includes/partials/header.njk b/src/_includes/partials/header.njk index 0f27845..dde835c 100644 --- a/src/_includes/partials/header.njk +++ b/src/_includes/partials/header.njk @@ -2,15 +2,11 @@

diff --git a/src/css/styles.css b/src/css/styles.css index 73aeb0c..cd420a7 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -6,7 +6,8 @@ src: url("./fonts/Cotory-rgwd9.ttf"); } -html,body { +html, +body { margin: 0; padding: 0; } @@ -32,20 +33,25 @@ footer { .header { text-align: center; } + .header nav { display: block; } -.header ul, footer ul { +.header ul, +footer ul { padding: 0px; } .header ul>li { display: inline-block; - padding: 10px; text-align: center; } +.header ul>li:not(:last-child):after { + content: " | "; +} + .header ul>li a { text-decoration: none; font-size: 15px; @@ -89,7 +95,9 @@ table { border-collapse: collapse; } -th, tr, td { +th, +tr, +td { border: 1px solid; } @@ -115,12 +123,127 @@ table td { margin-bottom: 5px; } -@media (max-width:1000px) { - body { - font-size: 80%; - padding: 3%; - } - #blog img{ - max-width: 80%; - } +@media (max-width:1000px) { + body { + font-size: 80%; + padding: 3%; + } + + #blog img { + max-width: 80%; + } } + + +/* Wobble Bottom */ +@-webkit-keyframes hvr-wobble-bottom { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } +} + +@keyframes hvr-wobble-bottom { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } +} + +.hvr-wobble-bottom { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + -webkit-transform-origin: 100% 0; + transform-origin: 100% 0; +} + +.hvr-wobble-bottom:hover, +.hvr-wobble-bottom:focus, +.hvr-wobble-bottom:active { + -webkit-animation-name: hvr-wobble-bottom; + animation-name: hvr-wobble-bottom; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + + +.tools-container { + --auto-grid-min-size: 16rem; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr)); + grid-gap: 1rem; +} + +.tool { + border: 1px solid #000000; + width: 252px; + margin: 10px; + padding: 10px; + box-shadow: 2px 6px; +} + +.tools-container .tool-name *{ + font-weight: bold; + color: #000000; +} + +.tools-container label{ + font-weight: bold; +} \ No newline at end of file diff --git a/src/posts/big-list-game-dev.njk b/src/posts/big-list-game-dev.njk index ac97cb3..ec418da 100644 --- a/src/posts/big-list-game-dev.njk +++ b/src/posts/big-list-game-dev.njk @@ -15,41 +15,26 @@ in developing your dream game/prototypes.

-
- - - - - - - - - - - {% for tool in gtools.gameTools%} - - - - - - - {% endfor %} - -
- Tool Type - - Supported Graphics - - Development Environment -
- {{tool.toolName}} - - {{tool.type}} - - {{tool.graphics}} - - {{tool.os}} -
+
+ {% for tool in gtools.gameTools%} +
+
+ {{tool.toolName}} +
+
+ + {{tool.type}} +
+
+ + {{tool.graphics}} +
+
+ + {{tool.os}} +
+
+ {% endfor %}
-- cgit v1.2.3