Spaces:
Running
Running
Make UI fully responsive for mobile devices
Browse files- Temperature cards now stack vertically on mobile
- Adjusted font sizes and padding for mobile screens
- Improved spacing and layout for better mobile experience
- SVG previews maintain proper aspect ratio on all devices
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
- index.html +36 -6
index.html
CHANGED
|
@@ -65,6 +65,13 @@
|
|
| 65 |
gap: 15px;
|
| 66 |
}
|
| 67 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 68 |
.temp-card {
|
| 69 |
border: 1px solid #eee;
|
| 70 |
overflow: hidden;
|
|
@@ -112,22 +119,45 @@
|
|
| 112 |
|
| 113 |
|
| 114 |
@media (max-width: 768px) {
|
| 115 |
-
.
|
| 116 |
-
|
| 117 |
}
|
| 118 |
|
| 119 |
h1 {
|
| 120 |
-
font-size:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 121 |
}
|
| 122 |
|
| 123 |
-
.
|
| 124 |
-
font-size:
|
|
|
|
| 125 |
}
|
| 126 |
}
|
| 127 |
</style>
|
| 128 |
</head>
|
| 129 |
<body>
|
| 130 |
-
<div >
|
| 131 |
<h1>Pelican Bicycle SVG Benchmark</h1>
|
| 132 |
<p class="subtitle">Testing AI models' ability to create SVG art of a pelican riding a bicycle<br>
|
| 133 |
Benchmark created by <a href="https://simonwillison.net/" target="_blank" style="color: #666;">Simon Willison</a><br>
|
|
|
|
| 65 |
gap: 15px;
|
| 66 |
}
|
| 67 |
|
| 68 |
+
@media (max-width: 768px) {
|
| 69 |
+
.temperature-grid {
|
| 70 |
+
grid-template-columns: 1fr;
|
| 71 |
+
gap: 10px;
|
| 72 |
+
}
|
| 73 |
+
}
|
| 74 |
+
|
| 75 |
.temp-card {
|
| 76 |
border: 1px solid #eee;
|
| 77 |
overflow: hidden;
|
|
|
|
| 119 |
|
| 120 |
|
| 121 |
@media (max-width: 768px) {
|
| 122 |
+
.container {
|
| 123 |
+
padding: 10px;
|
| 124 |
}
|
| 125 |
|
| 126 |
h1 {
|
| 127 |
+
font-size: 1.5em;
|
| 128 |
+
margin-bottom: 10px;
|
| 129 |
+
}
|
| 130 |
+
|
| 131 |
+
.subtitle {
|
| 132 |
+
font-size: 0.8em;
|
| 133 |
+
margin-bottom: 20px;
|
| 134 |
+
}
|
| 135 |
+
|
| 136 |
+
.model-group {
|
| 137 |
+
padding: 15px;
|
| 138 |
+
margin-bottom: 20px;
|
| 139 |
+
}
|
| 140 |
+
|
| 141 |
+
.model-group-header {
|
| 142 |
+
font-size: 1em;
|
| 143 |
+
margin-bottom: 10px;
|
| 144 |
+
padding-bottom: 8px;
|
| 145 |
+
}
|
| 146 |
+
|
| 147 |
+
.svg-preview {
|
| 148 |
+
height: 250px;
|
| 149 |
+
padding: 15px;
|
| 150 |
}
|
| 151 |
|
| 152 |
+
.temp-header {
|
| 153 |
+
font-size: 0.8em;
|
| 154 |
+
padding: 6px;
|
| 155 |
}
|
| 156 |
}
|
| 157 |
</style>
|
| 158 |
</head>
|
| 159 |
<body>
|
| 160 |
+
<div class="container">
|
| 161 |
<h1>Pelican Bicycle SVG Benchmark</h1>
|
| 162 |
<p class="subtitle">Testing AI models' ability to create SVG art of a pelican riding a bicycle<br>
|
| 163 |
Benchmark created by <a href="https://simonwillison.net/" target="_blank" style="color: #666;">Simon Willison</a><br>
|