html/style.css

   1 html, body {
   2   width: 100%;
   3   height: 100%;
   4   padding: 0;
   5   margin: 0;
   6   font-family: sans-serif;
   7   overflow: hidden;
   8 }
   9
  10 h1,h2,h3,h4,h5,h6 {
  11   font-size: 1rem;
  12 }
  13 h1 {
  14   background-color: #eee;
  15   margin: 0;
  16   padding: 4px 8px;
  17 }
  18
  19 .app {
  20   display: grid;
  21   grid-template-columns: 25% 75% auto;
  22   grid-template-rows: calc(40% - 24px) 60% 24px;
  23   grid-column-gap: 0px;
  24   grid-row-gap: 0px;
  25 }
  26
  27 #feed-pane {
  28   grid-area: 1 / 1 / 3 / 2;
  29   overflow: auto;
  30 }
  31
  32 #feed-item-list {
  33   height: calc(100% - 30px);
  34 }
  35 #feed-item-list span {
  36   float: right;
  37 }
  38
  39 #list-pane {
  40   grid-area: 1 / 2 / 2 / 3;
  41   border-left: solid 1px #000;
  42   border-bottom: solid 1px #000;
  43 }
  44
  45 #reading-pane {
  46   grid-area: 2 / 2 / 3 / 3;
  47   border: solid 0px #000;
  48   border-left-width: 1px;
  49 }
  50 #reading-pane img {
  51   max-width: 100%;
  52 }
  53 #feed-content, #meta {
  54   padding: 10px;
  55 }
  56 #feed-content {
  57   height: calc(100% - 100px)
  58 }
  59 #meta {
  60   background-color: #ddd;
  61   font-size: 0.9rem;
  62   max-height: 100px;
  63   overflow: hidden;
  64   border-bottom: solid 1px #000;
  65 }
  66
  67 #status-bar {
  68   grid-area: 3 / 1 / 3 / 3;
  69   background-color: #ccc;
  70   border-top: solid 1px #000;
  71   padding: 4px;
  72   line-height: 1rem;
  73   text-align: right;
  74 }
  75
  76
  77 .scrollable {
  78   overflow: auto;
  79 }
  80 .list {
  81   padding: 0;
  82   margin: 0;
  83 }
  84
  85 .list li {
  86   list-style: none;
  87   margin: 0;
  88 }
  89
  90 .list li a {
  91   display: block;
  92   border: solid 0px #777;
  93   padding: 4px 8px;
  94 }
  95 #feed-pane a:hover {
  96   background-color: #eee;
  97 }
  98 #feed-pane a.active {
  99   background-color: #eee;
 100 }
 101 #feed-pane a.unread {
 102   font-weight: bold;
 103 }
 104 #feed-pane a.active::after {
 105   content: '\21D2';
 106   float: right;
 107 }
 108
 109 #list-pane table {
 110   width: 100%;
 111   border-spacing: 0;
 112 }
 113 #list-pane tr:hover {
 114   background-color: #aaa;
 115 }
 116 #list-pane th {
 117   text-align: left;
 118   background-color: #eee;
 119 }
 120 #list-pane th {
 121   padding: 4px;
 122 }
 123 #list-pane table th:nth-child(2) {
 124 }
 125 #list-pane a {
 126   display: block;
 127   padding: 4px;
 128 }
 129 #feed-pane a.active {
 130   background-color: #fff5e3;
 131 }
 132 #list-pane a.active {
 133   background-color: #e3f2ff;
 134 }
 135
 136 #list-pane a.unread {
 137   font-weight: bold;
 138 }