aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorIndrajith K L2022-11-20 05:45:40 +0530
committerIndrajith K L2022-11-20 05:45:40 +0530
commitded596d68271b3785e4432eeff036fe9a686b141 (patch)
treeb79c0bc7e30bbe87b00e33dc02560aa9a5b14d34 /src
parentff11d9e237e51a5eb40690e44f690108ac7175b7 (diff)
downloadindrajith-dev-ded596d68271b3785e4432eeff036fe9a686b141.tar.gz
indrajith-dev-ded596d68271b3785e4432eeff036fe9a686b141.tar.bz2
indrajith-dev-ded596d68271b3785e4432eeff036fe9a686b141.zip
Updates Big List of Game Development Tools
* Layout Changes
Diffstat (limited to 'src')
-rw-r--r--src/_includes/partials/header.njk14
-rw-r--r--src/css/styles.css147
-rw-r--r--src/posts/big-list-game-dev.njk55
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 @@
<h1><a class="logo" href="/">indrajith.dev</a></h1>
<nav>
<ul>
- <li><a href="/about" id="about" class="links">About</a></li>
- |
- <li><a href="/posts" id="posts" class="links">Posts</a></li>
- |
- <li><a href="/timeline" id="cv" class="links">Timeline</a></li>
- |
- <li><a href="https://git.indrajith.dev" id="cv" class="links">git</a></li>
- |
- <li><a href="/contact" id="cv" class="links">Contact</a></li>
+ <li><a href="/about" class="hvr-wobble-bottom" id="about" class="links">About</a></li>
+ <li><a href="/posts" class="hvr-wobble-bottom" id="posts" class="links">Posts</a></li>
+ <li><a href="/timeline" class="hvr-wobble-bottom" id="cv" class="links">Timeline</a></li>
+ <li><a href="https://git.indrajith.dev" class="hvr-wobble-bottom" id="cv" class="links">git</a></li>
+ <li><a href="/contact" id="cv" class="links hvr-wobble-bottom">Contact</a></li>
</ul>
</nav>
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.
</p>
<div>
- <div>
- <table>
- <thead>
- <tr>
- <th scope="col"></th>
- <th scope="col">
- Tool Type
- </th>
- <th scope="col">
- Supported Graphics
- </th>
- <th scope="col">
- Development Environment
- </th>
- </tr>
- </thead>
- <tbody>
- {% for tool in gtools.gameTools%}
- <tr>
- <td>
- <a href={{tool.link}}>{{tool.toolName}}</a>
- </td>
- <td>
- {{tool.type}}
- </td>
- <td>
- {{tool.graphics}}
- </td>
- <td>
- {{tool.os}}
- </td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
+ <div class="tools-container">
+ {% for tool in gtools.gameTools%}
+ <div class="tool">
+ <div class="tool-name">
+ <a href={{tool.link}}>{{tool.toolName}}</a>
+ </div>
+ <div class="tool-type mt-10">
+ <label for="tool-type">Type : </label>
+ {{tool.type}}
+ </div>
+ <div class="tool-graphics">
+ <label for="tool-graphics">Graphics Supported : </label>
+ {{tool.graphics}}
+ </div>
+ <div class="tool-os">
+ <label for="tool-os">Development OS: </label>
+ {{tool.os}}
+ </div>
+ </div>
+ {% endfor %}
</div>
</div>
<div class="mt-10">