|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html lang="fr"> |
3 | 3 | <head> |
4 | | - <meta http-equiv="content-type" content="text/html; charset=utf-8"/> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
5 | 6 | <meta name="csrf-token" content="{{ csrf_token() }}"/> |
6 | 7 | <link rel="icon" type="image/x-icon" href="/favicon.png"/> |
7 | | - <link rel="shortcut icon" type="image/x-icon" href="/favicon.png"> |
8 | | - <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;600&display=swap" rel="stylesheet"> |
9 | | - <title>%inject("title", "It's Worked")</title> |
| 8 | + <title>%inject("title", "Bow Framework")</title> |
| 9 | + <link rel="preconnect" href="https://fonts.bunny.net"> |
| 10 | + <link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700" rel="stylesheet" /> |
10 | 11 | <style> |
11 | | - * { |
| 12 | + *, *::before, *::after { |
| 13 | + box-sizing: border-box; |
12 | 14 | margin: 0; |
13 | 15 | padding: 0; |
14 | 16 | } |
15 | 17 |
|
16 | | - html, body { |
17 | | - width: 100%; |
18 | | - height: 100%; |
19 | | - font-size: 100%; |
| 18 | + :root { |
| 19 | + --bow-red: #e63946; |
| 20 | + --bow-red-dark: #c1121f; |
| 21 | + --bow-dark: #1d1d1d; |
| 22 | + --bow-darker: #141414; |
| 23 | + --bow-light: #f8f9fa; |
| 24 | + --bow-gray: #6c757d; |
| 25 | + --bow-border: #2d2d2d; |
20 | 26 | } |
21 | 27 |
|
22 | | - body { |
23 | | - font-family: 'Montserrat', sans-serif; |
24 | | - color: #fff; |
25 | | - background-color: #181818; |
26 | | - } |
27 | | -
|
28 | | - #main { |
29 | | - display: flex; |
30 | | - flex-direction: column; |
31 | | - position: relative; |
32 | | - height: 100vh; |
33 | | - width: 100vw; |
34 | | - overflow: hidden; |
35 | | - } |
36 | | -
|
37 | | - #main .banner { |
38 | | - flex: 3; |
39 | | - display: flex; |
40 | | - flex-direction: column; |
41 | | - align-items: center; |
42 | | - justify-content: center; |
43 | | - background-color: rgba(0, 0, 0, 0.05); |
44 | | - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
45 | | - color: white; |
46 | | - } |
47 | | -
|
48 | | - .banner img { |
49 | | - height: 80px; |
50 | | - opacity: 0.5; |
51 | | - } |
52 | | -
|
53 | | - .sub-banner { |
54 | | - flex: 1; |
55 | | - display: flex; |
56 | | - flex-direction: row; |
57 | | - align-items: center; |
58 | | - justify-content: space-around; |
59 | | - width: 100%; |
| 28 | + html { |
| 29 | + line-height: 1.6; |
| 30 | + scroll-behavior: smooth; |
60 | 31 | } |
61 | 32 |
|
62 | | - .sub-banner a { |
63 | | - flex: 0 0 120px; |
64 | | - width: 120px; |
65 | | - filter: grayscale(100%); |
66 | | - margin-right: 40px; |
67 | | - opacity: 0.3; |
68 | | - text-align: center; |
69 | | - } |
70 | | -
|
71 | | - .sub-banner a:hover { |
72 | | - filter: unset; |
73 | | - opacity: 0.8; |
74 | | - } |
75 | | -
|
76 | | - .sub-banner a:first-child img{ |
77 | | - width: 60px; |
78 | | - } |
79 | | -
|
80 | | - .sub-banner a > img { |
81 | | - width: 100%; |
82 | | - height: auto; |
| 33 | + body { |
| 34 | + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| 35 | + background: var(--bow-darker); |
| 36 | + color: var(--bow-light); |
| 37 | + min-height: 100vh; |
83 | 38 | } |
84 | 39 |
|
85 | 40 | a { |
86 | | - color: #bd362f; |
| 41 | + color: var(--bow-red); |
87 | 42 | text-decoration: none; |
| 43 | + transition: color 0.2s; |
88 | 44 | } |
89 | 45 |
|
90 | 46 | a:hover { |
91 | | - text-decoration: underline; |
92 | | - } |
93 | | -
|
94 | | - h1 { |
95 | | - color: white; |
96 | | - font-size: 42px; |
97 | | - font-weight: 600; |
98 | | - line-height: 1.8; |
| 47 | + color: var(--bow-red-dark); |
99 | 48 | } |
100 | 49 | </style> |
101 | 50 | </head> |
102 | 51 | <body> |
103 | | - <main id="main"> |
104 | | - %inject('content') |
105 | | - </main> |
| 52 | + %inject('content') |
106 | 53 | </body> |
107 | 54 | </html> |
0 commit comments