petr/www.tagesschule-elementa.ch
2
1
Fork 0
forked from TagesschuleElementa/www.tagesschule-elementa.ch
Code Issues Pull Requests Releases Wiki Activity

various fixes

Browse Source
This commit is contained in:
Simon Caminada
2018-03-27 19:23:24 +02:00
parent 02f9828009
commit d8e581c53f
19 changed files with 889 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
private/js/modules/search_contest.js Normal file
View File

@@ -0,0 +1,8 @@
$(function() {
var $body = $('body');
$body.on('click', '.search__contest__item', function(event) {
event.preventDefault();
$(this).hide();
});
});

4
private/scss/_config.scss
View File

@@ -10,7 +10,11 @@ $black: #000000;
$green: #98C53A;
$violet: rgba(149, 72, 200, 0.66);
$red: rgba(200, 0, 0, 0.66);
$blue: rgba(65, 93, 200, 0.66);
$yellow: rgba(200, 198, 36, 0.66);
$lime: rgba(131, 200, 81, 0.66);
$default_font_family: 'Muli', sans-serif;
$default_font_size: 16px;

1
private/scss/main.scss
View File

@@ -8,6 +8,7 @@
@import "modules/_notification.scss";
@import "modules/_footer.scss";
@import "modules/_search.scss";
@import "modules/_search_contest.scss";
@import "modules/_navigation.scss";
@import "modules/_pages.scss";
@import "modules/_contact.scss";

189
private/scss/modules/_search_contest.scss Normal file
View File

@@ -0,0 +1,189 @@
.search__contest__item {
display: block;
width: 50px;
height: 50px;
position: absolute;
z-index: 100;
&.data_id_0 {
left: 100%;
margin-left: 15px;
top: 60%;
@media screen and (max-width: $medium_breakpoint) {
margin-left: -15px;
}
}
&.data_id_1 {
right: 100%;
margin-right: 15px;
top: 30%;
.position {
right: auto;
left: 90%;
}
@media screen and (max-width: $medium_breakpoint) {
margin-right: -15px;
}
}
&.data_id_2 {
left: 100%;
margin-left: 15px;
top: 40%;
@media screen and (max-width: $medium_breakpoint) {
margin-left: -15px;
}
}
&.data_id_4 {
left: 100%;
margin-left: 15px;
top: 80%;
@media screen and (max-width: $medium_breakpoint) {
margin-left: -15px;
}
}
&.data_id_5 {
right: 100%;
margin-right: 15px;
top: 20%;
.position {
right: auto;
left: 90%;
}
@media screen and (max-width: $medium_breakpoint) {
margin-right: -15px;
}
}
}
.letter {
display: block;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 22px;
font-weight: 900;
color: $white;
z-index: 5;
}
.position {
display: block;
position: absolute;
top: 90%;
right: 90%;
font-size: 12px;
color: $dark_gray;
}
.flower {
position: relative;
width: 50px;
height: 50px;
z-index: 2;
}
.flower:after {
position: absolute;
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
background: $red;
border-radius: 50%;
width: 30%;
height: 30%;
margin: auto;
.data_id_1 & {
background: $blue;
}
.data_id_2 & {
background: $yellow;
}
.data_id_3 & {
background: $violet;
}
.data_id_4 & {
background: $lime;
}
}
.flower .petal {
width: 100%;
height: 100%;
position: absolute;
transform: rotate(72deg);
}
.flower .petal::before, .flower .petal::after {
content: '';
position: absolute;
width: 60%;
height: 60%;
background: $red;
border-radius: 0 100px;
top: 50%;
left: 50%;
margin-left: -20%;
margin-top: -20%;
transform-origin: 33% 33%;
.data_id_1 & {
background: $blue;
}
.data_id_2 & {
background: $yellow;
}
.data_id_3 & {
background: $violet;
}
.data_id_4 & {
background: $lime;
}
}
.flower .petal::after {
transform: rotate(36deg)
}
.flower.petal5 .petal {
transform: rotate(144deg);
}
.flower.petal5 .petal:after {
transform: rotate(-72deg);
}
.flower.petal5 > .petal:after {
content: none;
}
.flower.petal6 .petal {
transform: rotate(120deg);
}
.flower.petal6 .petal:after {
transform: rotate(60deg);
}
.flower.petal8 .petal {
transform: rotate(90deg);
}
.flower.petal8 .petal:after {
transform: rotate(45deg);
width: 56%;
height: 56%;
}
.flower.roundpetal .petal:before, .flower.roundpetal .petal:after {
width: 30%;
margin-left: -15%;
margin-top: 0;
top: 0;
height: 50%;
border-radius: 50% 50% 0 0;
transform-origin: 50% 100%;
}