forked from tsc-vfl/hugo-page
Basic styling for mobile view on blog fixed
This commit is contained in:
parent
314261bba5
commit
c74eb9699c
@ -18,6 +18,12 @@ $gap_columns_persons: 25px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin media-large {
|
||||||
|
@media screen and (min-width: 700px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* main styling */
|
/* main styling */
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@ -50,16 +56,24 @@ h1 {
|
|||||||
#header {
|
#header {
|
||||||
border-bottom: 2px solid rgba(173,173,173,.5);
|
border-bottom: 2px solid rgba(173,173,173,.5);
|
||||||
margin: 0 auto 30px;
|
margin: 0 auto 30px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
> .logo-row {
|
> .logo-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
margin: 15px 0 10px 30px;
|
margin: 15px 30px 10px 30px;
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.logo-vfl {
|
.logo-vfl {
|
||||||
margin: 12px 45px 0 0;
|
margin: 12px 45px 0 0;
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -67,7 +81,11 @@ h1 {
|
|||||||
width: calc(100% - 60px);
|
width: calc(100% - 60px);
|
||||||
// visibility: hidden;
|
// visibility: hidden;
|
||||||
// height: 250px;
|
// height: 250px;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@include media-large() {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
}
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border-right: 20px solid $color_red;
|
border-right: 20px solid $color_red;
|
||||||
border-left: 20px solid $color_red;
|
border-left: 20px solid $color_red;
|
||||||
@ -124,6 +142,11 @@ h1 {
|
|||||||
margin: 5px auto 0;
|
margin: 5px auto 0;
|
||||||
font: 1.5em 'Open Sans Condensed', sans-serif;
|
font: 1.5em 'Open Sans Condensed', sans-serif;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
@include media-large() {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -146,9 +169,12 @@ h1 {
|
|||||||
|
|
||||||
> .left-side {
|
> .left-side {
|
||||||
flex: auto 0 0;
|
flex: auto 0 0;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
|
display: none;
|
||||||
|
@include media-large() {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.announcements {
|
.announcements {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
@ -204,6 +230,7 @@ h1 {
|
|||||||
#content {
|
#content {
|
||||||
flex: 100% 0 1;
|
flex: 100% 0 1;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -383,10 +410,13 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.news-blog {
|
.news-blog {
|
||||||
|
max-width: 100%;
|
||||||
.blog-entry {
|
.blog-entry {
|
||||||
|
max-width: 100%;
|
||||||
.header {
|
.header {
|
||||||
|
max-width: 100%;
|
||||||
margin: 5px 0 10px;
|
margin: 5px 0 10px;
|
||||||
|
text-align: left;
|
||||||
a {
|
a {
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
}
|
}
|
||||||
@ -395,6 +425,10 @@ h1 {
|
|||||||
display: flex;
|
display: flex;
|
||||||
// min-height: 240px;
|
// min-height: 240px;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
|
flex-direction: column;
|
||||||
|
@include media-large(){
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
.teaser-image {
|
.teaser-image {
|
||||||
flex: 33% 1 0;
|
flex: 33% 1 0;
|
||||||
@ -432,11 +466,18 @@ h1 {
|
|||||||
.pagination {
|
.pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
max-width: 400px;
|
||||||
|
margin: auto;
|
||||||
.page-item {
|
.page-item {
|
||||||
padding: 0px 5px;
|
flex: auto 1 0;
|
||||||
a {
|
margin: 5px;
|
||||||
padding: 10px 20px;
|
.page-link {
|
||||||
display: inline-block;
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 5px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user