Modify top-level styles to align scoreboard to bottom

4 years ago · 3b1c834bab
parent 893751ac38
commit 3b1c834bab
2 changed files with 23 additions and 3 deletions
--- a/index.html
+++ b/index.html
@ -7,11 +7,12 @@
        <link rel="stylesheet" href="./src/style/components.css">
    </head>
    <body>
        <h1>Battleship - EECS 448 Project 1</h1>
        <p>Created by Lucas Brakenridge, Javier Barea Lara, Garrett Mills, Evan Powell, and Alec Horlick-Mills</p>
        <!-- This is the container where the Vue.js application will render to. -->
        <div id="wrapper">
            <div class="header">
                <h1>Battleship - EECS 448 Project 1</h1>
                <p>Created by Lucas Brakenridge, Javier Barea Lara, Garrett Mills, Evan Powell, and Alec Horlick-Mills</p>
            </div>
            <!-- The top level component. This controls showing/hiding grids &c. -->
            <app-top-level></app-top-level>
--- a/src/style/components.css
+++ b/src/style/components.css
@ -1,3 +1,21 @@
 #wrapper {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
 }
 .top-level-container {
    flex: 1;
    display: flex;
    flex-direction: column;
 }
 /* Styles for top-level component */
 .top-level-component .game-boards-container {
    display: flex;
@ -96,6 +114,7 @@ p {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1;
 }
 .top-level-component .instructions {