index page uses css and images; css and img are stored in static dir

2020-09-26 18:16:13 -05:00
parent 72cb61d952
commit 72b760dc17
40 changed files with 19 additions and 5 deletions
@@ -0,0 +1,206 @@
+* {
+    padding:0;
+    margin:0;
+}
+
+a {
+    text-decoration: none;
+}
+a:link {
+    color: red;
+}
+a:visited {
+    color: hotpink;
+}
+a:hover {
+    color: green;
+}
+a:active {
+    color: blue;
+}
+mark {
+    background-color: #900C3F;
+    color: hotpink;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: auto 75px 400px 25px 225px 75px auto;
+    grid-template-rows: 25px 90px 457px auto;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+}
+
+.whitespace {
+    grid-area: 1 / 1 / 2 / 8;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+    background-color: #DAF7A6;
+}
+
+.blessfrey-logo { grid-area: 1 / 3 / 2 / 6; }
+
+/* navigation pane */
+
+.nav-row {
+    grid-area: 2 / 1 / 3 / 8; 
+    background-color: #FFC300;
+}
+
+.nav-grid { 
+    grid-area: 2 / 2 / 3 / 7; 
+    display: flex;
+    flex-direction:row;
+    justify-content:flex-end;
+    display: grid;
+    grid-template-columns: auto repeat(4, 70px) auto;
+    grid-template-rows: 90px;
+    grid-column-gap: 8px;
+    grid-row-gap: 0px; 
+    align-items: end;
+    justify-items: center;
+}
+.nav-bar {
+    grid-area: 1 / 1 / 2 / 7;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    background-image: url(../img/ele/navbar.png);
+    height: 86px;
+    width: 800px;
+}
+.nav-index { 
+    grid-area: 1 / 2 / 2 / 3; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-game { 
+    grid-area: 1 / 3 / 2 / 4;
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-diary { 
+    grid-area: 1 / 4 / 2 / 5; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+.nav-presskit { 
+    grid-area: 1 / 5 / 2 / 6; 
+    display: flex;
+    flex-direction:column;
+    justify-content:flex-end;
+    align-items: bottom;
+    padding-bottom: 3px;
+}
+
+/* nav buttons */
+
+.button {
+    background-color: #000000;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+.button:hover {
+    background-color: #723777;
+    color: #ce50ce;
+    font-size: 16px;
+    border: 2px solid #f7dd8e;
+    height: 48px;
+    width: 70px;
+    text-decoration: none;
+    display: flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items: center;
+}
+
+/* Body */
+
+.body-row {
+    grid-area: 3 / 1 / 4 / 8; 
+    background-color: #FF5733;
+}
+
+.social {
+    grid-area: 3 / 6 / 4 / 7;
+    justify-content: center;
+}
+
+.bg {
+    grid-area: 3 / 3 / 4 / 6; 
+    background-color: #C70039;
+    background-image: url(http://images.verpets.com/pets/peesh/peesh_viral_2.png);
+    width: 650px;
+    height: 457px;
+}
+
+.footer-row {
+    grid-area: 4 / 1 / 5 / 8; 
+    background-color: #900C3F;
+}
+
+.tweets { 
+    grid-area: 4 / 3 / 5 / 4; 
+    margin-right: 0px;
+    margin-left: 0px;
+    margin-top: 10px;
+    margin-bottom: 5px;
+}
+
+.news { 
+    grid-area: 4 / 5 / 5 / 6; 
+    display: flex;
+    flex-direction:column;
+    background-color: #581845; 
+    height: 85px;
+    overflow-y: scroll; 
+    margin-right: 0px;
+    margin-left: 0px;
+    margin-top: 15px;
+    margin-bottom: 0px; 
+    padding-top: 5px;
+    padding-right: 5px;
+    padding-bottom: 5px;
+    padding-left: 8px;
+}
+
+.headline {
+    margin-right: 0px;
+    margin-left: 0px;
+    margin-top: 0px;
+    margin-bottom: 0px; 
+    padding-top: 3px;
+    padding-right: 1px;
+    padding-bottom: 3px;
+    padding-left: 1px;
+}
+
+.footer {
+    background-color: #581845; 
+    padding-top: 5px;
+    padding-right: 25px;
+    box-shadow: 0 100vh 0 100vh #581845;
+    text-align: right;
+    overflow: hidden;
+}