diff --git a/css/index.css b/css/index.css deleted file mode 100644 index e4eb47f..0000000 --- a/css/index.css +++ /dev/null @@ -1,51 +0,0 @@ -@font-face { - font-family: 'Share Tech'; - font-style: normal; - font-weight: 400; - src: local('Share Tech Regular'), local('ShareTech-Regular'), url(../fonts/ShareTech.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -* { - color: white; - font-family: 'Share Tech'; - font-size: 1.05em; -} - -body { - background-image: url("../images/bg.jpg"); - background-size: cover; -} - -h1 { - font-size: 50px; - margin: 40px; - text-shadow: 3px 2px rgb(153, 145, 175); - text-align: center; -} - -button { - color: black; - width: 100%; -} - -a { - color: lightcyan; - text-decoration: none; -} - -#actions { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-gap: 20px; - margin: 40px auto; - width: 700px; - justify-items: left; -} - -#play { - text-align: center; - text-shadow: 2px 1px rgb(153, 145, 175); - font-size: 1.5em; - margin 40px; -} diff --git a/css/webtris.css b/css/style.css similarity index 62% rename from css/webtris.css rename to css/style.css index c5b3d98..c02d224 100644 --- a/css/webtris.css +++ b/css/style.css @@ -5,6 +5,7 @@ src: local('Share Tech Regular'), local('ShareTech-Regular'), url(../fonts/ShareTech.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + @font-face { font-family: 'Share Tech Mono'; font-style: normal; @@ -14,10 +15,9 @@ } * { - padding: 0; - margin: 0; color: white; font-family: 'Share Tech'; + font-size: 1.05em; } body { @@ -31,60 +31,71 @@ h1 { text-shadow: 3px 2px rgb(153, 145, 175); text-align: center; } - -canvas { - display: block; - flex-shrink: 0; + +button { + color: black; + width: 100%; } -.flex-columns { - display: flex; - flex-direction: row; - justify-content: center; - margin: 0 auto; +a { + text-decoration: none; } -.flex-space { - flex-grow: 2; +#actions { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 20px; + margin: 40px auto; + width: 700px; + justify-items: left; } -.flex-rows { - display: flex; - flex-direction: column; - margin: 5% 2%; - height: 400px; - width: 150px; +#play { + color: lightcyan; + text-align: center; + font-weight: bold; + text-shadow: 2px 1px rgb(153, 145, 175); + font-size: 1.5em; + margin 40px; +} + +#grid { + display: grid; + grid-template-columns: 2fr 3fr 10fr 6fr; + grid-gap: 20px; + margin: auto; + width: 550px; } #hold { + grid-column: 1 / 3; + grid-row: 1; width: 120px; - justify-content: right; -} - -#stats { - display: flex; - flex-direction: row; - margin: 10% 0; - font-size: 1.2em; } #stats-names { + grid-column: 1; + grid-row: 2; font-family: 'Share Tech'; text-align: left; + align-self: top; } #stats-values { + grid-column: 2; + grid-row: 2; text-align: right; font-family: 'Share Tech Mono'; - min-width: 90px; + align-self: top; } #matrix { - margin: 5% 2%; + grid-column: 3; + grid-row: 1 / 3; border: 0.5px solid grey; } #next { - width: 120px; - margin: 5% 2%; + grid-column: 4; + grid-row: 1 / 3; } \ No newline at end of file diff --git a/index.php b/index.php index 24f40b8..6880333 100644 --- a/index.php +++ b/index.php @@ -3,34 +3,32 @@