html, body, * {
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: none; color: $color-text-primary; font-size: 13px; font-family: "Roboto", sans-serif; //line-height: 1.3em; margin: 0; padding: 0; box-sizing: border-box;
}
ol, ul {
padding-left: 2em; padding-top: 0.5em; padding-bottom: 0.5em;
}
:focus {
outline: none;
}
a {
cursor: pointer; color: $color-uw-blue; text-decoration: none; outline: 0; &:hover { text-decoration: underline; }
}
i {
font-size: 11px; opacity: 0.7;
}
hr {
border-bottom: 1px solid $color-divider; border-top: none; border-left: none; border-right: none; margin: 0 0 10px 0;
}
input {
margin-right: $offset-sm; cursor: pointer;
}
.table-responsive-wrapper {
overflow-x:auto;
}
figure > figcaption {
margin-bottom: 9px;
}
@mixin adaptive-width {
width: 90%; @media (min-width: 740px) { width: 720px; } @media (min-width: 980px) { width: 960px; } @media (min-width: 1180px) { width: 1140px; } margin: 0 auto;
}
@mixin adaptive-margin-left {
margin-left: $offset-md; @media (min-width: 740px) { margin-left: 43px; }
}
@mixin adaptive-padding-left {
padding-left: $offset-md; @media (min-width: 740px) { padding-left: 43px; }
}
@mixin adaptive-margin-right {
margin-right: $offset-md; @media (min-width: 740px) { margin-right: 43px; }
}
@mixin adaptive-padding-right {
padding-right: $offset-md; @media (min-width: 740px) { padding-right: 43px; }
}
@mixin border-top {
border-top: 2px solid $color-uw-blue;
}
.image {
position: relative; >div>img { width: 100%; } &.wide, &.panorama, &.portrait { overflow: hidden; &:after { display: block; content: ''; } >div { position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: center; } &.wide, &.panorama { >div>img { width: 100%; } } &.portrait { >div>img { height: 100%; width: auto; } } &.wide:after { padding-top: 42.86%; } &.panorama:after { padding-top: 23.42%; } &.portrait:after { padding-top: 133%; } }
}
.page-header {
@include adaptive-width; margin-top: $offset-md; margin-bottom: $offset-md; position: relative; display: block; height: 75px; .page-header__logo { //background: url({{ site.url }}/assets/images/logos/uni-wuerzburg-header-background.png) no-repeat 200px 0 #d1d4d4; background: #d1d4d4; height: 100%; position: relative; overflow: hidden; .page-header__logo-link img { width: 170px; height: 75px; } .page-header__logo-background { position: absolute; top: 0; left: 200px; height: 100%; >div, >div>img { height: 100%; width: auto; } } }
}
.page-hero {
position: relative; .title { @include adaptive-width; @include adaptive-padding-left; @include adaptive-padding-right; padding-top: 0; padding-bottom: 0; //margin: 0 auto; background: $color-gray-background; display: flex; justify-content: space-between; .text { padding: 16px 0 12px 0; :nth-child(1), :nth-child(2) { color: $color-uw-blue; text-transform: uppercase; font-weight: 400; } :nth-child(1) { color: grey; } :nth-child(2) { font-family: "Roboto Slab", serif; font-size: $font-size-header; } } .logo { max-width: 50px; margin-top: 13px; } } .navigation { @include adaptive-width; z-index: 2; position: relative; &.is-touch { .navigation-header { flex-direction: column; } } &:not(.is-touch) { //@include border-top; margin-bottom: -30px; // -(30px + $border-top-width) with border .navigation-header { >div { position: relative; .category-title { >a { padding: 0 12px; } } .navigation-submenu { //$offset-left: 44px; $offset-left: 15px; width: calc(100% - #{$offset-left}); position: absolute; top: 30px; left: 0; min-width: 220px; padding: $offset-md 0 0 19px; border-bottom: 2px solid $color-uw-blue; } } + div { border-left: 1px solid #d1d4d4; } } } &.is-touch { .navigation-submenu { margin-left: 22px; } } .navigation-header { margin-left: 15px; @media (min-width: 740px) { margin-left: 75px; } display: flex; background: rgba(255, 255, 255, 0.9); >div { .category-title { display: flex; flex-direction: row; align-items: center; margin-right: 1px; >.toggle-button { width: 15px; cursor: pointer; margin-right: 7px; color: $color-uw-blue; opacity: 1; } >.toggle-button-placeholder { width: 15px; margin-right: 7px; } >a { display: block; line-height: 30px; font-weight: 700; text-transform: uppercase; cursor: pointer; &:hover, &.active { background-color: white; } } } .navigation-submenu { background: white; flex-wrap: wrap; flex-direction: row; .navigation-submenu-column { padding: 0; margin: 0 0 $offset-lg 0; .navigation-submenu-column-header, .navigation-submenu-column-sub { hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; text-transform: inherit; margin-bottom: 7px; display: block; cursor: pointer; } .navigation-submenu-column-header { font-weight: 500; } .navigation-submenu-column-sub { font-weight: 300; } } } } } .navigation-header-mobile { position: absolute; top: -68px; right: 13px; background: transparent; cursor: pointer; i { font-size: 29px; opacity: 1; color: $color-uw-blue; } } } .slick-element, .single-slide { //@include border-top; @media (min-width: 740px) { max-width: 720px; } @media (min-width: 980px) { max-width: 1020px; } @media (min-width: 1180px) { max-width: 1200px; } max-width: 90%; margin: 0 auto; .slick-dots { bottom: 5px; li.slick-active button::before { color: $color-uw-blue; } li button::before { font-size: 11px; opacity: 1; color: white; } } }
}
.header-title {
@include adaptive-width; margin-bottom: 15px; margin-top: 15px; border-left: 15px solid $color-uw-blue; padding-left: 26px; >a { color: $color-uw-blue; font-weight: bold; font-size: 2rem; line-height: 2rem; text-transform: uppercase; text-decoration: none; };
}
@mixin columnLayout($offset-horizontal, $offset-vertical) {
margin-right: -$offset-horizontal; display: flex; flex-wrap: wrap; justify-content: space-between; >div { flex-grow: 1; flex-basis: 100%; @media (min-width: 550px) { flex-basis: 34%; } @media (min-width: 980px) { flex-basis: 26%; } @media (min-width: 1180px) { flex-basis: 26%; } margin: 0 $offset-horizontal $offset-vertical 0; }
}
.column-layout {
@include columnLayout(20px, 10px);
}
.content {
@include adaptive-width; @include adaptive-padding-left; @include adaptive-padding-right; background: $color-gray-background; padding-bottom: 15px; margin-bottom: 10px; .content-breadcrumb { color: rgba(0, 0, 0, 0.4); font-weight: 400; padding: 16px 0 8px 0; a, div, span { color: inherit; } a:hover { color: rgba(0, 0, 0, 0.6); } } //h1 { // font-family: "Roboto Slab", serif; // font-size: $font-size-header; // color: $color-uw-blue; // text-transform: uppercase; // font-weight: 400; // //padding-bottom: $offset-md; // border-bottom: 1px solid $color-divider; // padding: 0 0 $offset-xs 0; // margin: 0 0 $offset-sm 0; //} h1 { //font-family: "Roboto Slab", serif; font-size: $font-size-header; color: $color-uw-blue; //text-transform: uppercase; font-weight: bold; //padding-bottom: $offset-md; padding: 0 0 $offset-xs 0; margin: 0 0 $offset-sm 0; //&:before { // width: 1em; // font-size: 14px; // display: inline-flex; // font-family: "fontello"; // font-style: normal; // font-weight: normal; // speak: none; // text-decoration: inherit; // text-align: left; // font-variant: normal; // text-transform: none; // -webkit-font-smoothing: antialiased; // -moz-osx-font-smoothing: grayscale; // content: '\E800'; //} } h2 { font-size: $font-size-header-2; } h3 { font-size: $font-size-header-3; } h2, h3, h4, h5 { margin: 0 0 $offset-xs 0; font-weight: 700; padding-top: $offset-sm; } .content-wrapper { @include border-top; background: white; padding: $offset-md; margin-bottom: $offset-lg; h1 { //font-family: "Roboto Slab", serif; //font-size: $font-size-header; margin: 0 0 $offset-sm 0; //color: $color-text-primary; border-bottom: 1px solid $color-divider; &:before { content: ""; width: 0px; } } h2, h3, h4, h5 { margin: 0 0 $offset-xs 0; font-weight: 700; } h3, h4, h5 { color: $color-text-secondary; } ol, ul { padding-left: $offset-xl; } >* { padding-bottom: $offset-xs; } }
}
.page-footer {
@include adaptive-width; margin-top: $offset-xl; margin-bottom: $offset-sm; .page-footer-top, .page-footer-bottom { @include adaptive-padding-left; @include adaptive-padding-right; width: 100%; background: $color-gray-background; font-weight: 300; padding-top: $offset-md; padding-bottom: $offset-xs; .title { color: $color-uw-blue; font-weight: 400; margin-bottom: $offset-xs; } } .page-footer-top { background: $color-gray-background; } .page-footer-bottom { background: $color-uw-blue; color: white; * { color: inherit; } }
}
.block {
@include border-top; background: white; padding: $offset-sm; display: flex; flex-direction: column; .image { margin-bottom: $offset-xs; } >.title { color: $color-uw-blue; font-weight: 700; margin-bottom: $offset-xs; } >.author { margin-bottom: $offset-xs; } >.text { margin-bottom: $offset-xs; flex-grow: 1; } >.footer { display: flex; justify-content: space-between; >.text { color: $color-disabled; } }
}
table {
width: 100%; border-collapse: collapse; th, td { padding: $offset-sm $offset-xs; text-align: left; } tr:nth-child(even) { background-color: #f2f2f2 }
}
.filterInput {
border: 1px solid rgb(238, 238, 238); border-radius: 3px; padding: 5px; background: white; display: inline-block; margin: $offset-sm 0; >i { margin-right: $offset-xs; } >input { background: transparent; border: none; } &:focus { border-color: rgba(0, 0, 0, 0.2); }
}
.hide {
display: none;
}
.faq {
margin-bottom: 5px; .question { font-weight: bold; margin-bottom: 3px; background: $color-uw-blue; color: white; padding: 4px 8px; border-radius: 4px; } .answer { margin-bottom: 3px; } .footer { display: flex; flex-direction: row; .tags { display: flex; flex-direction: row; >div { margin-right: 7px; border-radius: 4px; border: 1px solid lightgray; padding: 0 4px; } } .date { display: inline-flex; font-style: italic; } }
}