Commit b93b636d authored by colmoneill's avatar colmoneill

responsive + close buttons in the slide toggles

parent 92830760
......@@ -432,7 +432,7 @@ h2.animated_title:nth-of-type(6){
right: 20px;
color: teal;
font-family: junicodeboldcondensed;
background: rgba(255, 255, 255, 0.5);
/* background: rgba(255, 255, 255, 0.5); */
padding: 10px;
z-index: 3;
}
......@@ -473,12 +473,12 @@ div.text-body:hover{
nav{
position: fixed;
right: 20px;
bottom: 130px;
bottom: 120px;
/* width: 60%;
margin-left: 20%; */
color: teal;
font-size: 32px;
background: rgba(255, 255, 255, 0.8);
/* background: rgba(255, 255, 255, 0.8); */
z-index: 3;
padding: 10px;
}
......@@ -490,6 +490,18 @@ nav a{
nav a:hover{
text-decoration: underline;
}
.close-intro, .close-body{
position: static;
top: 5px;
right: 5px;
float: right;
background-color: white;
z-index: 7;
padding: 10px;
text-decoration: none;
font-family: monospace;
color: black
}
a{
color: teal;
......@@ -571,15 +583,13 @@ div.img-gallery img{
h2.animated_title:nth-of-type(6){
margin-left: 0vh;
}
nav{
bottom: 90px;
}
#reveal{
width: 300px;
position: fixed;
top: 10px;
right: 10px;
left: 10px;
padding: 15px;
}
#reveal-body{
width: 300px;
......@@ -587,10 +597,13 @@ div.img-gallery img{
top: 10px;
right: 10px;
left: 10px;
padding: 15px;
}
#reveal p{
font-size: 26px;
warning
}
nav{
bottom: 90px;
}
.grid-item { width: 100%; }
.grid-item--width2 { width: 100%; }
......
......@@ -40,6 +40,16 @@ document.addEventListener("DOMContentLoaded", function() {
$('#reveal-body').slideToggle();
}
);
$('.close-intro').click(function () {
$(this).removeAttr("href"),
$('#reveal').slideToggle();
}
);
$('.close-body').click(function () {
$(this).removeAttr("href"),
$('#reveal-body').slideToggle();
}
);
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
......@@ -51,3 +61,8 @@ document.addEventListener("DOMContentLoaded", function() {
$grid.masonry('layout');
});
});
$(".more-commits").click(function(){
$(this).removeAttr("href"),
$("div.more-git-commits").slideToggle()
})
......@@ -42,6 +42,7 @@
<h2 class="animated_title animated_title4"></h2>
<h2 class="animated_title animated_title5">A cup of tea</h2>
<div id="reveal" class="text-body">
<a class="close-intro" href="">x</a>
<p>A cup of tea can be powerful and meaningful tool to bring people together to share not only joy and be used as a relaxing ritual but also share worries and frustrations we all experience during our life and even more when our everyday life is so busy, challenging and everything is changing fast, it can be hard to keep up and adapt.</p>
</div>
......@@ -52,6 +53,7 @@
</nav>
</div>
<div id="reveal-body" class="text-body">
<a class="close-body" href="">x</a>
<p>During the project participants with diverse cultural, social and mental health background will have opportunity to engage in art project and express themselves in relaxed and non judgmental environment through art and creativity. Feel the power of community learning, sense of belonging and be accepted while learning new skill and tapping into their own creativity while being a part of a unique local art project that doesn't have to stop when project is over. By bringing creativity and art into our everyday habits and environment it can help us improve and strengthen our connections with ourselves and community around us, make it brighter and happier.</p>
<hr>
<p>During the project participants will create decorative polymer clay tea pots. There must be a tea drinking traditions in every country and home, and by inviting, teaching and encouraging participants to create their own tea pot design it ultimately builds connections between ones cultural background, life experience and Ireland.</p>
......@@ -70,7 +72,7 @@
</div>
-->
<div class="grid img-gallery">
<div id="gallery" class="grid img-gallery">
<div class="grid-item"><img src="assets/imgs/1.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/2.jpg" alt=""></div>
<div class="grid-item grid-item--height2"><img src="assets/imgs/1b.jpg" alt=""></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment