diff --git a/src/components/ContentSelection.vue b/src/components/ContentSelection.vue index 8706d0b..6dda320 100644 --- a/src/components/ContentSelection.vue +++ b/src/components/ContentSelection.vue @@ -2,6 +2,16 @@
+
+
+ + + +
+ + {{ title }} +
+ thumbnail @@ -29,7 +39,7 @@
-
+
@@ -57,14 +67,21 @@ #content-selection { display: flex; - @media screen and (max-width: $small-screen) { - flex-direction: column; + .title-small-screens { + display: none; + } - .left { - align-items: center !important; - display: flex !important; - flex-direction: column !important; - margin-bottom: 20px !important; + .title { + font-size: 24px; + font-weight: $font-semibold; + display: flex; + align-items: center; + font-family: 'Proza Libre', sans-serif; + + .icon { + margin-right: 10px; + position: relative; + top: -2px; } } @@ -100,20 +117,6 @@ .right { min-height: 170px; - .title { - font-size: 24px; - font-weight: $font-semibold; - display: flex; - align-items: center; - font-family: 'Proza Libre', sans-serif; - - .icon { - margin-right: 10px; - position: relative; - top: -2px; - } - } - .description { font-size: 16px; } @@ -131,6 +134,26 @@ } } } + + @media screen and (max-width: $small-screen) { + flex-direction: column; + + .title-small-screens { + display: inherit; + margin-bottom: 5px; + } + + .title-normal-screens { + display: none; + } + + .left { + align-items: center; + display: flex; + flex-direction: column; + margin-bottom: 20px; + } + } } diff --git a/src/scss/main.scss b/src/scss/main.scss index 128ace7..0778ce5 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -191,7 +191,8 @@ p > a { font-size: 25px; .brand-title { - height: 30px; + height: 26px; + margin-left: 5px; } } } diff --git a/src/views/Instances.vue b/src/views/Instances.vue index eb8d444..86c15fd 100644 --- a/src/views/Instances.vue +++ b/src/views/Instances.vue @@ -17,7 +17,7 @@
- Multiple instances illustration + Multiple instances illustration
@@ -40,7 +40,7 @@
- PeerTube upload illustration + PeerTube upload illustration