From ea8f308bc00330b5378eb2b8f16d9cc348719c9a Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Thu, 27 Feb 2020 17:48:00 -0500 Subject: Init WebCards --- webcards/styles/client/base.css | 112 +++++++++++++++++++++++++++++++ webcards/styles/client/desktop.css | 134 +++++++++++++++++++++++++++++++++++++ webcards/styles/client/mobile.css | 81 ++++++++++++++++++++++ webcards/styles/client/tablet.css | 41 ++++++++++++ webcards/styles/home/base.css | 53 +++++++++++++++ webcards/styles/home/desktop.css | 6 ++ webcards/styles/home/mobile.css | 6 ++ webcards/styles/icofont.css | 25 +++++++ 8 files changed, 458 insertions(+) create mode 100644 webcards/styles/client/base.css create mode 100644 webcards/styles/client/desktop.css create mode 100644 webcards/styles/client/mobile.css create mode 100644 webcards/styles/client/tablet.css create mode 100644 webcards/styles/home/base.css create mode 100644 webcards/styles/home/desktop.css create mode 100644 webcards/styles/home/mobile.css create mode 100644 webcards/styles/icofont.css (limited to 'webcards/styles') 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 -- cgit v1.2.3