diff --git a/content/assets/stylesheets/includes/cammie.scss b/content/assets/stylesheets/includes/cammie.scss index 18dbd53..f62857d 100644 --- a/content/assets/stylesheets/includes/cammie.scss +++ b/content/assets/stylesheets/includes/cammie.scss @@ -45,12 +45,21 @@ .ctrl { + // Center arrows + display: flex; + justify-content: space-around; + align-items: center; + background-color: $cammie-controls-color; color: white; &:hover { background-color: $zeus_orange; cursor: pointer; } + + &.diag i { + transform: rotate(45deg); + } } .row { @@ -61,6 +70,7 @@ &.top-row, &.middle-row, &.bottom-row { flex-basis: 0; } + &.top-row, &.bottom-row { flex-grow: 1; } diff --git a/content/cammie.erb b/content/cammie.erb index 57caef8..c6b04de 100644 --- a/content/cammie.erb +++ b/content/cammie.erb @@ -31,35 +31,35 @@ title: Cammie
-
- diag up left +
+ <%= fa 'chevron-circle-left' %>
- up + <%= fa 'chevron-circle-up' %>
-
- diag up right +
+ <%= fa 'chevron-circle-up' %>
- left + <%= fa 'chevron-circle-left' %>
 
- right + <%= fa 'chevron-circle-right' %>
-
- diag down left +
+ <%= fa 'chevron-circle-down' %>
- down + <%= fa 'chevron-circle-down' %>
-
- diag down right +
+ <%= fa 'chevron-circle-right' %>