Raataar/kinderspiele1
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

CSS Media Screen angepasst, Minispiel mit Sounds und effekten versehen

Browse Source
This commit is contained in:
Carsten Hilmer
2016-11-25 02:24:40 +01:00
parent 13119a71a4
commit 1f0ec98e0a
25 changed files with 336 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
www/css/htc.css
View File

@@ -1,30 +0,0 @@
/* ----------- HTC One ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}

84
www/css/ipads.css
View File

@@ -1,84 +0,0 @@
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}

112
www/css/iphones.css
View File

@@ -1,112 +0,0 @@
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}

56
www/css/kindle_tablet.css
View File

@@ -1,56 +0,0 @@
/* ----------- Kindle Fire HD 7" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* ----------- Kindle Fire HD 8.9" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}

33
www/css/nexus_tablet.css
View File

@@ -1,33 +0,0 @@
/* ----------- Asus Nexus 7 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Portrait */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}

86
www/css/samsung.css
View File

@@ -1,86 +0,0 @@
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Galaxy S5 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}

25
www/css/samsung_tablet.css
View File

@@ -1,25 +0,0 @@
/* ----------- Galaxy Tab 10.1 ----------- */
/* Portrait and Landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {
}
/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait) {
}
/* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape) {
}

162
www/css/style.css
View File

@@ -3,23 +3,12 @@
background-size: cover;
color: #333;
font: 100% Arial, Sans Serif;
height: 100vh;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.baumhaus {
background: url("../img/Background/treehouse.svg");
background-size: cover;
position:fixed;
bottom:0;
left:-25px;
width: 256px;
height: 256px;
overflow: hidden;
}
.farmhaus {
background: url("../img/Background/Farmhaus.svg");
background-size: cover;
@@ -36,7 +25,7 @@
background-size: cover;
position:fixed;
bottom:65px;
Right:60px;
Right:50px;
width: 60px;
height: 80px;
overflow: hidden;
@@ -45,11 +34,12 @@
.kornspeicher {
background: url("../img/Background/Kornspeicher.svg");
background-size: cover;
background-position:bottom;
position:fixed;
bottom:40px;
Left:275px;
width: 60px;
height: 80px;
height: 90px;
overflow: hidden;
}
@@ -62,6 +52,19 @@
overflow: hidden;
}
.baumhaus {
background: url("../img/Background/treehouse.svg");
background-size: cover;
position:fixed;
bottom:0;
left:-25px;
width: 256px;
height: 256px;
overflow: hidden;
}
/* Bild groessen */
.suchspielbuttonsizebig{
width:128px;
@@ -167,22 +170,23 @@
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x3 {
-webkit-animation: animateCloud 30s linear infinite;
-moz-animation: animateCloud 30s linear infinite;
animation: animateCloud 30s linear infinite;
.ufox {
-webkit-animation: animateCloud 8s linear infinite;
-moz-animation: animateCloud 8s linear infinite;
animation: animateCloud 8s linear infinite;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.ufo {
background: url('../img/ufo.png');
background-size: cover;
height: 128px;
width: 128px;
position: relative;
height: 64px;
position: relative;
width: 64px;
}
@@ -236,4 +240,114 @@
height: 180px;
right: 50px;
top: -90px;
}
/* ----------- Kindle Fire HD 7" ----------- */
/* Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
.farmhaus {
background: url("../img/Background/Farmhaus.svg");
background-size: cover;
position:fixed;
bottom:130px;
right:20px;
width: 60px;
height: 80px;
overflow: hidden;
}
.windrad {
background: url("../img/Background/Windrad.svg");
background-size: cover;
position:fixed;
bottom:130px;
right:130px;
width: 120px;
height: 160px;
overflow: hidden;
}
.kornspeicher {
background: url("../img/Background/Kornspeicher.svg");
background-size: cover;
background-position:bottom;
position:fixed;
bottom:80px;
left:330px;
width: 120px;
height: 180px;
overflow: hidden;
}
.suchspielbutton {
position: absolute;
bottom:15px;
left:485px;
width: 128px;
height: 128px;
overflow: hidden;
}
}
/* ----------- Galaxy S5 Mini----------- */
/* Landscape */
@media screen
and (device-width: 640px)
and (device-height: 360px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
.farmhaus {
background: url("../img/Background/Farmhaus.svg");
background-size: cover;
position:fixed;
bottom:40px;
right:10px;
width: 30px;
height: 40px;
overflow: hidden;
}
.windrad {
background: url("../img/Background/Windrad.svg");
background-size: cover;
position:fixed;
bottom:45px;
right:50px;
width: 60px;
height: 80px;
overflow: hidden;
}
.kornspeicher {
background: url("../img/Background/Kornspeicher.svg");
background-size: cover;
background-position:bottom;
position:fixed;
bottom:20px;
left:275px;
width: 60px;
height: 90px;
overflow: hidden;
}
.suchspielbutton {
position: absolute;
bottom:5px;
left:370px;
width: 128px;
height: 128px;
overflow: hidden;
}
}