comunit-base 0.37.200628.0

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

@@ -0,0 +1,31 @@
+.header-search {
+  input[type=text] {
+    background: #fff image_url('comunit/base/icons/search.svg') no-repeat center right / 2.4rem 2.4rem;
+    border: var(--border-primary);
+    border-radius: 1.4rem;
+    box-sizing: border-box;
+    box-shadow: 0 0 .4rem 0 rgba(255, 255, 255, .5);
+    display: inline-block;
+    font-size: var(--font-size-normal);
+    height: 2.8rem;
+    line-height: 2.4rem;
+    margin: 0;
+    opacity: .85;
+    padding: 0 var(--spacer-xs);
+    transition: .125s;
+    width: 2.8rem;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:focus,
+    &:valid {
+      border-radius: 0;
+      box-shadow: none;
+      opacity: 1;
+      padding: 0 2.6rem 0 0;
+      width: calc(25ch + 2.6rem);
+    }
+  }
+}

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

@@ -0,0 +1,183 @@
+article.authentication {
+  form {
+    max-width: 51.2rem;
+    margin: 0 auto;
+  }
+}
+
+.profile-edit,
+.user-profile {
+  nav {
+    display: flex;
+    margin: var(--spacer-s) 0;
+
+    div {
+      padding: var(--spacer-xs);
+    }
+  }
+
+  figure {
+    margin: 0 auto;
+
+    .image {
+      box-shadow: .2rem .2rem .4rem rgba(0, 0, 0, .5), -.4rem -.4rem .8rem rgba(0, 0, 0, .25);
+      height: 28rem;
+      margin: var(--spacer-m) auto var(--spacer-s);
+      overflow: hidden;
+      width: 28rem;
+    }
+
+    img {
+      height: 100%;
+      object-fit: contain;
+      width: 100%;
+    }
+  }
+
+  section {
+    margin: var(--spacer-s) 0 0;
+    padding: var(--spacer-s) var(--spacer-xs);
+  }
+
+  dl {
+    margin: var(--spacer-s) 0 0;
+
+    > div {
+      margin-bottom: var(--spacer-s);
+    }
+  }
+
+  dt {
+    color: #555;
+    font-family: $font-family-heading;
+    font-size: var(--font-size-increased);
+  }
+
+  dd {
+    margin: 0 0 0 var(--spacer-xs);
+    padding: var(--spacer-xs);
+  }
+
+  p:first-of-type {
+    margin-top: 0;
+  }
+
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.user-profile {
+  dd {
+    border-radius: .4rem;
+    box-shadow: -.2rem .2rem .3rem rgba(0, 0, 0, .125);
+  }
+}
+
+article.new-profile {
+  padding: 0 0.8rem;
+
+  form {
+    table {
+      th {
+        font-weight: normal;
+        text-align: right;
+        vertical-align: top;
+
+        &[colspan] {
+          padding-top: 3.2rem;
+          text-align: left;
+          font-style: italic;
+          font-weight: bold;
+        }
+
+        label.required::before {
+          color: #ff0000;
+          content: '* '
+        }
+      }
+
+      td {
+        vertical-align: top;
+      }
+
+      tr:first-of-type {
+        th[colspan] {
+          padding-top: 0;
+        }
+      }
+
+      .constrain {
+        font-size: $font-size-small;
+        color: $text-color-secondary;
+        font-style: italic;
+      }
+    }
+  }
+}
+
+article.recovery {
+  form {
+    label {
+      display: inline-block;
+      min-width: 12.5rem;
+    }
+  }
+}
+
+.my-index {
+  display: block;
+  width: 100%;
+
+  .content-wrapper {
+    width: 100%;
+  }
+
+  .profile-image {
+    margin: var(--spacer-m) auto 0;
+
+    .image {
+      box-shadow: .2rem .2rem .4rem rgba(0, 0, 0, .5), -.4rem -.4rem .8rem rgba(0, 0, 0, .25);
+      height: 28rem;
+      margin: 0 auto;
+      overflow: hidden;
+      width: 28rem;
+    }
+
+    img {
+      height: 100%;
+      object-fit: contain;
+      width: 100%;
+    }
+  }
+
+  figcaption {
+    padding: var(--spacer-s);
+    text-align: center;
+  }
+}
+
+.profile-dashboard {
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    margin: 0;
+    padding: var(--spacer-s);
+  }
+}
+
+.my-profile-posts {
+  border-top: .1rem solid #777;
+  margin-top: var(--spacer-m);
+  padding-top: var(--spacer-s);
+
+  nav {
+    margin: var(--spacer-s) auto;
+  }
+}

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

