6868 }
6969 .step-body { flex : 1 ; padding-top : 1px ; }
7070 .step-body p { margin-bottom : 0.5rem ; }
71- .shot-placeholder {
71+ .shot-placeholder { display : none; }
72+ .shot-placeholder .visible {
7273 background : # f7f7f7 ;
7374 border : 1px dashed # ccc ;
7475 border-radius : 8px ;
8586 }
8687 .shot-placeholder .shot-filename { font-family : "SF Mono" , "Fira Code" , monospace; font-weight : 700 ; margin-bottom : 0.35rem ; color : # 777 ; }
8788 .shot-img { width : 100% ; aspect-ratio : 16 / 9 ; object-fit : cover; border-radius : 8px ; display : block; margin : 0.5rem 0 1.5rem ; }
88- .shot-img [hidden ] { display : none; }
8989
9090 .next-steps { border-top : 1px solid # e0e0e0 ; margin-top : 3rem ; padding-top : 2rem ; display : flex; gap : 1.5rem ; flex-wrap : wrap; }
9191 .next-steps a { font-size : 14px ; font-weight : 600 ; border-bottom : 1px solid # ccc ; padding-bottom : 2px ; }
@@ -129,8 +129,8 @@ <h2>2. Open a new sketch</h2>
129129 < div class ="step-body ">
130130 < p > Restart Processing, open the mode dropdown again, and select < strong > C++</ strong > .</ p >
131131 < img class ="shot-img " src ="../assets/screenshot7.png " alt ="Mode dropdown with C++ selected "
132- onerror ="this.hidden=true ; this.nextElementSibling.hidden=false ; ">
133- < div class ="shot-placeholder " hidden >
132+ onerror ="this.style.display='none' ; this.nextElementSibling.classList.add('visible') ; ">
133+ < div class ="shot-placeholder ">
134134 < span class ="shot-filename "> assets/screenshot7.png</ span >
135135 < span > Mode dropdown with C++ selected</ span >
136136 </ div >
@@ -141,8 +141,8 @@ <h2>2. Open a new sketch</h2>
141141 < div class ="step-body ">
142142 < p > You'll see a blank editor, just like Java mode. This is where you'll write your sketch.</ p >
143143 < img class ="shot-img " src ="../assets/screenshot8.png " alt ="Blank C++ Mode editor "
144- onerror ="this.hidden=true ; this.nextElementSibling.hidden=false ; ">
145- < div class ="shot-placeholder " hidden >
144+ onerror ="this.style.display='none' ; this.nextElementSibling.classList.add('visible') ; ">
145+ < div class ="shot-placeholder ">
146146 < span class ="shot-filename "> assets/screenshot8.png</ span >
147147 < span > Blank C++ Mode editor</ span >
148148 </ div >
@@ -167,8 +167,8 @@ <h2>4. Run it</h2>
167167 < div class ="step-body ">
168168 < p > Click the Run button (the play icon) in the top-left of the editor, or press < code > Ctrl+R</ code > (< code > Cmd+R</ code > on Mac).</ p >
169169 < img class ="shot-img " src ="../assets/screenshot9.png " alt ="Run button in the toolbar "
170- onerror ="this.hidden=true ; this.nextElementSibling.hidden=false ; ">
171- < div class ="shot-placeholder " hidden >
170+ onerror ="this.style.display='none' ; this.nextElementSibling.classList.add('visible') ; ">
171+ < div class ="shot-placeholder ">
172172 < span class ="shot-filename "> assets/screenshot9.png</ span >
173173 < span > Run button in the toolbar</ span >
174174 </ div >
@@ -179,8 +179,8 @@ <h2>4. Run it</h2>
179179 < div class ="step-body ">
180180 < p > A window opens with a dark gray background. Move your mouse over it and a circle follows the cursor.</ p >
181181 < img class ="shot-img " src ="../assets/screenshot10.png " alt ="The sketch running, circle following the cursor "
182- onerror ="this.hidden=true ; this.nextElementSibling.hidden=false ; ">
183- < div class ="shot-placeholder " hidden >
182+ onerror ="this.style.display='none' ; this.nextElementSibling.classList.add('visible') ; ">
183+ < div class ="shot-placeholder ">
184184 < span class ="shot-filename "> assets/screenshot10.png</ span >
185185 < span > The sketch running, circle following the cursor</ span >
186186 </ div >
0 commit comments