mizzzuno commited on
Commit
777b97c
·
verified ·
1 Parent(s): 32fe581

Upload 2 files

Browse files
Files changed (2) hide show
  1. static/main.css +40 -0
  2. static/menu.css +56 -0
static/main.css ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Responsive Design */
2
+ @media (max-width: 640px) {
3
+ .w-72 {
4
+ width: 95%;
5
+ }
6
+ .h-72 {
7
+ height: 350px;
8
+ }
9
+ }
10
+ /* Main Container */
11
+ body {
12
+ background: linear-gradient(135deg, #2c3e50, #1f2937);
13
+ display: flex;
14
+ align-items: center;
15
+ justify-content: center;
16
+ min-height: 100vh;
17
+ font-family: "Arial", sans-serif;
18
+ color: #fff;
19
+ }
20
+
21
+ /* Main Content Wrapper */
22
+ .main-content {
23
+ border: 5px solid rgba(255, 255, 255, 0.2);
24
+ padding: 2rem;
25
+ border-radius: 1rem;
26
+ width: 90%;
27
+ max-width: 500px;
28
+ background-color: rgba(0, 0, 0, 0.3);
29
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
30
+ text-align: center;
31
+ }
32
+
33
+ /* Title */
34
+ .main-title {
35
+ font-size: 2.5rem;
36
+ font-weight: bold;
37
+ margin-bottom: 1.5rem;
38
+ color: #fff;
39
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
40
+ }
static/menu.css ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Hamburger Menu Styles */
2
+ #menu {
3
+ position: absolute;
4
+ top: 0;
5
+ left: 0;
6
+ z-index: 10;
7
+ transform: translateX(-100%);
8
+ visibility: hidden;
9
+ opacity: 0;
10
+ background-color: rgb(31, 41, 55);
11
+ transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
12
+ backdrop-filter: blur(10px);
13
+ border-right: 1px solid rgba(255, 255, 255, 0.2);
14
+ }
15
+
16
+ #menu.open {
17
+ transform: translateX(0);
18
+ visibility: visible;
19
+ opacity: 1;
20
+ }
21
+
22
+ #menu button {
23
+ transition: background-color 0.2s ease;
24
+ background-color: rgba(0, 0, 0, 0.1);
25
+ margin: 2px;
26
+ border-radius: 8px; /* 少し角を丸める */
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: flex-start;
30
+ gap: 10px;
31
+ padding: 0.75rem 1rem;
32
+ width: 100%;
33
+ text-align: left;
34
+ border: none;
35
+ color: #fff;
36
+ font-size: 1rem;
37
+ cursor: pointer;
38
+ }
39
+
40
+ #menu button:hover {
41
+ background-color: rgba(55, 65, 81, 0.7);
42
+ }
43
+
44
+ /* Hamburger Menu Button */
45
+ #menuButton {
46
+ background-color: rgba(255, 255, 255, 0.1);
47
+ border: none;
48
+ border-radius: 50%;
49
+ padding: 0.75rem; /* サイズを少し大きく */
50
+ cursor: pointer;
51
+ transition: background-color 0.2s ease;
52
+ }
53
+
54
+ #menuButton:hover {
55
+ background-color: rgba(255, 255, 255, 0.2);
56
+ }