Created new custom home page, moved Getting started to its own page, fixed requiremen...

[github/bastienwirtz/homer.git] / docs / overrides / assets / stylesheets / home.css

diff --git a/docs/overrides/assets/stylesheets/home.css b/docs/overrides/assets/stylesheets/home.css
new file mode 100644 (file)
index 0000000..76f585b
--- /dev/null
+++ b/docs/overrides/assets/stylesheets/home.css
@@ -0,0 +1,81 @@
+.hero {
+  padding: 32px 2.8rem;
+  color: var(--md-primary-bg-color);
+  background: linear-gradient(
+    to bottom,
+    var(--md-primary-fg-color),
+    hsla(160deg, 47%, 55%, 1) 99%,
+    #fff 99%
+  );
+}
+
+.hero-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 0;
+}
+
+.hero-content {
+  flex: 0 0 40%;
+}
+
+.hero-title {
+  height: 4rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.hero-title > img {
+  max-height: 100%;
+  width: auto;
+}
+
+.hero-title > h1 {
+  margin: 0 0 0 0.5rem;
+  font-size: 4rem;
+  line-height: 1;
+  color: currentColor;
+  font-weight: 700;
+}
+
+.hero-image {
+  width: 17rem;
+  height: auto;
+  flex: 0 0 50%;
+  transform: perspective(300px) rotate3D(0, 1, 0, -5deg);
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+.hero .md-button {
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+  color: var(--md-primary-bg-color);
+}
+
+.hero .md-button-primary {
+  background-color: var(--md-primary-bg-color);
+  color: hsla(280deg, 37%, 48%, 1);
+  border-color: var(--md-primary-bg-color);
+}
+
+.hero .md-button:focus,
+.hero .md-button:hover {
+  background-color: var(--md-accent-fg-color);
+  color: var(--md-default-bg-color);
+  border-color: var(--md-accent-fg-color);
+}
+
+.md-header {
+  position: initial;
+}
+
+.md-main__inner {
+  margin: 0;
+}
+
+.md-content {
+  display: none;
+}