more css improvements

css/responsive-visibility.css

@@ -0,0 +1,17 @@
+.opt-md,.opt-lg,.opt-xl,.opt-xxl { display: none; }
+.opt-all,.opt-sm { display: block; }
+@media screen and (min-width:35.5em){
+    .opt-all,.opt-sm { display: block; }
+}
+@media screen and (min-width:40em){
+    .opt-all,.opt-sm,.opt-md { display: block; }
+}
+@media screen and (min-width:64em){
+    .opt-all,.opt-sm,.opt-md,.opt-lg { display: block; }
+}
+@media screen and (min-width:80em){
+    .opt-all,.opt-sm,.opt-md,.opt-lg,.opt-xl { display: block; }
+}
+@media screen and (min-width:120em){
+    .opt-all,.opt-sm,.opt-md,.opt-lg,.opt-xl,.opt-xxl { display: block; }
+}

index.html

@@ -3,6 +3,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
 <link rel="stylesheet" href="css/grids-responsive-min.css"/>
+<link rel="stylesheet" href="css/responsive-visibility.css"/>
 <link rel="alternate" title="News RSS Feed" href="https://shandan.one/feed/news/rss.xml" type="application/rss+xml"/>
 <link rel="alternate" title="Discovery RSS Feed" href="https://shandan.one/feed/discovery/rss.xml" type="application/rss+xml"/>
 <link rel="alternate" title="Humour RSS Feed" href="http://shandan.one/feed/humour/rss.xml" type="application/rss+xml" >
@@ -15,7 +16,6 @@
 .card {
   display: inline-block;
   box-shadow: 0 0.1em 0.2em 0 rgba(0,0,0,.15);
-  margin: 0.2em;
   margin-bottom: 0.2em;
   position: relative;
   transition: all .2s ease-in-out;
@@ -23,25 +23,20 @@
 }
 
 .card:hover {
-  /*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
-  box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.19), 0 0.1em 0.1em rgba(0,0,0,0.23);
+  box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.20), 0 0.1em 0.2em rgba(0,0,0,0.30);
   margin-bottom: 0.2em;
 }
 
 .image {
-  max-height: 40%;
-  min-height: 40%;
   opacity: .7;
   overflow: hidden;
   transition: all .2s ease-in-out;
+  line-height: 1;
 }
 
 .image:hover,
 .card:hover .image {
-  max-height: 40%;
-  min-height: 40%;
   opacity: 1;
-  bottom: 60%;
 }
 
 .text {
@@ -49,11 +44,11 @@
   text-align: left;
   background: transparent;
   padding: 0.2em 0.4em;
-  min-height: 60%;
-  max-height: 60%;
   margin: 0.2em;
-  top: 40%;
+  top: 64px;
   position: absolute;
+  overflow: hidden;
+  line-height: 1;
 }
 
 .text p {
@@ -68,7 +63,7 @@
   background: transparent;
   min-height: 100%;
   min-width: 100%;
-  padding: 0.2em 0.4em 60%;
+  padding: 0.2em 0.4em 50%;
 }
 .l-box {
   padding: 0.5em;
@@ -230,8 +225,8 @@
             <img src="https://shandan.one/wekan/logo-header.png" width="128" alt="WeKan">
           </div>
           <div class="text">
-            <h3>WeKan</h3>
-            <p>Kanban board</p>
+            <h3 class="opt-md opt-lg opt-xl opt-xxl">WeKan</h3>
+            <p class="opt-lg opt-xl opt-xxl">Kanban board</p>
             <p>Manage projects and tasks</p>
           </div>
         </button>
@@ -247,8 +242,8 @@
             <img src="https://raw.githubusercontent.com/Unrud/remote-touchpad/master/webdata/icon.png" width="64" alt="Mouse">
           </div>
           <div class="text">
-            <h3>Remote Touchpad</h3>
-            <p>Use device as touchpad</p>
+            <h3 class="opt-md opt-lg opt-xl opt-xxl">Remote Touchpad</h3>
+            <p class="opt-lg opt-xl opt-xxl">Use device as touchpad</p>
             <p>Turn your device's touchscreen into a remote touchpad</p>
           </div>
         </button>
@@ -264,8 +259,8 @@
             <img src="https://gateway.shandan.one/favicon.ico?t=6dcc8b66" width="64" alt="Gateway">
           </div>
           <div class="text">
-            <h3>Gateway</h3>
-            <p>Access the gateway</p>
+            <h3 class="opt-sm opt-md opt-lg opt-xl opt-xxl">Gateway</h3>
+            <p class="opt-lg opt-xl opt-xxl">Access the gateway</p>
             <p>Manage local LAN and internet connection settings</p>
           </div>
         </button>
@@ -281,8 +276,8 @@
             <img src="http://www.wikicalc.org/images/listgardenlogo48.gif" width="64" alt="ListGarden">
           </div>
           <div class="text">
-            <h3>ListGarden</h3>
-            <p>Manage RSS Feeds</p>
+            <h3 class="opt-sm opt-md opt-lg opt-xl opt-xxl">ListGarden</h3>
+            <p class="opt-lg opt-xl opt-xxl">Manage RSS Feeds</p>
             <p>Publish new items and create new feeds</p>
           </div>
         </button>