Hover over shapes to see what they mean.
-
The Semantic Screen
+
diff --git a/src/index.js b/src/index.js
index 6749fb5..08275b0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,8 +12,8 @@ let mainWindow;
const createWindow = () => {
// Create the browser window.
mainWindow = new BrowserWindow({
- minWidth: 1024,
- minHeight: 768
+ minWidth: 800,
+ minHeight: 600
});
// and load the index.html of the app.
diff --git a/src/scripts/main.js b/src/scripts/main.js
index e14b94f..177a1dd 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,18 +1,7 @@
-// function hde() {document.getElementById("sm").style.color = "#fbd";}
-// function out() {document.getElementById("sm").innerHTML = "Hover over shapes to see what they mean.";document.getElementById("sm").style.color = "#9ea";}
-// function mOver() {document.getElementById("sm").innerHTML = "
MERITS:User valuations of how well the focus meets stated needs...";hde();}
-// function aOver() {document.getElementById("sm").innerHTML = "
ACTIONS:Proposed and current activities prior to completion or rejection, to-dos, tasks...";hde();}
-// function pOver() {document.getElementById("sm").innerHTML = "
PEOPLE:Individuals and their chosen groups, identities, communities, companies...";hde();}
-// function fOver() {document.getElementById("sm").innerHTML = "
FACTS:Dates, places, things, documents, experiences, accomplishments, completed or rejected actions...";hde();}
-// function oOver() {document.getElementById("sm").innerHTML = "
THOUGHTS:Concepts, beliefs, opinions, analyses, ideas, concerns...";hde();}
-// function eOver() {document.getElementById("sm").innerHTML = "
FEELINGS:Sentiments, emotions, states of mind...";hde();}
-// function nOver() {document.getElementById("sm").innerHTML = "
NEEDS:Physical, emotional, social, or spiritual necessities for self, group & others...";hde();}
-// function tOver() {document.getElementById("sm").innerHTML = "
TOPICS:Projects, issues, subjects, ideas, matters, protocols, transactions...";hde();}
-
(function($){
$('.shape').hover(function(e){
- console.log(e);
+ $("#shape-description").html(e.target.dataset.message).css("color", "#fbd");
}, function(e){
- console.log(e);
+ $("#shape-description").html("
Hover over shapes to see what they mean.
").css("color", "#9ea");
});
})(jQuery);
diff --git a/src/styles/main.css b/src/styles/main.css
index 7914c3d..338857d 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,343 +1,141 @@
html {
- background-color: #755f67;
+ box-sizing: border-box;
+}
+*, *:before, *:after {
+ box-sizing: inherit;
}
+html {
+ background-color: #755f67;
+}
body
{
- margin: 30px 30px;
+ margin: 10px 10px;
}
header {
background-color: #fff5ff;
- padding: 10px 10px;
-}
-
-.rounded-border {
- border-radius: 2px;
- border: solid 1px #fff5ff;
}
main {
background-color: #727c73;
- padding: 10px 10px;
-}
-
-.r
-{
- font-size:18px;
- font-weight:700;
-}
-
-.rr
-{
- font-size:16px;
-}
-
-.just
-{
- text-align:justify;
- margin:auto;
-}
-
-.box
-{
- /*width:700px;*/
- /*right:50%;*/
- background-color:#fff5ff;
- border-radius:2px;
- color:#000;
- /*display:0;*/
- /*-webkit-flex-direction:row-reverse;*/
- /*flex-direction:column;*/
- /*overflow:auto;*/
- text-align:justify;
- /*font-size:14px;*/
- /* margin:10px; */
- margin-bottom: 10px;
- padding:10px;
-}
-
-.con
-{
- /*width:700px;*/
- /*right:50%;*/
- color:#fff5ff;
- /*border-radius:2px;*/
- /*border:solid 1px #fff5ff;*/
- /*display:0;*/
- /*-webkit-flex-direction:row-reverse;*/
- /*flex-direction:column;*/
- /*overflow:auto;*/
- text-align:justify;
- /*font-size:14px;*/
- /*margin:10px;*/
- /*padding:10px;*/
}
-.subcon
-{
- /*width:660px;*/
- /*right:50%;*/
- color:#fff5ff;
- /*border-radius:2px;*/
- /*border:solid 1px #fff5ff;*/
- /*display:0;*/
- /*-webkit-flex-direction:row-reverse;*/
- /*flex-direction:column;*/
- /*overflow:auto;*/
- text-align:justify;
- /*font-size:14px;*/
- /*margin:10px;*/
- /*padding:10px;*/
-}
-
-.subbox
-{
- /*width:660px;*/
- /*right:50%;*/
- background-color:#fff5ff;
- /*border-radius:2px;*/
- color:#000;
- /*display:0;*/
- /*-webkit-flex-direction:row-reverse;*/
- /*flex-direction:column;*/
- /*overflow:auto;*/
- text-align:justify;
- /*font-size:14px;*/
- /*margin:10px;*/
- /*padding:10px;*/
-}
-
-.subsubbox
-{
- /*width:640px;*/
- /*right:50%;*/
- background-color:#fff5ff;
- /*border-radius:2px;*/
- color:#000;
- /*display:0;*/
- /*-webkit-flex-direction:row-reverse;*/
- /*flex-direction:column;*/
- /*overflow:auto;*/
- text-align:justify;
- /*font-size:14px;*/
- /*margin:10px;*/
- /*padding:10px;*/
-}
-
-.j
-{
- text-align:justify;
+.rounded-border {
+ border-radius: 5px;
+ border: solid 1px #fff5ff;
}
-#sm
-{
- top:20px;
- height:70px;
- z-index:10;
- -webkit-transition:all .5s;
+.default-padding {
+ padding: 10px 10px;
}
-.smlabel
-{
- color:#9ea;
- /*border-radius:5px;*/
- /*border:solid 1px #9ea;*/
- text-align:center;
- /*font-size:18px;*/
- position:relative;
- top:50px;
- z-index:1;
- display:block;
- /*margin:10px;*/
- /*padding:10px;*/
+.shape-color {
+ color: #9ea;
+ border-color: #9ea;
}
-#sectionbox
-{
- background-color:#fff5ff;
- /*width:750px;*/
- /*border-radius:4px;*/
- /*box-shadow:5px 5px 5px #222;*/
- color:#000;
- /*margin:20px;*/
- /*padding:20px;*/
+.meaning-color {
+ color: #fff5ff;
+ border-color: #fff5ff;
}
-.section
-{
- /*width:100px;*/
- /*height:120px;*/
- background-color:#445044;
- /*border-radius:2px;*/
- color:#FFF;
- /*-webkit-flex-direction:row-reverse;*/
- /*display:inline-flex;*/
- /*flex-direction:column;*/
- /*overflow:auto;*/
- /*margin:10px;*/
- /*padding:10px;*/
+.bottom-margin {
+ margin-bottom: 10px;
}
-.section:hover
+h1, h2, h3, h4, h5, h6, p
{
- background-color:#232;
- text-decoration:none;
- color:#FFF;
+ font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
+ margin: 2px;
}
-.hov
-{
- text-align:center;
- color:#FFF;
- -webkit-transition:all .5s;
- -webkit-filter:none;
- /*padding:4px;*/
+#shape-description-area {
+ min-height: 4.5rem;
+ width: 100%;
+ display: table;
}
-
-.hov:hover
-{
- -webkit-filter:hue-rotate(180deg);
- filter:hue-rotate(180deg);
+#shape-description-area #shape-description {
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
}
-#semol
-{
- /*width:700px;*/
- /*right:50%;*/
- color:#fff5ff;
- border-radius:2px;
- border:solid 1px #fff5ff;
- background-color:#727c73;
- /*margin:10px;*/
- padding:10px;
+#shape-area {
+ position: relative;
+ margin: 0 auto;
+ width: 400px;
+ height: 300px;
}
-#sem
-{
- margin: 0 auto;
- position:relative;
- width:400px;
- height:300px;
+#shape-merits {
+ position: absolute;
+ left: 150px;
+ top: 18px;
+ width: 100px;
+ height: 100px;
}
-#merits
-{
- position:absolute;
- left:150px;
- top:18px;
- width:100px;
- height:100px;
- background:url(../images/merits.png);
- background-size:cover;
-}
-
-#actions
+#shape-actions
{
position:absolute;
right:20px;
top:120px;
width:80px;
height:70px;
- background:url(../images/actions.png);
- background-size:cover;
}
-#people
+#shape-people
{
position:absolute;
right:50px;
top:40px;
width:70px;
height:75px;
- background:url(../images/people.png);
- background-size:cover;
}
-#topics
+#shape-topics
{
position:absolute;
right:80px;
top:200px;
width:70px;
height:75px;
- background:url(../images/topics.png);
- background-size:cover;
}
-#needs
+#shape-needs
{
position:absolute;
left:160px;
top:220px;
width:80px;
height:60px;
- background:url(../images/needs.png);
- background-size:cover;
}
-#thoughts
+#shape-thoughts
{
position:absolute;
left:21px;
top:121px;
width:80px;
height:70px;
- background:url(../images/thoughts.png);
- background-size:cover;
}
-#facts
+#shape-facts
{
position:absolute;
left:50px;
top:40px;
width:70px;
height:75px;
- background:url(../images/facts.png);
- background-size:cover;
}
-#feelings
+#shape-feelings
{
position:absolute;
left:80px;
top:200px;
width:70px;
height:75px;
- background:url(../images/feelings.png);
- background-size:cover;
-}
-
-.bttn
-{
- color:#fff;
- background-color:#71967D;
- border-radius:4px;
- display:flex;
- text-decoration:none;
- margin:10px;
- padding:5px;
-}
-
-.bttn:hover
-{
- background-color:#343;
- text-decoration:none;
- color:#fff;
-}
-
-.big
-{
- font-size:24px;
- font-weight:700;
}
-
-.just:after
-{
- content:"";
- display:inline-block;
- width:100%;
-}
-
- 
- 
- 
- 
- 
- 
- 
-