Now with search and a not horribl layout

emus/settings.py

@@ -41,6 +41,7 @@ INSTALLED_APPS = [
     "django_extensions",
     "emus",
     "games",
+    "search",
     "rest_framework",
 ]
 
@@ -69,6 +70,7 @@ TEMPLATES = [
                 "django.template.context_processors.request",
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
+                "games.context_processors.game_systems",
             ],
         },
     },

emus/static/css/style.css

@@ -0,0 +1,980 @@
+/* css Zen Garden submission 221 - 'Mid Century Modern', by Andrew Lohman, http://www.andrewlohman.com/  */
+/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */
+
+/* TYPEKIT_KIT_ID: vzq4ipz */
+
+/* 
+==========================================================================
+Reset
+==========================================================================
+*/
+
+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
+article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;}
+audio,canvas,video {display: inline-block;}
+audio:not([controls]) {display: none;height: 0;}
+[hidden] {display: none;}
+html {font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
+body {margin: 0;}
+a:focus {outline: thin dotted;}
+a:active,a:hover {outline: 0;}
+h1 {font-size: 2em;margin: 0.67em 0;}
+abbr[title] {border-bottom: 1px dotted;}
+b,strong {font-weight: bold;}
+dfn {font-style: italic;}
+hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}
+mark {background: #ff0;color: #000;}
+code,kbd,pre,samp {font-family: monospace, serif;font-size: 1em;}
+pre {white-space: pre-wrap;}
+q {quotes: "\201C" "\201D" "\2018" "\2019";}
+small {font-size: 80%;}
+sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
+sup {top: -0.5em;}
+sub {bottom: -0.25em;}
+img {border: 0;}
+svg:not(:root) {overflow: hidden;}
+figure {margin: 0;}
+fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}
+legend {border: 0;padding: 0;}
+button,input,select,textarea {font-family: inherit;font-size: 100%;margin: 0;}
+button,input {line-height: normal;}
+button,select {text-transform: none;}
+button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;}
+button[disabled],html input[disabled] {cursor: default;}
+input[type="checkbox"],input[type="radio"] {box-sizing: border-box;padding: 0;}
+input[type="search"] {-webkit-appearance: textfield;-moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
+button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
+textarea {overflow: auto;vertical-align: top;}
+table {border-collapse: collapse;border-spacing: 0;}
+
+/* 
+==========================================================================
+Some globals
+==========================================================================
+*/
+abbr[title],
+acronym[title] {
+  border-bottom-width: 0;
+}
+html,
+body {
+  font-family: "ff-meta-web-pro", sans-serif;
+  text-rendering: optimizeLegibility;
+  font-size: 100%;
+  line-height: 26px;
+  background: #f6efe5;
+  background-size: 60%;
+  color: #0d2c40;
+}
+a {
+  color: #0d2c40;
+  text-decoration: none;
+  border-bottom: 1px solid #0d2c40;
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  -ms-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+a:hover {
+  color: rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+}
+/* 
+==========================================================================
+Page wrapper
+==========================================================================
+*/
+.page-wrapper {
+  position: relative;
+  width: 100%;
+  max-width: 120em;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+/* 
+==========================================================================
+Intro
+==========================================================================
+*/
+.intro {
+  overflow: hidden;
+}
+.intro header {
+  position: relative;
+  background: #c879b2;
+  overflow: hidden;
+  width: 40%;
+  height: 50em;
+  float: left;
+  -webkit-transition: all 0.4s ease;
+  -moz-transition: all 0.4s ease;
+  -o-transition: all 0.4s ease;
+  -ms-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+}
+  @media (max-width: 70em) {
+    .intro header {
+      background: #f15a30;
+      width: 100%;
+      height: 27em;
+    }
+  }
+  @media (max-width: 53em) {
+    .intro header {
+      height: 20em;
+    }
+  }
+.intro header h1 {
+  position: absolute;
+  color: #ffffff;
+  font-size: 100%;
+  line-height: 2em;
+  top: 4.2em;
+  left: -3em;
+  width: auto;
+  margin: 0;
+  padding: 1em;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.intro header h2 {
+  position: relative;
+  background: #0d2c40 url(icon-star.svg) no-repeat left bottom;
+  background-size: 101%;
+  float: right;
+  color: #ffffff;
+  font-size: 250%;
+  line-height: 1.25em;
+  width: 50%;
+  height: 20.019em;
+  margin: 0 0 0 0;
+  padding: 6em 0.5em 0 0.5em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .intro header h2 {
+      background: #0d2c40 url(icon-star.svg) no-repeat left bottom;
+      background-size: 49%;
+      width: 66.666%;
+      height: 11em;
+      padding: 1em 0.5em 0 0.5em;
+    }
+  }
+  @media (max-width: 53em) {
+    .intro header h2 {
+      background: #0d2c40 url(icon-star.svg) no-repeat left bottom;
+      background-size: 49%;
+      font-size: 200%;
+      width: 66.666%;
+      height: 10em;
+      padding: 1em 0.5em 0 0.5em;
+    }
+  }
+.intro .summary {
+  font-size: 100%;
+  color: #ffffff;
+  width: 60%;
+  float: left;
+  background: #c879b2 url(icons-3-pack.svg);
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: 101%;
+  height: 50em;
+  margin: 0;
+  padding: 16.3em 2em 10em 2em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .intro .summary {
+      width: 100%;
+      height: auto;
+      padding: 2em 1em 37% 1em;
+    }
+  }
+.intro .summary p {
+  padding: 0 40% 2em 0 ;
+  margin: 0;
+}
+  @media (max-width: 70em) {
+    .intro .summary p {
+      padding: 0 0 1em 35%;
+    }
+  }
+  @media (max-width: 53em) {
+    .intro .summary p {
+      padding: 0 0 1em 0;
+    }
+  }
+.intro .summary a {
+  color: #ffffff;
+  text-decoration: none;
+  border-bottom: 1px solid #ffffff;
+}
+.intro .summary a:hover {
+  color: rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+}
+.intro .preamble {
+  position: relative;
+  float: left;
+  width: 60.1%;
+  margin: 0 0 0 20%;
+  padding: 8em 0.5em 32em 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .intro .preamble {
+      width: 100%;
+      margin: 0 0 0 0;
+      padding: 2em 1em 28em 1em;
+    }
+  }
+  @media (max-width: 53em) {
+    .intro .preamble {
+      overflow: hidden;
+      width: 100%;
+      margin: 0;
+      padding: 0 1em;
+    }
+  }
+.intro .preamble h3 {
+  font-size: 150%;
+  margin-right: 35%;
+}
+  @media (max-width: 53em) {
+    .intro .preamble h3 {
+      margin-right: 0;
+    }
+  }
+.intro .preamble p {
+  margin-right: 35%;
+}
+  @media (max-width: 53em) {
+    .intro .preamble p {
+      margin-right: 0;
+    }
+  }
+.intro .preamble p:last-child {
+  position: absolute;
+  z-index: 2;
+  color: #ffffff;
+  background: rgba(0, 188, 217, 0.8);
+  width: 33.650%;
+  top: -1em;
+  right: 0;
+  margin-right: 0;
+  padding: 10em 1em 20em 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .intro .preamble p:last-child {
+      background: rgba(239, 54, 5, 0.8);
+      width: 33.250%;
+      padding: 6em 1em 10em 1em;
+    }
+  }
+  @media (max-width: 53em) {
+    .intro .preamble p:last-child {
+      color: #0d2c40;
+      background: transparent;
+      position: relative;
+      top: 0;
+      width: 100%;
+      padding: 0;
+    }
+  }
+/* 
+==========================================================================
+Main
+==========================================================================
+*/
+.main {
+  background: url(mid-century-1.jpg) no-repeat center center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  z-index: 1;
+  top: -25em;
+  margin-bottom: 1em;
+  padding: 20em 0;
+  position: relative;
+}
+  @media (max-width: 70em) {
+    .main {
+      top: -25em;
+    }
+  }
+  @media (max-width: 53em) {
+    .main {
+      background: #f6efe5;
+      top: 0;
+      padding: 0;
+    }
+  }
+.main footer {
+  display: block;
+  position: absolute;
+  left: 1em;
+  bottom: 1em;
+  width: 20%;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 53em) {
+    .main footer {
+      display: inline;
+      position: relative;
+      top: 1em;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      padding: 0 0 0 0.5em;
+    }
+  }
+.main footer a {
+  margin: 0 0.25em;
+  display: block;
+  border-bottom: 0px solid transparent;
+}
+  @media (max-width: 53em) {
+    .main footer a {
+      display: inline;
+    }
+  }
+.main .explanation {
+  background: #0d2c40 url(icon-half.svg);
+  background-repeat: no-repeat;
+  background-position: right center;
+  background-size: 40%;
+  position: relative;
+  color: #ffffff;
+  width: 40%;
+  margin: 0;
+  padding: 2em 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .main .explanation {
+      width: 66.666%;
+      margin: 0;
+    }
+  }
+  @media (max-width: 53em) {
+    .main .explanation {
+      background: #0d2c40;
+      width: 100%;
+      margin: 0;
+      padding: 1em;
+    }
+  }
+.main .explanation h3 {
+  position: absolute;
+  color: #ffffff;
+  font-size: 150%;
+  line-height: 2em;
+  top: 6em;
+  left: -4.5em;
+  margin: 0;
+  padding: 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+  @media (max-width: 53em) {
+    .main .explanation h3 {
+      position: relative;
+      font-size: 150%;
+      top: 0;
+      left: 0;
+      padding: 0;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+    }
+  }
+.main .explanation p {
+  width: 60%;
+  padding-left: 15%;
+}
+  @media (max-width: 70em) {
+    .main .explanation p {
+      width: 66%;
+      padding-left: 15%;
+    }
+  }
+  @media (max-width: 53em) {
+    .main .explanation p {
+      width: 100%;
+      padding-left: 0;
+    }
+  }
+.main .participation {
+  background: #f6efe5;
+  position: absolute;
+  right: 40%;
+  z-index: 2;
+  margin-top: 14em;
+  width: 40%;
+  padding: 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .main .participation {
+      margin-top: 20em;
+      width: 66.866%;
+      right: 33.200%;
+    }
+  }
+  @media (max-width: 53em) {
+    .main .participation {
+      position: relative;
+      margin-top: 0;
+      width: 100%;
+      right: 0;
+    }
+  }
+.main .participation h3 {
+  font-size: 150%;
+}
+.main .benefits {
+  background: rgba(0, 188, 217, 0.8) url(icon-circles.svg) no-repeat left top;
+  background-size: 100%;
+  position: absolute;
+  right: 20%;
+  z-index: 2;
+  margin-top: 3em;
+  margin-left: 0;
+  width: 20%;
+  padding: 22em 1em 25em 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .main .benefits {
+      right: 0;
+      width: 33.250%;
+      margin-top: 12em;
+      padding: 21em 1em 24em 1em;
+    }
+  }
+  @media (max-width: 53em) {
+    .main .benefits {
+      background: rgba(0, 188, 217, 0.8) url(icon-circles.svg) no-repeat center top;
+      background-size: 33%;
+      position: relative;
+      right: 0;
+      width: 100%;
+      margin-top: 0;
+      padding: 11em 1em 1em 1em;
+    }
+  }
+  @media (max-width: 33em) {
+    .main .benefits {
+      background: rgba(0, 188, 217, 0.8) url(icon-circles.svg) no-repeat center top;
+      background-size: 33%;
+      position: relative;
+      right: 0;
+      width: 100%;
+      margin-top: 0;
+      padding: 7em 1em 1em 1em;
+    }
+  }
+.main .benefits h3 {
+  font-size: 150%;
+}
+.main .requirements {
+  position: absolute;
+  -moz-column-count: 2;
+  -moz-column-gap: 2em;
+  -webkit-column-count: 2;
+  -webkit-column-gap: 2em;
+  right: 0;
+  z-index: 2;
+  margin: 60em 0 0 0;
+  width: 60%;
+  padding: 1em 0 0 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .main .requirements {
+      position: absolute;
+      margin: 65em 0 0 0;
+      width: 75%;
+      -moz-column-count: 1;
+      -moz-column-gap: 1em;
+      -webkit-column-count: 1;
+      -webkit-column-gap: 1em;
+    }
+  }
+  @media (max-width: 53em) {
+    .main .requirements {
+      position: relative;
+      width: 100%;
+      margin: 0;
+      padding: 1em;
+    }
+  }
+.main .requirements h3 {
+  position: absolute;
+  z-index: 3;
+  font-size: 300%;
+  line-height: 2em;
+  top: 0em;
+  left: -6em;
+  margin: 0;
+  padding: 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+  @media (max-width: 53em) {
+    .main .requirements h3 {
+      position: relative;
+      font-size: 150%;
+      left: 0em;
+      padding: 0;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+    }
+  }
+.main .requirements p {
+  margin: 0 1em 1em 1em;
+}
+  @media (max-width: 53em) {
+    .main .requirements p {
+      margin: 0 0 1em 0;
+    }
+  }
+.main .requirements::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -60%;
+  background: url(mid-century-2.jpg) no-repeat left center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  z-index: 2;
+  width: 60%;
+  height: 40em;
+  margin-top: 0;
+  padding: 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .main .requirements::before {
+      left: -66.666%;
+      width: 66.6666%;
+      height: 45em;
+    }
+  }
+/* 
+==========================================================================
+Sidebar
+==========================================================================
+*/
+.sidebar {
+  margin-top: 55em;
+  padding-top: 20em;
+  background: #c879b2;
+  overflow: hidden;
+}
+  @media (max-width: 70em) {
+    .sidebar {
+      margin-top: 65em;
+    }
+  }
+  @media (max-width: 53em) {
+    .sidebar {
+      margin-top: 2em;
+      padding-top: 2em;
+    }
+  }
+.sidebar .design-selection h3 {
+  color: #ffffff;
+  font-size: 150%;
+  line-height: 1em;
+  width: 20%;
+  float: left;
+  padding: 5em 1em;
+  text-align: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .sidebar .design-selection h3 {
+      width: 100%;
+      padding: 0 1em;
+      text-align: right;
+    }
+  }
+  @media (max-width: 53em) {
+    .sidebar .design-selection h3 {
+      text-align: left;
+    }
+  }
+.sidebar .design-selection nav {
+  width: 80%;
+  margin-left: 20%;
+  padding: 1em 0 2em 0;
+}
+  @media (max-width: 70em) {
+    .sidebar .design-selection nav {
+      width: 100%;
+      margin-left: 0;
+    }
+  }
+.sidebar .design-selection nav ul {
+  padding: 0;
+}
+.sidebar .design-selection nav ul li {
+  display: inline-block;
+  list-style: none;
+  color: #ffffff;
+  width: 25%;
+  float: left;
+  padding: 10em 1em 2em 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: left;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li {
+      width: 100%;
+      padding: 5em 1em 2em 1em;
+    }
+  }
+.sidebar .design-selection nav ul li a {
+  color: #ffffff;
+  text-decoration: none;
+  display: block;
+  border-bottom: 0 solid transparent;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li a {
+      display: inline;
+    }
+  }
+.sidebar .design-selection nav ul li a:hover {
+  color: rgba(0, 0, 0, 0.4);
+  border-bottom: 0 solid transparent;
+}
+.sidebar .design-selection nav ul li:nth-child(1) {
+  background: #0d2c40;
+  margin-top: -29em;
+  padding: 39em 1em 2em 1em;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(1) {
+      margin-top: 0;
+      padding: 5em 1em 2em 1em;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(2) {
+  background: #f15a30;
+}
+.sidebar .design-selection nav ul li:nth-child(3) {
+  background: #31c5da;
+}
+.sidebar .design-selection nav ul li:nth-child(4) {
+  background: #f15a30;
+}
+.sidebar .design-selection nav ul li:nth-child(5) {
+  background: #0d2c40;
+}
+.sidebar .design-selection nav ul li:nth-child(6) {
+  background: #f15a30;
+}
+.sidebar .design-selection nav ul li:nth-child(7) {
+  background: #31c5da;
+}
+.sidebar .design-selection nav ul li:nth-child(8) {
+  background: #f15a30;
+}
+.sidebar .design-selection nav ul li:nth-child(1)::before {
+  content: "1";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(1)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(2)::before {
+  content: "2";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(2)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(3)::before {
+  content: "3";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(3)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(4)::before {
+  content: "4";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(4)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(5)::before {
+  content: "5";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(5)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(6)::before {
+  content: "6";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(6)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(7)::before {
+  content: "7";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(7)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(8)::before {
+  content: "8";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(8)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-archives {
+  background: #31c5da;
+  position: relative;
+  width: 20%;
+  margin: 0 20% 0 60%;
+  padding: 10em 1em 3em 1em;
+  float: right;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .sidebar .design-archives {
+      width: 25%;
+      margin: 0 25% 0 50%;
+    }
+  }
+  @media (max-width: 53em) {
+    .sidebar .design-archives {
+      background: #31c5da;
+      width: 100%;
+      margin: 0;
+      padding: 4em 1em 1em 1em;
+    }
+  }
+.sidebar .design-archives h3 {
+  position: absolute;
+  color: #ffffff;
+  z-index: 3;
+  font-size: 150%;
+  line-height: 2em;
+  top: 8.5em;
+  left: -4em;
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+  @media (max-width: 53em) {
+    .sidebar .design-archives h3 {
+      top: 0;
+      left: 0;
+      position: relative;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+    }
+  }
+.sidebar .design-archives nav {
+  overflow: hidden;
+  width: 100%;
+}
+.sidebar .design-archives ul {
+  padding: 0;
+  overflow: hidden;
+}
+.sidebar .design-archives ul li {
+  display: inline-block;
+  list-style: none;
+  width: 100%;
+  float: left;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: left;
+}
+.sidebar .zen-resources {
+  background: #31c5da url(icon-circles.svg) no-repeat left bottom;
+  background-size: 100%;
+  position: relative;
+  z-index: 2;
+  width: 20%;
+  margin: 0 20% 0 60%;
+  padding: 8em 1em 22em 1em;
+  float: right;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .sidebar .zen-resources {
+      width: 25%;
+      margin: 0 25% 0 50%;
+    }
+  }
+  @media (max-width: 53em) {
+    .sidebar .zen-resources {
+      background: #31c5da url(icon-circles.svg) no-repeat center bottom;
+      background-size: 35%;
+      width: 100%;
+      margin: 0;
+      padding: 2em 1em 10em 1em;
+    }
+  }
+.sidebar .zen-resources h3 {
+  position: absolute;
+  color: #ffffff;
+  z-index: 3;
+  font-size: 150%;
+  line-height: 2em;
+  top: 8em;
+  left: -4.5em;
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+  @media (max-width: 53em) {
+    .sidebar .zen-resources h3 {
+      top: 0;
+      left: 0;
+      position: relative;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+    }
+  }
+.sidebar .zen-resources ul {
+  padding: 0;
+  overflow: hidden;
+}
+.sidebar .zen-resources ul li {
+  display: inline-block;
+  list-style: none;
+  width: 100%;
+  float: left;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: left;
+}

emus/urls.py

@@ -3,6 +3,7 @@ from django.conf.urls.static import static
 from django.contrib import admin
 from django.urls import include, path
 from games import urls as games_urls
+from search import urls as search_urls
 from games.api.views import (
     DeveloperViewSet,
     GameSystemViewSet,
@@ -22,6 +23,7 @@ urlpatterns = [
     path("api-auth/", include("rest_framework.urls")),
     path("api/v1/", include(router.urls)),
     path("games/", include(games_urls, namespace="games")),
+    path("search/", include(search_urls, namespace="search")),
 ]
 
 if settings.DEBUG:

games/context_processors.py

@@ -0,0 +1,7 @@
+from games.models import GameSystem
+
+
+def game_systems(request):
+    return {
+        "game_systems": GameSystem.objects.all(),
+    }

poetry.lock

@@ -126,12 +126,16 @@ testing = ["coverage", "pyyaml"]
 
 [[package]]
 name = "pillow"
-version = "9.0.1"
+version = "9.1.0"
 description = "Python Imaging Library (Fork)"
 category = "main"
 optional = false
 python-versions = ">=3.7"
 
+[package.extras]
+docs = ["olefile", "sphinx (>=2.4)", "sphinx-copybutton", "sphinx-issues (>=3.0.1)", "sphinx-removed-in", "sphinx-rtd-theme (>=1.0)", "sphinxext-opengraph"]
+tests = ["check-manifest", "coverage", "defusedxml", "markdown2", "olefile", "packaging", "pyroma", "pytest", "pytest-cov", "pytest-timeout"]
+
 [[package]]
 name = "python-dateutil"
 version = "2.8.2"
@@ -209,7 +213,7 @@ testing = ["pytest (>=6)", "pytest-checkdocs (>=2.4)", "pytest-flake8", "pytest-
 [metadata]
 lock-version = "1.1"
 python-versions = "^3.8"
-content-hash = "5cdcfb1d6774b0b207ca775bed942241f0a1c041c8a4ff2d223a2fbb12e3efeb"
+content-hash = "1756c131d9f17b45a8489e3bd6fc98101e4eaebd6a95691f5abd48888451ef79"
 
 [metadata.files]
 asgiref = [
@@ -246,10 +250,6 @@ django = [
     {file = "Django-4.0.3-py3-none-any.whl", hash = "sha256:1239218849e922033a35d2a2f777cb8bee18bd725416744074f455f34ff50d0c"},
     {file = "Django-4.0.3.tar.gz", hash = "sha256:77ff2e7050e3324c9b67e29b6707754566f58514112a9ac73310f60cd5261930"},
 ]
-django-cors-headers = [
-    {file = "django-cors-headers-3.11.0.tar.gz", hash = "sha256:eb98389bf7a2afc5d374806af4a9149697e3a6955b5a2dc2bf049f7d33647456"},
-    {file = "django_cors_headers-3.11.0-py3-none-any.whl", hash = "sha256:a22be2befd4069c4fc174f11cf067351df5c061a3a5f94a01650b4e928b0372b"},
-]
 django-extensions = [
     {file = "django-extensions-3.1.5.tar.gz", hash = "sha256:28e1e1bf49f0e00307ba574d645b0af3564c981a6dfc87209d48cb98f77d0b1a"},
     {file = "django_extensions-3.1.5-py3-none-any.whl", hash = "sha256:9238b9e016bb0009d621e05cf56ea8ce5cce9b32e91ad2026996a7377ca28069"},
@@ -271,41 +271,40 @@ markdown = [
     {file = "Markdown-3.3.6.tar.gz", hash = "sha256:76df8ae32294ec39dcf89340382882dfa12975f87f45c3ed1ecdb1e8cefc7006"},
 ]
 pillow = [
-    {file = "Pillow-9.0.1-1-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:a5d24e1d674dd9d72c66ad3ea9131322819ff86250b30dc5821cbafcfa0b96b4"},
-    {file = "Pillow-9.0.1-1-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:2632d0f846b7c7600edf53c48f8f9f1e13e62f66a6dbc15191029d950bfed976"},
-    {file = "Pillow-9.0.1-1-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:b9618823bd237c0d2575283f2939655f54d51b4527ec3972907a927acbcc5bfc"},
-    {file = "Pillow-9.0.1-cp310-cp310-macosx_10_10_universal2.whl", hash = "sha256:9bfdb82cdfeccec50aad441afc332faf8606dfa5e8efd18a6692b5d6e79f00fd"},
-    {file = "Pillow-9.0.1-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:5100b45a4638e3c00e4d2320d3193bdabb2d75e79793af7c3eb139e4f569f16f"},
-    {file = "Pillow-9.0.1-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:528a2a692c65dd5cafc130de286030af251d2ee0483a5bf50c9348aefe834e8a"},
-    {file = "Pillow-9.0.1-cp310-cp310-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:0f29d831e2151e0b7b39981756d201f7108d3d215896212ffe2e992d06bfe049"},
-    {file = "Pillow-9.0.1-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:855c583f268edde09474b081e3ddcd5cf3b20c12f26e0d434e1386cc5d318e7a"},
-    {file = "Pillow-9.0.1-cp310-cp310-win32.whl", hash = "sha256:d9d7942b624b04b895cb95af03a23407f17646815495ce4547f0e60e0b06f58e"},
-    {file = "Pillow-9.0.1-cp310-cp310-win_amd64.whl", hash = "sha256:81c4b81611e3a3cb30e59b0cf05b888c675f97e3adb2c8672c3154047980726b"},
-    {file = "Pillow-9.0.1-cp37-cp37m-macosx_10_10_x86_64.whl", hash = "sha256:413ce0bbf9fc6278b2d63309dfeefe452835e1c78398efb431bab0672fe9274e"},
-    {file = "Pillow-9.0.1-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:80fe64a6deb6fcfdf7b8386f2cf216d329be6f2781f7d90304351811fb591360"},
-    {file = "Pillow-9.0.1-cp37-cp37m-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:cef9c85ccbe9bee00909758936ea841ef12035296c748aaceee535969e27d31b"},
-    {file = "Pillow-9.0.1-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1d19397351f73a88904ad1aee421e800fe4bbcd1aeee6435fb62d0a05ccd1030"},
-    {file = "Pillow-9.0.1-cp37-cp37m-win32.whl", hash = "sha256:d21237d0cd37acded35154e29aec853e945950321dd2ffd1a7d86fe686814669"},
-    {file = "Pillow-9.0.1-cp37-cp37m-win_amd64.whl", hash = "sha256:ede5af4a2702444a832a800b8eb7f0a7a1c0eed55b644642e049c98d589e5092"},
-    {file = "Pillow-9.0.1-cp38-cp38-macosx_10_10_x86_64.whl", hash = "sha256:b5b3f092fe345c03bca1e0b687dfbb39364b21ebb8ba90e3fa707374b7915204"},
-    {file = "Pillow-9.0.1-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:335ace1a22325395c4ea88e00ba3dc89ca029bd66bd5a3c382d53e44f0ccd77e"},
-    {file = "Pillow-9.0.1-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:db6d9fac65bd08cea7f3540b899977c6dee9edad959fa4eaf305940d9cbd861c"},
-    {file = "Pillow-9.0.1-cp38-cp38-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:f154d173286a5d1863637a7dcd8c3437bb557520b01bddb0be0258dcb72696b5"},
-    {file = "Pillow-9.0.1-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:14d4b1341ac07ae07eb2cc682f459bec932a380c3b122f5540432d8977e64eae"},
-    {file = "Pillow-9.0.1-cp38-cp38-win32.whl", hash = "sha256:effb7749713d5317478bb3acb3f81d9d7c7f86726d41c1facca068a04cf5bb4c"},
-    {file = "Pillow-9.0.1-cp38-cp38-win_amd64.whl", hash = "sha256:7f7609a718b177bf171ac93cea9fd2ddc0e03e84d8fa4e887bdfc39671d46b00"},
-    {file = "Pillow-9.0.1-cp39-cp39-macosx_10_10_x86_64.whl", hash = "sha256:80ca33961ced9c63358056bd08403ff866512038883e74f3a4bf88ad3eb66838"},
-    {file = "Pillow-9.0.1-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:1c3c33ac69cf059bbb9d1a71eeaba76781b450bc307e2291f8a4764d779a6b28"},
-    {file = "Pillow-9.0.1-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:12875d118f21cf35604176872447cdb57b07126750a33748bac15e77f90f1f9c"},
-    {file = "Pillow-9.0.1-cp39-cp39-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:514ceac913076feefbeaf89771fd6febde78b0c4c1b23aaeab082c41c694e81b"},
-    {file = "Pillow-9.0.1-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:d3c5c79ab7dfce6d88f1ba639b77e77a17ea33a01b07b99840d6ed08031cb2a7"},
-    {file = "Pillow-9.0.1-cp39-cp39-win32.whl", hash = "sha256:718856856ba31f14f13ba885ff13874be7fefc53984d2832458f12c38205f7f7"},
-    {file = "Pillow-9.0.1-cp39-cp39-win_amd64.whl", hash = "sha256:f25ed6e28ddf50de7e7ea99d7a976d6a9c415f03adcaac9c41ff6ff41b6d86ac"},
-    {file = "Pillow-9.0.1-pp37-pypy37_pp73-macosx_10_10_x86_64.whl", hash = "sha256:011233e0c42a4a7836498e98c1acf5e744c96a67dd5032a6f666cc1fb97eab97"},
-    {file = "Pillow-9.0.1-pp37-pypy37_pp73-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:253e8a302a96df6927310a9d44e6103055e8fb96a6822f8b7f514bb7ef77de56"},
-    {file = "Pillow-9.0.1-pp37-pypy37_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6295f6763749b89c994fcb6d8a7f7ce03c3992e695f89f00b741b4580b199b7e"},
-    {file = "Pillow-9.0.1-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:a9f44cd7e162ac6191491d7249cceb02b8116b0f7e847ee33f739d7cb1ea1f70"},
-    {file = "Pillow-9.0.1.tar.gz", hash = "sha256:6c8bc8238a7dfdaf7a75f5ec5a663f4173f8c367e5a39f87e720495e1eed75fa"},
+    {file = "Pillow-9.1.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:af79d3fde1fc2e33561166d62e3b63f0cc3e47b5a3a2e5fea40d4917754734ea"},
+    {file = "Pillow-9.1.0-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:55dd1cf09a1fd7c7b78425967aacae9b0d70125f7d3ab973fadc7b5abc3de652"},
+    {file = "Pillow-9.1.0-cp310-cp310-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:a5eaf3b42df2bcda61c53a742ee2c6e63f777d0e085bbc6b2ab7ed57deb13db7"},
+    {file = "Pillow-9.1.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:01ce45deec9df310cbbee11104bae1a2a43308dd9c317f99235b6d3080ddd66e"},
+    {file = "Pillow-9.1.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:aea7ce61328e15943d7b9eaca87e81f7c62ff90f669116f857262e9da4057ba3"},
+    {file = "Pillow-9.1.0-cp310-cp310-win32.whl", hash = "sha256:7a053bd4d65a3294b153bdd7724dce864a1d548416a5ef61f6d03bf149205160"},
+    {file = "Pillow-9.1.0-cp310-cp310-win_amd64.whl", hash = "sha256:97bda660702a856c2c9e12ec26fc6d187631ddfd896ff685814ab21ef0597033"},
+    {file = "Pillow-9.1.0-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:21dee8466b42912335151d24c1665fcf44dc2ee47e021d233a40c3ca5adae59c"},
+    {file = "Pillow-9.1.0-cp37-cp37m-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:5cfca31ab4c13552a0f354c87fbd7f162a4fafd25e6b521bba93a57fe6a3700a"},
+    {file = "Pillow-9.1.0-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:ed742214068efa95e9844c2d9129e209ed63f61baa4d54dbf4cf8b5e2d30ccf2"},
+    {file = "Pillow-9.1.0-cp37-cp37m-win32.whl", hash = "sha256:c9efef876c21788366ea1f50ecb39d5d6f65febe25ad1d4c0b8dff98843ac244"},
+    {file = "Pillow-9.1.0-cp37-cp37m-win_amd64.whl", hash = "sha256:de344bcf6e2463bb25179d74d6e7989e375f906bcec8cb86edb8b12acbc7dfef"},
+    {file = "Pillow-9.1.0-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:17869489de2fce6c36690a0c721bd3db176194af5f39249c1ac56d0bb0fcc512"},
+    {file = "Pillow-9.1.0-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:25023a6209a4d7c42154073144608c9a71d3512b648a2f5d4465182cb93d3477"},
+    {file = "Pillow-9.1.0-cp38-cp38-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:463acf531f5d0925ca55904fa668bb3461c3ef6bc779e1d6d8a488092bdee378"},
+    {file = "Pillow-9.1.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:3f42364485bfdab19c1373b5cd62f7c5ab7cc052e19644862ec8f15bb8af289e"},
+    {file = "Pillow-9.1.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:3fddcdb619ba04491e8f771636583a7cc5a5051cd193ff1aa1ee8616d2a692c5"},
+    {file = "Pillow-9.1.0-cp38-cp38-win32.whl", hash = "sha256:4fe29a070de394e449fd88ebe1624d1e2d7ddeed4c12e0b31624561b58948d9a"},
+    {file = "Pillow-9.1.0-cp38-cp38-win_amd64.whl", hash = "sha256:c24f718f9dd73bb2b31a6201e6db5ea4a61fdd1d1c200f43ee585fc6dcd21b34"},
+    {file = "Pillow-9.1.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:fb89397013cf302f282f0fc998bb7abf11d49dcff72c8ecb320f76ea6e2c5717"},
+    {file = "Pillow-9.1.0-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:c870193cce4b76713a2b29be5d8327c8ccbe0d4a49bc22968aa1e680930f5581"},
+    {file = "Pillow-9.1.0-cp39-cp39-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:35be4a9f65441d9982240e6966c1eaa1c654c4e5e931eaf580130409e31804d4"},
+    {file = "Pillow-9.1.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:82283af99c1c3a5ba1da44c67296d5aad19f11c535b551a5ae55328a317ce331"},
+    {file = "Pillow-9.1.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:a325ac71914c5c043fa50441b36606e64a10cd262de12f7a179620f579752ff8"},
+    {file = "Pillow-9.1.0-cp39-cp39-win32.whl", hash = "sha256:a598d8830f6ef5501002ae85c7dbfcd9c27cc4efc02a1989369303ba85573e58"},
+    {file = "Pillow-9.1.0-cp39-cp39-win_amd64.whl", hash = "sha256:0c51cb9edac8a5abd069fd0758ac0a8bfe52c261ee0e330f363548aca6893595"},
+    {file = "Pillow-9.1.0-pp37-pypy37_pp73-macosx_10_9_x86_64.whl", hash = "sha256:a336a4f74baf67e26f3acc4d61c913e378e931817cd1e2ef4dfb79d3e051b481"},
+    {file = "Pillow-9.1.0-pp37-pypy37_pp73-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:eb1b89b11256b5b6cad5e7593f9061ac4624f7651f7a8eb4dfa37caa1dfaa4d0"},
+    {file = "Pillow-9.1.0-pp37-pypy37_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:255c9d69754a4c90b0ee484967fc8818c7ff8311c6dddcc43a4340e10cd1636a"},
+    {file = "Pillow-9.1.0-pp38-pypy38_pp73-macosx_10_9_x86_64.whl", hash = "sha256:5a3ecc026ea0e14d0ad7cd990ea7f48bfcb3eb4271034657dc9d06933c6629a7"},
+    {file = "Pillow-9.1.0-pp38-pypy38_pp73-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:c5b0ff59785d93b3437c3703e3c64c178aabada51dea2a7f2c5eccf1bcf565a3"},
+    {file = "Pillow-9.1.0-pp38-pypy38_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c7110ec1701b0bf8df569a7592a196c9d07c764a0a74f65471ea56816f10e2c8"},
+    {file = "Pillow-9.1.0-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:8d79c6f468215d1a8415aa53d9868a6b40c4682165b8cb62a221b1baa47db458"},
+    {file = "Pillow-9.1.0.tar.gz", hash = "sha256:f401ed2bbb155e1ade150ccc63db1a4f6c1909d3d378f7d1235a44e90d75fb97"},
 ]
 python-dateutil = [
     {file = "python-dateutil-2.8.2.tar.gz", hash = "sha256:0123cacc1627ae19ddf3c27a5de5bd67ee4586fbdd6440d9748f8abb483d3e86"},

search/urls.py

@@ -0,0 +1,8 @@
+from django.urls import path
+from search.views import search
+
+app_name = "search"
+
+urlpatterns = [
+    path("", search, name="search"),
+]

search/views.py

@@ -0,0 +1,23 @@
+from django.db.models import Q
+from django.shortcuts import render
+from django.views.generic.base import TemplateView
+from games.models import Game
+
+
+def search(request):
+    results = []
+    query = ""
+    if request.method == "GET":
+        query = request.GET.get("q")
+        if not query:
+            return render(
+                request, "search/search.html", {"query": query, "results": results}
+            )
+
+        results = Game.objects.filter(
+            Q(name__icontains=query)
+            | Q(game_system__name__icontains=query)
+            | Q(publisher__name__icontains=query)
+            | Q(genre__name__icontains=query)
+        ).distinct()
+    return render(request, "search/search.html", {"query": query, "results": results})

templates/base.html

@@ -1,11 +1,47 @@
+{% load static %}
 <!doctype html>
 <html class="no-js" lang="">
     <head>
+        <title>{% block page_title %}Welcome{% endblock %} | Emus, an EmulationStation Web Interface</title>
         <meta charset="utf-8">
         <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <title>Emus - EmulationStation Web Interface</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+        <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+        <style type="text/css">
+        dl {
+            display: flex;
+            flex-flow: column wrap;
+            max-height: 6em;
+            border: 1px solid #777;
+        }
+        dt {
+            padding: 2px 4px;
+            background: #777;
+            color: #fff;
+        }
+        dd {
+            margin: 0;
+            padding: 4px;
+            min-height: 3em;
+            border-right: 1px solid #777;
+        }
+
+        .card {
+            width: 28rem;
+            margin: 2rem;
+        }
+
+        .image-grid-container {
+            display: grid;
+
+            /* For 2 columns */
+            grid-template-columns: auto auto;
+        }
+        </style>
         {% block head_extra %}{% endblock %}
 
         <link rel="apple-touch-icon" href="/apple-touch-icon.png">
@@ -20,9 +56,40 @@
             your experience.
             </p>
         <![endif]-->
-        <h1>{% block title %}{% endblock %}</h1>
+        <div class="container">
+            <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <a class="navbar-brand" href="#">Emus</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav mr-auto">
+                <li class="nav-item active">
+                    <a class="nav-link" href="{% url 'games:game_list' %}">Library<span class="sr-only">(current)</span></a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Systems</a>
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                        {% for system in game_systems %}
+                        <a class="dropdown-item" href="{{system.get_absolute_url}}">{{system.name}}</a>
+                        {% endfor %}
+                    </div>
+                </li>
+                </ul>
+                <form class="form-inline my-2 my-lg-0" method="get" action="{% url 'search:search' %}">
+                <input class="form-control mr-sm-2" name="q" type="search" placeholder="Search" aria-label="Search">
+                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+                </form>
+            </div>
+            </nav>
+
+            <h2>{% block title %}{% endblock %}</h2>
 
-        {% block content %}
-        {% endblock %}
+            <div>
+                {% block content %}
+                {% endblock %}
+            </div>
+        </div>
     </body>
 </html>

templates/games/game_detail.html

@@ -14,22 +14,25 @@
     </p>
 
     <dl>
-        <dt>Name</dt>
-        <dd>{{object.name}}</dt>
-
-        <dt>Publisher</dt>
-        <dd>{{object.publisher}}</dd>
-
-        <dt>Dveloper</dt>
-        <dd>{{object.developer}}</dd>
+        <dt>Released
+        <dd>{{object.release_date|date:"Y/m/d"}}</dd>
 
         <dt>Players</dt>
         <dd>{{object.players}}</dd>
 
-        <dt>ROM File</dt>
-        <dd><a href="{{object.rom_file.url}}">Download</a></dd>
+        <dt>Game System</dt>
+        <dd>{{object.game_system}}</dd>
+
+        <dt>Genre</dt>
+        <dd>{% for genre in object.genre.all %}{{genre}}{% if not forloop.last %}, {% endif %}{% endfor %}</dd>
+
+        <dt>Region</dt>
+        <dd>{{object.region}}</dd>
     </dl>
 
+    <p>{{object.description}}</p>
+
+    <p><a href="{{object.rom_file.url}}">Download ROM</a></p>
     <div id="webretro-container" style="width:800px; height:600px"></div>
     <script>webretroEmbed(document.getElementById("webretro-container"), "{% static 'js/webretro/index.html' %}", {system: "{{object.game_system.retropie_slug}}", rom:"{{request.scheme}}://{{request.META.HTTP_HOST}}{{object.rom_file.url}}"});</script>
 

templates/games/game_list.html

@@ -1,15 +1,26 @@
 {% extends "base.html" %}
 
-{% block title %}Games Library{% endblock %}
+{% block title %}Featured games{% endblock %}
 
 {% block content %}
 {% regroup object_list by game_system as game_system_list %}
     {% for system in game_system_list %}
-        <h2><a href="{{system.grouper.get_absolute_url}}">{{system.grouper.name}}</a></h2>
-        <ul>
-            {% for  game in system.list %}
-            <li><a href="{{game.get_absolute_url}}">{{game.name}}</a></li>
-            {% endfor %}
-        </ul>
+
+     <div class="d-flex flex-column">
+        <h3>{{system.grouper.name}} <a href="{{system.grouper.get_absolute_url}}">&raquo;</a></h3>
+        <div class="image-grid-container">
+        {% for  game in system.list %}
+           <div class="card d-flex flex-column">
+                <img class="card-img-top" src="{{game.screenshot.url}}" alt="Card image cap">
+                <div class="card-body">
+                    <h5 class="card-title">{{game.name}}</h5>
+                    <p class="card-text">{{game.description|truncatechars:220}}</p>
+                    <a href="{{game.get_absolute_url}}" class="btn btn-primary">Play</a>
+                    <a href="{{game.rom_file.url}}" class="btn btn-alert">Download</a>
+                </div>
+            </div>
+        {% endfor %}
+        </div>
+    </div>
     {% endfor %}
 {% endblock %}

templates/games/gamesystem_detail.html

@@ -3,9 +3,17 @@
 {% block title %}{{object.name}}{% endblock %}
 
 {% block content %}
-    <ul>
-        {% for  game in object.game_set.all %}
-        <li><a href="{{game.get_absolute_url}}">{{game.name}}</a></li>
-        {% endfor %}
+    <h4>Browsing ({{object.game_set.count}}) games</h4>
+    {% for  game in object.game_set.all %}
+        <div class="card d-flex float-left" style="width: 12em; padding:1em">
+        <a href="{{game.get_absolute_url}}">
+            {% if game.marquee %}
+            <img class="card-img-top" src="{{game.marquee.url}}" alt="Card image cap">
+            {% else %}
+            <i>{{game.name}}</i>
+            {% endif %}
+        </a>
+        </div>
+    {% endfor %}
     </ul>
 {% endblock %}

templates/games/list.html

@@ -1,6 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Games{% endblock %}
-{% block content %}
-    <p>Something should go here.</p>
-{% endblock %}

templates/search/search.html

@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+
+{% block title %}Search for {{request.GET.q}}{% endblock %}
+
+{% block content %}
+{% regroup results by game_system as game_system_list %}
+    {% for system in game_system_list %}
+        <h2>{{system.grouper.name}} <a href="{{system.grouper.get_absolute_url}}">&raquo;</a></h2>
+
+        <div class="container">
+        {% for  game in system.list %}
+            <div class="card d-flex float-left">
+                <img class="card-img-top" src="{{game.screenshot.url}}" alt="Card image cap">
+                <div class="card-body">
+                    <h5 class="card-title">{{game.name}}</h5>
+                    <p class="card-text">{{game.description|truncatechars:220}}</p>
+                    <a href="{{game.get_absolute_url}}" class="btn btn-primary">Play</a>
+                    <a href="{{game.rom_file.url}}" class="btn btn-alert">Download</a>
+                </div>
+            </div>
+        {% endfor %}
+        </div>
+    {% endfor %}
+{% endblock %}