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

6
index.html
View File

@ -16,12 +16,10 @@
</head>
<body>
<header>
<h3>Nathan Chapman</h3>
<h4>Nathan Chapman</h4>
<nav>
<p>
<a href="/">Music</a> /
<a href="/websites">Websites</a>
</p>
</nav>
</header>
@ -30,7 +28,7 @@
<section>
<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>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>
<h3>Albums</h3>

25
styles/index.css
View File

@ -6,7 +6,7 @@ html {
body {
max-width: 1024px;
margin: 3em auto;
margin: 1em auto;
padding: 0 3em;
background-color: #c1c2c0;
color: #323834;
@ -33,7 +33,6 @@ h1, h2, h3, h4, h5 {
line-height: 1.15;
}
h1 {
margin-top: 0;
font-size: 2.488em;
}
h2 {
@ -58,6 +57,10 @@ a {
white-space: nowrap;
}
nav {
margin: 0 0 1.05rem;
}
section {
padding: 1em;
background-color: #ebebea;
@ -88,3 +91,21 @@ header,
footer {
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 {
}
}

4
websites/index.html
View File

@ -18,10 +18,8 @@
<header>
<h3>Nathan Chapman</h3>
<nav>
<p>
<a href="/">Music</a> /
<a href="/websites">Websites</a>
</p>
</nav>
</header>
@ -31,7 +29,7 @@
<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>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>
<h3>My Work</h3>