aswi20220x00-gitlab/webapp/styles/Home.module.css @ 15c88dc1
1 | 56cc66d8 | Lukáš Vlček | .container { |
---|---|---|---|
2 | padding: 0 2rem; |
||
3 | }
|
||
4 | |||
5 | .main { |
||
6 | min-height: 100vh; |
||
7 | padding: 4rem 0; |
||
8 | flex: 1; |
||
9 | display: flex; |
||
10 | flex-direction: column; |
||
11 | justify-content: center; |
||
12 | align-items: center; |
||
13 | }
|
||
14 | |||
15 | .footer { |
||
16 | display: flex; |
||
17 | flex: 1; |
||
18 | padding: 2rem 0; |
||
19 | border-top: 1px solid #eaeaea; |
||
20 | justify-content: center; |
||
21 | align-items: center; |
||
22 | }
|
||
23 | |||
24 | .footer a { |
||
25 | display: flex; |
||
26 | justify-content: center; |
||
27 | align-items: center; |
||
28 | flex-grow: 1; |
||
29 | }
|
||
30 | |||
31 | .title a { |
||
32 | color: #0070f3; |
||
33 | text-decoration: none; |
||
34 | }
|
||
35 | |||
36 | .title a:hover, |
||
37 | .title a:focus, |
||
38 | .title a:active { |
||
39 | text-decoration: underline; |
||
40 | }
|
||
41 | |||
42 | .title { |
||
43 | margin: 0; |
||
44 | line-height: 1.15; |
||
45 | font-size: 4rem; |
||
46 | }
|
||
47 | |||
48 | .title, |
||
49 | .description { |
||
50 | text-align: center; |
||
51 | }
|
||
52 | |||
53 | .description { |
||
54 | margin: 4rem 0; |
||
55 | line-height: 1.5; |
||
56 | font-size: 1.5rem; |
||
57 | }
|
||
58 | |||
59 | .code { |
||
60 | background: #fafafa; |
||
61 | border-radius: 5px; |
||
62 | padding: 0.75rem; |
||
63 | font-size: 1.1rem; |
||
64 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, |
||
65 | Bitstream Vera Sans Mono, Courier New, monospace; |
||
66 | }
|
||
67 | |||
68 | .grid { |
||
69 | display: flex; |
||
70 | align-items: center; |
||
71 | justify-content: center; |
||
72 | flex-wrap: wrap; |
||
73 | max-width: 800px; |
||
74 | }
|
||
75 | |||
76 | .card { |
||
77 | margin: 1rem; |
||
78 | padding: 1.5rem; |
||
79 | text-align: left; |
||
80 | color: inherit; |
||
81 | text-decoration: none; |
||
82 | border: 1px solid #eaeaea; |
||
83 | border-radius: 10px; |
||
84 | transition: color 0.15s ease, border-color 0.15s ease; |
||
85 | max-width: 300px; |
||
86 | }
|
||
87 | |||
88 | .card:hover, |
||
89 | .card:focus, |
||
90 | .card:active { |
||
91 | color: #0070f3; |
||
92 | border-color: #0070f3; |
||
93 | }
|
||
94 | |||
95 | .card h2 { |
||
96 | margin: 0 0 1rem 0; |
||
97 | font-size: 1.5rem; |
||
98 | }
|
||
99 | |||
100 | .card p { |
||
101 | margin: 0; |
||
102 | font-size: 1.25rem; |
||
103 | line-height: 1.5; |
||
104 | }
|
||
105 | |||
106 | .logo { |
||
107 | height: 1em; |
||
108 | margin-left: 0.5rem; |
||
109 | }
|
||
110 | |||
111 | @media (max-width: 600px) { |
||
112 | .grid { |
||
113 | width: 100%; |
||
114 | flex-direction: column; |
||
115 | }
|
||
116 | }
|