diff options
| -rw-r--r-- | src/_includes/partials/header.njk | 14 | ||||
| -rw-r--r-- | src/css/styles.css | 147 | ||||
| -rw-r--r-- | 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 @@ <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"> |