digital-kasina/kasinaSimple.html at gh-pages · jgpacker/digital-kasina · 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
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Kasina Beta SIMPLE ☸</title>
<style>
body {
  background-color:black;
}

#kasina {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
  height: 250px; /* the previous three lines, together with a declared height, absolutely centers this element */
  width:  250px;
  border-radius: 125px; /* half or more of the height,width and this square becomes a circle */
  display: none; /* see rule ':target #kasina' */
  cursor: none; /* hides cursor when above kasina */
}

#options {
  text-align: center;
}
#options a {
  display: inline-block;
  margin: 5px;
  width:  50px;
  height: 50px;
  border-radius: 28px; /* needs to account for the extra border from rule '#options a:hover' */
  /* background-color: attr(id); -- when this is supported by most major browser, it will save some lines of code(maybe I will need to change some id's names though */
}
#options a:hover, #options a:focus {
  border: 4px solid #ddd;
  margin: 1px; /* original margin -border size */
}
#options a:active, a#kasina:active {
  border: 4px solid #777;
}

:target #kasina  { display: block; }
:target #options { display: none; }

#brown:target  #kasina, a[href="#brown"]  { background-color: brown; }
#green:target  #kasina, a[href="#green"]  { background-color: green; }
#yellow:target #kasina, a[href="#yellow"] { background-color: #FFE303; }
#blue:target   #kasina, a[href="#blue"]   { background-color: #0000CD; }
#red:target    #kasina, a[href="#red"]    { background-color: red; }
#white:target  #kasina, a[href="#white"]  { background-color: white; }

</style>
</head>
<body>

<div id="brown">
<div id="green">
<div id="yellow">
<div id="blue">
<div id="red">
<div id="white">

  <a href="#" id="kasina"></a>

  <div id="options">
    <a href="#brown" title="Pathavi"> </a>
    <a href="#green" title="Nila ?"> </a>
    <a href="#yellow" title="Pita"> </a>
    <a href="#blue" title="Nila"> </a>
    <a href="#red" title="Lohita"> </a>
    <a href="#white" title="Odata"> </a>
  </div>

</div></div></div></div></div></div>

</body>
</html>