Index: ow/static/css/main.css
===================================================================
--- ow/static/css/main.css	(revision 1fe89ea002ea79bfdaa81b47ef82c7f6a265ce0a)
+++ ow/static/css/main.css	(revision 594fbe8b4d8cda74bd859615fa7ea143f77878b6)
@@ -408,4 +408,432 @@
   max-width: 100%;
 }
+.header-content {
+  padding: 1em 1.5em;
+}
+.header-content a {
+  text-decoration: none;
+}
+.header-content .description {
+  margin: 0;
+}
+/* logo ----------------------------------------------------------------------*/
+.logo {
+  font-size: 24px;
+  font-size: 1.5rem;
+  line-height: 1em;
+  font-weight: 800;
+  text-transform: uppercase;
+  margin: 0;
+  display: inline-block;
+}
+.logo span {
+  transition: all 250ms ease-in-out;
+}
+.logo:hover span {
+  color: #EE4056;
+}
+.logo-open {
+  display: block;
+  color: #EE4056;
+}
+.logo-work,
+.logo-outs {
+  color: #f8b5be;
+}
+/* menu navigation -----------------------------------------------------------*/
+.nav-site {
+  font-size: 13px;
+  font-size: 0.8125rem;
+}
+.nav-site ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.nav-site li {
+  border-left: 1px solid #e1e1e1;
+  flex-grow: 1;
+  text-align: center;
+}
+.nav-site a {
+  color: #959595;
+  padding: 1.25em;
+  display: block;
+}
+.nav-site a:hover {
+  color: #151515;
+}
+.nav-site .is-active a {
+  color: #151515;
+}
+/* Add workout button with submenu -------------------------------------------*/
+.add-workout {
+  position: relative;
+  /* submenu -------------------------------------------------------------- */
+}
+.add-workout > a {
+  color: #EE4056;
+}
+.add-workout > a:before {
+  content: "+";
+  font-weight: 800;
+  font-size: 32px;
+  font-size: 2rem;
+  line-height: 0;
+  position: relative;
+  top: 8px;
+}
+.add-workout > a span {
+  display: none;
+}
+.add-workout > a:hover {
+  background-color: #EE4056;
+  color: white;
+}
+.add-workout:hover:after {
+  content: "";
+  position: absolute;
+  background-color: white;
+  bottom: -1px;
+  width: 100%;
+  height: 1px;
+  display: block;
+  z-index: 20;
+}
+.add-workout:hover ul {
+  display: inline-block;
+}
+.add-workout ul {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.95);
+  right: -1px;
+  border: 1px solid #e1e1e1;
+  width: 153px;
+}
+.add-workout ul li {
+  border-left: transparent;
+  text-align: left;
+}
+.add-workout ul a:hover {
+  background-color: #fbfbfb;
+}
+/* description ---------------------------------------------------------------*/
+.description {
+  font-size: 14px;
+  font-size: 0.875rem;
+  font-weight: 300;
+  letter-spacing: 0.025em;
+  color: #959595;
+}
+/* ------------------------------ STATES ------------------------------------ */
+/* when user is login --------------------------------------------------------*/
+.is-login .header-content {
+  border-bottom: 1px solid #e1e1e1;
+  display: flex;
+  padding: 0em 1.5em;
+  justify-content: space-between;
+  align-items: center;
+}
+.is-login .description {
+  display: none;
+}
+.is-login .logo-open {
+  display: inline-block;
+}
+.workout-content {
+  padding: 2em  1em;
+}
+@media (min-width: 480px) {
+  .workout-content {
+    padding: 2em 6em;
+  }
+}
+@media (min-width: 800px) {
+  .workout-content {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+/* list mode */
+.workout-list {
+  margin-right: 2em;
+  width: 100%;
+  /* provisional layout, replace this with grid layout system based on final content */
+}
+.workout-list > h2 {
+  font-weight: 300;
+  margin: 0 0 1.5em;
+}
+/* Module resume on dashboard workouts */
+.workout-resume {
+  padding: 1.5em 0;
+  position: relative;
+  max-width: 700px;
+}
+@media (min-width: 800px) {
+  .workout-resume {
+    padding-left: 2em;
+    border-left: 1px solid #e1e1e1;
+    transition: all 250ms ease-in-out;
+  }
+}
+.workout-resume:hover {
+  border-color: #151515;
+}
+.workout-resume:hover .workout-title:before {
+  color: #151515;
+}
+.workout-resume ul {
+  padding: 0;
+  list-style-type: none;
+  font-size: 13px;
+  font-size: 0.8125rem;
+}
+.workout-resume ul a {
+  display: block;
+  text-decoration: none;
+}
+.bike:before {
+  display: block;
+  content: "";
+  width: 30px;
+  height: 30px;
+  background-image: url('../media/img/bike.svg');
+  background-size: 100%;
+}
+.workout-title {
+  font-size: 14px;
+  font-size: 0.875rem;
+  margin: 0 0 0em 0;
+  position: relative;
+}
+.workout-title:before {
+  transition: all 250ms ease-in-out;
+  content: "▶";
+  position: absolute;
+  left: -3.25em;
+  top: 0.35em;
+  color: #e1e1e1;
+  font-size: 10px;
+  font-size: 0.625rem;
+}
+.workout-title a {
+  color: #151515;
+  text-decoration: none;
+}
+.workout-title a:hover {
+  color: #EE4056;
+}
+.workout-info {
+  display: flex;
+  align-items: center;
+  margin: 0.25em 0;
+}
+.workout-info li {
+  color: #959595;
+}
+.workout-info li:after {
+  content: "|";
+  margin: 0 0.5em;
+}
+.workout-info li:last-child:after {
+  content: "";
+  margin: 0;
+}
+.workout-map {
+  margin-top: 1em;
+}
+.workout-map img {
+  width: 100%;
+}
+.workout-intro {
+  font-size: 13px;
+  font-size: 0.8125rem;
+  color: #151515;
+}
+.workout-options {
+  display: inline-block;
+  border: 1px solid #e1e1e1;
+  margin-bottom: 0;
+  border-radius: 4px;
+  padding: 0;
+}
+.workout-options li {
+  display: inline-block;
+  border-right: 1px solid #e1e1e1;
+}
+.workout-options li:last-child {
+  border-right: none;
+}
+.workout-options a {
+  display: block;
+  color: #959595;
+  padding: 0.5em 0.75em;
+  text-decoration: none;
+}
+.workout-options a:hover {
+  color: #151515;
+}
+.owo-del a:hover {
+  color: red;
+}
+.workout-aside {
+  width: 100%;
+}
+@media (min-width: 800px) {
+  .workout-aside {
+    max-width: 300px;
+    padding-left: 1.5em;
+    border-left: 1px solid #e1e1e1;
+  }
+}
+.aside-profile {
+  margin-bottom: 1em;
+}
+.aside-profile img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+.aside-profile h2 {
+  font-weight: 400;
+  font-size: 18px;
+  font-size: 1.125rem;
+  margin: 0 0 0.5em 0;
+}
+.aside-profile ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  font-size: 13px;
+  font-size: 0.8125rem;
+  color: #555555;
+}
+/* Week report */
+.svg-cotent svg {
+  width: 100%;
+  height: 100%;
+}
+.svg-cotent .label {
+  font-size: 13px;
+  font-size: 0.8125rem;
+  text-anchor: middle;
+}
+.svg-cotent .tick {
+  font-size: 13px;
+  font-size: 0.8125rem;
+}
+/* dashboard graphics*/
+.x-axis path,
+.x-axis line {
+  fill: none;
+  stroke: none;
+}
+.bar {
+  fill: #f8b5be;
+}
+.bar:hover {
+  fill: #ee4056;
+}
+.current {
+  fill: #ee4056;
+}
+.week-stats {
+  border: 1px solid #e1e1e1;
+  background-color: rgba(225, 225, 225, 0.1);
+  padding: 0.75em;
+  border-radius: 4px;
+  margin-bottom: 2em;
+}
+.week-stats h3 {
+  margin: 0;
+  font-size: 14px;
+  font-size: 0.875rem;
+}
+.week-stats h3 + p {
+  margin: 0.25em 0 2em 0;
+  color: #959595;
+  font-size: 13px;
+  font-size: 0.8125rem;
+}
+.workout-activity-summary {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  background-color: rgba(21, 21, 21, 0.8);
+  margin-bottom: 0.75em;
+}
+.workout-activity-summary li {
+  color: #e1e1e1;
+  border-bottom: 1px solid #959595;
+  padding: 0.75em 1em;
+  display: flex;
+  justify-content: space-between;
+}
+.workout-activity-summary li:last-child {
+  margin-bottom: 0;
+  border: none;
+}
+.workout-activity-summary li span:first-child {
+  font-weight: bold;
+}
+.workout-activity-tree {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  transition: all 250ms ease-in-out;
+  font-size: 13px;
+  font-size: 0.8125rem;
+}
+.workout-activity-tree > li {
+  margin-bottom: 0.5em;
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid #e1e1e1;
+}
+.workout-activity-tree a {
+  text-decoration: none;
+  display: block;
+  color: #EE4056;
+}
+.workout-activity-tree a:hover {
+  color: #151515;
+}
+.workout-activity-tree a.viewing-year {
+  color: #151515;
+  font-weight: 700;
+  margin-bottom: 0.5em;
+  font-size: 16px;
+  font-size: 1rem;
+}
+.workout-activity-tree a.viewing-month {
+  background-color: #e1e1e1;
+  color: #151515;
+  font-weight: 700;
+}
+.workout-activity-tree-year {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+.workout-activity-tree-year > li {
+  display: block;
+  margin-bottom: 0.5em;
+}
+.workout-activity-tree-year a {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5em;
+  background-color: #fbfbfb;
+  color: #555555;
+}
+.workout-activity-tree-year a:hover {
+  background-color: #e1e1e1;
+}
 .login-content {
   background-image: url("../media/img/back-01.jpg");
@@ -470,413 +898,21 @@
 <a class="login-remember" href="#">Forgot your password?</a>
 */
-.header-content {
-  padding: 1em 1.5em;
-}
-.header-content a {
-  text-decoration: none;
-}
-.header-content .description {
-  margin: 0;
-}
-/* logo ----------------------------------------------------------------------*/
-.logo {
-  font-size: 24px;
-  font-size: 1.5rem;
-  line-height: 1em;
-  font-weight: 800;
-  text-transform: uppercase;
-  margin: 0;
-  display: inline-block;
-}
-.logo span {
-  transition: all 250ms ease-in-out;
-}
-.logo:hover span {
-  color: #EE4056;
-}
-.logo-open {
-  display: block;
-  color: #EE4056;
-}
-.logo-work,
-.logo-outs {
-  color: #f8b5be;
-}
-/* menu navigation -----------------------------------------------------------*/
-.nav-site {
-  font-size: 13px;
-  font-size: 0.8125rem;
-}
-.nav-site ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.nav-site li {
-  border-left: 1px solid #e1e1e1;
-  flex-grow: 1;
-  text-align: center;
-}
-.nav-site a {
-  color: #959595;
-  padding: 1.25em;
-  display: block;
-}
-.nav-site a:hover {
-  color: #151515;
-}
-.nav-site .is-active a {
-  color: #151515;
-}
-/* Add workout button with submenu -------------------------------------------*/
-.add-workout {
-  position: relative;
-  /* submenu -------------------------------------------------------------- */
-}
-.add-workout > a {
-  color: #EE4056;
-}
-.add-workout > a:before {
-  content: "+";
-  font-weight: 800;
-  font-size: 32px;
-  font-size: 2rem;
-  line-height: 0;
-  position: relative;
-  top: 8px;
-}
-.add-workout > a span {
-  display: none;
-}
-.add-workout > a:hover {
-  background-color: #EE4056;
-  color: white;
-}
-.add-workout:hover:after {
-  content: "";
-  position: absolute;
-  background-color: white;
-  bottom: -1px;
-  width: 100%;
-  height: 1px;
-  display: block;
-  z-index: 20;
-}
-.add-workout:hover ul {
-  display: inline-block;
-}
-.add-workout ul {
-  display: none;
-  flex-direction: column;
-  position: absolute;
-  background-color: rgba(255, 255, 255, 0.95);
-  right: -1px;
-  border: 1px solid #e1e1e1;
-  width: 153px;
-}
-.add-workout ul li {
-  border-left: transparent;
-  text-align: left;
-}
-.add-workout ul a:hover {
-  background-color: #fbfbfb;
-}
-/* description ---------------------------------------------------------------*/
-.description {
-  font-size: 14px;
-  font-size: 0.875rem;
-  font-weight: 300;
-  letter-spacing: 0.025em;
-  color: #959595;
-}
-/* ------------------------------ STATES ------------------------------------ */
-/* when user is login --------------------------------------------------------*/
-.is-login .header-content {
-  border-bottom: 1px solid #e1e1e1;
-  display: flex;
-  padding: 0em 1.5em;
-  justify-content: space-between;
-  align-items: center;
-}
-.is-login .description {
-  display: none;
-}
-.is-login .logo-open {
-  display: inline-block;
-}
-.workout-content {
+.user-profile {
   padding: 2em  1em;
 }
 @media (min-width: 480px) {
-  .workout-content {
+  .user-profile {
     padding: 2em 6em;
   }
 }
-@media (min-width: 800px) {
-  .workout-content {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-/* list mode */
-.workout-list {
-  margin-right: 2em;
-  width: 100%;
-  /* provisional layout, replace this with grid layout system based on final content */
-}
-.workout-list > h2 {
-  font-weight: 300;
-  margin: 0 0 1.5em;
-}
-/* Module resume on dashboard workouts */
-.workout-resume {
-  padding: 1.5em 0;
-  position: relative;
-  max-width: 700px;
-}
-@media (min-width: 800px) {
-  .workout-resume {
-    padding-left: 2em;
-    border-left: 1px solid #e1e1e1;
-    transition: all 250ms ease-in-out;
-  }
-}
-.workout-resume:hover {
-  border-color: #151515;
-}
-.workout-resume:hover .workout-title:before {
-  color: #151515;
-}
-.workout-resume ul {
-  padding: 0;
-  list-style-type: none;
-  font-size: 13px;
-  font-size: 0.8125rem;
-}
-.workout-resume ul a {
-  display: block;
-  text-decoration: none;
-}
-.bike:before {
-  display: block;
-  content: "";
-  width: 30px;
-  height: 30px;
-  background-image: url('../media/img/bike.svg');
-  background-size: 100%;
-}
-.workout-title {
-  font-size: 14px;
-  font-size: 0.875rem;
-  margin: 0 0 0em 0;
-  position: relative;
-}
-.workout-title:before {
-  transition: all 250ms ease-in-out;
-  content: "▶";
-  position: absolute;
-  left: -3.25em;
-  top: 0.35em;
-  color: #e1e1e1;
-  font-size: 10px;
-  font-size: 0.625rem;
-}
-.workout-title a {
-  color: #151515;
-  text-decoration: none;
-}
-.workout-title a:hover {
-  color: #EE4056;
-}
-.workout-info {
-  display: flex;
-  align-items: center;
-  margin: 0.25em 0;
-}
-.workout-info li {
-  color: #959595;
-}
-.workout-info li:after {
-  content: "|";
-  margin: 0 0.5em;
-}
-.workout-info li:last-child:after {
-  content: "";
-  margin: 0;
-}
-.workout-map {
-  margin-top: 1em;
-}
-.workout-map img {
-  width: 100%;
-}
-.workout-intro {
-  font-size: 13px;
-  font-size: 0.8125rem;
-  color: #151515;
-}
-.workout-options {
-  display: inline-block;
-  border: 1px solid #e1e1e1;
-  margin-bottom: 0;
-  border-radius: 4px;
-}
-.workout-options li {
-  display: inline-block;
-  border-right: 1px solid #e1e1e1;
-}
-.workout-options li:last-child {
-  border-right: none;
-}
-.workout-options a {
-  color: #959595;
-  padding: 0.5em 0.75em;
-}
-.workout-options a:hover {
-  color: #151515;
-}
-.owo-del a:hover {
-  color: red;
-}
-.workout-aside {
-  width: 100%;
-}
-@media (min-width: 800px) {
-  .workout-aside {
-    max-width: 300px;
-    padding-left: 1.5em;
-    border-left: 1px solid #e1e1e1;
-  }
-}
-.aside-profile {
-  margin-bottom: 1em;
-}
-.aside-profile img {
-  width: 80px;
-  height: 80px;
+.user-profile img {
+  width: 140px;
+  height: 140px;
   object-fit: cover;
   border-radius: 50%;
 }
-.aside-profile h2 {
-  font-weight: 400;
-  font-size: 18px;
-  font-size: 1.125rem;
-  margin: 0 0 0.5em 0;
-}
-.aside-profile ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
+.user-profile .workout-options {
   font-size: 13px;
   font-size: 0.8125rem;
-  color: #555555;
-}
-/* Week report */
-.svg-cotent svg {
-  width: 100%;
-  height: 100%;
-}
-.svg-cotent .label {
-  font-size: 13px;
-  font-size: 0.8125rem;
-  text-anchor: middle;
-}
-.svg-cotent .tick {
-  font-size: 13px;
-  font-size: 0.8125rem;
-}
-.week-stats {
-  border: 1px solid #e1e1e1;
-  background-color: rgba(225, 225, 225, 0.1);
-  padding: 0.75em;
-  border-radius: 4px;
-  margin-bottom: 2em;
-}
-.week-stats h3 {
-  margin: 0;
-  font-size: 14px;
-  font-size: 0.875rem;
-}
-.week-stats h3 + p {
-  margin: 0.25em 0 2em 0;
-  color: #959595;
-  font-size: 13px;
-  font-size: 0.8125rem;
-}
-.workout-activity-summary {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  background-color: rgba(21, 21, 21, 0.8);
-  margin-bottom: 0.75em;
-}
-.workout-activity-summary li {
-  color: #e1e1e1;
-  border-bottom: 1px solid #959595;
-  padding: 0.75em 1em;
-  display: flex;
-  justify-content: space-between;
-}
-.workout-activity-summary li:last-child {
-  margin-bottom: 0;
-  border: none;
-}
-.workout-activity-summary li span:first-child {
-  font-weight: bold;
-}
-.workout-activity-tree {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  transition: all 250ms ease-in-out;
-  font-size: 13px;
-  font-size: 0.8125rem;
-}
-.workout-activity-tree > li {
-  margin-bottom: 0.5em;
-  padding-bottom: 0.5em;
-  border-bottom: 1px solid #e1e1e1;
-}
-.workout-activity-tree a {
-  text-decoration: none;
-  display: block;
-  color: #EE4056;
-}
-.workout-activity-tree a:hover {
-  color: #151515;
-}
-.workout-activity-tree a.viewing-year {
-  color: #151515;
-  font-weight: 700;
-  margin-bottom: 0.5em;
-  font-size: 16px;
-  font-size: 1rem;
-}
-.workout-activity-tree a.viewing-month {
-  background-color: #e1e1e1;
-  color: #151515;
-  font-weight: 700;
-}
-.workout-activity-tree-year {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-}
-.workout-activity-tree-year > li {
-  display: block;
-  margin-bottom: 0.5em;
-}
-.workout-activity-tree-year a {
-  display: flex;
-  justify-content: space-between;
-  padding: 0.5em;
-  background-color: #fbfbfb;
-  color: #555555;
-}
-.workout-activity-tree-year a:hover {
-  background-color: #e1e1e1;
 }
 /* Workout detail */
@@ -884,17 +920,2 @@
   height: 50vh;
 }
-/* dashboard graphics*/
-.x-axis path,
-.x-axis line {
-  fill: none;
-  stroke: none;
-}
-.bar {
-  fill: #f8b5be;
-}
-.bar:hover {
-  fill: #ee4056;
-}
-.current {
-  fill: #ee4056;
-}
