kgames

KGames — free keyboard games for kids
git clone https://www.keyboard.games/code/kgames.git
Log | Files | Refs | README | LICENSE

style.css (2018B)

      1 :root {
      2   --red:   #E63946;
      3   --blue:  #1D7CF2;
      4   --yellow:#FFD23F;
      5   --green: #2EC4B6;
      6   --navy:  #1A1A2E;
      7   --bg:    #FFFFFF;
      8 }
      9 
     10 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     11 
     12 body {
     13   font-family: 'Baloo 2', cursive, sans-serif;
     14   background: var(--bg);
     15   color: var(--navy);
     16   min-height: 100vh;
     17   display: flex;
     18   flex-direction: column;
     19 }
     20 
     21 /* ── Header ── */
     22 header {
     23   text-align: center;
     24   padding: 2.5rem 1rem 1rem;
     25 }
     26 
     27 h1 {
     28   font-family: 'Fredoka', sans-serif;
     29   font-size: clamp(3rem, 10vw, 6rem);
     30   font-weight: 600;
     31   line-height: 1;
     32   letter-spacing: 0.02em;
     33 }
     34 
     35 .tagline {
     36   font-size: 1.2rem;
     37   color: #555;
     38   margin-top: 0.5rem;
     39 }
     40 
     41 /* ── Grid ── */
     42 main {
     43   flex: 1;
     44   padding: 2rem 1.5rem;
     45   max-width: 1100px;
     46   width: 100%;
     47   margin: 0 auto;
     48 }
     49 
     50 #game-grid {
     51   display: grid;
     52   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     53   gap: 1.25rem;
     54 }
     55 
     56 /* ── Tiles ── */
     57 .game-tile {
     58   display: flex;
     59   flex-direction: column;
     60   align-items: center;
     61   padding: 1.25rem 1rem 1rem;
     62   border: 4px solid currentColor;
     63   border-radius: 16px;
     64   text-decoration: none;
     65   color: var(--navy);
     66   background: #fff;
     67   transition: transform 0.15s ease, box-shadow 0.15s ease;
     68   cursor: pointer;
     69 }
     70 
     71 a.game-tile:hover,
     72 a.game-tile:focus-visible {
     73   transform: translateY(-4px);
     74   box-shadow: 0 6px 18px rgba(0,0,0,0.12);
     75   outline: none;
     76 }
     77 
     78 a.game-tile:focus-visible {
     79   outline: 3px dashed currentColor;
     80   outline-offset: 3px;
     81 }
     82 
     83 .tile-thumb {
     84   width: 100%;
     85   max-width: 160px;
     86   height: 130px;
     87   object-fit: contain;
     88 }
     89 
     90 .tile-title {
     91   font-family: 'Fredoka', sans-serif;
     92   font-size: 1.15rem;
     93   font-weight: 600;
     94   margin-top: 0.6rem;
     95   text-align: center;
     96 }
     97 
     98 /* ── Coming-soon state ── */
     99 .game-tile.coming-soon {
    100   filter: grayscale(1);
    101   opacity: 0.45;
    102   pointer-events: none;
    103   cursor: default;
    104 }
    105 
    106 /* ── Footer ── */
    107 footer {
    108   text-align: center;
    109   padding: 1.25rem;
    110   font-size: 0.85rem;
    111   color: #888;
    112 }
    113 
    114 footer a { color: #888; }