|
58 | 58 | cursor: pointer; |
59 | 59 | } |
60 | 60 |
|
61 | | - #demos { |
| 61 | + #float-panel { |
62 | 62 | position: absolute; |
63 | 63 | right: 50px; |
64 | 64 | } |
65 | 65 |
|
66 | | - #demos a:link, a:visited { |
| 66 | + #float-panel a:link, a:visited { |
67 | 67 | background-color: white; |
68 | 68 | color: black; |
69 | 69 | border: 1px solid #654ff0; |
|
75 | 75 | height: 20px; |
76 | 76 | } |
77 | 77 |
|
78 | | - #demos a:hover, a:active { |
| 78 | + #float-panel a:hover, a:active { |
79 | 79 | background-color: #804FF0; |
80 | 80 | color: white; |
81 | 81 | text-decoration: underline; |
82 | 82 | } |
83 | 83 |
|
84 | | - #demos a.current { |
| 84 | + #float-panel a.current { |
85 | 85 | background-color: #654FF0; |
86 | 86 | color: white; |
87 | 87 | } |
88 | 88 |
|
89 | | - #demos a.icon { |
| 89 | + #float-panel a.icon { |
90 | 90 | padding-top: 0; |
91 | 91 | padding-bottom: 10px; |
92 | 92 | width: 20px; |
|
95 | 95 | background-color: white; |
96 | 96 | } |
97 | 97 |
|
98 | | - #demos a.icon img { |
| 98 | + #float-panel a.icon img { |
99 | 99 | position: relative; |
100 | 100 | top: 4px; |
101 | 101 | } |
102 | 102 |
|
103 | | - @media only screen and (max-width: 600px) { |
| 103 | + #more { |
| 104 | + display: none; |
| 105 | + } |
| 106 | + |
| 107 | + @media only screen and (max-height: 1000px) { |
104 | 108 | #footer { |
105 | 109 | display: none; |
106 | 110 | } |
| 111 | + } |
| 112 | + |
| 113 | + @media only screen and (max-width: 1000px) { |
| 114 | + #float-panel { |
| 115 | + right: 1px; |
| 116 | + } |
| 117 | + |
| 118 | + #float-panel a.icon { |
| 119 | + margin-left: -3px; |
| 120 | + } |
107 | 121 |
|
108 | 122 | #demos { |
109 | | - right: 5px; |
| 123 | + position: absolute; |
| 124 | + top: 30px; |
| 125 | + right: 40px; |
| 126 | + display: none; |
| 127 | + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); |
| 128 | + z-index: 1; |
| 129 | + } |
| 130 | + #demos.show { |
| 131 | + display: block; |
| 132 | + } |
| 133 | + |
| 134 | + #demos a { |
| 135 | + width: 100px; |
| 136 | + } |
| 137 | + |
| 138 | + #more { |
| 139 | + border: 1px solid #654ff0; |
| 140 | + padding: 4px 1px; |
| 141 | + margin-left: -5px; |
| 142 | + height: 22px; |
| 143 | + display: inline-block; |
| 144 | + background-color: white; |
110 | 145 | } |
111 | 146 | } |
112 | 147 | </style> |
113 | 148 | </head> |
114 | 149 | <body> |
115 | | -<div id="demos"> |
116 | | - <a href="/wasm/iv">Image Viewer</a> |
117 | | - <a href="/wasm/jetsnack" class="current">JetSnack</a> |
118 | | - <a href="/wasm/example">Simple</a> |
119 | | - <a href="/wasm/hello">Hello</a> |
| 150 | + |
| 151 | +<div id="float-panel"> |
| 152 | + <span id="more">More ▾</span> |
| 153 | + <span id="demos"> |
| 154 | + <a href="/wasm/iv">Image Viewer</a> |
| 155 | + <a href="/wasm/jetsnack" class="current">JetSnack</a> |
| 156 | + <a href="/wasm/example">Simple</a> |
| 157 | + <a href="/wasm/hello">Hello</a> |
| 158 | + </span> |
120 | 159 | <a href="https://kotl.in/wasm-examples" target="_blank" class="icon" title="https://kotl.in/wasm-examples"> <img src="/resources/github-mark.svg" width="20" alt="github"/> </a> |
121 | 160 | </div> |
| 161 | +<script type="application/javascript"> |
| 162 | + let demos = document.getElementById("demos"); |
| 163 | + document.getElementById("more").addEventListener("click", (e) => { |
| 164 | + demos.classList.toggle("show") |
| 165 | + }); |
| 166 | +</script> |
122 | 167 |
|
123 | 168 | <canvas id="jetsnackCanvas"></canvas> |
124 | 169 |
|
|
0 commit comments