css adjustments

Dockerfile

@@ -1,3 +1,4 @@
 FROM nginx:alpine
-COPY index.html /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/nginx.conf
+COPY index.html /usr/share/nginx/html
+COPY css /usr/share/nginx/html/css

css/grids-responsive-min.css

@@ -0,0 +1,470 @@
+/* !
+Pure v2.1.0
+Copyright 2013 Yahoo!
+Licensed under the BSD License.
+https://github.com/pure-css/pure/blob/master/LICENSE */
+@media screen and (min-width:35.5em){
+.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-1-12,.pure-u-sm-1-2,.pure-u-sm-1-24,.pure-u-sm-1-3,.pure-u-sm-1-4,.pure-u-sm-1-5,.pure-u-sm-1-6,.pure-u-sm-1-8,.pure-u-sm-10-24,.pure-u-sm-11-12,.pure-u-sm-11-24,.pure-u-sm-12-24,.pure-u-sm-13-24,.pure-u-sm-14-24,.pure-u-sm-15-24,.pure-u-sm-16-24,.pure-u-sm-17-24,.pure-u-sm-18-24,.pure-u-sm-19-24,.pure-u-sm-2-24,.pure-u-sm-2-3,.pure-u-sm-2-5,.pure-u-sm-20-24,.pure-u-sm-21-24,.pure-u-sm-22-24,.pure-u-sm-23-24,.pure-u-sm-24-24,.pure-u-sm-3-24,.pure-u-sm-3-4,.pure-u-sm-3-5,.pure-u-sm-3-8,.pure-u-sm-4-24,.pure-u-sm-4-5,.pure-u-sm-5-12,.pure-u-sm-5-24,.pure-u-sm-5-5,.pure-u-sm-5-6,.pure-u-sm-5-8,.pure-u-sm-6-24,.pure-u-sm-7-12,.pure-u-sm-7-24,.pure-u-sm-7-8,.pure-u-sm-8-24,.pure-u-sm-9-24{
+display:inline-block;
+letter-spacing:normal;
+word-spacing:normal;
+vertical-align:top;
+text-rendering:auto;
+}
+.pure-u-sm-1-24{
+width:4.1667%;
+}
+.pure-u-sm-1-12,.pure-u-sm-2-24{
+width:8.3333%;
+}
+.pure-u-sm-1-8,.pure-u-sm-3-24{
+width:12.5%;
+}
+.pure-u-sm-1-6,.pure-u-sm-4-24{
+width:16.6667%;
+}
+.pure-u-sm-1-5{
+width:20%;
+}
+.pure-u-sm-5-24{
+width:20.8333%;
+}
+.pure-u-sm-1-4,.pure-u-sm-6-24{
+width:25%;
+}
+.pure-u-sm-7-24{
+width:29.1667%;
+}
+.pure-u-sm-1-3,.pure-u-sm-8-24{
+width:33.3333%;
+}
+.pure-u-sm-3-8,.pure-u-sm-9-24{
+width:37.5%;
+}
+.pure-u-sm-2-5{
+width:40%;
+}
+.pure-u-sm-10-24,.pure-u-sm-5-12{
+width:41.6667%;
+}
+.pure-u-sm-11-24{
+width:45.8333%;
+}
+.pure-u-sm-1-2,.pure-u-sm-12-24{
+width:50%;
+}
+.pure-u-sm-13-24{
+width:54.1667%;
+}
+.pure-u-sm-14-24,.pure-u-sm-7-12{
+width:58.3333%;
+}
+.pure-u-sm-3-5{
+width:60%;
+}
+.pure-u-sm-15-24,.pure-u-sm-5-8{
+width:62.5%;
+}
+.pure-u-sm-16-24,.pure-u-sm-2-3{
+width:66.6667%;
+}
+.pure-u-sm-17-24{
+width:70.8333%;
+}
+.pure-u-sm-18-24,.pure-u-sm-3-4{
+width:75%;
+}
+.pure-u-sm-19-24{
+width:79.1667%;
+}
+.pure-u-sm-4-5{
+width:80%;
+}
+.pure-u-sm-20-24,.pure-u-sm-5-6{
+width:83.3333%;
+}
+.pure-u-sm-21-24,.pure-u-sm-7-8{
+width:87.5%;
+}
+.pure-u-sm-11-12,.pure-u-sm-22-24{
+width:91.6667%;
+}
+.pure-u-sm-23-24{
+width:95.8333%;
+}
+.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-24-24,.pure-u-sm-5-5{
+width:100%;
+}
+}
+@media screen and (min-width:40em){
+.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-1-12,.pure-u-md-1-2,.pure-u-md-1-24,.pure-u-md-1-3,.pure-u-md-1-4,.pure-u-md-1-5,.pure-u-md-1-6,.pure-u-md-1-8,.pure-u-md-10-24,.pure-u-md-11-12,.pure-u-md-11-24,.pure-u-md-12-24,.pure-u-md-13-24,.pure-u-md-14-24,.pure-u-md-15-24,.pure-u-md-16-24,.pure-u-md-17-24,.pure-u-md-18-24,.pure-u-md-19-24,.pure-u-md-2-24,.pure-u-md-2-3,.pure-u-md-2-5,.pure-u-md-20-24,.pure-u-md-21-24,.pure-u-md-22-24,.pure-u-md-23-24,.pure-u-md-24-24,.pure-u-md-3-24,.pure-u-md-3-4,.pure-u-md-3-5,.pure-u-md-3-8,.pure-u-md-4-24,.pure-u-md-4-5,.pure-u-md-5-12,.pure-u-md-5-24,.pure-u-md-5-5,.pure-u-md-5-6,.pure-u-md-5-8,.pure-u-md-6-24,.pure-u-md-7-12,.pure-u-md-7-24,.pure-u-md-7-8,.pure-u-md-8-24,.pure-u-md-9-24{
+display:inline-block;
+letter-spacing:normal;
+word-spacing:normal;
+vertical-align:top;
+text-rendering:auto;
+}
+.pure-u-md-1-24{
+width:4.1667%;
+}
+.pure-u-md-1-12,.pure-u-md-2-24{
+width:8.3333%;
+}
+.pure-u-md-1-8,.pure-u-md-3-24{
+width:12.5%;
+}
+.pure-u-md-1-6,.pure-u-md-4-24{
+width:16.6667%;
+}
+.pure-u-md-1-5{
+width:20%;
+}
+.pure-u-md-5-24{
+width:20.8333%;
+}
+.pure-u-md-1-4,.pure-u-md-6-24{
+width:25%;
+}
+.pure-u-md-7-24{
+width:29.1667%;
+}
+.pure-u-md-1-3,.pure-u-md-8-24{
+width:33.3333%;
+}
+.pure-u-md-3-8,.pure-u-md-9-24{
+width:37.5%;
+}
+.pure-u-md-2-5{
+width:40%;
+}
+.pure-u-md-10-24,.pure-u-md-5-12{
+width:41.6667%;
+}
+.pure-u-md-11-24{
+width:45.8333%;
+}
+.pure-u-md-1-2,.pure-u-md-12-24{
+width:50%;
+}
+.pure-u-md-13-24{
+width:54.1667%;
+}
+.pure-u-md-14-24,.pure-u-md-7-12{
+width:58.3333%;
+}
+.pure-u-md-3-5{
+width:60%;
+}
+.pure-u-md-15-24,.pure-u-md-5-8{
+width:62.5%;
+}
+.pure-u-md-16-24,.pure-u-md-2-3{
+width:66.6667%;
+}
+.pure-u-md-17-24{
+width:70.8333%;
+}
+.pure-u-md-18-24,.pure-u-md-3-4{
+width:75%;
+}
+.pure-u-md-19-24{
+width:79.1667%;
+}
+.pure-u-md-4-5{
+width:80%;
+}
+.pure-u-md-20-24,.pure-u-md-5-6{
+width:83.3333%;
+}
+.pure-u-md-21-24,.pure-u-md-7-8{
+width:87.5%;
+}
+.pure-u-md-11-12,.pure-u-md-22-24{
+width:91.6667%;
+}
+.pure-u-md-23-24{
+width:95.8333%;
+}
+.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-24-24,.pure-u-md-5-5{
+width:100%;
+}
+}
+@media screen and (min-width:64em){
+.pure-u-lg-1,.pure-u-lg-1-1,.pure-u-lg-1-12,.pure-u-lg-1-2,.pure-u-lg-1-24,.pure-u-lg-1-3,.pure-u-lg-1-4,.pure-u-lg-1-5,.pure-u-lg-1-6,.pure-u-lg-1-8,.pure-u-lg-10-24,.pure-u-lg-11-12,.pure-u-lg-11-24,.pure-u-lg-12-24,.pure-u-lg-13-24,.pure-u-lg-14-24,.pure-u-lg-15-24,.pure-u-lg-16-24,.pure-u-lg-17-24,.pure-u-lg-18-24,.pure-u-lg-19-24,.pure-u-lg-2-24,.pure-u-lg-2-3,.pure-u-lg-2-5,.pure-u-lg-20-24,.pure-u-lg-21-24,.pure-u-lg-22-24,.pure-u-lg-23-24,.pure-u-lg-24-24,.pure-u-lg-3-24,.pure-u-lg-3-4,.pure-u-lg-3-5,.pure-u-lg-3-8,.pure-u-lg-4-24,.pure-u-lg-4-5,.pure-u-lg-5-12,.pure-u-lg-5-24,.pure-u-lg-5-5,.pure-u-lg-5-6,.pure-u-lg-5-8,.pure-u-lg-6-24,.pure-u-lg-7-12,.pure-u-lg-7-24,.pure-u-lg-7-8,.pure-u-lg-8-24,.pure-u-lg-9-24{
+display:inline-block;
+letter-spacing:normal;
+word-spacing:normal;
+vertical-align:top;
+text-rendering:auto;
+}
+.pure-u-lg-1-24{
+width:4.1667%;
+}
+.pure-u-lg-1-12,.pure-u-lg-2-24{
+width:8.3333%;
+}
+.pure-u-lg-1-8,.pure-u-lg-3-24{
+width:12.5%;
+}
+.pure-u-lg-1-6,.pure-u-lg-4-24{
+width:16.6667%;
+}
+.pure-u-lg-1-5{
+width:20%;
+}
+.pure-u-lg-5-24{
+width:20.8333%;
+}
+.pure-u-lg-1-4,.pure-u-lg-6-24{
+width:25%;
+}
+.pure-u-lg-7-24{
+width:29.1667%;
+}
+.pure-u-lg-1-3,.pure-u-lg-8-24{
+width:33.3333%;
+}
+.pure-u-lg-3-8,.pure-u-lg-9-24{
+width:37.5%;
+}
+.pure-u-lg-2-5{
+width:40%;
+}
+.pure-u-lg-10-24,.pure-u-lg-5-12{
+width:41.6667%;
+}
+.pure-u-lg-11-24{
+width:45.8333%;
+}
+.pure-u-lg-1-2,.pure-u-lg-12-24{
+width:50%;
+}
+.pure-u-lg-13-24{
+width:54.1667%;
+}
+.pure-u-lg-14-24,.pure-u-lg-7-12{
+width:58.3333%;
+}
+.pure-u-lg-3-5{
+width:60%;
+}
+.pure-u-lg-15-24,.pure-u-lg-5-8{
+width:62.5%;
+}
+.pure-u-lg-16-24,.pure-u-lg-2-3{
+width:66.6667%;
+}
+.pure-u-lg-17-24{
+width:70.8333%;
+}
+.pure-u-lg-18-24,.pure-u-lg-3-4{
+width:75%;
+}
+.pure-u-lg-19-24{
+width:79.1667%;
+}
+.pure-u-lg-4-5{
+width:80%;
+}
+.pure-u-lg-20-24,.pure-u-lg-5-6{
+width:83.3333%;
+}
+.pure-u-lg-21-24,.pure-u-lg-7-8{
+width:87.5%;
+}
+.pure-u-lg-11-12,.pure-u-lg-22-24{
+width:91.6667%;
+}
+.pure-u-lg-23-24{
+width:95.8333%;
+}
+.pure-u-lg-1,.pure-u-lg-1-1,.pure-u-lg-24-24,.pure-u-lg-5-5{
+width:100%;
+}
+}
+@media screen and (min-width:80em){
+.pure-u-xl-1,.pure-u-xl-1-1,.pure-u-xl-1-12,.pure-u-xl-1-2,.pure-u-xl-1-24,.pure-u-xl-1-3,.pure-u-xl-1-4,.pure-u-xl-1-5,.pure-u-xl-1-6,.pure-u-xl-1-8,.pure-u-xl-10-24,.pure-u-xl-11-12,.pure-u-xl-11-24,.pure-u-xl-12-24,.pure-u-xl-13-24,.pure-u-xl-14-24,.pure-u-xl-15-24,.pure-u-xl-16-24,.pure-u-xl-17-24,.pure-u-xl-18-24,.pure-u-xl-19-24,.pure-u-xl-2-24,.pure-u-xl-2-3,.pure-u-xl-2-5,.pure-u-xl-20-24,.pure-u-xl-21-24,.pure-u-xl-22-24,.pure-u-xl-23-24,.pure-u-xl-24-24,.pure-u-xl-3-24,.pure-u-xl-3-4,.pure-u-xl-3-5,.pure-u-xl-3-8,.pure-u-xl-4-24,.pure-u-xl-4-5,.pure-u-xl-5-12,.pure-u-xl-5-24,.pure-u-xl-5-5,.pure-u-xl-5-6,.pure-u-xl-5-8,.pure-u-xl-6-24,.pure-u-xl-7-12,.pure-u-xl-7-24,.pure-u-xl-7-8,.pure-u-xl-8-24,.pure-u-xl-9-24{
+display:inline-block;
+letter-spacing:normal;
+word-spacing:normal;
+vertical-align:top;
+text-rendering:auto;
+}
+.pure-u-xl-1-24{
+width:4.1667%;
+}
+.pure-u-xl-1-12,.pure-u-xl-2-24{
+width:8.3333%;
+}
+.pure-u-xl-1-8,.pure-u-xl-3-24{
+width:12.5%;
+}
+.pure-u-xl-1-6,.pure-u-xl-4-24{
+width:16.6667%;
+}
+.pure-u-xl-1-5{
+width:20%;
+}
+.pure-u-xl-5-24{
+width:20.8333%;
+}
+.pure-u-xl-1-4,.pure-u-xl-6-24{
+width:25%;
+}
+.pure-u-xl-7-24{
+width:29.1667%;
+}
+.pure-u-xl-1-3,.pure-u-xl-8-24{
+width:33.3333%;
+}
+.pure-u-xl-3-8,.pure-u-xl-9-24{
+width:37.5%;
+}
+.pure-u-xl-2-5{
+width:40%;
+}
+.pure-u-xl-10-24,.pure-u-xl-5-12{
+width:41.6667%;
+}
+.pure-u-xl-11-24{
+width:45.8333%;
+}
+.pure-u-xl-1-2,.pure-u-xl-12-24{
+width:50%;
+}
+.pure-u-xl-13-24{
+width:54.1667%;
+}
+.pure-u-xl-14-24,.pure-u-xl-7-12{
+width:58.3333%;
+}
+.pure-u-xl-3-5{
+width:60%;
+}
+.pure-u-xl-15-24,.pure-u-xl-5-8{
+width:62.5%;
+}
+.pure-u-xl-16-24,.pure-u-xl-2-3{
+width:66.6667%;
+}
+.pure-u-xl-17-24{
+width:70.8333%;
+}
+.pure-u-xl-18-24,.pure-u-xl-3-4{
+width:75%;
+}
+.pure-u-xl-19-24{
+width:79.1667%;
+}
+.pure-u-xl-4-5{
+width:80%;
+}
+.pure-u-xl-20-24,.pure-u-xl-5-6{
+width:83.3333%;
+}
+.pure-u-xl-21-24,.pure-u-xl-7-8{
+width:87.5%;
+}
+.pure-u-xl-11-12,.pure-u-xl-22-24{
+width:91.6667%;
+}
+.pure-u-xl-23-24{
+width:95.8333%;
+}
+.pure-u-xl-1,.pure-u-xl-1-1,.pure-u-xl-24-24,.pure-u-xl-5-5{
+width:100%;
+}
+}
+@media screen and (min-width:120em){
+.pure-u-xxl-1,.pure-u-xxl-1-1,.pure-u-xxl-1-12,.pure-u-xxl-1-2,.pure-u-xxl-1-24,.pure-u-xxl-1-3,.pure-u-xxl-1-4,.pure-u-xxl-1-5,.pure-u-xxl-1-6,.pure-u-xxl-1-8,.pure-u-xxl-10-24,.pure-u-xxl-11-12,.pure-u-xxl-11-24,.pure-u-xxl-12-24,.pure-u-xxl-13-24,.pure-u-xxl-14-24,.pure-u-xxl-15-24,.pure-u-xxl-16-24,.pure-u-xxl-17-24,.pure-u-xxl-18-24,.pure-u-xxl-19-24,.pure-u-xxl-2-24,.pure-u-xxl-2-3,.pure-u-xxl-2-5,.pure-u-xxl-20-24,.pure-u-xxl-21-24,.pure-u-xxl-22-24,.pure-u-xxl-23-24,.pure-u-xxl-24-24,.pure-u-xxl-3-24,.pure-u-xxl-3-4,.pure-u-xxl-3-5,.pure-u-xxl-3-8,.pure-u-xxl-4-24,.pure-u-xxl-4-5,.pure-u-xxl-5-12,.pure-u-xxl-5-24,.pure-u-xxl-5-5,.pure-u-xxl-5-6,.pure-u-xxl-5-8,.pure-u-xxl-6-24,.pure-u-xxl-7-12,.pure-u-xxl-7-24,.pure-u-xxl-7-8,.pure-u-xxl-8-24,.pure-u-xxl-9-24{
+display:inline-block;
+letter-spacing:normal;
+word-spacing:normal;
+vertical-align:top;
+text-rendering:auto;
+}
+.pure-u-xxl-1-24{
+width:4.1667%;
+}
+.pure-u-xxl-1-12,.pure-u-xxl-2-24{
+width:8.3333%;
+}
+.pure-u-xxl-1-8,.pure-u-xxl-3-24{
+width:12.5%;
+}
+.pure-u-xxl-1-6,.pure-u-xxl-4-24{
+width:16.6667%;
+}
+.pure-u-xxl-1-5{
+width:20%;
+}
+.pure-u-xxl-5-24{
+width:20.8333%;
+}
+.pure-u-xxl-1-4,.pure-u-xxl-6-24{
+width:25%;
+}
+.pure-u-xxl-7-24{
+width:29.1667%;
+}
+.pure-u-xxl-1-3,.pure-u-xxl-8-24{
+width:33.3333%;
+}
+.pure-u-xxl-3-8,.pure-u-xxl-9-24{
+width:37.5%;
+}
+.pure-u-xxl-2-5{
+width:40%;
+}
+.pure-u-xxl-10-24,.pure-u-xxl-5-12{
+width:41.6667%;
+}
+.pure-u-xxl-11-24{
+width:45.8333%;
+}
+.pure-u-xxl-1-2,.pure-u-xxl-12-24{
+width:50%;
+}
+.pure-u-xxl-13-24{
+width:54.1667%;
+}
+.pure-u-xxl-14-24,.pure-u-xxl-7-12{
+width:58.3333%;
+}
+.pure-u-xxl-3-5{
+width:60%;
+}
+.pure-u-xxl-15-24,.pure-u-xxl-5-8{
+width:62.5%;
+}
+.pure-u-xxl-16-24,.pure-u-xxl-2-3{
+width:66.6667%;
+}
+.pure-u-xxl-17-24{
+width:70.8333%;
+}
+.pure-u-xxl-18-24,.pure-u-xxl-3-4{
+width:75%;
+}
+.pure-u-xxl-19-24{
+width:79.1667%;
+}
+.pure-u-xxl-4-5{
+width:80%;
+}
+.pure-u-xxl-20-24,.pure-u-xxl-5-6{
+width:83.3333%;
+}
+.pure-u-xxl-21-24,.pure-u-xxl-7-8{
+width:87.5%;
+}
+.pure-u-xxl-11-12,.pure-u-xxl-22-24{
+width:91.6667%;
+}
+.pure-u-xxl-23-24{
+width:95.8333%;
+}
+.pure-u-xxl-1,.pure-u-xxl-1-1,.pure-u-xxl-24-24,.pure-u-xxl-5-5{
+width:100%;
+}
+}

