1 files changed, 268 insertions, 0 deletions
diff --git a/static/f/style.css b/static/f/style.css
new file mode 100644
index 00000000..07f85ae1
--- /dev/null
+++ b/static/f/style.css
@@ -0,0 +1,268 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  background: #f3f3f3;
+  background-image: linear-gradient(#b5bec1, #f3f3f3);
+  background-size: 600px;
+  background-repeat: repeat-x;
+}
+
+body {
+  margin: 0;
+  color: #171717;
+  /* font-family: "Helvetica Neue", sans-serif; */
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: 600;
+}
+
+dd {
+  margin: 0 0 .7em 0;
+}
+
+.img--fit {
+  width: 100%;
+  height: auto;
+}
+
+.img--rounded {
+  border-radius: 4px;
+}
+.elevation-1 {
+  box-shadow: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.2);
+}
+
+.container {
+  padding: 0 15px;
+  margin: 0 auto;
+}
+
+.row {
+  margin: 0 -15px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.col, .col-lg, .col-xl {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.col {
+  flex: 1;
+}
+
+.d-none { display: none; }
+.d-block { display: block; }
+
+@media (min-width: 576px) {
+  .container {
+      max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+      max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .container {
+      max-width: 960px;
+  }
+  .col-lg {
+    flex: 1;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .col-lg--2 { flex: 2; }
+  .col-lg--3 { flex: 3; }
+  .col-lg--4 { flex: 4; }
+  .d-lg-block { display: block; }
+  .d-lg-none { display: none; }
+}
+@media (min-width: 1200px) {
+  .container {
+      max-width: 1140px;
+  }
+  .col-xl {
+    flex: 1;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .col-xl--2 { flex: 2; }
+  .col-xl--3 { flex: 3; }
+  .col-xl--4 { flex: 4; }
+  .d-xl-block { display: block; }
+  .d-xl-none { display: none; }
+}
+@media (min-width: 1360px) {
+  .container {
+      max-width: 1300px;
+  }
+}
+
+
+
+.header {
+  display: flex;
+  align-items: center;
+  height: 64px;
+}
+
+.header__nav {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.header__logo {
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.header__menu {
+  margin-left: 40px;
+  font-weight: 500;
+}
+
+.vn-header {
+  padding: 60px 0 80px 0;
+}
+
+.vn-header__title {
+  font-size: 40px;
+  font-weight: 500;
+}
+
+.vn-header__details {
+  margin-top: 8px;
+  font-weight: 500;
+}
+
+.sidebar__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 30px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #555;
+}
+
+.sidebar__item--active::before {
+  display: block;
+  content: '';
+  position: absolute;
+  left: -20px;
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  background: #555;
+}
+
+.vn-page {
+  padding-bottom: 100px; /* tmp */
+}
+
+.vn-page__top {
+  display: flex;
+}
+
+.vn-page__top-main {
+  flex: 1;
+}
+
+.vn-page__top-details {
+  padding: 15px;
+  padding-top: 65px;
+}
+
+@media (min-width: 992px) {
+  .vn-page__top-details {
+    width: 230px;
+    margin-left: 40px;
+    margin-right: 15px;
+    padding: 0;
+    padding-top: 65px;
+  }
+}
+
+.vn-page__top-body {
+  display: flex;
+}
+
+.vn-page__nav {
+  width: 230px;
+}
+
+.vn-page__description {
+  font-family: serif;
+  line-height: 1.3;
+  font-size: 1.2em;
+}
+
+.vn-page__sidebar {
+  width: 230px;
+  padding: 0 15px;
+}
+
+.section__title {
+  font-weight: 500;
+}
+
+.vn-page__top-details > * {
+  margin-bottom: 25px;
+}
+
+.vn-page__dl {
+  font-size: 0.9em;
+  margin-top: 35px;
+}
+
+.section {
+  margin-top: 4em;
+}
+
+.section__title {
+  margin: 0 0 0.5em 0;
+}
+
+.add-to-list {
+  background: white;
+  border-radius: 4px;
+  padding: 0.8em 1em;
+}
+
+.spoiler {
+  background-color: #ccc;
+  color: #ccc;
+}
+
+.spoiler:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: inherit;
+}
+
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -7px;
+}
+
+.gallery__image {
+  margin: 7px;
+}
+
+.fake-img {
+  width: 200px;
+  height: 120px;
+  background-color: #aaa;
+  border-radius: 4px;
+}