Init WebCards

8 files changed, 458 insertions, 0 deletions

diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css
new file mode 100644
index 0000000..cae61f6
--- /dev/null
+++ b/webcards/styles/client/base.css
@@ -0,0 +1,112 @@
+* {
+    font-family: 'Montserrat', sans-serif;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+
+    min-width: 100vw;
+    min-height: 100vh;
+
+    display: block;
+
+}
+
+.topbar {
+    position: fixed;
+
+    background-color: white;
+
+    top: 0;
+    left: 0;
+
+    display: flex;
+
+    flex-direction: column;
+
+    width: 100vw;
+    z-index: 1;
+}
+
+.top-buttons {
+    display: flex;
+}
+
+button, input[type="button"] {
+    display: inline-block;
+    border: none;
+    background-color: dodgerblue;
+    padding: 10px;
+    font-size: medium;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+button.top-button {
+    border-radius: 0;
+    background-color: white;
+    flex: 1;
+
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+}
+
+.top-buttons > button:first-child {
+    border-left: none;
+}
+
+.top-buttons > button:last-child {
+    border-right: none;
+}
+
+div.new-game {
+    flex: 1;
+    flex-grow: 1;
+    border-top: 2px solid black;
+}
+
+div.mobile-settings {
+    flex: 1;
+    flex-grow: 1;
+    border-top: 2px solid black;
+}
+
+div.topbar > div.status {
+    height: 5px;
+    flex-basis: auto;
+}
+
+div.stats {
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+}
+
+div.stats > div {
+    flex: 1;
+    display: flex;
+}
+
+div.stats > div > span {
+    flex-basis: content;
+    display: inline-block;
+}
+
+div.stats > div > span:last-child {
+    text-align: right;
+    flex: 1;
+    display: inline-block;
+}
+
+div.game {
+    background-color: white;
+    border-radius: 5px;
+    box-shadow: lightgray 3px 3px 2px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+}
+
+div.game:last-child {
+    margin-bottom: none;
+}
\ No newline at end of file
diff --git a/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css
new file mode 100644
index 0000000..46dc83d
--- /dev/null
+++ b/webcards/styles/client/desktop.css
@@ -0,0 +1,134 @@
+@media (min-width: 600px) and (min-height: 501px) {
+    body {
+        display: flex;
+    
+        align-items: center;
+        justify-content: center;
+    }
+
+    /*
+        TopBar rules
+    */
+
+    button.top-button {
+        transition-duration: 0.2s;
+    }
+
+    button.top-button:hover {
+        background-color: #ddd;
+    }
+
+    button#newgame:before{
+        content: "Create Game";
+    }
+
+    button#settings {
+        display: none;
+    }
+
+    button#reset:before{
+        content: "Reset Connection";
+    }
+
+    /*
+        Lobby rules
+    */
+    div.lobby {
+        min-width: 70vw;
+        min-height: 70vh;
+    
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+    
+        align-items: center;
+    }
+
+    div.server {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 10px;
+        box-sizing: border-box;
+    }
+
+    span.status {
+        box-sizing: border-box;
+        font-size: larger;
+
+        margin-right: 10px;
+        padding: 10px;
+        border-radius: 10px;
+        flex-basis: content;
+    }
+
+    span.addr {
+        font-size: larger;
+        padding: 10px;
+        border-radius: 10px;
+
+        background-color: #ddd;
+
+        flex: 1;
+    }
+
+    div.content {
+        min-width: 70vw;
+        min-height: 70vh;
+    
+        display: flex;
+        flex-direction: row;
+
+        box-sizing: border-box;
+    }
+
+    div.info {
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+
+        flex: 1;
+
+        margin-left: 10px;
+
+        box-sizing: border-box;
+    }
+
+    div.games {
+        box-sizing: border-box;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 10px;
+        border-radius: 10px;
+        background-color: #ddd;
+        flex: 4;
+
+        border: 5px solid #ddd;
+    }
+
+    div.stats, div.settings {
+        border-radius: 10px;
+        background-color: #ddd;
+
+        box-sizing: border-box;
+
+        flex: 1;
+
+        height: auto;
+        width: 100%;
+
+        text-align: left;
+    }
+
+    div.settings {
+        margin-top: 10px;
+    }
+
+    div.game {
+        height: 20%;
+    }
+
+    /*
+        Table rules
+    */
+}
diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css
new file mode 100644
index 0000000..cea233d
--- /dev/null
+++ b/webcards/styles/client/mobile.css
@@ -0,0 +1,81 @@
+@media (max-width: 599px), (max-height: 500px) {
+    /*
+        Hide stuff
+    */
+    div.server {
+        display: none;
+    }
+
+    div.info {
+        display: none;
+    }
+
+    /*
+        TopBar for mobile
+    */
+
+    div.topbar > div.status {
+        height: 10px;
+    }
+
+    div.top-buttons {
+        height: 50px;
+    }
+
+    button.top-button {
+        padding: 5px;
+    }
+
+    button#reset:before, button#newgame:before, button#settings:before {
+        font-family: "IcoFont";
+        font-size: xx-large;
+    }
+    
+    button#newgame:before{
+        content: "\efc2";
+    }
+
+    button#settings {
+        display: inline-block;
+    }
+
+    button#settings:before {
+        content: "\ef3a";
+    }
+
+    button#reset:before{
+        content: "\efd1";
+    }
+
+    /*
+        Mobile lobby
+    */
+
+    div.lobby {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+    }
+
+    div.content {
+        margin-top: 60px;
+        box-sizing: border-box;
+        flex: 1;
+    }
+
+    div.games {
+        height: 100%;
+        width: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        background-color: #ddd;
+        padding: 5px;
+        box-sizing: border-box;
+
+    }
+
+    div.game {
+        height: 12.5%;
+    }
+}
diff --git a/webcards/styles/client/tablet.css b/webcards/styles/client/tablet.css
new file mode 100644
index 0000000..37750f8
--- /dev/null
+++ b/webcards/styles/client/tablet.css
@@ -0,0 +1,41 @@
+@media (min-width: 600px) and (orientation: portrait) {
+    body {
+        display: flex;
+    
+        align-items: center;
+        justify-content: center;
+    }
+
+    div.lobby {
+        max-width: 500px;
+    
+        display: flex;
+        text-align: center;
+        flex-direction: column;
+    
+        align-items: center;
+    }
+
+    div.content {
+        min-width: 70vw;
+        min-height: 70vh;
+    
+        display: flex;
+        flex-direction: column;
+    }
+
+    div.info {
+        flex-direction: row;
+        margin-left: 0px;
+        margin-top: 10px;
+    }
+
+    div.settings, div.stats {
+        width: auto;
+    }
+
+    div.settings {
+        margin-top: 0px;
+        margin-left: 10px;
+    }
+}
diff --git a/webcards/styles/home/base.css b/webcards/styles/home/base.css
new file mode 100644
index 0000000..2ef3693
--- /dev/null
+++ b/webcards/styles/home/base.css
@@ -0,0 +1,53 @@
+* {
+    font-family: 'Montserrat', sans-serif;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+
+    min-width: 100vw;
+    min-height: 100vh;
+
+    display: block;
+}
+
+body {
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+}
+
+div.content {
+    padding: 20px;
+
+    background-color: #ddd;
+    border-radius: 10px;
+    max-width: 500px;
+
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+
+    align-items: center;
+}
+
+a {
+    font-size: 24px;
+    display: block;
+    color: white;
+
+    border-radius: 5px;
+    padding: 5px;
+
+    background-color: dodgerblue;
+    
+    transition-duration: 0.2s;
+
+    text-decoration: none;
+
+    margin-top: 10px;
+
+    max-width: 100px;
+}
\ No newline at end of file
diff --git a/webcards/styles/home/desktop.css b/webcards/styles/home/desktop.css
new file mode 100644
index 0000000..0edda76
--- /dev/null
+++ b/webcards/styles/home/desktop.css
@@ -0,0 +1,6 @@
+@media (min-width: 600px) {
+    div.content > div {
+        display: flex;
+        flex-direction: row;
+    }
+}
\ No newline at end of file
diff --git a/webcards/styles/home/mobile.css b/webcards/styles/home/mobile.css
new file mode 100644
index 0000000..4e469de
--- /dev/null
+++ b/webcards/styles/home/mobile.css
@@ -0,0 +1,6 @@
+@media (max-width: 599px) {
+    div.content > div {
+        display: flex;
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/webcards/styles/icofont.css b/webcards/styles/icofont.css
new file mode 100644
index 0000000..3bc40e5
--- /dev/null
+++ b/webcards/styles/icofont.css
@@ -0,0 +1,25 @@
+@font-face
+{
+    font-family: "IcoFont";
+    font-weight: 400;
+    font-style: normal;
+    src:    url("../fonts/icofont.woff2") format("woff2"),
+            url("../fonts/icofont.woff") format("woff");
+}
+
+.icofont {
+    font-family: 'IcoFont' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    line-height: 1;
+    /* Better Font Rendering =========== */
+    font-feature-settings: "liga";
+    -webkit-font-feature-settings: "liga";
+    -webkit-font-smoothing: antialiased;
+}
\ No newline at end of file