Python-Type-Challenges/templates/index.html at 248d52c7b37a1d1bc258ca690623228e47744f56 · laike9m/Python-Type-Challenges · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
{% extends "base.html" %}

{% set title = "Python Type Challenges - Learn & Master Type Hints" %}
{% block head %}
  {{ super() }}
  <title>{{title}}</title>
  <meta name="description" content="{{description}}">
  <meta name="google-site-verification" content="IB8oI3WkbGLDND4SMC6m_EiPmREdddxly_JUS-lbM_A" />
  <link href="https://fonts.loli.net/css2?family=IBM+Plex+Mono:wght@300;500;700&family=Poppins&display=swap"
        rel="stylesheet">
  <style>
    .main-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1rem;
      font-family: 'IBM Plex Mono', monospace;
    }

    .title {
      font-size: 2.5rem;
      text-align: center;
      margin-bottom: 3rem;
      font-family: inherit;
    }

    .random-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 10px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      width: 20%;
      margin-top: 24px;
    }

    .challenges {
      display: grid;
      grid-template-columns: repeat(4, minmax(280px, 1fr));
      gap: 24px;
      grid-template-rows: auto;
      justify-items: center;
    }

    @media only screen and (max-width: 800px) {
      .main-container {
        height: 100%;
        margin: 4rem auto;
      }

      .title {
        width: 80%;
      }

      .challenges {
        grid-template-columns: 1fr;
        width: 80%;
      }

      .random-button {
        width: 50%;
      }
    }


    @media only screen and (max-width: 1080px) and (min-width: 800px) {
      .challenges {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  </style>
{% endblock %}

{% block content %}

  <div class="main-container">
    <h1 class="title">Welcome to Python Type Challenges!</h1>
    <div class="challenges">
      {% for level, challenge_names in challenges_groupby_level.items() %}
        {% include 'components/challenge_card.html' with context %}
      {% endfor%}
    </div>
    <div class="random-button"><a href="{{pathname}}" title="Pick a random challenge">Random Challenge 🔀</a></div>
  </div>

{% endblock %}