Mediaqueries for blog layout.
This commit is contained in:
Karol Orzeł
parent
3aa6f47b65
commit
6c527b241e
5 changed files with 53 additions and 14 deletions
|
|
@ -710,7 +710,7 @@ td {
|
|||
padding-top: 12rem; }
|
||||
.blogstyling #header {
|
||||
color: #656161; }
|
||||
.blogstyling #header a {
|
||||
.blogstyling #header a, .blogstyling #header .menu-btn {
|
||||
color: #656161; }
|
||||
.blogstyling #header .search-box i {
|
||||
color: #656161; }
|
||||
|
|
@ -741,12 +741,11 @@ td {
|
|||
text-transform: uppercase; }
|
||||
@media only all and (min-width: 48em) and (max-width: 59.938em) {
|
||||
.blog-header h1 {
|
||||
font-size: 3rem; } }
|
||||
font-size: 2rem; } }
|
||||
@media only all and (max-width: 47.938em) {
|
||||
.blog-header h1 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2.5rem; } }
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.2; } }
|
||||
.blog-header + .blog-content {
|
||||
padding-top: 3rem; }
|
||||
|
||||
|
|
@ -778,6 +777,16 @@ td {
|
|||
text-transform: uppercase;
|
||||
color: #9A9898;
|
||||
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
|
||||
@media only all and (min-width: 48em) and (max-width: 59.938em) {
|
||||
.list-item .list-blog-date, .list-item .list-blog-author {
|
||||
display: block;
|
||||
width: 100%;
|
||||
clear: both; } }
|
||||
@media only all and (max-width: 47.938em) {
|
||||
.list-item .list-blog-date, .list-item .list-blog-author {
|
||||
display: block;
|
||||
width: 100%;
|
||||
clear: both; } }
|
||||
|
||||
.blog-content-item .list-blog-padding > p:nth-child(2) {
|
||||
font-size: 1.2rem; }
|
||||
|
|
@ -789,7 +798,8 @@ td {
|
|||
background-color: rgba(101, 97, 97, 0.1);
|
||||
padding: 0.7rem 1rem;
|
||||
margin-bottom: 0.2rem;
|
||||
list-style: none; }
|
||||
list-style: none;
|
||||
text-align: center; }
|
||||
.tags li {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
|
|
@ -801,6 +811,16 @@ td {
|
|||
content: ","; }
|
||||
.tags li:last-child a:after {
|
||||
display: none; }
|
||||
@media only all and (min-width: 48em) and (max-width: 59.938em) {
|
||||
.tags {
|
||||
display: block;
|
||||
width: 100%;
|
||||
clear: both; } }
|
||||
@media only all and (max-width: 47.938em) {
|
||||
.tags {
|
||||
display: block;
|
||||
width: 100%;
|
||||
clear: both; } }
|
||||
|
||||
.archives, .related-pages {
|
||||
margin: 0;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
}
|
||||
#header {
|
||||
color: $light-gray;
|
||||
a {
|
||||
a, .menu-btn {
|
||||
color: $light-gray;
|
||||
}
|
||||
.search-box {
|
||||
|
|
@ -55,12 +55,11 @@
|
|||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: 3rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 2.5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +77,6 @@
|
|||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.list-blog-header {
|
||||
position: relative;
|
||||
h4 {
|
||||
|
|
@ -91,7 +89,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
|
|
@ -109,6 +106,17 @@
|
|||
text-transform: uppercase;
|
||||
color: $core-text;
|
||||
font-family: $font-family-header;
|
||||
|
||||
@include breakpoint(tablet-range) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -128,6 +136,7 @@
|
|||
padding: 0.7rem 1rem;
|
||||
margin-bottom: 0.2rem;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
li {
|
||||
display: inline-block;
|
||||
font-size: $core-font-size;
|
||||
|
|
@ -143,6 +152,16 @@
|
|||
a:after {display: none;}
|
||||
}
|
||||
}
|
||||
@include breakpoint(tablet-range) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Archives & Related-Pages
|
||||
|
|
|
|||
|
|
@ -80,7 +80,6 @@
|
|||
<li class="{{ current_module }}"><a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
|
||||
{% else %}
|
||||
{{ parent() }}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
{% include 'partials/navigation.html.twig' %}
|
||||
{% endblock %}
|
||||
{% include 'partials/search.html.twig' %}
|
||||
<span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
|
||||
</div>
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue