app/assets/stylesheets/custom.scss
// Overrides and adds customized styles in this file
///////////////////////////////////////
// LAYOUT HEADER
///////////////////////////////////////
.top-bar {
.top-bar-title {
margin: 1rem;
.logo {
border-radius: 50%;
border: solid 2px $white;
height: 50px;
width: auto;
@include breakpoint(medium) {
border: solid 3px $white;
height: 100px;
}
}
}
.top-bar-right {
@include breakpoint(medium) {
.menu {
.login {
align-self: flex-end;
}
.signup {
text-align: right;
}
li {
a {
font-size: 1.3rem;
}
}
}
}
}
.menu > li {
width: auto;
}
}
.auth-page {
.auth-image {
background-image: linear-gradient($brand, $white);
.logo img {
border-radius: 50%;
border: solid 3px $white;
height: auto;
width: 100%;
text-align: center;
}
}
}
.auth-page, .edit_account {
.date-of-birth select {
display: inline-block;
width: 30%;
@include breakpoint(medium) {
width: 25%;
}
}
}
$subnavigation-sm-btn-width: 130px;
.subnavigation.subnavigation-sm {
padding-right: 0;
list-style: none;
.columns:last-child {
float: left;
}
li {
text-align: center;
margin-bottom: 1.5rem;
}
a {
width: $subnavigation-sm-btn-width;
height: $subnavigation-sm-btn-width;
padding: .5rem;
background-color: $dark;
box-shadow: 0px 1px 3px #444444;
text-align: center;
text-decoration: none;
font-size: 16px;
line-height: normal;
transition: all 0.4s;
&:hover {
background-color: darken($dark, 5%);
}
img {
height: calc(128px - 2em);
width: auto;
}
}
}
.notifications .icon-circle {
font-size: 1.625rem;
right: -10px;
top: -10px;
left: auto;
@include breakpoint(medium) {
font-size: 0.625rem;
left: 27px;
top: 9px;
right: auto;
}
}
///////////////////////////////////////
// ARTICLES
///////////////////////////////////////
// Admin
.article-form {
@include direct-uploads;
}
// Front - articles index
.article.with-image {
border: 1px solid $border;
margin-bottom: 0.75rem;
padding: 0 0.75rem 0 0;
position: relative;
h3 a{
color: $text;
}
img {
height: 100%;
max-width: none;
position: absolute;
}
.article-main {
padding: .75rem 1.25rem 0;
}
.article-actions {
padding: .75rem 1.25rem 0;
}
.article-info {
color: $text-medium;
font-size: $small-font-size;
margin: rem-calc(6) 0 0;
.icon-comments {
font-size: rem-calc(16);
vertical-align: top;
}
a {
color: $text-medium;
}
}
}
// Front - article show
.article-show {
h1,
p {
word-wrap: break-word;
}
.callout {
&.token-message {
background-color: #fff;
border-color: $info-border;
color: $color-info;
}
&.proposal-retired {
font-size: $base-font-size;
}
}
.social-share-full .social-share-button {
display: inline;
}
.whatsapp::before {
background-color: #43d854;
color: #fff;
display: inline-block;
font-size: rem-calc(30);
height: rem-calc(48);
padding-top: rem-calc(9);
text-align: center;
vertical-align: top;
width: rem-calc(48);
}
.article-info {
clear: both;
color: $text-medium;
font-size: $small-font-size;
margin-bottom: $line-height / 2;
position: relative;
span:not(.label) {
line-height: rem-calc(32); // Same as avatar height
}
a {
color: $text-medium;
}
p {
font-size: $small-font-size;
line-height: $line-height;
margin: 0;
}
}
.article-image {
margin-bottom: rem-calc(15);
}
.article-description {
font-size: rem-calc(15);
line-height: rem-calc(30);
}
ul,
ol {
li {
font-size: rem-calc(15);
margin-bottom: rem-calc(15);
}
}
.tags,
.geozone {
li {
margin-bottom: 0;
}
}
.author-photo {
line-height: rem-calc(32);
margin-right: rem-calc(6);
vertical-align: top;
width: 32px;
}
.author {
font-weight: bold;
a {
color: $link !important;
}
}
aside {
h2 {
border-top: 2px solid $brand;
display: inline-block;
font-size: rem-calc(16);
margin: -1px 0 rem-calc(12);
padding-top: rem-calc(6);
text-transform: uppercase;
}
}
blockquote {
color: #4c4c4c;
margin-top: rem-calc(12);
padding-top: 0;
font-size: rem-calc(15);
line-height: rem-calc(30);
}
.document-link,
.video-link {
background: $highlight-soft;
border: 1px solid $highlight;
display: block;
margin: $line-height / 2 0;
padding: $line-height / 2;
position: relative;
a {
word-wrap: break-word;
}
[class^="icon-"] {
display: inline-block;
font-size: rem-calc(24);
line-height: $line-height;
vertical-align: middle;
}
.icon-document {
color: #007bb7;
}
.icon-video {
color: #cc181e;
}
p {
margin-bottom: 0;
}
}
.supports {
@include supports;
}
.leave-comment {
display: inline-block;
margin-top: rem-calc(24);
}
.tags {
display: block;
margin-bottom: 0;
a {
margin-right: rem-calc(6);
}
}
}
///////////////////////////////////////
// ADMIN
///////////////////////////////////////
.admin .top-bar-title {
margin: 0;
h1 {
margin: 0
}
@include breakpoint(medium) {
margin: 1rem;
h1 {
margin-top: $line-height / 2;
margin-left: $line-height / 2;
}
}
}
.admin .notifications .icon-circle {
color: #ecf00b;
}
.admin .subnavigation.subnavigation-sm {
a {
background-color: $admin-color;
&:hover {
background-color: darken($admin-color, 5%);
}
}
}
.admin .top-bar .menu.subnavigation-sm > li a {
color: #fff !important;
line-height: 1;
}
.admin .top-bar [class^="icon-"].subnavigation-icon {
font-size: 4rem;
display: block;
}