Commit cf8ce674 authored by Isabella Skořepová's avatar Isabella Skořepová
Browse files

Move some media queries

parent c0e6d63b
......@@ -3,10 +3,25 @@ import { SymbolSearch, SymbolMenu, SymbolFacebook } from './svgs'
import { Search } from './search'
import { css } from '@emotion/react'
const hideOnSmallAndUp = css`
display: none;
@media (max-width: 300px) {
display: block;
function hideOnAndUp(px: number) {
return css`
display: none;
@media (max-width: ${px}px) {
display: block;
}
`
}
const hideOnSmallAndUp = hideOnAndUp(300)
const hideOnMedAndUp = hideOnAndUp(600)
const hideOnUltraSmall = css`
@media (max-width: 330px) {
display: none !important;
}
`
const hideOnSmallAndDown = css`
@media (max-width: 600px) {
display: none !important;
}
`
......@@ -25,7 +40,8 @@ export function BaseBody({
<div className="nav-wrapper container">
<a
data-activates="nav-mobile"
className="menu-icon hide-on-med-and-up"
css={hideOnMedAndUp}
className="menu-icon"
style={{ float: 'left' }}
>
<SymbolMenu color="#fff" size={false} />
......@@ -34,24 +50,24 @@ export function BaseBody({
<a id="logo-container" href="/tag/vse/1/">
<img css={hideOnSmallAndUp} src="/theme/icon56.png" />
<img
className="hide-on-med-and-up hide-on-ultra-small"
css={[hideOnMedAndUp, hideOnUltraSmall]}
src="/theme/logo56.png"
/>
<img
className="hide-on-small-only"
css={hideOnSmallAndDown}
src="/theme/logo64.png"
alt="Radioklub OK1KVK"
/>
</a>
</div>
<div className="toplinks">
<a className="hide-on-small-only left" id="aktuality">
<a css={hideOnSmallAndDown} className="left" id="aktuality">
Aktuality
</a>
<a className="hide-on-small-only left" id="clanky">
<a css={hideOnSmallAndDown} className="left" id="clanky">
Články
</a>
<a className="hide-on-small-only left" id="o-nas">
<a css={hideOnSmallAndDown} className="left" id="o-nas">
O nás
</a>
<a className="search-icon left">
......@@ -171,7 +187,11 @@ export function BaseBody({
</ul>
{/* Lower nav */}
<nav className="subnav subnav1 hide-on-small-and-down" role="navigation">
<nav
css={hideOnSmallAndDown}
className="subnav subnav1"
role="navigation"
>
<div className="nav-wrapper container">
<ul className="right">
<li>
......@@ -190,7 +210,11 @@ export function BaseBody({
</div>
</nav>
{/* Lower nav 2 - Aktuality */}
<nav className="subnav subnav2 hide-on-small-and-down" role="navigation">
<nav
css={hideOnSmallAndDown}
className="subnav subnav2"
role="navigation"
>
<div className="nav-wrapper container">
<ul className="right">
<li>
......@@ -209,7 +233,11 @@ export function BaseBody({
</div>
</nav>
{/* Lower nav 3 - Články */}
<nav className="subnav subnav3 hide-on-small-and-down" role="navigation">
<nav
css={hideOnSmallAndDown}
className="subnav subnav3"
role="navigation"
>
<div className="nav-wrapper container">
<ul className="right">
<li>
......
......@@ -15,6 +15,12 @@ function relURL(filename, dir_) {
return `${dir}/${filename}`
}
const hideOnSmallAndDown = css`
@media (max-width: 600px) {
display: none !important;
}
`
export function List({ subtags, tag, content, metadata, file, config }) {
return (
<div id="content" className="container">
......@@ -70,7 +76,7 @@ export function List({ subtags, tag, content, metadata, file, config }) {
<Paginator metadata={metadata} file={file} config={config} />
</div>
<div className="hide-on-small-only">
<div css={hideOnSmallAndDown}>
{metadata.prevurl && (
<div style={{ left: 0 }} className="sidelink sidelink-l">
<a href={`/${metadata.prevurl}`}>
......
......@@ -280,11 +280,6 @@ ul.staggered-list li {
/*********************
Media Query Classes
**********************/
.hide-on-small-only, .hide-on-small-and-down {
@media #{$small-and-down} {
display: none !important;
}
}
.hide-on-med-and-down {
@media #{$medium-and-down} {
display: none !important;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment