Rebuild in modular fashion

build/backloggery.css

@@ -0,0 +1,896 @@
+a,aside,body,details,div,fieldset,figcaption,figure,footer,h1,h2,h3,html,img,input,li,main,nav,ol,p,section,select,span,summary,table,textarea,ul {
+  border:0;
+  -webkit-box-sizing:border-box;
+  box-sizing:border-box;
+  font-size:100%;
+  margin:0;
+  outline:none;
+  padding:0;
+  vertical-align:baseline
+}
+
+:root {
+  --default-base:#424957;
+  --default-secondary:#272c34;
+  --default-secondary-50:rgba(40,44,52,0.5);
+  --default-accent:#f58d47;
+  --default-text:#fff;
+  --default-secondary-text:#fff;
+  --default-accent-text:#fff;
+  --default-accent-shadow:hsla(0,0%,0%,50%);
+  --retro-border:url(/img/border.png);
+  --active-base:var(--default-base);
+  --active-secondary:var(--default-secondary);
+  --active-secondary-50:var(--default-secondary-50);
+  --active-accent:var(--default-accent);
+  --active-text:var(--default-text);
+  --active-secondary-text:var(--default-secondary-text);
+  --active-secondary-text-25:hsla(0,0%,100%,0.25);
+  --active-accent-text:var(--default-accent-text);
+  --unplayed-color:#562929;
+  --unfinished-color:#bd7828;
+  --beaten-color:#d1d1d1;
+  --completed-color:#ecd579;
+  --endless-color:#573271;
+  --none-color:hsla(264,27%,11%,40%);
+  --follow-color:#17cf17;
+  --mention-color:#cf1717;
+  --dm-color:#cf17cf;
+  --news-color:#1742cf
+}
+
+html {
+  color:var(--active-text);
+  font-family:Lato,arial,helvetica,sans-serif;
+  font-size:.9rem;
+  overflow-x:hidden;
+  overflow-y:overlay;
+  scroll-behavior:smooth
+}
+
+body {
+  background-attachment:fixed;
+  background-color:var(--active-base);
+  margin:0;
+  padding:0
+}
+
+#app>div:last-of-type {
+  display:grid;
+  grid-gap:0 10px;
+  grid-template-columns:repeat(12,1fr);
+  grid-template-rows:auto;
+  grid-template-areas:"card card card card card card card card card card card card" "side side side side side side side side side side side side" "main main main main main main main main main main main main";
+  max-width:1200px;
+  margin: 0 auto;
+  padding:0 2vw 0 1vw
+}
+
+section {
+  padding:2vh 1vw 2vh
+}
+
+a {
+  text-decoration:none
+}
+
+.link,a {
+  color:var(--active-text)
+}
+
+img {
+  max-width:100%
+}
+
+h1,h2 {
+  font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif;
+  font-variant:small-caps;
+  letter-spacing:2px;
+  border-bottom:1px solid var(--active-text);
+  font-size:18px;
+  margin:30px 0 10px;
+  padding-left:5px
+}
+
+h1:first-of-type {
+  margin:0 0 15px
+}
+
+svg,svg text {
+  fill:var(--active-text)
+}
+
+svg text {
+  font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif
+}
+
+.decay {
+  opacity:.5
+}
+
+.decay:active,.decay:focus,.decay:focus-within,.decay:hover {
+  opacity:1
+}
+
+.tabs {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  /* margin-top:3rem; */
+  padding:.3rem 0
+}
+
+.tabs a,.tabs div {
+  background-color:var(--active-secondary-50);
+  border-bottom:2px solid var(--active-text);
+  color:var(--active-secondary-text);
+  -webkit-box-flex:1;
+  -ms-flex:1;
+  flex:1;
+  font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif;
+  font-size:1rem;
+  letter-spacing:1px;
+  opacity:.7;
+  padding:.5rem 0 .4rem;
+  text-align:center;
+  text-transform:uppercase;
+  white-space:nowrap
+}
+
+.tabs a:hover,.tabs div:hover {
+  opacity:1
+}
+
+.tabs a,.tabs a.router-link-active {
+  border-top:2px solid var(--active-text)
+}
+
+.tabs a.router-link-active {
+  background:var(--active-accent);
+  border-bottom:2px solid var(--active-text);
+  color:var(--active-accent-text);
+  font-weight:700;
+  opacity:1;
+  position:relative
+}
+
+.tabs a.router-link-active a {
+  border:none;
+  display:block;
+  padding-right:10%;
+  position:absolute;
+  top:-7px;
+  right:0;
+  text-align:right;
+  width:100%
+}
+
+@media screen and (max-width:700px) {
+  .tabs a {
+    font-size:.8rem
+  }
+}
+
+.Added,.unplayed,.Unplayed {
+  background-color:var(--unplayed-color)!important;
+  color:hsla(0,0%,100%,.75);
+  text-shadow:none
+}
+
+.Started,.unfinished,.Unfinished {
+  background-color:var(--unfinished-color)!important;
+  color:hsla(0,0%,100%,.75);
+  text-shadow:none
+}
+
+.Beat,.beaten,.Beaten {
+  background-color:var(--beaten-color)!important;
+  color:rgba(0,0,0,.75);
+  text-shadow:none
+}
+
+.completed,.Completed {
+  background-color:var(--completed-color)!important;
+  color:rgba(0,0,0,.75);
+  text-shadow:none
+}
+
+.endless,.Endless {
+  background-color:var(--endless-color)!important;
+  color:hsla(0,0%,100%,.75);
+  text-shadow:none
+}
+
+.none,.None {
+  background-color:var(--none-color)!important;
+  text-shadow:none
+}
+
+.none,.None,.Playing {
+  color:hsla(0,0%,100%,.75)
+}
+
+.Playing {
+  background-color:#202020!important
+}
+
+.borderless {
+  border:none!important
+}
+
+.markdown {
+  padding:0 .25rem;
+  white-space:pre-wrap
+}
+
+div.profile main {
+  grid-area:main
+}
+
+@media screen and (min-width:800px) {
+  div.profile {
+    grid-template-areas:"card card card card card card card card card card card card" "side side side side main main main main main main main main"!important
+  }
+
+  .tabs {
+    margin-top:0
+  }
+
+
+}
+
+.game-item {
+  margin-bottom:-3px;
+  overflow:hidden;
+  position:relative;
+}
+
+.game-item>summary {
+  cursor: pointer;
+}
+
+.game-item>summary:first-child {
+  background-color:hsla(0,0%,100%,.05);
+  border:2px solid rgba(0,0,0,.5);
+  border-radius:4px;
+  -webkit-box-align:center;
+  -ms-flex-align:center;
+  align-items:center;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  margin-bottom:10px;
+  min-height:54px;
+  max-height:54px;
+  overflow:hidden;
+  position:relative;
+  text-align:center;
+  width:100%
+}
+
+.game-item>summary:first-child>div {
+  -webkit-box-flex:1;
+  -ms-flex:1;
+  flex:1
+}
+
+.game-item>summary:first-child>.platform {
+  background-color:var(--active-secondary);
+  border-radius:3px 0 0 3px;
+  color:var(--active-secondary-text);
+  min-height:50px;
+  max-width:50px;
+  overflow:hidden
+}
+
+.game-item>summary:first-child>.platform img,.game-item>summary:first-child>.platform p {
+  opacity:.85
+}
+
+.game-item>summary:first-child>.platform img {
+  position:relative;
+  top:7px;
+  width:35px
+}
+
+.game-item>summary:first-child>.platform img.bw {
+  -webkit-filter:var(--platform-bw);
+  filter:var(--platform-bw)
+}
+
+.game-item>summary:first-child>.status {
+  max-width:48px;
+  padding:5px 9px
+}
+
+.game-item>summary:first-child>.status img {
+  margin-top:3px;
+  max-width:32px
+}
+
+.game-item>summary:first-child>.text {
+  -webkit-box-flex:5;
+  -ms-flex-positive:5;
+  flex-grow:5;
+  padding:3px 4px;
+  text-align:left
+}
+
+.game-item>summary:first-child>.text>.title {
+  font-family:Titillium Web,sans-serif;
+  font-size:1.1rem;
+  line-height:1.1rem;
+  margin:0 0 -3px
+}
+
+@supports(-webkit-line-clamp:1) {
+  .game-item>summary:first-child>.text>.title {
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:normal;
+    display:-webkit-box;
+    -webkit-line-clamp:1;
+    -webkit-box-orient:vertical
+  }
+
+
+}
+
+.game-item>summary:first-child>.text>.markdown {
+  font-size:.7rem;
+  max-height:32px;
+  opacity:.75;
+  padding:2px 1px;
+  width:auto;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+  overflow:hidden
+}
+
+@supports(-webkit-line-clamp:2) {
+  .game-item>summary:first-child>.text>.markdown {
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:normal;
+    display:-webkit-box;
+    -webkit-line-clamp:2;
+    -webkit-box-orient:vertical
+  }
+
+
+}
+
+.game-item>summary:first-child>.priority {
+  max-width:56px;
+  padding-right:10px;
+  text-align:center
+}
+
+.game-item>summary:first-child>.priority img {
+  margin-top:3px;
+  max-width:32px;
+  opacity:.5
+}
+
+@media screen and (max-width:520px) {
+
+  .game-item>summary:first-child>.text>.title {
+    font-size:1rem
+  }
+
+  .game-item>summary:first-child>.status {
+    padding:5px
+  }
+
+}
+
+.donut {
+  display:block
+}
+
+.platform-card {
+  border:2px solid rgba(0,0,0,.5);
+  border-radius:6px;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  font-weight:700;
+  margin:0 0 7px;
+  text-align:center;
+  width:100%
+}
+
+.platform-card .bars {
+  border-radius:0 4px 4px 0;
+  display:-webkit-inline-box;
+  display:-ms-inline-flexbox;
+  display:inline-flex;
+  border-left:2px solid rgba(0,0,0,.5);
+  -webkit-box-flex:9;
+  -ms-flex:9;
+  flex:9
+}
+
+.platform-card .bars a {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-align:center;
+  -ms-flex-align:center;
+  align-items:center;
+  -webkit-box-pack:center;
+  -ms-flex-pack:center;
+  justify-content:center;
+  border-left:2px solid rgba(0,0,0,.5);
+  -webkit-box-flex:1;
+  -ms-flex:1;
+  flex:1;
+  font-size:20px;
+  margin:0;
+  min-width:2rem;
+  padding:0 3px;
+  -webkit-transition:-webkit-box-flex .5s ease-in-out;
+  transition:-webkit-box-flex .5s ease-in-out;
+  transition:flex .5s ease-in-out;
+  transition:flex .5s ease-in-out,-webkit-box-flex .5s ease-in-out,-ms-flex .5s ease-in-out
+}
+
+.platform-card .bars a:first-of-type {
+  border-left:0 solid rgba(0,0,0,.5)
+}
+
+.platform-card .bars a.remove_flex {
+  border:none;
+  -webkit-box-flex:0;
+  -ms-flex:0;
+  flex:0;
+  min-width:unset;
+  padding:0
+}
+
+.platform-card .abbr,.platform-card .title {
+  background:var(--active-secondary);
+  border-radius:4px 0 0 4px;
+  color:var(--active-secondary-text);
+  -webkit-box-pack:center;
+  -ms-flex-pack:center;
+  justify-content:center;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-flex:4;
+  -ms-flex:4;
+  flex:4;
+  font-size:17px;
+  font-weight:700;
+  min-width:50px;
+  overflow:hidden;
+  padding:5px;
+  white-space:nowrap
+}
+
+.platform-card .abbr {
+  display:none
+}
+
+.platform-card .total {
+  -webkit-box-align:center;
+  -ms-flex-align:center;
+  align-items:center;
+  background:var(--active-secondary);
+  border-radius:0 4px 4px 0;
+  color:var(--active-secondary-text);
+  -webkit-box-pack:right;
+  -ms-flex-pack:right;
+  justify-content:right;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-flex:2;
+  -ms-flex:2;
+  flex:2;
+  font-size:17px;
+  font-weight:700;
+  overflow:hidden;
+  padding-right:10px;
+  white-space:nowrap;
+  width:100px
+}
+
+.platform-card .total span {
+  margin-left:6px
+}
+
+@media screen and (max-width:1024px) {
+  .platform-card .title {
+    display:none
+  }
+
+  .platform-card .abbr {
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display:flex;
+    -webkit-box-flex:1;
+    -ms-flex:1;
+    flex:1;
+    min-width:80px
+  }
+
+  .platform-card .bars a:last-of-type {
+    width:50px
+  }
+
+  .platform-card .bars a:last-of-type span {
+    display:none
+  }
+
+
+}
+
+.backlog-breakdown {
+  display:block;
+  text-align:center;
+  -ms-flex-wrap:wrap;
+  flex-wrap:wrap
+}
+
+.backlog-breakdown .backlog-charts {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+  -ms-flex-direction:column;
+  flex-direction:column;
+  width:100%
+}
+
+.backlog-breakdown .mem-sum {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-flex:1;
+  -ms-flex:1;
+  flex:1
+}
+
+.backlog-breakdown .mem-sum .donut {
+  display:inline-block;
+  margin:0 4vw;
+  min-width:44%
+}
+
+.status-tally {
+  -webkit-box-flex:4;
+  -ms-flex:4;
+  flex:4;
+  font-size:18px;
+  margin:15px 0 25px 25px
+}
+
+.status-tally a:first-of-type div {
+  padding-top:8px!important
+}
+
+.status-tally a {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -webkit-box-align:center;
+  -ms-flex-align:center;
+  align-items:center;
+  margin:-5px 20px -5px 0;
+}
+
+.status-tally a div {
+  padding:1px 3px;
+  vertical-align:middle
+}
+
+.status-tally a div img {
+  max-width:32px
+}
+
+.status-tally a div:first-child {
+  text-align:right;
+  width:60px
+}
+
+.status-tally a div:nth-child(2) {
+  border-right:2px solid rgba(0,0,0,.5);
+  padding:4px 5px 4px 0;
+  width:40px
+}
+
+.status-tally a div:last-child {
+  -webkit-box-shadow:inset 7px 0 7px -5px rgba(0,0,0,.25);
+  box-shadow:inset 7px 0 7px -5px rgba(0,0,0,.25);
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  padding:4px 0;
+  width:99%
+}
+
+.status-tally a div:last-child div {
+  -webkit-animation:width_in 1s ease-in-out;
+  animation:width_in 1s ease-in-out;
+  border:2px solid rgba(0,0,0,.5);
+  border-left:none;
+  border-radius:0 4px 4px 0;
+  display:block;
+  font-size:14px;
+  font-weight:700;
+  overflow:hidden;
+  padding:7px 0 7px 7px;
+  text-align:left;
+  -webkit-transition:width .5s ease-in-out;
+  transition:width .5s ease-in-out;
+  white-space:nowrap
+}
+
+.status-tally img {
+  max-width:none;
+  position:relative;
+  top:2px
+}
+
+.status-tally .backlog-tally {
+  border:2px solid rgba(0,0,0,.5);
+  border-radius:4px;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  margin-bottom:5px
+}
+
+.status-tally .backlog-tally div {
+  -webkit-box-align:center;
+  -ms-flex-align:center;
+  align-items:center;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  font-size:1rem;
+  font-weight:700;
+  height:2.35rem;
+  text-align:center;
+  -webkit-transition:width .5s ease-in-out;
+  transition:width .5s ease-in-out
+}
+
+.status-tally .backlog-tally div:first-of-type {
+  border-radius:4px 0 0 4px;
+  border-right:2px solid rgba(0,0,0,.5);
+  background-color:var(--active-accent);
+  color:var(--active-accent-text)
+}
+
+.status-tally .backlog-tally div:last-of-type {
+  border-radius:0 4px 4px 0;
+  background-color:var(--active-secondary);
+  color:var(--active-secondary-text)
+}
+
+.status-tally .backlog-tally div span {
+  width:100%
+}
+
+@media screen and (min-width:1024px) {
+  .backlog-breakdown,.backlog-breakdown .backlog-charts {
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display:flex
+  }
+
+  .backlog-breakdown .backlog-charts {
+    -webkit-box-orient:horizontal;
+    -webkit-box-direction:normal;
+    -ms-flex-direction:row;
+    flex-direction:row;
+    width:100%
+  }
+
+  .backlog-breakdown .mem-sum {
+    -webkit-box-orient:vertical;
+    -webkit-box-direction:normal;
+    -ms-flex-direction:column;
+    flex-direction:column;
+    min-width:160px;
+    max-width:160px
+  }
+
+  .backlog-breakdown .mem-sum .donut {
+    margin:0
+  }
+
+  .backlog-breakdown .mem-sum .donut:last-of-type {
+    position:relative;
+    top:-10px
+  }
+
+}
+
+.library .unibar {
+  border:2px solid rgba(0,0,0,.5);border-radius:8px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}
+
+.library .unibar div {
+  border-left:2px solid rgba(0,0,0,.5);-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:1.25rem;font-weight:700;line-height:1.25rem;padding:.5rem;text-align:center}
+
+.library .unibar div:first-of-type {
+  background-color:var(--active-secondary);border:none;border-radius:6px 0 0 6px;color:var(--active-secondary-text);max-width:30%;padding:.5rem 1rem;white-space:nowrap}
+
+.library .unibar div:first-of-type span {
+  margin-right:1rem}
+
+.library .unibar div:last-of-type {
+  border-radius:0 6px 6px 0}
+
+.library .unibar div.unplayed {
+  background-color:var(--unplayed-color)}
+
+.library .unibar div.unfinished {
+  background-color:var(--unfinished-color)}
+
+.library .unibar div.beaten {
+  background-color:var(--beaten-color)}
+
+.library .unibar div.completed {
+  background-color:var(--completed-color)}
+
+.library .unibar div.endless {
+  background-color:var(--endless-color)}
+
+.library .library-list {
+  margin-top:20px}
+
+@media screen and (max-width:600px) {
+  .library .unibar div {
+    font-size:3vw}
+
+  .library .unibar div:first-of-type span {
+    margin-right:.5rem}
+}
+
+.game-item .game-info {
+  -webkit-box-align:start;
+  -ms-flex-align:start;
+  align-items:flex-start;
+  background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.05)),to(rgba(0,0,0,.05)));
+  background-image:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05));
+  border-radius:0 0 5px 5px;
+  -webkit-box-shadow:inset 0 3px 10px rgba(0,0,0,.5);
+  box-shadow:inset 0 3px 10px rgba(0,0,0,.5);
+  margin:-10px 8px 15px 30px;
+  padding:10px;
+  position:relative
+}
+
+.game-item .game-info label {
+  font-size:12px;
+  font-weight:700;
+  letter-spacing:.5px;
+  margin-left:4px;
+  opacity:.9;
+  text-transform:uppercase
+}
+
+.game-item .game-info .markdown,.game-item .game-info p {
+  font-size:16px;
+  margin:0 0 12px .3rem;
+  padding:0
+}
+
+.game-item .game-info .data,.game-item .game-info .history,.game-item .game-info .review {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  margin:auto 15px;
+}
+
+.game-item .game-info .history {
+  -ms-flex-wrap:wrap;
+  flex-wrap:wrap;
+  width:100%
+}
+
+.game-item .game-info .history .list {
+  font-size:14px
+}
+
+.game-item .game-info .history .list>div {
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex
+}
+
+.game-item .game-info .history .list>div>div:first-of-type {
+  -webkit-box-flex:1;
+  -ms-flex:1;
+  flex:1;
+  margin-right:5px;
+  opacity:.65;
+  text-align:right
+}
+
+.game-item .game-info .history .list>div>div:last-of-type {
+  -webkit-box-flex:2;
+  -ms-flex:2;
+  flex:2
+}
+
+.game-item .game-info .box_2 {
+  margin-right:15px
+}
+
+.game-item .game-guest label {
+  opacity:.5
+}
+
+@media screen and (max-width:700px) {
+  .game-item .game-info {
+    margin-left:8px
+  }
+
+  .game-item .game-info .box_2 {
+    margin-right:0
+  }
+
+  .game-item .game-info .data,.game-item .game-info .history,.game-item .game-info .review {
+    display:block
+  }
+  
+  .game-item .game-info .data .box_1 div {
+    display:inline-block;
+    margin-right:1%;
+    width:48%
+  }
+  
+  
+}
+
+.history .box_1 {
+  width: 95%;
+}
+
+div.profile aside {
+  grid-area:side;
+  margin-top:1.5rem;
+  position: sticky;
+}
+
+/* NEW */
+
+.library .filters {
+margin:.25rem 0 1.5rem;
+width:100%}
+
+.library .filters>div {
+padding:1rem;
+width:95%}
+
+/* .library .filters .empty-filters {
+   border:2px solid rgba(0,0,0,.5);
+   background-color:var(--active-secondary);
+   color:var(--active-secondary-text);
+   border-radius:.5rem;
+   margin:.5rem auto;
+   opacity:.8;
+   padding:.4rem;
+   text-align:center}
+
+   .library .filters .empty-filters:hover {
+   opacity:1} */
+
+.library .filters .item {
+border:2px solid rgba(0,0,0,.5);
+background-color:var(--active-secondary);
+color:var(--active-secondary-text);
+border-radius:.5rem;
+margin:.25rem;
+max-width:8rem;
+opacity:.8;
+padding:.4rem 1rem .5rem}
+
+.library .filters .item:hover {
+opacity:1}