Move some media queries

theme-source/partials/base-body.tsx

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

theme-source/partials/list.tsx

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

theme-source/sass/components/_global.scss

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