-
+
@@ -48,7 +48,7 @@
import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
import me from '@/mixins/me';
- import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
+ import TopicNavigation from '@/components/book-navigation/TopicNavigation';
import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
@@ -60,7 +60,7 @@
mixins: [me],
components: {
- BookTopicNavigation,
+ TopicNavigation,
ModuleTeaser,
PlayIcon,
BulbIcon,
@@ -154,10 +154,17 @@
.topic {
display: grid;
padding: $large-spacing 0;
- grid-template-columns: 300px 1fr;
+ grid-template-columns: 1fr;
+ @include desktop {
+ grid-template-columns: 300px 1fr;
+ }
&__navigation {
padding: 0 $medium-spacing;
+ display: none;
+ @include desktop {
+ display: block;
+ }
}
&__teaser {
diff --git a/client/src/styles/_article.scss b/client/src/styles/_article.scss
index 7756217d..b7ed7925 100644
--- a/client/src/styles/_article.scss
+++ b/client/src/styles/_article.scss
@@ -47,4 +47,12 @@
line-height: 1.5;
}
}
+
+ &__comments {
+ display: none;
+
+ @include desktop {
+ display: flex;
+ }
+ }
}
diff --git a/client/src/styles/mixins/_typography.scss b/client/src/styles/mixins/_typography.scss
index 068087bc..53b9ca5b 100644
--- a/client/src/styles/mixins/_typography.scss
+++ b/client/src/styles/mixins/_typography.scss
@@ -1,37 +1,46 @@
+$largest-font: toRem(64px);
+$larger-font: toRem(44px);
+$large-font-size: toRem(34px);
+$slightly-large-font-size: toRem(24px);
+$regular-font-size: toRem(18px);
+$slightly-small-font-size: toRem(16px);
+$small-font-size: toRem(14px);
+$tiny-font-size: toRem(11px);
+
@mixin main-title {
font-family: $sans-serif-font-family;
font-weight: 800;
- font-size: toRem(64px);
+ font-size: $largest-font;
}
@mixin heading-1 {
font-family: $sans-serif-font-family;
font-weight: 600;
- font-size: toRem(44px);
+ font-size: $larger-font;
}
@mixin heading-2 {
font-family: $sans-serif-font-family;
font-weight: 600;
- font-size: toRem(34px);
+ font-size: $large-font-size;
}
@mixin heading-3 {
font-family: $sans-serif-font-family;
font-weight: 600;
- font-size: toRem(24px);
+ font-size: $slightly-large-font-size;
}
@mixin heading-4 {
font-family: $sans-serif-font-family;
font-weight: 600;
- font-size: toRem(18px);
+ font-size: $regular-font-size;
}
@mixin sub-heading {
font-family: $sans-serif-font-family;
font-weight: 400;
- font-size: toRem(16px);
+ font-size: $slightly-small-font-size;
}
@mixin modal-heading {
@@ -43,18 +52,18 @@
@mixin regular-text {
font-family: $sans-serif-font-family;
font-weight: 400;
- font-size: toRem(18px);
+ font-size: $regular-font-size;
}
@mixin small-text {
font-family: $sans-serif-font-family;
font-weight: 400;
//font-size: toRem(16px); todo: did this really change or is this only for the subnavigation
- font-size: toRem(14px);
+ font-size: $small-font-size;
}
@mixin tiny-text {
- font-size: toRem(11px);
+ font-size: $tiny-font-size;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
color: $color-silver-dark;
@@ -62,7 +71,7 @@
@mixin aside-text {
@include regular-text;
- font-size: toRem(14px);
+ font-size: $small-font-size;
}
@mixin aside-with-cheese {
@@ -73,19 +82,19 @@
@mixin navigation-link {
font-family: $sans-serif-font-family;
color: $color-charcoal-dark;
- font-size: toRem(18px);
+ font-size: $regular-font-size;
font-weight: 600;
}
@mixin large-link {
font-family: $sans-serif-font-family;
- font-size: toRem(18px);
+ font-size: $regular-font-size;
font-weight: 400;
}
@mixin meta-title {
color: $color-silver-dark;
- font-size: toRem(36px);
+ font-size: $large-font-size;
font-weight: 300;
font-family: $serif-font-family;
line-height: $default-heading-line-height;
@@ -99,16 +108,19 @@
@mixin lead-paragraph {
font-family: $serif-font-family;
line-height: 1.4;
- font-size: toRem(26px);
+ font-size: $regular-font-size;
+ @include desktop {
+ font-size: $slightly-large-font-size;
+ }
}
@mixin regular-paragraph {
font-family: $serif-font-family;
- font-size: toRem(18px);
+ font-size: $regular-font-size;
}
@mixin link-base {
- font-size: toRem(14px);
+ font-size: $slightly-small-font-size;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
cursor: pointer;