comunit-base 0.37.200628.0

data/app/assets/stylesheets/comunit/base/socialization.scss

@@ -0,0 +1,112 @@
+@import "biovision/base/default";
+@import "comunit/base/default";
+
+.follow-user-buttons {
+  margin: 0.8rem;
+  text-align: center;
+}
+
+.list-of-entities {
+  .follow-options {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    align-items: center;
+  }
+
+  .follow-user-buttons {
+    text-align: left;
+  }
+}
+
+.list-of-messages {
+  margin: 0;
+  padding: 0;
+
+  li {
+    display: flex;
+    list-style: none;
+    margin: 0 0 1.6rem 0;
+    padding: 0;
+
+    > div {
+      display: flex;
+      max-width: calc(50ch + 10rem);
+      border-radius: 0.8rem;
+      padding: 0.8rem;
+      box-sizing: border-box;
+      flex-wrap: wrap;
+    }
+
+    .heading {
+      font-size: $font-size-decreased;
+      margin-bottom: 0.8rem;
+      width: 100%;
+    }
+
+    .image {
+      flex-basis: 6.4rem;
+      height: 6.4rem;
+      text-align: center;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
+    .message {
+      background: rgba(255, 255, 255, .75);
+      padding: 0.4rem;
+      display: flex;
+      flex: 1;
+
+      p {
+        &:first-of-type {
+          margin-top: 0;
+        }
+
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &.received {
+      > div {
+        background: #e7e7f5;
+
+        .message {
+          margin: 0 0 0 0.8rem;
+        }
+      }
+    }
+
+    &.sent {
+      justify-content: flex-end;
+      justify-self: flex-end;
+
+      > div {
+        background: #d7f5d7;
+      }
+
+      .heading {
+        text-align: right;
+      }
+
+      .message {
+        justify-content: flex-end;
+        margin: 0 0.8rem 0 0;
+        order: 1;
+
+        textarea {
+          font: $font-size-normal $font-family-main;
+        }
+      }
+
+      .image {
+        order: 2;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/comunit/base/themes/default.scss

@@ -0,0 +1,34 @@
+@import "comunit/base/default";
+@import "comunit/base/vars";
+
+//* { outline: solid pink 1px; }
+
+html {
+  background: var(--background-html);
+}
+
+body {
+  background: var(--background-body);
+  border-radius: var(--spacer-xxs);
+  box-shadow: var(--block-shadow);
+  margin: var(--spacer-xs) auto;
+  max-width: $content-width;
+  min-width: 32rem;
+}
+
+@media (max-width: 1100px) {
+  body {
+    box-shadow: none;
+    margin: 0;
+  }
+}
+
+@import "biovision/base/components/hamburger";
+@import "biovision/base/components/carousel";
+@import "comunit/base/components";
+@import "comunit/base/themes/default/header";
+@import "comunit/base/themes/default/footer";
+@import "comunit/base/themes/default/main";
+@import "comunit/base/themes/default/frontpage";
+@import "comunit/base/themes/default/sidebar";
+@import "comunit/base/themes/default/legacy";

data/app/assets/stylesheets/comunit/base/themes/default/footer.scss

@@ -0,0 +1,45 @@
+.main-footer {
+  .content-wrapper {
+    align-items: center;
+    display: grid;
+    font-size: var(--font-size-decreased);
+    grid-auto-rows: auto;
+    grid-gap: var(--spacer-xs);
+    grid-template-columns: repeat(3, 1fr);
+    justify-content: space-between;
+    padding: var(--spacer-xs) var(--spacer-xs) var(--spacer-m);
+  }
+
+  .copyright {
+    color: var(--text-color-secondary);
+  }
+
+  .contact {
+    text-align: right;
+  }
+}
+
+@media (max-width: 800px) {
+  .main-footer {
+    .content-wrapper {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    .copyright {
+      grid-column: 1/-1;
+      grid-row: 2;
+    }
+  }
+}
+
+@media (max-width: 500px) {
+  .main-footer {
+    .content-wrapper {
+      grid-template-columns: 1fr;
+    }
+
+    .copyright {
+      grid-row: 3;
+    }
+  }
+}

data/app/assets/stylesheets/comunit/base/themes/default/frontpage.scss

@@ -0,0 +1,2 @@
+@import "comunit/base/themes/default/frontpage/featured_posts";
+@import "comunit/base/themes/default/frontpage/post_category";

data/app/assets/stylesheets/comunit/base/themes/default/frontpage/featured_posts.scss

@@ -0,0 +1,8 @@
+.posts-featured {
+  h2 {
+    background: var(--section-header-bg);
+    color: var(--section-header-color);
+    display: block;
+    padding: var(--spacer-xs);
+  }
+}

data/app/assets/stylesheets/comunit/base/themes/default/frontpage/post_category.scss

@@ -0,0 +1,36 @@
+.frontpage-posts {
+  h2 {
+    background: var(--section-header-bg);
+    color: var(--section-header-color);
+    font-size: var(--font-size-large);
+    font-weight: 400;
+    display: block;
+    padding: var(--spacer-xs);
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+
+  .carousel-item {
+    padding: var(--spacer-xxs);
+    width: calc(100% / 3);
+  }
+}
+
+@media (max-width: 720px) {
+  .frontpage-posts {
+    .carousel-item {
+      width: 50%;
+    }
+  }
+}
+
+@media (max-width: 500px) {
+  .frontpage-posts {
+    .carousel-item {
+      width: 100%;
+    }
+  }
+}

data/app/assets/stylesheets/comunit/base/themes/default/header.scss

@@ -0,0 +1,108 @@
+@import "comunit/base/default";
+
+.main-header {
+  position: relative;
+
+  .content-wrapper {
+    background: $main-header-bg;
+  }
+
+  .authentication {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--spacer-xs);
+  }
+
+  .image {
+    border: var(--border-primary);
+    border-radius: 50%;
+    height: 3.2rem;
+    margin-right: var(--spacer-xxs);
+    overflow: hidden;
+    width: 3.2rem;
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+}
+
+.main-header-middle {
+  align-items: center;
+  background: $main-header-middle-bg;
+  display: flex;
+  padding: var(--spacer-xs);
+
+  .logo {
+    display: block;
+    flex: none;
+    height: var(--header-logo-size);
+    overflow: hidden;
+    width: var(--header-logo-size);
+
+    img {
+      height: 100%;
+      object-fit: contain;
+      width: 100%;
+    }
+  }
+
+  .coat-of-arms {
+    flex: none;
+    height: var(--coat-of-arms-size);
+    margin: 0 0 0 auto;
+    overflow: hidden;
+    width: var(--coat-of-arms-size);
+
+    img {
+      height: 100%;
+      object-fit: contain;
+      width: 100%;
+    }
+  }
+}
+
+.header-content {
+  padding: var(--spacer-s);
+}
+
+.header-filter {
+  align-items: center;
+  display: flex;
+  padding: var(--spacer-xs);
+  position: relative;
+
+  form {
+    position: absolute;
+    right: var(--spacer-xs);
+    top: 50%;
+    transform: translate(0, -50%);
+    z-index: 5;
+  }
+}
+
+@media (max-width: 800px) {
+  :root {
+    --header-logo-size: 16rem;
+    --coat-of-arms-size: 8rem;
+  }
+}
+
+@media (max-width: 720px) {
+  :root {
+    --header-logo-size: 14rem;
+    --coat-of-arms-size: 6rem;
+  }
+}
+
+@media (max-width: 640px) {
+  :root {
+    --header-logo-size: 10rem;
+  }
+}
+
+@import "comunit/base/themes/default/header/search";
+@import "comunit/base/themes/default/header/navigation";

data/app/assets/stylesheets/comunit/base/themes/default/header/navigation.scss

@@ -0,0 +1,139 @@
+@import "comunit/base/default";
+
+$header-nav-hamburger-point: 900px !default;
+
+.main-nav {
+  font-weight: 700;
+
+  ul {
+    background: $header-nav-bg;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    transition: .25s;
+    transform-origin: top left;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+
+  a {
+    color: inherit;
+    display: block;
+    padding: var(--spacer-xs);
+    text-decoration: none;
+  }
+
+  .primary {
+    color: $header-nav-primary-color;
+    text-shadow: $header-nav-primary-shadow;
+
+    > li {
+      background: $header-nav-primary-bg;
+
+      > a {
+        &.active,
+        &:active,
+        &:hover {
+          background: $header-nav-primary-active-bg;
+          color: $header-nav-primary-active-color;
+          text-shadow: $header-nav-primary-active-shadow;
+        }
+      }
+    }
+  }
+
+  .secondary {
+    background: $header-nav-secondary-bg;
+    color: $header-nav-secondary-color;
+    font-weight: 400;
+    text-shadow: $header-nav-secondary-shadow;
+
+    a {
+      &:active,
+      &:hover {
+        background: $header-nav-secondary-active-bg;
+        color: $header-nav-secondary-active-color;
+        text-shadow: $header-nav-secondary-active-shadow;
+      }
+    }
+  }
+}
+
+@media (min-width: $header-nav-hamburger-point) {
+  .main-nav {
+    .hamburger-morpher {
+      display: none;
+    }
+
+    .morphing-hamburger {
+      display: none;
+    }
+
+    .primary {
+      display: block;
+
+      > li {
+        display: inline-block;
+
+        &:hover {
+          background: $header-nav-primary-active-bg;
+
+          ul {
+            transform: scaleY(1);
+          }
+        }
+      }
+    }
+
+    li {
+      position: relative;
+
+      ul {
+        left: 0;
+        min-width: 20rem;
+        position: absolute;
+        top: 100%;
+        transform: scaleY(0);
+        z-index: 11;
+      }
+
+    }
+  }
+}
+
+@media (max-width: #{$header-nav-hamburger-point + 1}) {
+  .main-nav {
+    left: var(--spacer-xs);
+    position: absolute;
+    top: var(--spacer-xs);
+    z-index: 10;
+
+    .primary {
+      position: absolute;
+      width: 30rem;
+    }
+
+    .hamburger-morpher {
+      &:not(:checked) {
+        ~ ul {
+          pointer-events: none;
+          transform: scaleY(0);
+        }
+      }
+
+      &:checked {
+        ~ ul {
+          transform: scaleY(1);
+        }
+      }
+    }
+
+    .secondary {
+      padding-left: var(--spacer-s);
+    }
+  }
+}