text: #363636,
text-title: #303030,
text-subtitle: #424242,
- card-shadow: rgba(0, 0, 0, 0.1)
+ card-shadow: rgba(0, 0, 0, 0.1),
+ a-hover: #363636
);
$theme-dark: (
background: #131313,
text: #eaeaea,
text-title: #fafafa,
text-subtitle: #f5f5f5,
- card-shadow: rgba(0, 0, 0, 0.4)
+ card-shadow: rgba(0, 0, 0, 0.4),
+ a-hover: #ffdd57
);
-
+/* raleway-regular - latin */
+@font-face {
+ font-family: 'Raleway';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: local('Raleway'), local('Raleway-Regular'),
+ url('./webfonts/raleway/raleway-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('./webfonts/raleway/raleway-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* lato-regular - latin */
+@font-face {
+ font-family: 'Lato';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: local('Lato Regular'), local('Lato-Regular'),
+ url('./webfonts/lato/lato-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('./webfonts/lato/lato-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
@mixin theme($theme) {
background-color: map-get($theme, "background");
color: map-get($theme, "text");
-
+ a {
+ &:hover {
+ color: map-get($theme, "a-hover");
+ }
+ }
+
.title {
color: map-get($theme, "text-title");
}
}
}
+ .message {
+ background-color: map-get($theme, "card-background");
+ .message-body {
+ color: map-get($theme, "text");
+ }
+ }
+
.footer {
background-color: map-get($theme, "card-background");
box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow");
}
}
+
+@mixin ellipsis() {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+
html {
height: 100%;
}
}
}
}
- .navbar {
+ .navbar, .navbar-menu {
background-color: $secondary-color;
a {
color: #ffffff;
- &:hover {
+ &:hover, &:focus {
+ color: #ffffff;
background-color: lighten( $secondary-color, 5% );
}
}
}
+ .navbar-end {
+ text-align: right;
+ }
}
#main-section {
h2 {
border-bottom: 1px dashed #ccc;
padding-bottom: 10px;
+ @include ellipsis();
}
.title {
font-size: 1.1em;
+ @include ellipsis();
}
.subtitle {
font-size: .9em;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ @include ellipsis();
}
.container {
}
.media-content {
- overflow: inherit;
+ overflow: hidden;
+ text-overflow: inherit;
}
.tag {
transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
}
+ .no-footer {
+ #main-section {
+ margin-bottom: 0;
+ }
+
+ .footer {
+ display: none;
+ }
+ }
+
.search-bar {
position: relative;
display: inline-block;
background-color: lighten( $secondary-color, 6% );
border-radius: 5px;
padding: 2px 12px 2px 30px;
- margin: 10px 0;
+ margin: 0 0 0 12px;
transition: all 100ms linear;
color: #ffffff;
height: 30px;
.search-label::before {
font-family: 'Font Awesome 5 Free';
position: absolute;
- top: 12px;
- left: 8px;
+ top: 4px;
+ left: 16px;
content: "\f002";
font-weight: 900;
width: 20px;
height: 20px;
+ color: #ffffff;
}
&:focus-within .search-label::before {
.icon-button {
display: inline-block;
+ padding: 0 12px;
}
.offline-message {