Recommendation/swipe.css at master · rfugal/Recommendation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
body{
	background:darkgrey;
	font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
	color:#000;
	margin:0;
	padding:15px;
	text-align:center;
}

@media all and (min-width: 240px) and (orientation: portrait) {  body  {   font-size:16pt;  } .letterButton { font-size:16pt; } }
@media all and (min-width: 360px) and (orientation: portrait) {  body  {   font-size:24pt;  } .letterButton { font-size:24pt; } }
@media all and (min-width: 480px) and (orientation: portrait) {  body  {   font-size:32pt;  } .letterButton { font-size:32pt; } }
@media all and (min-width: 600px) and (orientation: portrait) {  body  {   font-size:40pt;  } .letterButton { font-size:40pt; } }
@media all and (min-width: 720px) and (orientation: portrait) {  body  {   font-size:48pt;  } .letterButton { font-size:48pt; } }
@media all and (min-width: 840px) and (orientation: portrait) {  body  {   font-size:56pt;  } .letterButton { font-size:56pt; } }
@media all and (min-width: 960px) and (orientation: portrait) {  body  {   font-size:64pt;  } .letterButton { font-size:64pt; } }
@media all and (min-width: 1080px) and (orientation: portrait) {  body  {   font-size:72pt;  } .letterButton { font-size:72pt; } }
@media all and (min-height: 240px) and (orientation: landscape) {  body  {   font-size:16pt;  } .letterButton { font-size:16pt; } }
@media all and (min-height: 360px) and (orientation: landscape) {  body  {   font-size:24pt;  } .letterButton { font-size:24pt; } }
@media all and (min-height: 480px) and (orientation: landscape) {  body  {   font-size:32pt;  } .letterButton { font-size:32pt; } }
@media all and (min-height: 600px) and (orientation: landscape) {  body  {   font-size:40pt;  } .letterButton { font-size:40pt; } }
@media all and (min-height: 720px) and (orientation: landscape) {  body  {   font-size:48pt;  } .letterButton { font-size:48pt; } }
@media all and (min-height: 840px) and (orientation: landscape) {  body  {   font-size:56pt;  } .letterButton { font-size:56pt; } }
@media all and (min-height: 960px) and (orientation: landscape) {  body  {   font-size:64pt;  } .letterButton { font-size:64pt; } }
@media all and (min-height: 1080px) and (orientation: landscape) {  body  {   font-size:72pt;  } .letterButton { font-size:72pt; } }

.swiper-container {
	width: 90%;
	max-width: 90vh;
	height:25%;
}
.swiper-slide {
	background-color:white;
	background-position:center;
	background-size:auto;
	background-repeat:no-repeat;
	width:100%;
	height:100%;
}
.flipside {
	background-color:white;
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	width:100%;
	height:100%;
}
.learn {
	color: red;
}
.digested {
    color: blue;
}
#userInput {
    margin: 1% auto auto auto;
    width:90%;
    max-width:54vh;
    height:72%;
}
.letterButton {
    font-size: 90%;
    margin: 0.2%;
    height: 22%;
    width: 30%;
}
.abcButton {
    font-size: 90%;
    margin: 1.2% 0.2% 0.2% 0.2%;
    padding: 0% 5% 0% 5%;
    height: 15.8%;
}