Hugging Face's logo

Spaces:
Docfile
/
Mariam-metho
Sleeping

App Files Community
Docfile commited on
Commit
7acb0e7
·
verified ·
1 Parent(s): e03dbe7

Upload style.css

Browse files
Files changed (1) hide show
  1. static/css/style.css +161 -152
static/css/style.css CHANGED
@@ -1,136 +1,142 @@
1
- /* Custom styles for elegant, mobile-first design */
2
- @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
3
-
4
- body {
5
- font-family: 'Roboto', sans-serif;
6
- background-color: #f8f9fa;
7
- color: #212529;
8
- line-height: 1.6;
9
- }
10
-
11
- .container {
12
- max-width: 1200px;
13
- margin: 0 auto;
14
- padding: 0 15px;
15
- }
16
-
17
- .header {
18
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
- color: white;
20
- padding: 1rem 0;
21
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
22
- }
23
-
24
- .header h1 {
25
- margin: 0;
26
- font-size: 1.5rem;
27
- font-weight: 500;
28
- }
29
-
30
- .navbar {
31
- background-color: #fff;
32
- border-bottom: 1px solid #e9ecef;
33
- padding: 0.5rem 0;
34
- }
35
-
36
- .navbar .nav-link {
37
- color: #495057;
38
- font-weight: 500;
39
- transition: color 0.3s ease;
40
- }
41
-
42
- .navbar .nav-link:hover {
43
- color: #667eea;
44
- }
45
-
46
- .card {
47
- border: none;
48
- border-radius: 12px;
49
- box-shadow: 0 4px 6px rgba(0,0,0,0.07);
50
- transition: transform 0.3s ease, box-shadow 0.3s ease;
51
- margin-bottom: 1rem;
52
- }
53
-
54
- .card:hover {
55
- transform: translateY(-2px);
56
- box-shadow: 0 8px 25px rgba(0,0,0,0.15);
57
- }
58
-
59
- .card-img-top {
60
- border-radius: 12px 12px 0 0;
61
- height: 150px;
62
- object-fit: cover;
63
- }
64
-
65
- .card-body {
66
- padding: 1.5rem;
67
- }
68
-
69
- .card-title {
70
- font-size: 1.1rem;
71
- font-weight: 600;
72
- color: #495057;
73
- margin-bottom: 0.5rem;
74
- }
75
-
76
- .btn-primary {
77
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
78
- border: none;
79
- border-radius: 8px;
80
- padding: 0.75rem 1.5rem;
81
- font-weight: 500;
82
- transition: transform 0.2s ease;
83
- }
84
-
85
- .btn-primary:hover {
86
- transform: translateY(-1px);
87
- background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
88
- }
89
-
90
- .btn-secondary {
91
- background-color: #6c757d;
92
- border: none;
93
- border-radius: 8px;
94
- padding: 0.5rem 1rem;
95
- font-weight: 500;
96
- }
97
-
98
- .footer {
99
- background-color: #343a40;
100
- color: #adb5bd;
101
- text-align: center;
102
- padding: 1rem 0;
103
- margin-top: 2rem;
104
- }
105
-
106
- .article-content {
107
- background: white;
108
- border-radius: 12px;
109
- padding: 2rem;
110
- box-shadow: 0 4px 6px rgba(0,0,0,0.07);
111
- margin-top: 1rem;
112
- }
113
-
114
- .article-content h1 {
115
- color: #495057;
116
- font-weight: 700;
117
- margin-bottom: 1rem;
118
- }
119
-
120
  .article-content p {
121
  margin-bottom: 1rem;
122
  }
123
 
124
- .breadcrumb {
125
- background-color: transparent;
126
- padding: 0;
127
- margin-bottom: 1rem;
128
- }
129
-
130
- .breadcrumb-item a {
131
- color: #667eea;
132
- }
133
-
 
 
 
 
 
 
134
  /* Mobile optimizations */