docker-compose.yml

@@ -7,3 +7,4 @@ services:
     restart: always
     volumes:
       - ./feed:/usr/share/nginx/html/feed
+      - ./media:/usr/share/nginx/html/media

index.html

@@ -2,7 +2,7 @@
 <head>
 <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="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/grids-responsive-min.css"/>
+<link rel="stylesheet" href="css/grids-responsive-min.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" >
@@ -14,9 +14,9 @@
 <style>
 .card {
   display: inline-block;
-  box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
-  margin: 10px;
-  margin-bottom: 10px;
+  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;
   min-width: 100%;
@@ -24,8 +24,8 @@
 
 .card:hover {
   /*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
-  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-  margin-bottom: 10px;
+  box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.19), 0 0.1em 0.1em rgba(0,0,0,0.23);
+  margin-bottom: 0.2em;
 }
 
 .image {
@@ -47,37 +47,37 @@
   color: black;
   text-align: left;
   background: transparent;
-  padding: 10px 20px;
+  padding: 0.2em 0.4em;
   min-height: 30%;
   max-height: 30%;
-  margin: 10px;
+  margin: 0.2em;
 }
 
 .text p {
-  margin-bottom: 10px;
+  margin-bottom: 0.2em;
 }
 
 .pure-g > div {
+  box-sizing: border-box;
   
 }
 .card > button {
-  display: block;
   background: transparent;
   min-height: 100%;
   min-width: 100%;
 }
 .l-box {
-  padding: 1em;
+  padding: 0.5em;
 }
 </style>
 <div class="pure-g">
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://shandan.one/feed/news/rss.html"
       id="news" rel="external" method="get" target="_self">
       <div class="card">
         <button form="news" style="color: gold; border-color: gold">
           <div class="image">
-            <table style="display: inline-block"><tr><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="64" alt="RSS"></td><td style="padding: 10px"><h1>News</h1></td></tr></table>
+            <table style="display: inline-block"><tr style="vertical-align: top"><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="32" alt="RSS"></td><td style="padding: 10px"><h2>News</h2></td></tr></table>
           </div>
           <div class="text">
             <h3>News Feed</h3>
@@ -87,13 +87,13 @@
       </div>
     </form>
   </div>
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://shandan.one/feed/discovery/rss.html"
       id="discovery" rel="external" method="get" formtarget="_self">
       <div class="card">
         <button form="discovery" style="color: gold; border-color: gold">
           <div class="image">
-            <table style="display: inline-block"><tr><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="64" alt="RSS"></td><td style="padding: 10px"><h1>Discovery</h1></td></tr></table>
+            <table style="display: inline-block"><tr style="vertical-align: top"><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="32" alt="RSS"></td><td style="padding: 10px"><h2>Discover</h2></td></tr></table>
           </div>
           <div class="text">
             <h3>Disocvery Feed</h3>
@@ -103,13 +103,13 @@
       </div>
     </form>
   </div>
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://shandan.one/feed/humour/rss.html"
       id="humour" rel="external" method="get" formtarget="_self">
       <div class="card">
         <button form="humour" style="color: gold; border-color: gold">
           <div class="image">
-            <table style="display: inline-block"><tr><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="64" alt="RSS"></td><td style="padding: 10px"><h1>Humour</h1></td></tr></table>
+            <table style="display: inline-block"><tr style="vertical-align: top"><td><img src="//upload.wikimedia.org/wikipedia/en/thumb/4/43/Feed-icon.svg/128px-Feed-icon.svg.png" width="32" alt="RSS"></td><td style="padding: 10px"><h2>Humour</h2></td></tr></table>
           </div>
           <div class="text">
             <h3>Humour Feed</h3>
@@ -122,13 +122,13 @@
 </div>
 <hr/>
 <div class="pure-g">
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://wol.shandan.one"
       id="wol" rel="external" method="get" target="_self">
       <div class="card">
         <button form="wol" style="color: firebrick; border-color: firebrick">
           <div class="image">
-            <h1>Wol</h1>
+            <h2>Wol</h2>
           </div>
           <div class="text">
             <h3>Wake a device</h3>
@@ -137,7 +137,7 @@
       </div>
     </form>
   </div>
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://shandan.one/pgadmin4"
       id="pgadmin" rel="external" method="get" target="_self">
       <div class="card">
@@ -153,7 +153,7 @@
       </div>
     </form>
   </div>
-    <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+    <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://shandan.one/guacamole"
       id="guacamole" rel="external" method="get" target="_self">
       <div class="card">
@@ -169,9 +169,9 @@
       </div>
     </form>
   </div>
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://gogs.shandan.one"
-      id="gogs" rel="external" method="get" target="_self">
+      id="vcs" rel="external" method="get" target="_self">
       <div class="card">
         <button form="vcs" style="color: yellow; border-color: yellow">
           <div class="image">
@@ -185,13 +185,13 @@
       </div>
     </form>
   </div>
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://syncthing.shandan.one"
       id="syncthing" rel="external" method="get" target="_self">
       <div class="card">
         <button form="syncthing" style="color: royalblue; border-color: royalblue">
           <div class="image">
-            <img src="https://syncthing.shandan.one/assets/img/favicon-default.png" width="64" alt="Syncthing">
+            <img src="https://syncthing.net/img/logo-horizontal.svg" width="128" alt="Syncthing">
           </div>
           <div class="text">
             <h3>Syncthing</h3>
@@ -201,7 +201,7 @@
       </div>
     </form>
   </div>
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://tv.shandan.one"
       id="tv" rel="external" method="get" target="_self">
       <div class="card">
@@ -217,7 +217,7 @@
       </div>
     </form>
   </div>
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://shandan.one/wekan"
       id="wekan" rel="external" method="get" target="_self">
       <div class="card">
@@ -234,13 +234,13 @@
       </div>
     </form>
   </div>
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://mouse.shandan.one/#remote-mouse"
       id="mouse" rel="external" method="get" target="_self">
       <div class="card">
         <button form="mouse" style="color: teal; border-color: teal">
           <div class="image">
-            <img src="https://mouse.shandan.one/icon.png" width="64" alt="Mouse">
+            <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>
@@ -251,9 +251,9 @@
       </div>
     </form>
   </div>
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://gateway.shandan.one"
-      id="mouse" rel="external" method="get" target="_self">
+      id="gateway" rel="external" method="get" target="_self">
       <div class="card">
         <button form="gateway" style="color: lightblue; border-color: lightblue">
           <div class="image">
@@ -268,17 +268,17 @@
       </div>
     </form>
   </div>
-  <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
+  <div class="pure-u-1-2 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-4 l-box">
     <form action="https://listgarden.shandan.one"
       id="listgarden" rel="external" method="get" target="_self">
       <div class="card">
           <button form="listgarden" style="color: olivedrab; border-color: olivedrab">
           <div class="image">
-            <!--<img src="https://gateway.shandan.one/favicon.ico?t=6dcc8b66" width="64" alt="Gateway">-->
-            <h1>ListGarden</h1>
+            <img src="http://www.wikicalc.org/images/listgardenlogo48.gif" width="64" alt="ListGarden">
           </div>
           <div class="text">
-            <h3>Manage RSS Feeds</h3>
+            <h3>ListGarden</h3>
+            <p>Manage RSS Feeds</p>
             <p>Publish new items and create new feeds</p>
           </div>
         </button>

nginx.conf

@@ -8,5 +8,9 @@ http {
     location /feed/ {
       autoindex on;
     }
+    location /css/ {
+    }
+    location /media/ {
+    }
   }
 }