Skip to content

Commit 6c57eb0

Browse files
ShMcKShMcK
committed
modal close
1 parent c8c7998 commit 6c57eb0

File tree

4 files changed

+32
-34
lines changed

4 files changed

+32
-34
lines changed

‎_sass/_modal.scss

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,27 @@
22
margin-top: 45px;
33
}
44

5+
#btn-close-modal {
6+
padding: 45px;
7+
margin: 0 auto;
8+
display: flex;
9+
justify-content: space-around;
10+
align-content: center;
11+
flex-align: center;
12+
}
13+
514
a.modal-link:before {
615
content: '';
716
position: absolute;
817
display: block;
918
width: 100%;
1019
height: 100%;
11-
background-size: 100%;
12-
background: url('../css/images/play.svg') center no-repeat;
13-
opacity: .50;
20+
background-size: 75px;
21+
background-repeat: no-repeat;
22+
background-position: center;
23+
background-image: url('../css/images/play.svg');
24+
opacity: .5;
1425
}
1526
a.modal-link:hover:before {
16-
opacity: .55;
27+
opacity: .65;
1728
}

‎css/images/close-button.svg

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎css/images/close.svg

Lines changed: 3 additions & 4 deletions
Loading

‎index.html

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ <h2>Inside Your Code Editor</h2>
6060
<a href="https://atom.io">Atom Editor</a>.
6161
<br /> With the "atom-coderoad" plugin, code in a real editor environment alongside your other favorite plugins.</p>
6262
<ul class="actions">
63-
<li><a href="#" class="button special">Atom-CodeRoad</a></li>
63+
<li><a href="/atom-coderoad" class="button special">Atom-CodeRoad</a></li>
6464
</ul>
6565
</div>
6666
</section>
@@ -77,7 +77,7 @@ <h2>Inside Your Code Editor</h2>
7777
<h2>Create your Own Tutorials</h2>
7878
<p>Build tutorials using simple and familiar tools: <a href="http://www.markdowntutorial.com/">Markdown</a> & unit tests. Making tutorials is easy with the new "builder-coderoad" plugin.</p>
7979
<ul class="actions">
80-
<li><a href="#" class="button special">Builder-CodeRoad</a></li>
80+
<li><a href="/builder-coderoad" class="button special">Builder-CodeRoad</a></li>
8181
</ul>
8282
</div>
8383
</section>
@@ -131,22 +131,23 @@ <h2>Become a Contributer</h2>
131131

132132
<!-- Atom-CodeRoad Modal -->
133133
<div id="atom-coderoad-demo" class="modal">
134-
<div id="btn-close-modal" class="close-atom-coderoad-demo">
135-
CLOSE MODAL
136-
</div>
137-
138-
<div class="modal-content">
139-
<img alt="Atom-CodeRoad Demo" src="images/atom-coderoad.gif" height="450px"/>
140-
</div>
134+
<div id="btn-close-modal" class="close-atom-coderoad-demo">
135+
<img src="css/images/close.svg" alt="close" height="35px"/>
136+
</div>
137+
<div class="modal-content">
138+
<img alt="Atom-CodeRoad Demo" height="450px"
139+
src="images/atom-coderoad.gif" />
140+
</div>
141141
</div>
142142

143143
<!-- Builder-CodeRoad Modal -->
144144
<div id="builder-coderoad-demo" class="modal">
145-
<div id="btn-close-modal" class="close-builder-coderoad-demo">
146-
CLOSE MODAL
147-
</div>
145+
<div id="btn-close-modal" class="close-builder-coderoad-demo">
146+
<img src="css/images/close.svg" alt="close" height="35px"/>
147+
</div>
148148

149149
<div class="modal-content">
150-
<img alt="Builder-CodeRoad Demo" src="images/builder-demo.gif" height="450px"/>
150+
<img alt="Builder-CodeRoad Demo" height="450px"
151+
src="images/builder-demo.gif" />
151152
</div>
152153
</div>

0 commit comments

Comments
 (0)