feat: apply new layout overhaul

src/theme/_fonts.scss

@@ -0,0 +1,37 @@
+@font-face {
+  font-family: 'Barlow';
+  src: url('../assets/fonts/barlow/Barlow-Regular.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Barlow';
+  src: url('../assets/fonts/barlow/Barlow-SemiBold.ttf');
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Barlow';
+  src: url('../assets/fonts/barlow/Barlow-Bold.ttf');
+  font-weight: 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Barlow Condensed';
+  src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Regular.ttf');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Barlow Condensed';
+  src: url('../assets/fonts/barlow_condensed/BarlowCondensed-SemiBold.ttf');
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Barlow Condensed';
+  src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Bold.ttf');
+  font-weight: 800;
+  font-style: normal;
+}
+

src/theme/common/_helper.scss

@@ -0,0 +1,11 @@
+.no-padding-right {
+  padding-right: 0 !important;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.clickable {
+  cursor: pointer;
+}

src/theme/common/_ion-button.scss

@@ -0,0 +1,42 @@
+
+
+app-root {
+  // Change default border radius
+  ion-buttons ion-button.button,
+  .button {
+    &:not(.button-round) {
+      --border-radius: var(--border-radius-default);
+    }
+  }
+
+  .button {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semi-bold);
+    --padding-top: var(--spacing-sm);
+    --padding-bottom: var(--spacing-sm);
+    height: auto;
+
+
+    // Add default border, so buttons have the same size
+    &:not([fill='outline'])::part(native) {
+      border: var(--border-width-default) solid transparent;
+    }
+
+    &[fill='outline']::part(native) {
+      border: var(--border-width-default) solid rgba(var(--ion-color-primary-contrast-rgb), 0.2);
+    }
+
+    &.button-active {
+      font-weight: var(--font-weight-bold);
+      --background: var(--ion-color-tertiary);
+
+      ion-icon {
+        color: var(--ion-color-secondary);
+      }
+    }
+  }
+
+  ion-menu-button.button {
+    font-size: var(--font-size-lg);
+  }
+}

src/theme/common/_ion-header.scss

@@ -0,0 +1,5 @@
+app-root ion-header[class*='header-'] {
+  &:after {
+    background-image: unset;
+  }
+}

src/theme/common/_ion-img.scss

@@ -0,0 +1,5 @@
+app-root {
+  ion-thumbnail {
+    background: transparent;
+  }
+}

src/theme/common/_ion-input.scss

@@ -0,0 +1,40 @@
+$icon-size: 23px;
+
+app-root ion-searchbar[class*='sc-ion-searchbar-'] {
+  --border-radius: var(--border-radius-default);
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 38px;
+
+  &.filterable {
+    padding-left: 0;
+    padding-right: 0;
+    --box-shadow: none;
+    position: relative;
+
+    ion-menu-button {
+      position: absolute;
+      right: 5px;
+      z-index: 1;
+    }
+
+    .searchbar-clear-button {
+      right: 45px;
+    }
+  }
+
+  ion-icon.searchbar-search-icon {
+    width: $icon-size;
+    height: $icon-size;
+    top: 50%;
+    transform: translateY(-50%);
+    left: var(--spacing-sm);
+    color: var(--ion-color-medium-shade);
+  }
+
+  input.searchbar-input {
+    padding-top: var(--spacing-xs);
+    padding-bottom: var(--spacing-xs);
+    padding-left: calc(var(--spacing-lg) + #{$icon-size});
+  }
+}

src/theme/common/_ion-modal.scss

@@ -0,0 +1,12 @@
+@import '../../theme/util/mixins';
+
+ion-modal {
+  &.modal-large {
+    --height: 100%;
+
+    @include ion-md-up {
+      --height: 70vh;
+      --max-height: 800px;
+    }
+  }
+}

src/theme/common/_ion-popover.scss

@@ -0,0 +1,4 @@
+.sc-ion-popover-ios-h,
+.sc-ion-popover-md-h {
+  --width: 98vw
+}

src/theme/common/_ion-refresher.scss

@@ -0,0 +1,13 @@
+
+ion-refresher {
+  background-color: var(--ion-color-primary);
+  text-transform: uppercase;
+
+  .refresher-pulling-icon,
+  .refresher-pulling-text,
+  .refresher-refreshing-text {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semi-bold);
+    --ion-text-color: var(--ion-color-primary-contrast);
+  }
+}

src/theme/common/_ion-toolbar.scss

@@ -0,0 +1,53 @@
+app-root ion-toolbar.in-toolbar {
+  --background: var(--ion-color-primary);
+  --border-color: var(--ion-color-primary);
+  --color: var(--ion-color-primary-contrast);
+  --ion-toolbar-color: var(--ion-color-primary-contrast);
+  --min-height: unset;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  --opacity: 1;
+  padding: 0 var(--spacing-md) var(--spacing-md);
+
+  &:last-of-type {
+    padding-bottom: var(--spacing-md);
+    --padding-top: 0;
+    --padding-bottom: 0;
+  }
+
+  ion-searchbar {
+    padding-left: 0;
+    padding-right: 0;
+    --box-shadow: none;
+  }
+
+  ion-menu-button.filter {
+    --padding-start: var(--spacing-lg);
+    --padding-end: var(--spacing-lg);
+
+    ion-icon {
+      margin-right: var(--spacing-md);
+      font-size: var(--font-size-lg);
+    }
+  }
+
+  ion-title {
+    font-weight: var(--font-weight-black);
+    font-size: var(--font-size-lg);
+    text-transform: uppercase;
+  }
+
+  ion-button {
+    text-transform: uppercase;
+  }
+  ion-menu-button {
+    width: auto;
+  }
+
+  ion-back-button {
+    --icon-margin-end: var(--spacing-xs);
+    height: 42px; // this prevents the back button to become a .x px value
+  }
+}

src/theme/common/_swiper.scss

@@ -0,0 +1,38 @@
+@import '../../theme/util/mixins';
+
+.swiper.card-swiper {
+  overflow: visible;
+  padding-right: var(--spacing-lg);
+
+  .swiper-slide {
+    display: flex;
+    flex-direction: column;
+    height: auto; // required for same height of cards
+
+
+    a {
+      color: var(--ion-color-text);
+      text-decoration: none;
+    }
+  }
+  .swiper-button-prev, .swiper-button-next {
+    --swiper-navigation-size: 20px;
+    top: calc(-1 * var(--spacing-xxl));
+    transform: translateY(0%);
+    font-weight: var(--font-weight-black);
+    color: var(--ion-color-dark);
+
+    @include ion-md-down {
+      display: none;
+    }
+  }
+
+  .swiper-button-prev {
+    right: 30px;
+    left: auto;
+  }
+
+  .swiper-button-next {
+    right: 0;
+  }
+}

src/theme/common/_typo.scss

@@ -0,0 +1,14 @@
+body app-root {
+  .title,
+  .title-sub,
+  .title[class*='sc-ion-label'],
+  .title-sub[class*='sc-ion-label'] {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-semi-bold);
+    // TODO Condensed Font
+  }
+
+  .title-sub {
+    color: var(--ion-color-primary);
+  }
+}

