From e48df1cf3d849d8cd17f429cb94d3a8e503fbc3b Mon Sep 17 00:00:00 2001
From: Amolith <amolith@nixnet.xyz>
Date: Mon, 24 Jun 2019 22:58:50 -0400
Subject: [PATCH] add itunes link

---
 assets/css/main.css       | 547 ++++++++++++++++++++------------------
 assets/images/preview.svg |   2 +-
 hosts/index.html          |  11 +-
 index.html                |   2 +-
 4 files changed, 296 insertions(+), 266 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 53f2f33..1b9b568 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,260 +1,287 @@
-@import url("../css/fonts.css");
-
-html {
-    background-color: #fff;
-    height: 100%;
-    color: #000;
-}
-body {
-    height: 72%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    vertical-align: middle !important;
-}
-.wrapper {
-    text-align: center;
-    height: 100%;
-    width: 80%;
-}
-.wrapper-page {
-    text-align: center;
-    height: 100%;
-    width: 100%;
-    margin-top: 40px;
-}
-.logo {
-    background: url(../images/logo.svg) no-repeat center;
-    height: 135px;
-    background-size: 90px;
-    display:flex;
-    justify-content:center;
-    align-items:center;
-    margin-top: 25px;
-    padding: 10px;
-}
-.logo-page {
-    background: url(../images/logo.svg) no-repeat center;
-    height: 15px;
-    background-size: 90px;
-    display:flex;
-    justify-content:center;
-    align-items:center;
-    margin-top: 5px;
-    padding: 10px;
-}
-.site-title {
-    font-family: Montserrat;
-    font-size: 3.3rem;
-    font-weight: 600;
-    padding-bottom: 10px;
-    display: block;
-    text-align: inherit;
-}
-.site-subtitle {
-    font-family: Nunito;
-    font-weight: 100;
-    font-size: 2rem;
-    color: #808080;
-    display: block;
-    text-align: inherit;
-    padding-bottom: 2rem;
-}
-.menu-top {
-    margin-top: 30px;
-    color: #000;
-}
-.menu-top a {
-    color: #000;
-    text-decoration: none;
-    font-weight: lighter;
-    font-size: smaller;
-}
-.menu-top a:hover {
-    text-decoration: underline;
-}
-.flex-wrapper {
-    padding-top: 130px;
-    display:-webkit-box;
-    display:-webkit-flex;
-    display:-moz-flex;
-    display:-ms-flexbox;
-    display:flex;
-    align-items:center;
-    flex-direction:row
-}
-img {
-    border-radius: 50%;
-    border: 7px solid #000;
-    width: 33%;
-    flex:1;
-}
-.flex-wrapper .text {
-    flex:2;
-    font-size: 3vh;
-}
-.player {
-    width: 80%;
-    padding-bottom: 2.80rem;
-    margin-left: auto;
-    margin-right: auto;
-}
-.menu {
-    padding-bottom: 2rem;
-}
-.links {
-    display: inline-flex;
-    flex-direction: column;
-    font-family: Montserrat;
-    font-weight: 400;
-    color: black;
-    text-align: center;
-    text-decoration: none;
-}
-.icons {
-    width: 4rem;
-    height: 4rem;
-    border-radius: 2rem;
-    color: black;
-    background-color: white;
-    border: 3px solid #000;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 25px;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    cursor: pointer;
-    margin-left: 3rem;
-    margin-right: 3rem;
-    margin-bottom: 10px;
-}
-.links:hover .icons {
-    background-color: black;
-    color: #FFFFFF;
-}
-.link-text {
-    font-family: Montserrat;
-    text-decoration: none;
-}
-.links:hover .link-text {
-    font-weight: 700;
-}
-.link-text ::before {
-    content: "\f0c1  ";
-    font-size: 15px;
-    font-family: "ForkAwesome";
-}
-
-@media (prefers-color-scheme: dark) {
-    html {
-        background-color: #323234;
-        color: #fff;
-    }
-    .logo {
-        background: url(../images/logo-dark.svg) no-repeat center;
-        background-size: 90px;
-    }
-    .site-title {
-        color: #fff;
-    }
-    .site-subtitle {
-        color: #828282;
-    }
-    .links {
-        color: #fff;
-    }
-    .icons {
-        color: #fff;
-        background-color: #323234;
-        border: 3px solid #fff;
-    }
-    .links:hover .icons {
-        background-color: #fff;
-        color: #323234;
-    }
-    .menu-top {
-        color: #fff;
-    }
-    .menu-top a {
-        color: #fff;
-    }
-    .flex-wrapper .image img {
-        border-color: #fff;
-    }
-}
-
-@media (min-width: 1367px) {
-    .wrapper {
-        margin-top: 17%;
-    }
-    .player {
-        max-width: 50%;
-    }
-}
-
-@media (max-width: 1000px) {
-    .links {
-        margin-left: -1rem;
-        margin-right: -1rem;
-    }
-}
-@media (max-width: 790px) {
-    .links {
-        margin-left: -1.5rem;
-        margin-right: -1.5rem;
-    }
-}
-@media (max-width: 600px) {
-    .links {
-        margin-left: -.3rem;
-        margin-right: -.3rem;
-        padding-bottom: 1rem;
-    }
-    .player {
-        width: 95%;
-    }
-    .wrapper {
-        width: 85%
-    }
-}
-@media (max-width: 470px) {
-    .links {
-        margin-left: -1.5rem;
-        margin-right: -1.5rem;
-        padding-bottom: 1.5rem;
-    }
-    .wrapper {
-        width: 90%;
-    }
-    .site-title {
-        font-size: 2.5rem;
-    }
-    .site-subtitle {
-        font-size: 1.5rem;
-    }
-}
-@media (max-width: 360px) {
-    .links {
-        margin-left: -1.5rem;
-        margin-right: -1.5rem;
-    }
-    .wrapper {
-        width: 98%;
-    }
-    .site-title {
-        font-size: 2rem;
-    }
-    .site-subtitle {
-        font-size: 1.5rem;
-    }
-    .icons {
-        width: 3rem;
-        height: 3rem;
-        border-radius: 1.5rem;
-        font-size: 1.3rem;
-    }
-    .link-text {
-        font-size: .8rem;
-    }
-}
+@import url("../css/fonts.css");
+
+html {
+    background-color: #fff;
+    height: 100%;
+    color: #000;
+}
+body {
+    height: 72%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle !important;
+}
+.wrapper {
+    text-align: center;
+    height: 100%;
+    width: 80%;
+}
+.wrapper-page {
+    text-align: center;
+    height: 100%;
+    width: 100%;
+    margin-top: 40px;
+}
+.logo {
+    background: url(../images/logo.svg) no-repeat center;
+    height: 135px;
+    background-size: 90px;
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    margin-top: 25px;
+    padding: 10px;
+}
+.logo-page {
+    background: url(../images/logo.svg) no-repeat center;
+    height: 15px;
+    background-size: 90px;
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    margin-top: 5px;
+    padding: 10px;
+}
+.site-title {
+    font-family: Montserrat;
+    font-size: 3.3rem;
+    font-weight: 600;
+    padding-bottom: 10px;
+    display: block;
+    text-align: inherit;
+}
+.site-subtitle {
+    font-family: Nunito;
+    font-weight: 100;
+    font-size: 2rem;
+    color: #808080;
+    display: block;
+    text-align: inherit;
+    padding-bottom: 2rem;
+}
+.menu-top {
+    margin-top: 30px;
+    color: #000;
+}
+.menu-top a {
+    color: #000;
+    text-decoration: none;
+    font-weight: lighter;
+    font-size: smaller;
+}
+.menu-top a:hover {
+    text-decoration: underline;
+}
+.container {
+  max-width: 1140px;
+  margin: 0 auto;
+  position: relative;
+  padding: 0 20px;
+}
+.flex-wrapper {
+    padding-top: 50px;
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:-moz-flex;
+    display:-ms-flexbox;
+    display:flex;
+    align-items:center;
+    flex-direction:row;
+}
+img {
+    border-radius: 50%;
+    border: 7px solid #000;
+    width: 70%;
+}
+.text a {
+    text-decoration: none;
+    color: #000;
+    font-weight: bold;
+}
+.text a::before {
+    content: "\f0c1 ";
+    font-size: 15px;
+    font-family: "ForkAwesome";
+}
+.flex-wrapper .image {
+    flex: 1;
+    padding: 0 20px;
+}
+.flex-wrapper .text {
+    flex: 1;
+    font-size: 3vh;
+    text-align: center;
+}
+.flex-wrapper p {
+    text-align: left;
+    font-size: 3vh;
+}
+.player {
+    width: 80%;
+    padding-bottom: 2.80rem;
+    margin-left: auto;
+    margin-right: auto;
+}
+.menu {
+    padding-bottom: 2rem;
+}
+.links {
+    display: inline-flex;
+    flex-direction: column;
+    font-family: Montserrat;
+    font-weight: 400;
+    color: black;
+    text-align: center;
+    text-decoration: none;
+}
+.icons {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 2rem;
+    color: black;
+    background-color: white;
+    border: 3px solid #000;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 25px;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    cursor: pointer;
+    margin-left: 3rem;
+    margin-right: 3rem;
+    margin-bottom: 10px;
+}
+.links:hover .icons {
+    background-color: black;
+    color: #FFFFFF;
+}
+.link-text {
+    font-family: Montserrat;
+    text-decoration: none;
+}
+.links:hover .link-text {
+    font-weight: 700;
+}
+.link-text ::before {
+    content: "\f0c1  ";
+    font-size: 15px;
+    font-family: "ForkAwesome";
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        background-color: #323234;
+        color: #fff;
+    }
+    .logo {
+        background: url(../images/logo-dark.svg) no-repeat center;
+        background-size: 90px;
+    }
+    .site-title {
+        color: #fff;
+    }
+    .site-subtitle {
+        color: #828282;
+    }
+    .links {
+        color: #fff;
+    }
+    .icons {
+        color: #fff;
+        background-color: #323234;
+        border: 3px solid #fff;
+    }
+    .links:hover .icons {
+        background-color: #fff;
+        color: #323234;
+    }
+    .menu-top {
+        color: #fff;
+    }
+    .menu-top a {
+        color: #fff;
+    }
+    .flex-wrapper .image img {
+        border-color: #fff;
+    }
+    .text a {
+        color: #fff;
+    }
+}
+
+@media (min-width: 1367px) {
+    .wrapper {
+        margin-top: 17%;
+    }
+    .player {
+        max-width: 50%;
+    }
+}
+
+@media (max-width: 1000px) {
+    .links {
+        margin-left: -1rem;
+        margin-right: -1rem;
+    }
+}
+@media (max-width: 790px) {
+    .links {
+        margin-left: -1.5rem;
+        margin-right: -1.5rem;
+    }
+}
+@media (max-width: 600px) {
+    .links {
+        margin-left: -.3rem;
+        margin-right: -.3rem;
+        padding-bottom: 1rem;
+    }
+    .player {
+        width: 95%;
+    }
+    .wrapper {
+        width: 85%
+    }
+}
+@media (max-width: 470px) {
+    .links {
+        margin-left: -1.5rem;
+        margin-right: -1.5rem;
+        padding-bottom: 1.5rem;
+    }
+    .wrapper {
+        width: 90%;
+    }
+    .site-title {
+        font-size: 2.5rem;
+    }
+    .site-subtitle {
+        font-size: 1.5rem;
+    }
+}
+@media (max-width: 360px) {
+    .links {
+        margin-left: -1.5rem;
+        margin-right: -1.5rem;
+    }
+    .wrapper {
+        width: 98%;
+    }
+    .site-title {
+        font-size: 2rem;
+    }
+    .site-subtitle {
+        font-size: 1.5rem;
+    }
+    .icons {
+        width: 3rem;
+        height: 3rem;
+        border-radius: 1.5rem;
+        font-size: 1.3rem;
+    }
+    .link-text {
+        font-size: .8rem;
+    }
+}
diff --git a/assets/images/preview.svg b/assets/images/preview.svg
index e08db15..56d01e7 100644
--- a/assets/images/preview.svg
+++ b/assets/images/preview.svg
@@ -58,7 +58,7 @@
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
      inkscape:zoom="0.98994949"
