Merge pull request #102 from Vauhtijuoksu/general24

General24

Pipfile

@@ -35,3 +35,4 @@ start = "python manage.py runserver"
 mm = "python manage.py makemigrations"
 migrate = "python manage.py migrate"
 test = "python manage.py test --settings=vauhtijuoksu.settings.tests"
+compilescss = "python manage.py compilescss"

docker-compose.yml

@@ -10,6 +10,7 @@ services:
       DJANGO_SETTINGS_MODULE: vauhtijuoksu.settings.docker
     entrypoint: /home/cms/scripts/docker_entrypoint.sh
     volumes:
+      - ./vj_cms:/home/cms/vj_cms
       - ./marathon:/home/cms/marathon
       - ./vauhtijuoksu:/home/cms/vauhtijuoksu
       - ./templates:/home/cms/templates

static/css/_globals.scss

@@ -9,26 +9,50 @@ body {
   background-image: $body-bg-image;
 }
 
-.content {
-  background-color: $content-bg;
+.main-box {
+  border-radius: $main-box-border-radius;
+  background-color: $main-box-bg;
+  padding: $main-box-padding;
+  margin: $main-box-margin;
+}
+
+.user-content{
+  margin-top: $space-between-menu-and-content;
   text-align: $content-text-align;
-  padding: $content-padding;
-  margin: $content-margin;
-  filter: $content-filter;
+  > img {
+    max-width: 100%;
+  }
+}
+
+.basic-box {
+  border: $box-border;
+  border-radius: $box-border-radius;
 }
 
 .divider {
-  height: 30vw;
-  max-height: $divider-height;
+  height: $divider-height;
+  max-height: $divider-max-height;
   width: $divider-width;
-  background-image: url("../../vauhtijuoksu/img/divider_0.png");
+  max-width: $divider-max-width;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
   margin: auto;
   display: block;
 }
 
+.divider-0 {
+  background-image: $divider-0
+}
+.divider-1 {
+  background-image: $divider-1
+}
+.divider-2 {
+  background-image: $divider-2
+}
+.divider-3 {
+  background-image: $divider-3
+}
 
 .required-field > label::after {
   opacity: 50%;
@@ -42,6 +66,10 @@ body {
   display: none;
 }
 
+.fixed{
+  position: fixed;
+}
+
 .sponsor {
   margin: $sponsor-margin;
   max-width: $sponsor-max-width;

static/css/_menu.scss

@@ -1,44 +1,57 @@
-.menu-wrapper {
-  padding-bottom: 70px;
-  padding-top: 40px;
+.menu {
+  text-align: $menu-text-align;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: $increment-xs;
+  justify-content: space-around;
 
-  &.fullscreen {
-    margin-top: -230px;
-    padding-bottom: 0px;
-    min-height: 0px;
+  .menu-link {
+    white-space: nowrap;
+    background-color: $menu-link-bg-color;
+    border: $menu-link-border;
+    border-radius: $menu-link-border-radius;
+    font-size: $menu-link-font-size-normal;
+    padding: $menu-link-padding;
+    color: $menu-link-text-color;
   }
-
+  .menu-link:hover{
+    background-color: $menu-link-hover-bg-color;
+    color: $menu-link-hover-text-color;
+  }
+  @include media-breakpoint-down(md) {
+    .menu-link {
+      font-size: $menu-link-font-size-small;
+    }
+  }
+}
+#vj-scrolldown-menu{
+  position: fixed;
+  top: -200px;
+  transition: all 0.5s ease-in-out;
+  width: 100%;
+  z-index: 9999998;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: $increment-xs;
+  background-color: $primary;
+  border-bottom: $box-border;
+  padding: 25px 10px 5px 10px;
+  font-size: 0.8rem;
   .menu {
-    display: flex;
-    z-index: 10000;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
-    font-size: 32px;
-    line-height: 56px;
-    text-shadow: 2px 2px $menu-link-drop-shadow;
-
-    > div {
-      padding-left: 20px;
-      padding-right: 20px;
+    padding-left: 10px;
+    padding-right: 10px;
+    flex-wrap: nowrap;
+    overflow-x: hidden;
+    mask-image: linear-gradient(90deg, #000 99%, transparent);
+    .menu-link{
+      font-size: 0.8rem;
     }
+    .menu-link:hover{
+      background-color: $viuhti-violet;
 
-    .menu-link {
-      color: $menu-link-color;
-      padding-left: 20px;
-      padding-right: 20px;
-
-      &:visited {
-        color: $menu-link-color;
-      }
-
-      &:hover {
-        color: $menu-link-hover-color;
-      }
-
-      &:active {
-        color: $menu-link-color;
-      }
     }
   }
-}
+}
+

static/css/_variables.scss

@@ -1,34 +1,29 @@
 // Default variables here
 
 // Named colors
-// These are used in some specific places, like "success" and "warning" colors.
-$white: #fff !default;
-$black: #000 !default;
-$blue: #639bff !default;
-$green: #63ffba !default;
-$red: #ff79ae !default;
-$orange: #ff8c5c !default;
-$yellow: #fff982 !default;
-// Some other colour definitions are found in the bootstrap variables
+$viuhti-violet: #87597B !default;
+$viuhti-orange: #c98c7b !default;
+$viuhti-orangedark: #672e1d !default;
+$viuhti-green: #345f65 !default;
+$viuhti-darkgreen: #214a4f !default;
+$viuhti-white: #ded5d2 !default;
+$viuhti-dark: #16031b !default;
+$viuhti-darkfade: rgba(22, 3, 27, 0.69) !default;
+$viuhti-blue: #70b2d3 !default;
+$ERROR: red !default;
 
 $body-bg-image: null !default;
 
 // Theme color palette
 // These are used for some global defaults, like background color etc.
-$bg-1: #34083d !default;
-$bg-2: shade-color($bg-1, 50%) !default;
-$color-1: #b70b86 !default;
-$color-1-light: tint-color($color-1, 30%) !default;
-$color-1-dark: shade-color($color-1, 30%) !default;
-$color-2: #5325a0 !default;
-$color-2-light: tint-color($color-2, 30%) !default;
-$color-2-dark: shade-color($color-2, 30%) !default;
+
 
 // Sizes
 // root size affects the value of 1rem, so everything
 $font-size-root: 22px !default;
 
 // increment used for some margins, paddings etc
+$increment-xxs: 2px !default;
 $increment-xs: 5px !default;
 $increment-sm: 2*$increment-xs !default;
 $increment-md: 2*$increment-sm !default;
@@ -37,48 +32,65 @@ $increment-xl: 5*$increment-sm !default;
 
 $grid-breakpoints: (
     xs: 0,
-    sm: 420px, /* bs: 576px */
-    md: 620px, /* bs: 768px */
-    lg: 820px, /* bs: 992px */
+    sm: 576px, /* bs: 576px */
+    md: 768px, /* bs: 768px */
+    lg: 992px, /* bs: 992px */
     xl: 1200px,
     xxl: 1400px,
 );
 
-// Bootstrap variable defaults. Override these where it might be specifically useful.
-$body-bg: $bg-1 !default;
-$body-color: $color-2-light !default;
+$body-bg: $viuhti-green !default;
+$body-color: $viuhti-dark !default;
+
+$primary: $viuhti-orange !default;
+$secondary: $viuhti-violet !default;
 
-$primary: $color-1 !default;
-$secondary: $color-2-dark !default;
+$bg-1: $body-bg !default;
+$bg-2: $primary !default;
 
-$link-color: $color-1-light !default;
+$link-color: $viuhti-blue !default;
 $link-decoration: none !default;
-$link-hover-color: $color-2-light !default;
+$link-hover-color: $viuhti-orange !default;
 $link-hover-decoration: none !default;
 // For more bootstrap overridables, check out node_modules/bootstrap/scss/_variables.scss
 
 // App specifical global defaults.
 // Override specific variables for specific results
 $title-color: $primary !default;
 
-$content-bg: $bg-2 !default;
-$content-shadow: $content-bg !default;
-$content-padding: $increment-lg $increment-md $increment-md !default;
+$box-border: $viuhti-dark $increment-xxs solid !default;
+$box-border-radius: $increment-md !default;
+
+$main-box-bg: $secondary !default;
+$main-box-border-radius: $box-border-radius !default;
+$main-box-padding: $increment-md !default;
+$main-box-margin: $increment-sm !default;
+
 $content-text-align: center !default;
-$content-margin: $increment-lg auto $increment-lg!default;
-$content-filter: drop-shadow(6px 6px 0px $content-shadow) !default;
+$menu-text-align: $content-text-align !default;
+$menu-link-text-color: $viuhti-dark !default;
+$menu-link-bg-color: $viuhti-white !default;
+$menu-link-hover-text-color: $viuhti-darkfade !default;
+$menu-link-hover-bg-color: $viuhti-orange !default;
+$menu-link-font-size-normal: 1.2rem !default;
+$menu-link-font-size-small: 1rem !default;
+$menu-link-border: $box-border !default;
+$menu-link-border-radius: $increment-sm !default;
+$menu-link-padding: 0 8px !default;
+
+$space-between-menu-and-content: $increment-md !default;
 
 $table-header-color: $title-color !default;
 $table-row-color: $body-color !default;
-$table-border-color: $color-1-dark !default;
+$table-border-color: $primary !default;
 
+$speechbubble-bg: $viuhti-white;
 
-$menu-link-drop-shadow: $bg-2 !default;
-$menu-link-color: $link-color !default;
-$menu-link-hover-color: $link-hover-color !default;
 
 $divider-width: 128px !default;
-$divider-height: 64px !default;
+$divider-height: 12vw !default;
+$divider-max-height: 100px !default;
+$divider-max-width: 100% !default;
 
 $sponsor-margin: $increment-lg 0 !default;
 $sponsor-max-width: 400px !default;
@@ -94,37 +106,36 @@ $incentive-button-color: $secondary !default;
 $incentive-button-font-size: 1.2rem !default;
 
 $incentive-copy-button-color: $secondary !default;
-$incentive-copy-button-hover-color: $white !default;
+$incentive-copy-button-hover-color: $viuhti-white !default;
 
 $incentive-checkbox-size: $increment-lg !default;
 
 $incentive-bar-height: $increment-xs !default;
 $incentive-bar-border-radius: 2px !default;
 $incentive-bar-margin-top: -$increment-xs !default;
 $incentive-bar-margin-bottom: $increment-xs !default;
-$incentive-bar-bg-color: $black !default;
-$incentive-bar-fill-color: $yellow !default;
+$incentive-bar-bg-color: $viuhti-dark !default;
+$incentive-bar-fill-color: $viuhti-green !default;
 
-$incentive-count-text-color: $primary !default;
-$incentive-popup-bg-color: $bg-1 !default;
+$incentive-count-text-color: $viuhti-dark !default;
+$incentive-popup-bg-color: $viuhti-white !default;
 
 // Donate bar
 $donate-bar-height: $increment-xl !default;
 
 $donate-bar-border: none !default;
 $donate-bar-fill-border: none !default;
-$donate-bar-bg-color: $black !default;
-$donate-bar-color: $yellow !default;
+$donate-bar-bg-color: $viuhti-dark !default;
+$donate-bar-color: $viuhti-orange !default;
 $donate-bar-text-color: $primary !default;
-$donate-bar-color-full: $green !default;
+$donate-bar-color-full: $viuhti-green !default;
 $donate-bar-text-color-full: $donate-bar-text-color !default;
 
 $donate-bar-padding: $increment-xs !default;
 $donate-bar-margin: $increment-sm 0 !default;
 $donate-bar-border-radius: $increment-xs !default;
 
 // timetable
-$twitch-icon-image: url("../../vauhtijuoksu/img/twitch.png") !default;
 $twitch-icon-width: 26px !default;
 $twitch-icon-sm-width: $twitch-icon-width !default;
 $twitch-link-color: $link-color !default;
@@ -138,3 +149,12 @@ $timetable-right-width: 55% !default;
 
 $ttt-game-bg-color: $bg-2 !default;
 $ttt-game-hover-bg-color: $bg-1 !default;
+
+
+// default images
+
+$twitch-icon-image: url("../../img/twitch.png") !default;
+$divider-0: url("../../img/divider_0.png") !default;
+$divider-1: url("../../img/divider_1.png") !default;
+$divider-2: url("../../img/divider_2.png") !default;
+$divider-3: url("../../img/divider_3.png") !default;