src/theme/common/_typography.scss

@@ -0,0 +1,3 @@
+a {
+  cursor: pointer;
+}

src/theme/components/_card.scss

@@ -0,0 +1,21 @@
+.card {
+  box-shadow: var(--shadow-cards);
+  background-color: var(--ion-color-primary-contrast);
+  border-radius: var(--border-radius-default);
+  padding: var(--spacing-md);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  text-align: left;
+  display: block;
+  height: 100%;
+  transition: transform 250ms ease-in-out,
+              box-shadow 250ms ease-in-out;
+}
+
+a.card,
+.card.clickable {
+  &:hover {
+    transform: translate(-5px, -5px);
+    box-shadow: var(--shadow-cards-hover);
+  }
+}

src/theme/components/_section.scss

@@ -0,0 +1,12 @@
+.section-headline {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-black);
+  font-stretch: condensed;
+  text-transform: uppercase;
+  margin-bottom: var(--spacing-xs);
+
+  width: 100%;
+  display: flex;
+  flex-direction: revert;
+  justify-content: space-between;
+}

src/theme/configs/goethe-uni-frankfurt.scss

@@ -0,0 +1,137 @@
+:root {
+  --ion-color-primary: #00618F;
+  --ion-color-primary-rgb: 0,97,143;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255,255,255;
+  --ion-color-primary-shade: #00557e;
+  --ion-color-primary-tint: #1a719a;
+
+  --ion-color-secondary: #2fd2f5;
+  --ion-color-secondary-rgb: 47,210,245;
+  --ion-color-secondary-contrast: #000000;
+  --ion-color-secondary-contrast-rgb: 0,0,0;
+  --ion-color-secondary-shade: #29b9d8;
+  --ion-color-secondary-tint: #44d7f6;
+
+  --ion-color-tertiary: #00334d;
+  --ion-color-tertiary-rgb: 0,51,77;
+  --ion-color-tertiary-contrast: #ffffff;
+  --ion-color-tertiary-contrast-rgb: 255,255,255;
+  --ion-color-tertiary-shade: #002d44;
+  --ion-color-tertiary-tint: #1a475f;
+
+  --ion-color-success: #2dd36f;
+  --ion-color-success-rgb: 45,211,111;
+  --ion-color-success-contrast: #000000;
+  --ion-color-success-contrast-rgb: 0,0,0;
+  --ion-color-success-shade: #28ba62;
+  --ion-color-success-tint: #42d77d;
+
+  --ion-color-warning: #ffc409;
+  --ion-color-warning-rgb: 255,196,9;
+  --ion-color-warning-contrast: #000000;
+  --ion-color-warning-contrast-rgb: 0,0,0;
+  --ion-color-warning-shade: #e0ac08;
+  --ion-color-warning-tint: #ffca22;
+
+  --ion-color-danger: #eb445a;
+  --ion-color-danger-rgb: 235,68,90;
+  --ion-color-danger-contrast: #ffffff;
+  --ion-color-danger-contrast-rgb: 255,255,255;
+  --ion-color-danger-shade: #cf3c4f;
+  --ion-color-danger-tint: #ed576b;
+
+  --ion-color-medium: #d1d2d3;
+  --ion-color-medium-rgb: 209,210,211;
+  --ion-color-medium-contrast: #000000;
+  --ion-color-medium-contrast-rgb: 0,0,0;
+  --ion-color-medium-shade: #b8b9ba;
+  --ion-color-medium-tint: #d6d7d7;
+
+  --ion-color-light: #ebedec;
+  --ion-color-light-rgb: 235,237,236;
+  --ion-color-light-contrast: #000000;
+  --ion-color-light-contrast-rgb: 0,0,0;
+  --ion-color-light-shade: #cfd1d0;
+  --ion-color-light-tint: #edefee;
+
+
+  --ion-color-text: #000;
+  --ion-color-field-bg: #fff;
+  --ion-color-light-icon: #e6e6e6;
+
+
+  --linear-gradient: linear-gradient(135deg, var(--ion-color-primary-shade), var(--ion-color-tertiary));
+
+
+  // Shadows
+  --shadow-default: 0px 0px 10px 4px #ddd;
+  --shadow-cards: 0 0 8px 1px #ddd;
+  --shadow-cards-hover: 5px 5px 8px 4px #ccc;
+  --shadow-profile-card: 0 2px 6px 6px rgba(0,0,0,0.06),
+                         0 4px 5px 12px rgba(0,0,0,0.04),
+                         0 5px 6px 20px rgba(0,0,0,0.02);
+
+
+  // Fonts
+  --ion-font-family: "Barlow",Helvetica,Arial,sans-serif;
+  --headline-font-family: "Barlow Condensed",Helvetica,Arial,sans-serif;
+
+  --font-size-xxs: 10px;
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-md: 16px;
+  --font-size-lg: 20px;
+  --font-size-xl: 24px;
+
+  --font-weight-thin: 200;
+  --font-weight-regular: 400;
+  --font-weight-semi-bold: 700;
+  --font-weight-bold: 800;
+  --font-weight-black: 900;
+
+  // Spacing
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-xxl: 24px;
+
+  --border-color-default: #dedd;
+  --border-width-default: 1px;
+  --border-radius-default: 8px;
+
+  --header-spacing-bottom: 70px;
+
+  --icon-stroke-width: 1.2;
+
+  --tablet-top-bar-height: 100px;
+
+  --ion-tabbar-height: 50px;
+
+}
+
+html, body {
+  font-family: var(--ion-font-family);
+  background-color: var(--ion-color-primary);
+}
+
+@import "~swiper/css/navigation";
+
+// Import all other styles
+@import '../fonts';
+@import '../common/typo';
+@import '../common/helper';
+@import '../common/ion-button';
+@import '../common/ion-header';
+@import '../common/ion-input';
+@import '../common/ion-modal';
+@import '../common/ion-popover';
+@import '../common/ion-refresher';
+@import '../common/ion-toolbar';
+@import '../common/swiper';
+@import '../common/typography';
+
+@import '../components/card';
+@import '../components/section';