@@ -0,0 +1,45 @@
+@import "comunit/base/default";
+
+#main {
+  align-items: flex-start;
+  background: var(--background-main);
+  display: grid;
+  grid-gap: var(--spacer-xs);
+  grid-template-columns: 3fr 1fr;
+  grid-template-rows: auto;
+
+  .content {
+    width: calc(var(--content-width) - var(--content-width) / 4 - var(--spacer-xs));
+  }
+}
+
+@media (max-width: $content-break) {
+  #main {
+    .content {
+      width: calc(75vw - var(--spacer-xs));
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  #main {
+    display: block;
+
+    .content {
+      width: 100%;
+    }
+  }
+}
+
+.breadcrumbs {
+  border-bottom: var(--border-secondary);
+  margin-bottom: var(--spacer-xs);
+  padding: var(--spacer-xs) var(--spacer-xxs);
+}
+
+article,
+section {
+  .content-wrapper {
+    padding: var(--spacer-xxs);
+  }
+}

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

@@ -0,0 +1,49 @@
+@import "comunit/base/default";
+
+#sidebar {
+  h3 {
+    background: var(--section-header-bg);
+    color: var(--section-header-color);
+    font-size: var(--font-size-large);
+    font-weight: 400;
+    padding: var(--spacer-xxs);
+  }
+}
+
+@media (max-width: 960px) {
+  #sidebar {
+    display: grid;
+    grid-gap: var(--spacer-xs);
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: auto;
+    margin-top: var(--spacer-m);
+  }
+}
+
+@media (max-width: 720px) {
+  #sidebar {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 540px) {
+  #sidebar {
+    grid-template-columns: 1fr;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 48rem;
+  }
+}
+
+.sidebar-regions {
+  figure {
+    padding: var(--spacer-xs);
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
+@import "comunit/base/themes/default/sidebar/posts";
+@import "comunit/base/themes/default/sidebar/polls";

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

@@ -0,0 +1,38 @@
+$vote-percent-color: #efe !default;
+
+.sidebar-poll {
+  .title {
+    font-family: var(--font-family-heading);
+    font-size: var(--font-size-increased);
+    padding: var(--spacer-xxs);
+  }
+
+  .results {
+    margin: var(--spacer-s) 0;
+
+    div {
+      --vote-percent: 0;
+
+      align-items: center;
+      background: linear-gradient(to right, $vote-percent-color, $vote-percent-color var(--vote-percent), #fff var(--vote-percent), #fff);
+      display: flex;
+      margin-bottom: var(--spacer-xxs);
+      padding: var(--spacer-xxs);
+    }
+
+    dt {
+      flex: 1;
+      margin: 0;
+      padding: 0;
+    }
+
+    dd {
+      color: var(--text-color-secondary);
+      flex: 0;
+      font-size: var(--font-size-small);
+      margin: 0;
+      padding: 0;
+      white-space: nowrap;
+    }
+  }
+}

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

@@ -0,0 +1,133 @@
+.sidebar-popular-posts {
+  input {
+    display: none;
+
+    & + div {
+      > div {
+        display: flex;
+        font-size: var(--font-size-decreased);
+        margin: 1.6rem 0;
+
+        label {
+          border-left: solid transparent .1rem;
+          border-right: solid #000 .1rem;
+          color: var(--link-color);
+          padding: 0 .4rem;
+          text-decoration: underline;
+
+          span {
+            color: #000;
+            font-weight: bold;
+          }
+
+          &:hover {
+            text-decoration: none;
+          }
+
+          &:last-of-type {
+            border-right: none;
+          }
+        }
+      }
+    }
+
+    &:not(:checked) + div {
+      display: none;
+    }
+  }
+
+  ol, ul {
+    margin: .8rem 0;
+    padding: 0;
+
+    li {
+      align-items: center;
+      display: flex;
+      list-style: none;
+      padding: .4rem .4rem .4rem 0;
+
+      &:nth-of-type(odd) {
+        background: #f1f1f1;
+      }
+    }
+  }
+
+  ol {
+    counter-reset: top-news-counter;
+
+    li {
+      font-size: var(--font-size-decreased);
+
+      a {
+        flex: 1;
+      }
+
+      &::before {
+        content: counter(top-news-counter);
+        counter-increment: top-news-counter;
+        font-size: 3.2rem;
+        font-style: italic;
+        font-weight: bold;
+        min-width: 6.4rem;
+        text-align: center;
+        width: 6.4rem;
+      }
+    }
+  }
+
+  ul {
+    li {
+      justify-content: space-between;
+
+      .image {
+        flex-basis: 6rem;
+        margin: 0 .4rem;
+
+        img {
+          max-width: 100%;
+        }
+      }
+
+      .post {
+        flex: 1;
+        font-size: var(--font-size-decreased);
+
+        .header {
+          align-items: center;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          margin-bottom: .4rem;
+
+          .author {
+            max-width: calc(100% - 6.2rem);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          time {
+            color: var(--text-color-secondary);
+          }
+        }
+      }
+    }
+  }
+}
+
+.sidebar-posts {
+  .posts-list {
+    display: block;
+    margin: var(--spacer-xxs) auto;
+  }
+
+  .post-preview {
+    .title {
+      font-size: var(--font-size-increased);
+    }
+  }
+
+  .post-preview:not(:first-of-type) {
+    margin-top: var(--spacer-s);
+  }
+}