<link rel="icon" href="/favicon.ico">
</head>
<body>
- <header>
+ <div class = "wrapper">
+ <header class="main-head">
<a href="/">
<h1>Skullheadx</h1>
</a>
</header>
- <nav>
+ <nav class="main-nav">
<section>
<h2>General</h2>
<ol>
</ol>
</section>
<section>
+ <h2>Contact</h2>
<a href="mailto:skull@skullheadx.com">Email</a>
</section>
</nav>
- <aside>
+ <aside class="main-aside">
<section>
<h2>Bio</h2>
<ol>
<footer><time datetime="2026-05-05">May 5, 2026</time></footer>
</section>
</aside>
- <main>
- <article>
+ <main class="content">
+ <article>
<h1>Welcome to my webpage</h1>
<p>This is my site where I share my projects, and my thoughts on philosophy and tech.</p>
<p>I'm interested in Orthodox Christianity, computing, electrical engineering and reading, so a lot of the content of my site will focus on these topics.</p>
<a href="mailto:skull@skullheadx.com">skull@skullheadx.com</a></p>
</article>
</main>
- <footer>
+ <footer class="main-footer">
<a href="https://skullheadx.com">https://skullheadx.com</a>
</footer>
+ </div>
</body>
</html>
+.main-head {
+ grid-area: header;
+}
+.content {
+ grid-area: content;
+}
+.main-nav {
+ grid-area: nav;
+}
+.main-aside {
+ grid-area: aside;
+}
+.main-footer {
+ grid-area: footer;
+}
+.wrapper {
+ display: grid;
+ gap: 20px;
+ grid-template-areas:
+ "header"
+ "nav"
+ "content"
+ "aside"
+ "footer";
+}
+
+@media (width >= 500px) {
+ .wrapper {
+ grid-template-columns: 1fr 3fr;
+ grid-template-areas:
+ "header header"
+ "nav nav"
+ "aside content"
+ "footer footer";
+ }
+ nav ul {
+ display: flex;
+ justify-content: space-between;
+ }
+}
+
+@media (width >= 700px) {
+ .wrapper {
+ grid-template-columns: 1fr 4fr 1fr;
+ grid-template-areas:
+ "header header header"
+ "nav content aside"
+ "nav content aside"
+ "footer footer footer";
+ }
+ nav ul {
+ flex-direction: column;
+ }
+}
projects / skullheadx.com.git / commitdiff