fix /learn home UI

app/views/practice/index.scala

@@ -37,7 +37,7 @@ if (confirm('You will lose your practice progress!')) this.parentNode.submit();
           )
         ),
         div(cls := "page-menu__content practice-app")(
-          div(cls := "sections")(
+          st.section(
             data.structure.sections.map { section =>
               div(cls := "section")(
                 h2(section.name),

ui/learn/css/_layout.scss

@@ -16,26 +16,38 @@ $mq-col3: $mq-col3-uniboard;
   &__main { grid-area: main; }
   &__table { grid-area: table; }
 
-  grid-template-areas:
-  'main'
-  'table'
-  'side';
+  &--run {
+    grid-template-areas:
+    'main'
+    'table'
+    'side';
+  }
+  &--map {
+    grid-template-areas:
+    'side'
+    'main';
+  }
   grid-gap: $block-gap;
 
   @include breakpoint($mq-col2) {
-    grid-template-columns: $col2-uniboard-width $col2-uniboard-table;
-    grid-template-rows: fit-content(0);
-    grid-template-areas:
-    'main table'
-    'side .';
+    &--run {
+      grid-template-columns: $col2-uniboard-width $col2-uniboard-table;
+      grid-template-rows: fit-content(0);
+      grid-template-areas:
+      'main table'
+      'side .';
+    }
     &--map {
-      grid-template-areas: 'main side';
+      grid-template-columns: $col3-uniboard-side auto;
+      grid-template-areas: 'side main';
     }
   }
 
   @include breakpoint($mq-col3) {
-    grid-template-columns: $col3-uniboard-side $col3-uniboard-width $col3-uniboard-table;
-    grid-template-areas:
-    'side main table';
+    &--run {
+      grid-template-columns: $col3-uniboard-side $col3-uniboard-width $col3-uniboard-table;
+      grid-template-areas:
+      'side main table';
+    }
   }
 }

ui/learn/css/_map.scss

@@ -11,19 +11,15 @@
     text-align: center;
   }
   .categ_stages {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    margin: 10px 0 36px 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+    grid-gap: 1em;
+    margin: .8em 0 3em 0;
   }
   .stage {
-    @extend %box-radius;
+    @extend %box-radius, %flex-center-nowrap;
     @include transition();
-    display: flex;
-    align-items: center;
     position: relative;
-    flex: 0 0 49%;
-    width: 49%;
     height: 90px;
     color: #fff;
     margin-top: 13px;

ui/site/css/practice/_app.scss

@@ -1,5 +1,5 @@
 .practice-app {
-  .section {
+  section {
     > h2 {
       @extend %roboto;
       color: $c-font-dim;