135
  @media (max-width: 576px) {
136
  .header h1 {
@@ -142,7 +148,10 @@ body {
142
  }
143
 
144
  .article-content {
145
- padding: 1rem;
 
 
 
146
  }
147
 
148
  .btn {
@@ -150,26 +159,26 @@ body {
150
  margin-bottom: 0.5rem;
151
  }
152
  }
153
-
154
- /* Admin specific */
155
- .admin-nav {
156
- background-color: #f8f9fa;
157
- border-radius: 8px;
158
- padding: 1rem;
159
- margin-bottom: 1rem;
160
- }
161
-
162
- .admin-nav a {
163
- display: inline-block;
164
- margin: 0.25rem;
165
- padding: 0.5rem 1rem;
166
- background-color: #667eea;
167
- color: white;
168
- text-decoration: none;
169
- border-radius: 6px;
170
- transition: background-color 0.3s ease;
171
- }
172
-
173
- .admin-nav a:hover {
174
- background-color: #5a6fd8;
175
  }
 
1
+ /* Custom styles for elegant, mobile-first design */
2
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
3
+
4
+ body {
5
+ font-family: 'Roboto', sans-serif;
6
+ background-color: #f8f9fa;
7
+ color: #212529;
8
+ line-height: 1.6;
9
+ }
10
+
11
+ .container {
12
+ max-width: 1200px;
13
+ margin: 0 auto;
14
+ padding: 0 15px;
15
+ }
16
+
17
+ .header {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ color: white;
20
+ padding: 1rem 0;
21
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
22
+ }
23
+
24
+ .header h1 {
25
+ margin: 0;
26
+ font-size: 1.5rem;
27
+ font-weight: 500;
28
+ }
29
+
30
+ .navbar {
31
+ background-color: #fff;
32
+ border-bottom: 1px solid #e9ecef;
33
+ padding: 0.5rem 0;
34
+ }
35
+
36
+ .navbar .nav-link {
37
+ color: #495057;
38
+ font-weight: 500;
39
+ transition: color 0.3s ease;
40
+ }
41
+
42
+ .navbar .nav-link:hover {
43
+ color: #667eea;
44
+ }
45
+
46
+ .card {
47
+ border: none;
48
+ border-radius: 12px;
49
+ box-shadow: 0 4px 6px rgba(0,0,0,0.07);
50
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
51
+ margin-bottom: 1rem;
52
+ }
53
+
54
+ .card:hover {
55
+ transform: translateY(-2px);
56
+ box-shadow: 0 8px 25px rgba(0,0,0,0.15);
57
+ }
58
+
59
+ .card-img-top {
60
+ border-radius: 12px 12px 0 0;
61
+ height: 150px;
62
+ object-fit: cover;
63
+ }
64
+
65
+ .card-body {
66
+ padding: 1.5rem;
67
+ }
68
+
69
+ .card-title {
70
+ font-size: 1.1rem;
71
+ font-weight: 600;
72
+ color: #495057;
73
+ margin-bottom: 0.5rem;
74
+ }
75
+
76
+ .btn-primary {
77
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
78
+ border: none;
79
+ border-radius: 8px;
80
+ padding: 0.75rem 1.5rem;
81
+ font-weight: 500;
82
+ transition: transform 0.2s ease;
83
+ }
84
+
85
+ .btn-primary:hover {
86
+ transform: translateY(-1px);
87
+ background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
88
+ }
89
+
90
+ .btn-secondary {
91
+ background-color: #6c757d;
92
+ border: none;
93
+ border-radius: 8px;
94
+ padding: 0.5rem 1rem;
95
+ font-weight: 500;
96
+ }
97
+
98
+ .footer {
99
+ background-color: #343a40;
100
+ color: #adb5bd;
101
+ text-align: center;
102
+ padding: 1rem 0;
103
+ margin-top: 2rem;
104
+ }
105
+
106
+ .article-content {
107
+ background: white;
108
+ border-radius: 12px;
109
+ padding: 2rem;
110
+ box-shadow: 0 4px 6px rgba(0,0,0,0.07);
111
+ margin-top: 1rem;
112
+ }
113
+
114
+ .article-content h1 {
115
+ color: #495057;
116
+ font-weight: 700;
117
+ margin-bottom: 1rem;
118
+ }
119
+
120
  .article-content p {
121
  margin-bottom: 1rem;
122
  }
123
 
124
+ .trix-content img {
125
+ width: 100%;
126
+ height: auto;
127
+ cursor: pointer;
128
+ }
129
+
130
+ .breadcrumb {
131
+ background-color: transparent;
132
+ padding: 0;
133
+ margin-bottom: 1rem;
134
+ }
135
+
136
+ .breadcrumb-item a {
137
+ color: #667eea;
138
+ }
139
+
140
  /* Mobile optimizations */
141
  @media (max-width: 576px) {
142
  .header h1 {
 
148
  }
149
 
150
  .article-content {
151
+ background: none;
152
+ border-radius: 0;
153
+ box-shadow: none;
154
+ padding: 0.5rem;
155
  }
156
 
157
  .btn {
 
159
  margin-bottom: 0.5rem;
160
  }
161
  }
162
+
163
+ /* Admin specific */
164
+ .admin-nav {
165
+ background-color: #f8f9fa;
166
+ border-radius: 8px;
167
+ padding: 1rem;
168
+ margin-bottom: 1rem;
169
+ }
170
+
171
+ .admin-nav a {
172
+ display: inline-block;
173
+ margin: 0.25rem;
174
+ padding: 0.5rem 1rem;
175
+ background-color: #667eea;
176
+ color: white;
177
+ text-decoration: none;
178
+ border-radius: 6px;
179
+ transition: background-color 0.3s ease;
180
+ }
181
+
182
+ .admin-nav a:hover {
183
+ background-color: #5a6fd8;
184
  }