1 files changed, 101 insertions, 0 deletions
diff --git a/app.css b/app.css
new file mode 100644
index 0000000..f30b3cb
--- /dev/null
+++ b/app.css
@@ -0,0 +1,101 @@
+/* stylelint-disable */
+
+html, body {
+  height: 100%;
+  background-color: #f2f2f2;
+}
+
+.shrine-product-card {
+  width: 320px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  background-color: white;
+}
+
+.shrine-product-card__price {
+  display: block;
+  text-align: right;
+}
+
+.shrine-product-card__image {
+  margin: 0 auto;
+}
+
+#shrine-header {
+  background-color: var(--mdc-theme-background);
+  color: var(--mdc-theme-text-primary-on-background);
+}
+
+#shrine-header .mdc-toolbar__section {
+  overflow: visible;
+}
+
+#shrine-logo {
+  background: url(assets/logo.png) left center no-repeat;
+  background-size: contain;
+  width: 100%;
+  height: 100%;
+}
+
+/* Hide actual text for screen readers */
+#shrine-logo > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+#shrine-nav-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 40px;
+  text-decoration: none;
+}
+
+#shrine-nav-icon:visited,
+#shrine-nav-icon:active,
+#shrine-nav-icon:focus {
+  color: var(--mdc-theme-text-primary-on-background);
+}
+
+#shrine-nav-menu {
+  text-transform: uppercase;
+  padding-left: 16px;
+}
+
+#shrine-nav-menu .mdc-temporary-drawer__drawer {
+  background-color: #fafafa;
+}
+
+#shrine-nav-menu .mdc-temporary-drawer__header {
+  background: url(assets/logo.png) 32px 32px no-repeat;
+  background-size: 30%;
+}
+
+#shrine-nav-menu .mdc-temporary-drawer__header::before {
+  padding-top: 30%;
+}
+
+#shrine-nav-menu .mdc-temporary-drawer__content {
+  background: url(assets/diamond.svg) -32px bottom no-repeat;
+  background-size: 50%;
+}
+
+#shrine-nav-menu .mdc-list-item {
+  height: 32px;
+  padding-left: 32px;
+  letter-spacing: .2em;
+}
+
+#shrine-products {
+  --mdc-layout-grid-gutter: 8px;
+}
+
+#shrine-products .mdc-layout-grid__cell {
+  display: flex;
+  justify-content: center;
+}