- Placeholder heading
- Placeholder subheading
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi fugiat illo iusto laboriosam nihil, quasi recusandae voluptas! A consequatur delectus dolore eos itaque minus officia perspiciatis praesentium quidem? Ipsam, provident!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at inventore iste nihil nisi quibusdam quidem rerum voluptas. Asperiores assumenda commodi cumque excepturi fugiat, magnam officiis quae qui sint voluptatibus.
+
+ Simple, loveable admin tools for independent record labels and artists.
+ Try it now. No login required! ↷
+ Note: we've not launched yet as we're still building it.
+
+
+
+
+
+
+
+
+
+ Find Out More
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style/decorator/editorial-content.scss b/style/decorator/editorial-content.scss
index c7132f9..aa4d0e9 100644
--- a/style/decorator/editorial-content.scss
+++ b/style/decorator/editorial-content.scss
@@ -1,7 +1,29 @@
%d-editorial-content {
section {
- margin-bottom:4rem;
+ margin-bottom:5rem;
+ padding-top:5rem;
+ padding-bottom:5rem;
overflow:hidden;
+ margin:0 auto;
+ display:block;
+ max-width: var(--size-page-width);
+ overflow-x:hidden;
+ position: relative;
+ display: flex;
+ align-items: center;
+ }
+ .three-quarter-width {
+ width:65%;
+ }
+ .one-quarter-width {
+ width:35%;
+ position:relative;
+ height:100%;
+ display: flex;
+
+ }
+ .center {
+ text-align: center;
}
.float {
@media(min-width: $break-medium) {
@@ -28,7 +50,7 @@
}
img {
width:100%;
-
+ border-radius:var(--theme-ui-border-radius);
@media(min-width: $break-medium) {
}
@@ -36,4 +58,33 @@
h2 {
margin-top:0;
}
+
+ .pill {
+ display: inline-block;
+ border:4px solid;
+ border-color:var(--pal-3);
+ padding:0.8rem 1.5rem;
+ border-radius: 50rem;
+ margin-right:1rem;
+ margin-bottom:1rem;
+ background-color: black;
+ color:white;
+ font-weight: bold;
+ font-family: var(--font-family-main);
+ font-size: var(--font-size-base);
+ cursor: default;
+ transition: all 0.3s ease-in-out !important;
+
+ @media(min-width: $break-small) {
+ &:hover {
+ transform: scale(1.2);
+ }
+ }
+ }
+ .pill-container {
+ margin-top:3rem;
+ margin-bottom:3rem;
+ height:100%;
+ width:100%;
+ }
}
\ No newline at end of file
diff --git a/style/decorator/typography.scss b/style/decorator/typography.scss
index b1264e3..1283da3 100644
--- a/style/decorator/typography.scss
+++ b/style/decorator/typography.scss
@@ -8,20 +8,27 @@
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
+ font-weight: 600;
}
h1 {
font-size: var(--font-size-1);
+ display: block;
}
h2 {
font-size: var(--font-size-2);
+ @media(max-width: $break-small) {
+ font-size:calc(var(--font-size-2) * 0.9);
+ }
}
p {
font-size: var(--font-size-base);
line-height: var(--font-readable-line-height);
font-family: var(--font-family-main);
+ &.small {
+ font-size: var(--font-size-small);
+ }
}
-
hr {
margin: 4rem 0;
}
@@ -29,4 +36,21 @@
.centered {
text-align: center;
}
+ .highlight {
+ padding-left:1rem;
+ padding-right:1rem;
+ margin-bottom: 2rem;
+ display: inline-block;
+ }
+ .blue-highlight {
+ background-color: var(--pal-2);
+ color: var(--pal-5);
+ }
+ .green-highlight {
+ background-color:var(--pal-7);
+ color:var(--pal-5);
+ }
+ ::selection {
+ background-color: var(--pal-1);
+ color: var(--pal-6);}
}
diff --git a/style/element/a.scss b/style/element/a.scss
index 0f27d43..07d253b 100644
--- a/style/element/a.scss
+++ b/style/element/a.scss
@@ -10,21 +10,9 @@ a {
&.button {
@extend button;
- // color:black;
- // background-color: white;
- // border: 2px black solid;
- // border-radius: 5px;
- // font-weight:bold !important;
- // font-size:18px;
- // padding:10px 15px;
- // text-decoration: none;
- // transition: 0.3s ease-in-out;
+ }
- // &:hover {
- // background-color: var(--pal-1);
- // transition: 0.3sec ease-in-out;
- // color:white;
- // border-color:var(--pal-1);
- // }
+ &.button-red {
+ @extend button;
}
}
diff --git a/style/element/body.scss b/style/element/body.scss
index 8d556bf..c3fbe21 100644
--- a/style/element/body.scss
+++ b/style/element/body.scss
@@ -1,7 +1,7 @@
body {
margin: 0;
height: 100%;
- background-color: var(--pal-page-bg);
+ background-color: var(--pal-utility-light-1);
color: var(--pal-body);
font-family: var(--font-family-main);
overflow-x: hidden;
@@ -10,7 +10,6 @@ body {
global-header, global-footer, account-tabs {
display: none;
}
-
background: none;
}
}
diff --git a/style/element/button.scss b/style/element/button.scss
index 50a624f..9c1c53d 100644
--- a/style/element/button.scss
+++ b/style/element/button.scss
@@ -35,5 +35,7 @@ button {
&[disabled] {
background-color: var(--pal-ui-bg--disabled);
}
-
-}
\ No newline at end of file
+ .button-red {
+ background-color:red;
+ }
+}
diff --git a/style/element/section.scss b/style/element/section.scss
index da1ef12..43c674f 100644
--- a/style/element/section.scss
+++ b/style/element/section.scss
@@ -1,3 +1,72 @@
section {
-
+ flex-direction: column;
+ .card-row, .row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width:100%;
+ }
+ .column-one-third-width {
+ width: 33.333%;
+ }
+ .column-two-thirds-width {
+ width: 66.666%;
+ }
+ .column-half-width {
+ width:50%;
+ }
+ .column-three-quarter-width {
+ width:75%;
+ }
+ .column-one-quarter-width {
+ width:25%;
+ }
+ .form-container {
+ width:50%;
+ }
+ .card {
+ width:100%;
+ text-align: center;
+ padding-top:2rem;
+ padding-bottom: 2rem;
+ margin-bottom:2rem;
+ border-radius: var(--theme-ui-border-radius);
+ transition: all 0.3s ease-in-out;
+ h3 {
+ font-size:1.75rem;
+ }
+ .small {
+ font-size:1rem;
+ }
+ &:last-of-type {
+ margin-right:0;
+ }
+ @media(min-width: $break-small) {
+ width:18.75%;
+ display:inline-block;
+ margin-right:1rem;
+ padding-top:1rem;
+ padding-bottom: 1rem;
+ &:last-of-type {
+ margin-right:0;
+ }
+ &:hover {
+ transform: scale(1.1);
+ }
+ .card-text {
+ padding-left:1rem;
+ padding-right:1rem;
+ }
+ h3 {
+ font-size:1.25rem;
+ }
+ }
+ }
+ .card-image {
+ width:50%;
+ }
+ .card-text {
+ padding-left:2rem;
+ padding-right:2rem;
+ }
}
diff --git a/style/page/_common.scss b/style/page/_common.scss
index 528f264..2fe6e1b 100644
--- a/style/page/_common.scss
+++ b/style/page/_common.scss
@@ -1,5 +1,45 @@
body {
>article {
@extend %d-editorial-content, %d-typography, %o-container
+ }
+ .dark {
+ background-color: var(--pal-5);
+ color:var(--pal-6);
+ }
+ .light {
+ background-color: var(--pal-utility-light-1);
+ color:var(--pal-5);
+ }
+ .mustard {
+ background-color: var(--pal-8);
+ }
+ .red {
+ background-color: var(--pal-1);
+ color:var(--pal-5);
+ }
+ .light-blue {
+ background-color: var(--pal-2);
+ color:var(--pal-utility-dark-1);
+ }
+ >.article-fluid {
+ max-width:var(--size-page-width-fluid);
+ }
+ .iframe-container {
+ display: block;
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+ border-radius:1rem;
+ margin: 4rem auto;
+ }
+ .responsive-iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
}
}
\ No newline at end of file
diff --git a/style/page/index.scss b/style/page/index.scss
index 33221de..5b2a0ce 100644
--- a/style/page/index.scss
+++ b/style/page/index.scss
@@ -1,3 +1,18 @@
body.uri--index {
-
+ global-header {
+ file-uploader {
+ display: none;
+ }
+ margin-bottom:5rem;
+ }
+ .article-fluid {
+ margin:0 0;
+ padding-left:1rem;
+ padding-right:1rem;
+ display: block;
+ }
+ form#mc-form {
+ @extend %d-form-fields;
+ width:50%;
+ }
}
\ No newline at end of file
diff --git a/style/variable/font.scss b/style/variable/font.scss
index fe8710c..e2915ff 100644
--- a/style/variable/font.scss
+++ b/style/variable/font.scss
@@ -7,6 +7,7 @@
--font-size-base: 16px;
--font-size-1: calc(var(--font-size-base) * 3);
--font-size-2: calc(var(--font-size-1) * (1 / var(--size-golden-ratio)));
+ --font-size-small: calc(var(--font-size-base) * 0.8);
@media(min-width: $break-small) {
--font-size-base: 1rem;
diff --git a/style/variable/size.scss b/style/variable/size.scss
index 5f09f6a..7f46583 100644
--- a/style/variable/size.scss
+++ b/style/variable/size.scss
@@ -1,5 +1,5 @@
:root {
--size-golden-ratio: 1.618;
-
+ --size-page-width-fluid: #{$break-large};
--size-page-width: #{$break-medium};
}