Added few styles to the <hr> lines, fixed some indenting, formatting and positions of overall icons and buttons.

master
Lucas Brakenridge 2 years ago
parent 12856de771
commit 650f28a192
  1. 9
      index.html
  2. 74
      src/style/components.css

@ -10,9 +10,11 @@
<!-- This is the container where the Vue.js application will render to. -->
<div id="wrapper">
<div>
<hr color="#ec8d2e">
<!-- <hr color="#ec8d2e">-->
<hr class="separator separator--line" />
<h1 class="header_title">battleship_eecs448</h1>
<hr color="#ec8d2e">
<hr class="separator separator--dotter" />
<!-- <hr color="#ec8d2e">-->
</div>
<!-- The top level component. This controls showing/hiding grids &c. -->
@ -25,7 +27,8 @@
<form>
<button class="btn github" onClick="window.open('https://github.com/EECS-448-Battleship');">GitHub Repo</button>
</form>
<hr color="#ec8d2e">
<!-- <hr color="#ec8d2e">-->
<hr class="separator separator--line" />
</div>
</footer>
</div>

@ -400,3 +400,77 @@ p {
text-align: center;
margin: 20px;
}
/********** HR LINES************
********************************/
.separator {
border: 0;
}
.separator--line {
border: 0;
border-bottom: 5px solid #ec8d2e;
width: 0;
-webkit-animation: separator-width 1s ease-out forwards;
animation: separator-width 1s ease-out forwards;
}
@-webkit-keyframes separator-width {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes separator-width {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@-webkit-keyframes dot-move-right {
0% {
left: 0;
}
100% {
left: 32px;
}
}
@keyframes dot-move-right {
0% {
left: 0;
}
100% {
left: 32px;
}
}
@-webkit-keyframes dot-move-left {
0% {
left: 0;
}
100% {
left: -32px;
}
}
@keyframes dot-move-left {
0% {
left: 0;
}
100% {
left: -32px;
}
}
.separator--dotter {
border: 0;
border-bottom: 5px dotted #ec8d2e;
width: 0;
-webkit-animation: separator-width 1.5s ease-out forwards;
animation: separator-width 1.5s ease-out forwards;
}

Loading…
Cancel
Save