-     inkscape:cx="279.60551"
+     inkscape:cx="299.80856"
      inkscape:cy="146.42268"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
diff --git a/hosts/index.html b/hosts/index.html
index ff8c646..076ae58 100644
--- a/hosts/index.html
+++ b/hosts/index.html
@@ -40,27 +40,30 @@
         <link rel="stylesheet" href="/assets/css/plyr.css">
     </head>
 
-    <body>
+<body>
         <div class="wrapper-page">
             <div class="header">
-                <h1>
                     <span class="site-title">Hosts</span>
                     <div class="menu-top">
+                      <h1>
                         <i class="fa fa-home"></i> <a href="/">Home</a>  |
                         <i class="fa fa-rss"></i> <a href="/archive/feed.xml">RSS Feed</a>  |
                         <i class="fa fa-apple"></i> <a href="/">iTunes</a> |
                         <i class="fa fa-bank"></i> <a href="/archive/">Archive</a>  |
                         <i class="fa fa-envelope"></i> <a href="/">Contact</a>
+                      </h1>
                     </div>
+                    <div class="container">
                     <div class="flex-wrapper">
                         <div class="image">
-                        <img src="/assets/images/gideon.png" alt="a picture of Joshua Marsh">
+                        <img src="../assets/images/gideon.png" alt="a picture of Joshua Marsh">
                         </div>
                         <div class="text">
                             <h1>Gideon White</h1>
+                            <p style="text-align: center;">Hello! Listen to the first episode where I introduce myself!</p>
                         </div>
                     </div>
-                </h1>
+                  </div>
             </div>
         </div>
     </body>
diff --git a/index.html b/index.html
index a9d2ed4..700a141 100644
--- a/index.html
+++ b/index.html
@@ -59,7 +59,7 @@
                     <span><button class="icons" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></button></span>
                     <span class="link-text">RSS Feed</span>
                 </a>
-                <a href="" class="links">
+                <a href="https://podcasts.apple.com/us/podcast/the-musical-ideation-podcast/id1468916454" class="links">
                     <span><button class="icons" title="Listen on iTunes"><i class="fa fa-apple" aria-hidden="true"></i></button></span>
                     <span class="link-text">iTunes</span>
                 </a>