src/theme/util/_mixins.scss

@@ -0,0 +1,58 @@
+
+/**
+ * Breakpoints copied from node_modules/@ionic/angular/css/display.css
+ */
+
+@mixin ion-sm-up {
+  @media (min-width: 576px) {
+    @content
+  }
+}
+@mixin ion-sm-down {
+  @media (max-width: 575.98px) {
+    @content
+  }
+}
+@mixin ion-md-up {
+  @media (min-width: 768px) {
+    @content
+  }
+}
+@mixin ion-md-down {
+  @media (max-width: 767.98px) {
+    @content
+  }
+}
+@mixin ion-lg-up {
+  @media (min-width: 992px) {
+    @content
+  }
+}
+@mixin ion-lg-down {
+  @media (max-width: 991.98px) {
+    @content
+  }
+}
+@mixin ion-xl-up {
+  @media (min-width: 1200px) {
+    @content
+  }
+}
+@mixin ion-xl-down {
+  @media (max-width: 1199.98px) {
+    @content
+  }
+}
+
+@mixin phoneLandscape {
+  @media (max-height: 500px) and (orientation: landscape) {
+    @content
+  }
+}
+
+
+@mixin phonePortraitSmall {
+  @media (max-height: 700px) and (orientation: portrait) {
+    @content
+  }
+}

src/theme/variables.scss

@@ -77,6 +77,17 @@
 
   /** StApps **/
   --placeholder-gray: #F1F0ED;
+  --calender-date-line-gray: #dbdbdb;
+  --calender-background-color: #fff;
+  --calender-background-color-rgb: 255, 255, 255;
+  --calender-blue-card: var(--ion-color-primary-tint);
+  --calender-blue-card-rgb: 26, 113, 154;
+  --calender-black-card: #000000;
+  --calender-black-card-rgb: 0, 0, 0;
+  --calender-default-card: var(--ion-color-light);
   /** Change the colors of the toolbar and the toolbar text here **/
   --map-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+
 }
+
+@import 'configs/goethe-uni-frankfurt';