diff --git a/assets/components/header/header.vue b/assets/components/header/header.vue
index b965aae4..57035722 100644
--- a/assets/components/header/header.vue
+++ b/assets/components/header/header.vue
@@ -59,40 +59,36 @@
-
+
+
+
@@ -166,67 +162,34 @@ export default {
}
}
-.search {
- height: 100%;
- max-width: 20rem;
- display: flex;
- flex-grow: 1;
- align-items: center;
- justify-content: flex-end;
- padding: 0 1rem 0 0;
- border-left: solid 1px $shadow-hint;
-}
-
-.search-input {
- height: 100%;
- width: 100%;
- padding: 0 .5rem;
- border: none;
- outline: none;
- font-size: 1rem;
- outline: none;
-
- &::placeholder {
- color: $shadow;
- }
-
- &::-webkit-search-cancel-button {
- -webkit-appearance: none;
- padding: .5rem;
- position: relative;
- right: 0;
- color: $text;
- background: url('/img/cancel-circle2.svg');
- opacity: .25;
-
- &:hover {
- opacity: .5;
- cursor: pointer;
- }
- }
-
- &:focus::placeholder {
- color: $shadow-weak;
- }
-}
-
.search-button {
height: 100%;
padding: 0 1rem;
background: none;
border: none;
- margin: .3rem 0 0 0;
+ outline: none;
+ margin: .2rem 0 0 0;
.icon {
- fill: $shadow-weak;
+ fill: $shadow;
}
- &:hover {
- cursor: pointer;
+ &:focus .icon {
+ fill: $primary;
+ }
+}
- .icon {
- fill: $shadow;
- }
+.search-compact {
+ display: none;
+}
+
+@media(max-width: $breakpoint2) {
+ .search-full {
+ display: none;
+ }
+
+ .search-compact {
+ display: flex;
}
}
@@ -243,10 +206,5 @@ export default {
.nav-item {
flex-grow: 1;
}
-
- .nav-link {
-
-
- }
}
diff --git a/assets/components/header/search.vue b/assets/components/header/search.vue
new file mode 100644
index 00000000..9e9507ea
--- /dev/null
+++ b/assets/components/header/search.vue
@@ -0,0 +1,119 @@
+
+
+
+
+
+
+
diff --git a/assets/components/releases/releases.vue b/assets/components/releases/releases.vue
index ceb1746c..e9c23974 100644
--- a/assets/components/releases/releases.vue
+++ b/assets/components/releases/releases.vue
@@ -75,7 +75,7 @@ export default {
.tiles {
width: 100%;
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
+ grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
grid-gap: 1rem;
}
@@ -85,6 +85,12 @@ export default {
}
@media(max-width: $breakpoint4) {
+ .tiles {
+ grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
+ }
+}
+
+@media(max-width: $breakpoint3) {
.tiles {
grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
}
@@ -92,7 +98,7 @@ export default {
@media(max-width: $breakpoint) {
.tiles {
- grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
}
diff --git a/assets/css/_tooltip.scss b/assets/css/_tooltip.scss
index 17701257..5f538a56 100644
--- a/assets/css/_tooltip.scss
+++ b/assets/css/_tooltip.scss
@@ -81,12 +81,12 @@
}
&.popover {
- $color: #f9f9f9;
+ $color: #fff;
.popover-inner {
background: $color;
color: black;
- padding: 24px;
+ padding: .5rem;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}