christian/hugo-page-test
1
0
Fork 0
forked from tsc-vfl/hugo-page
Code Pull Requests Activity

Basic styling for mobile view on blog fixed

Browse Source
This commit is contained in:
Christian Wolf 2024-01-07 00:07:03 +01:00
parent 314261bba5
commit c74eb9699c
1 changed files with 49 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
themes/tsc_vfl/assets/css/main.scss
View File

@ -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;
} }
} }