nathan/nathanjchapman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update styles and add embedded albums to music page

Browse Source
This commit is contained in:
Nathan Chapman 2020-10-27 08:10:45 -06:00
parent 9cb93f6e38
commit b2ba1896dd
2 changed files with 84 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
styles/index.css
View File

@ -1,62 +1,86 @@
@import url(https://fonts.googleapis.com/css2?family=Heebo:wght@400;700;900&display=swap);
@font-face {
font-family: 'IM Fell English';
src: url('../fonts/im_fell_english/imfellenglish-italic-webfont.woff2') format('woff2'),
url('../fonts/im_fell_english/imfellenglish-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'IM Fell English';
src: url('../fonts/im_fell_english/imfellenglish-regular-webfont.woff2') format('woff2'),
url('../fonts/im_fell_english/imfellenglish-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html { html {
font-size: 26px; font-size: 1.5em;
} }
body { body {
background-color: white; max-width: 1024px;
font-family: 'IM Fell English', sans-serif; margin: 3em auto;
font-weight: 400; padding: 0 3em;
line-height: 1.45; background-color: #c1c2c0;
color: #333; color: #323834;
font-family: 'Heebo', sans-serif;
max-width: 64ch; font-weight: 400;
margin: 0 auto; line-height: 1.65;
padding-left: 1em;
padding-right: 1em;
} }
header {
display: flex;
align-items: baseline;
justify-content: space-between;
}
/* Text Elements */
p { p {
margin-bottom: 1.25em; margin-bottom: 1.15rem;
}
h1, h2, h3, h4, h5 {
/*margin: 2.75rem 0 1.05rem;*/
margin: 0 0 1.05rem;
font-weight: 800;
line-height: 1.15;
}
h1 {
margin-top: 0;
font-size: 2.488em;
}
h2 {
font-size: 2.074em;
}
h3 {
font-size: 1.728em;
}
h4 {
font-size: 1.44em;
}
h5 {
font-size: 1.2em;
}
small {
font-size: 0.833em;
} }
a { a {
color: #333; color: #843733;
cursor: pointer;
white-space: nowrap;
} }
h1, h2, h3, h4, h5 { section {
font-size: 1.75em; padding: 1em;
margin: 2.75rem 0 1rem; background-color: #ebebea;
font-family: 'IM Fell English', sans-serif; border: 1px solid #bdc3c7;
font-weight: 700; box-shadow: 0 0 4px #bdc3c7;
line-height: 1.15; margin-bottom: 1.3em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} }
h1 { .albums-list {
margin-top: 0; display: flex;
/*font-size: 3.052em;*/ flex-flow: row wrap;
justify-content: space-around;
} }
small { iframe {
font-size: 0.8em; margin-top: 1em;
border: 0;
height: 350px;
width: 350px;
} }
@ -64,13 +88,3 @@ header,
footer { footer {
text-align: center; text-align: center;
} }
@media all and (max-width: 500px) {
html {
font-size: 20px;
}
body {
line-height: 1.7;
}
}

37
websites/index.html
View File

@ -26,28 +26,27 @@
</header> </header>
<main> <main>
<article> <h1>Websites</h1>
<section> <section>
<h1>Simple websites. No fluff.</h1> <h3>Simple websites. No fluff.</h3>
<p>Actively avoiding parallax-scrolling, bootstrap, WordPress, Squarespace, and any other main-stream, bloated, monster-of-a-website "framework" designed to accommodate every possible solution known to the wet blanket of clientele.</p> <p>Actively avoiding parallax-scrolling, bootstrap, WordPress, Squarespace, and any other main-stream, bloated, monster-of-a-website "framework" designed to accommodate every possible solution known to the wet blanket of clientele.</p>
<p>Designing around good writing, typography, and a few visual elements (colors and shapes) to give some polish.</p> <p>Designing around good writing, typography, and a few visual elements (colors and shapes) to give some polish.</p>
<p>Contact me at <a href="mailto:contact@nathanjchapman.com">contact@nathanjchapman.com</a> and let's get you a working website.</p> <p>Contact me at <a href="mailto:contact@nathanjchapman.com">contact@nathanjchapman.com</a> and let's get you a working website.</p>
</section> </section>
<section> <section>
<h1>My Work</h1> <h3>My Work</h3>
<ul> <ul>
<li><a href="https://jhcillustration.com/">JHC Illustration</a></li> <li><a href="https://jhcillustration.com/">JHC Illustration</a></li>
<li><a href="https://jjayberthumemusic.com/">JJay Berthume Music</a></li> <li><a href="https://jjayberthumemusic.com/">JJay Berthume Music</a></li>
<li><a href="http://wallyworks.net/">Wallyworks Construction</a></li> <li><a href="http://wallyworks.net/">Wallyworks Construction</a></li>
<li><a href="https://owlsprit.com/">Owl Sprit Cafe</a></li> <li><a href="https://owlsprit.com/">Owl Sprit Cafe</a></li>
<li><a href="http://ptdefense.com/">PT Defense</a></li> <li><a href="http://ptdefense.com/">PT Defense</a></li>
</ul> </ul>
</section> </section>
</article>
</main> </main>
<footer> <footer>
<p><small><em>Copyright ©2020 Nathan Chapman. All rights reserved.</em></small></p> <p><small>Copyright ©2020 Nathan Chapman. All rights reserved.</small></p>
</footer> </footer>
</body> </body>
</html> </html>