Design updates (#35)

* updated main text, added quickstart title and link to repo + deploy * removed body margin and customized other elements to better match original * imported styling * update blob color * updated tests * removed duplicate link * removed sass and changed files to css * uninstalled sass * moved description above CTA * updated readme with styling
netlify-templates · Aug 9, 2022 · 6fa0ba2 · 6fa0ba2
1 parent 6c84386
commit 6fa0ba2
Show file tree

Hide file tree

Showing 7 changed files with 237 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,9 @@ Click this button and it will help you create a new repo, create a new Netlify p
 
 - [Setup](#setup)
 - [Deploying](#deploying)
+- [Styling](#styling)
+  - [Notes on Styling](#notes-on-styling)
+  - [Remove Styling](#remove-styling)
 - [Testing](#testing)
   - [Included Default Testing](#included-default-testing)
   - [Removing Renovate](#removing-renovate)
@@ -43,6 +46,28 @@ There are a few ways to deploy this template:
 - Head to the [Netlify UI](https://app.netlify.com/) to deploy via GitHub or [drag and drop](https://app.netlify.com/drop) the project folder
 - Use the Netlify CLI's create from template command `netlify sites:create-template angular-quickstart` which will create a repo, Netlify project, and deploy it
 
+## Styling
+
+We've added some modern styling to this template using css within an external stylesheet, this will allow you to easily remove our styling and add in your own. 
+
+If you decide that you want to keep our styling you can review our style notes below. 
+
+### Notes on Styling
+
+The variables below give you the ability to change the gradient colors of the blobs and are interpolated into the URL string of the background-img within the body. 
+
+```css
+// Controls the blob blur gradient colors within the main tag's svg
+--top-right-blur-1: #20C6B7;
+--top-right-blur-2: #4D9ABF;
+--bttm-left-blur-1: #de3641;
+--bttm-left-blur-2: #e46b73;
+```
+
+## Remove Styling
+
+If you decide that our styling is not for you, all you'll need to do is remove the [demo-styling.css](https://github.com/netlify-templates/angular-quickstart/blob/tn/designUpdates/src/demo-styling.css) file. 
+
 ## Testing
 
 ### Included Default Testing

diff --git a/angular.json b/angular.json
@@ -27,7 +27,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "src/demo-styling.css"
             ],
             "scripts": []
           },

diff --git a/cypress/e2e/basic.cy.ts b/cypress/e2e/basic.cy.ts
@@ -5,7 +5,7 @@ describe('empty spec', () => {
 
   it('displays the resources text', () => {
     cy.get('h2')
-    .contains('Here are some resources to help you on your Angular + Netlify journey');
+    .contains('This is a bare-bones Astro project that has everything you need to quickly deploy it to Netlify');
   })
   it('renders the image', () => {
     cy.get('img')

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,26 +1,31 @@
-<div class="header">
-  <div class="logo">
-    <img src="https://res.cloudinary.com/dzkoxrsdj/image/upload/v1646339469/angular_wzrs5o.png">
+<svg id="background" width='1728' height='1235' viewBox="0 0 1728 1235" fill='none' xmlns='http://www.w3.org/2000/svg'><g opacity='0.75' filter='url(#filter0_f_39_143)'><circle cy='1000' r='264' fill='url(#paint0_linear_39_143)'/></g><g opacity='0.65' filter='url(#filter1_f_39_143)'><circle cx='1720' cy='264' r='379' fill='url(#paint1_linear_39_143)'/></g><defs><filter id='filter0_f_39_143' x='-485' y='515' width='970' height='970' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'><feFlood flood-opacity='0' result='BackgroundImageFix'/><feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/><feGaussianBlur stdDeviation='110.5' result='effect1_foregroundBlur_39_143'/></filter><filter id='filter1_f_39_143' x='1120' y='-336' width='1200' height='1200' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'><feFlood flood-opacity='0' result='BackgroundImageFix'/><feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/><feGaussianBlur stdDeviation='110.5' result='effect1_foregroundBlur_39_143'/></filter><linearGradient id='paint0_linear_39_143' x1='196.5' y1='902' x2='-2.55853e-05' y2='1264' gradientUnits='userSpaceOnUse'><stop stop-color="var(--bttm-left-blur-1)"/><stop offset='1' stop-color="var(--bttm-left-blur-2)"/></linearGradient><linearGradient id='paint1_linear_39_143' x1='1720' y1='-115' x2='1720' y2='643' gradientUnits='userSpaceOnUse'><stop stop-color="var(--top-right-blur-1)"/><stop offset='1' stop-color="var(--top-right-blur-2)" /></linearGradient></defs></svg>     
+<div id="content">
+  <div class="header">
+    <h1>Quickstart Template</h1>
+    <div class="logo">
+      <img src="https://res.cloudinary.com/dzkoxrsdj/image/upload/v1646339469/angular_wzrs5o.png">
+    </div>
+    <h2>
+      This is a bare-bones Astro project that has everything you need to quickly deploy it to Netlify
+    </h2>
+    <div class="bttns">
+      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/angular-quickstart" class="bttn primary">Deploy to Netlify</a>
+      <a href="https://github.com/netlify-templates/angular-quickstart" class="bttn secondary">View Repo</a>
+    </div>
   </div>
-</div>
-<div class="resource-list">
-  <h2>
-      Here are some resources to help you on your Angular + Netlify journey:
-  </h2>
-  <ul>
-    <li>
-      <a href="https://github.com/netlify-templates/angular-quickstart">The Angular Quickstart repo</a>
-    </li>
-    <li>
-      <a href="https://www.netlify.com/tags/angular/">Netlify Blog: Angular posts</a>
-    <li>
-      <a href="https://docs.netlify.com/">Netlify Docs</a>
-    </li>
-    <li>
-      <a href="https://angular.io/">Angular Docs</a>
-    </li>
-  </ul>
-</div>
-<footer class="footer">
-  Made with <a href="https://netlify.com"><img src="https://res.cloudinary.com/dzkoxrsdj/image/upload/v1646714899/netliheart_ezlkim.svg" alt="Netlify Logo" /></a> for you!
-</footer>
+  <div class="resource-list">
+    <ul>
+      <li>
+        <a href="https://www.netlify.com/tags/angular/">Netlify Blog: Angular posts</a>
+      <li>
+        <a href="https://docs.netlify.com/">Netlify Docs</a>
+      </li>
+      <li>
+        <a href="https://angular.io/">Angular Docs</a>
+      </li>
+    </ul>
+  </div>
+  <footer class="footer">
+    Made with <a href="https://netlify.com"><img src="https://res.cloudinary.com/dzkoxrsdj/image/upload/v1646714899/netliheart_ezlkim.svg" alt="Netlify Logo" /></a> for you!
+  </footer>
+</div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['../demo-styling.css']
 })
 export class AppComponent {
   title = 'angular-quickstart';

diff --git a/src/demo-styling.css b/src/demo-styling.css
@@ -0,0 +1,140 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
+
+:root {
+  --main-family: 'Poppins', sans-serif;
+  --color-bg: linear-gradient(180deg, #FFFFFF 0%, #AEC6DC 100%);
+
+  /* Controls the blob blur gradient colors within the main tag's svg */
+  --top-right-blur-1: #20C6B7;
+  --top-right-blur-2: #4D9ABF;
+  --bttm-left-blur-1: #de3641;
+  --bttm-left-blur-2: #e46b73;
+}
+
+html {
+    background: var(--color-bg);
+    font-family: var(--main-family);
+    min-height: 100%;
+}
+
+body{
+  margin: 0;
+}
+
+#background {
+    position: fixed;
+    width: 100%;
+    z-index: -1;
+    height: 100%;
+}
+
+#content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 auto;
+}
+
+.header{
+    text-align: center;
+}
+
+.header h1 {
+  padding-top:5%;
+  margin: 0;
+  font-size: calc(max(5vw, 32px));
+}
+
+.header .logo img {
+  padding: 30px 0;
+  width: 100%;
+}
+
+.header h2 {
+  line-height: 34px;
+  width: 50%;
+  margin: 0 auto;
+  padding-bottom: 5%;
+  font-weight: 500;
+}
+
+@media only screen and (max-width: 450px) {
+  .header h2 {
+    width: 90%;
+    padding: 5%;
+  }
+}
+
+.bttns{
+  margin-bottom: 5%;
+}
+
+.bttn{
+  padding: 15px;
+  border-radius: 5px;
+  width: 150px;
+  margin: 0 1%;
+  text-decoration: none;
+}
+
+.bttn.primary{
+  display: inline-block;
+  width: max-content;
+  background: #21A69A;
+  border: none;
+  color: white;
+  box-shadow: -3px 3px 5px rgb(35 33 33 / 23%);
+}
+
+.bttn.primary:hover {
+  background: #21a69a;
+  box-shadow: inset 3px 4px 10px rgb(35 33 33 / 40%);
+  /* -webkit-box-shadow: inset 3px 4px 10px rgb(35 33 33 / 40%); */
+}
+
+.bttn.secondary{
+  background: transparent;
+  border: #093C4F 2px solid;
+  color: #0D1D24;
+}
+
+.bttn.secondary:hover {
+  background: #05171f;
+  color: white;
+}
+
+.resource-list {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: larger;
+  text-align: center;
+  width: 100%;
+}
+
+.resource-list ul {
+  text-align: left;
+  margin: 0 auto;
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  padding: 2%;
+}
+
+.resource-list li {
+  padding: 2%;
+  font-weight: bold;
+}
+
+.resource-list a {
+  color: black;
+  line-height: 30px;
+}
+
+footer {
+  margin: 0 auto;
+  width: 100%;
+  text-align: center;
+}
+
+footer img {
+  width: 20px;
+}