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

Update styles for mobile

Browse Source
This commit is contained in:
Nathan Chapman 2020-10-27 08:27:21 -06:00
parent b2ba1896dd
commit 331411b971
3 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -16,12 +16,10 @@
</head> </head>
<body> <body>
<header> <header>
<h3>Nathan Chapman</h3> <h4>Nathan Chapman</h4>
<nav> <nav>
<p> <a href="/">Music</a> /
<a href="/">Music</a> / <a href="/websites">Websites</a>
<a href="/websites">Websites</a>
</p>
</nav> </nav>
</header> </header>
@ -30,7 +28,7 @@
<section> <section>
<h3>About</h3> <h3>About</h3>
<p>I'm a composer for film, games, and other mediums. I created the soundtracks to the online stories the <a href="http://www.lastwebsite.io/">Last Website</a> and the <a href="https://www.novella.io/novellas/the-story-of-red">Story Of Red</a>, a small short <a href="https://www.youtube.com/watch?v=wJ1p_cZ5krc">Simple Killjoy</a>, and other projects. I received my first introduction to music production and composition in High School and have been pursuing the craft ever since. Currently working out of Utah.</p> <p>I'm a composer for film, games, and other mediums. I created the soundtracks to the online stories the <a href="http://www.lastwebsite.io/">Last Website</a> and the <a href="https://www.novella.io/novellas/the-story-of-red">Story Of Red</a>, a small short <a href="https://www.youtube.com/watch?v=wJ1p_cZ5krc">Simple Killjoy</a>, and other projects. I received my first introduction to music production and composition in High School and have been pursuing the craft ever since. Currently working out of Utah.</p>
<p>Contact me at <a href="mailto:contact@nathanjchapman.com">contact@nathanjchapman.com</a>.</p> <p><a href="mailto:contact@nathanjchapman.com">Contact me</a></p>
</section> </section>
<section> <section>
<h3>Albums</h3> <h3>Albums</h3>

25
styles/index.css
View File

@ -6,7 +6,7 @@ html {
body { body {
max-width: 1024px; max-width: 1024px;
margin: 3em auto; margin: 1em auto;
padding: 0 3em; padding: 0 3em;
background-color: #c1c2c0; background-color: #c1c2c0;
color: #323834; color: #323834;
@ -33,7 +33,6 @@ h1, h2, h3, h4, h5 {
line-height: 1.15; line-height: 1.15;
} }
h1 { h1 {
margin-top: 0;
font-size: 2.488em; font-size: 2.488em;
} }
h2 { h2 {
@ -58,6 +57,10 @@ a {
white-space: nowrap; white-space: nowrap;
} }
nav {
margin: 0 0 1.05rem;
}
section { section {
padding: 1em; padding: 1em;
background-color: #ebebea; background-color: #ebebea;
@ -88,3 +91,21 @@ header,
footer { footer {
text-align: center; text-align: center;
} }
@media all and (max-width: 500px) {
body {
margin: 0;
padding: 3em 0;
}
header {
padding: 0 1em;
flex-flow: column;
justify-content: space-around;
}
main h1 {
padding-left: 1rem;
}
section {
}
}

8
websites/index.html
View File

@ -18,10 +18,8 @@
<header> <header>
<h3>Nathan Chapman</h3> <h3>Nathan Chapman</h3>
<nav> <nav>
<p> <a href="/">Music</a> /
<a href="/">Music</a> / <a href="/websites">Websites</a>
<a href="/websites">Websites</a>
</p>
</nav> </nav>
</header> </header>
@ -31,7 +29,7 @@
<h3>Simple websites. No fluff.</h3> <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><a href="mailto:contact@nathanjchapman.com">Contact me</a> and let's get you a working website.</p>
</section> </section>
<section> <section>
<h3>My Work</h3> <h3>My Work</h3>