chopster44/chopster44.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished new layout

Browse Source
This commit is contained in:
chopster44
2024-07-06 18:46:44 +01:00
parent 6f42499ece
commit 5a1c4acbde
5 changed files with 83 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/lined-paper-texture.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
img/paper.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

29
index.css
View File

@@ -1,26 +1,38 @@
body { body {
background-image: url(/img/paper.gif);
margin: 40px auto; margin: 40px auto;
max-width: 800px; max-width: 800px;
line-height: 1.8; line-height: 1.8;
font-size: 18px; font-size: 18px;
color: #454545; color: #454545;
padding: 0 10px; padding: 0 10px;
background: #fbf9f7; /*background: #fbf9f7;*/
display: grid; display: grid;
grid-template-columns: 150px auto; grid-template-columns: 150px auto;
grid-template-rows: auto auto 2em;
grid-template-areas: "logo title" grid-template-areas: "logo title"
"nav content" "nav content"
"nav foot"; "nav foot";
/*gap: 10px;*/ gap: 10px;
height: 100%; height: 100%;
} }
.div {
background-color: #fbf9f7;
padding: 0 5px;
border: medium outset black;
}
.logo { .logo {
grid-area: logo; grid-area: logo;
padding: 0 1.5px;
} }
.title { .title {
grid-area: title; grid-area: title;
width: auto;
height: auto;
margin: auto;
} }
.nav { .nav {
@@ -37,9 +49,19 @@ body {
grid-area: foot; grid-area: foot;
} }
.footer >p {
margin: 0;
}
.changelog {
overflow-y: scroll;
}
a { a {
color: #07a; color: #07a;
text-decoration:none; text-decoration:none;
width: fit-content;
} }
a:visited { a:visited {
@@ -60,4 +82,5 @@ sub {
.distro { .distro {
display: flex; display: flex;
} }

55
index.html
View File

@@ -4,40 +4,43 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link href="index.css" rel="stylesheet"> <link href="index.css" rel="stylesheet">
<title>chopster44.com</title> <title>chptr</title>
</head> </head>
<body> <body>
<header> <img src="https://chopster44.com/img/pfp.png" width="141" class="div logo">
<img src="https://chopster44.com/img/pfp.png" width="141"> <h1 class="div title">Chopster44</h1>
<div id="menu"> <div class="div nav">
<h1>Chopster44</h1> <p>Personal</p>
<a href="/#about">[About]</a> <a href="/index.html#about">[About]</a>
<a href="/blog">[Blog]</a> <a href="/blog">[Blog]</a>
<a href="/projects">[Projects]</a> <p>Interests</p>
<a href="/rockets">[Rockets]</a> <a href="/projects">[Projects]</a>
<a href="/linux">[Linux]</a> <a href="/rockets">[Rockets]</a>
</div> <a href="/linux">[Linux]</a>
</header> <p>Other Web</p>
<main> <a href="#">[Buttons]</a>
<a href="/contact">[Contact]</a>
</div>
<div class="div main">
<div id="about"> <div id="about">
<h2>About me</h2> <h2>About me</h2>
<p> <p>
I'm chopster44. <br> Hi, I'm chopster44 and this is my website. Here I put anything I have worked on/used/made which I think
I know a bit about programming, designing circuit boards, building rockets, breaking computers and playing bass. is cool. This isn't a professional site so things might get a bit messy/all over the place and hard to
navigate. I hope you enjoy looking around!
<br> <br>
This is my personal site where I put a bit of everything. Like most of my projects this is a work in progress. If you want to ask me something about anything here, take a look at <a href="contact">[Contact]</a>.
</p> </p>
</div> </div>
<div id="links"> <div class="changelog">
<h2>Contact</h2> <h2>Changes</h2>
<p>Messaging: <a href="mailto:oscar@chopster44.com">[email]</a> <a href="/contact.html#discord">[discord]</a> <a href="/contact.html#matrix">[matrix]</a></p> <div>
<p>Other links: <a href="https://www.instagram.com/chopster44/">[instagram]</a> <a href="https://github.com/chopster44">[github]</a></p> <p>2024-07-06 - new page layouts, updated some text</p>
<p>Other pages: <a href="imgs.html">[imgs]</a></p> </div>
</div> </div>
</main> </div>
<footer> <div class="div footer">
<p>&#169; chopster44</p> <p>&#169; chopster44 | Page last edited: 2024-07-06</p>
</footer> </div>
</body> </body>
</html> </html>

37
template.html
View File

@@ -7,21 +7,40 @@
<title>chptr</title> <title>chptr</title>
</head> </head>
<body> <body>
<img src="https://chopster44.com/img/pfp.png" width="141" class="logo"> <img src="https://chopster44.com/img/pfp.png" width="141" class="div logo">
<h1 class="title">Chopster44</h1> <h1 class="div title ">Chopster44</h1>
<div class="nav"> <div class="nav div">
<a href="/#about">[About]</a> <p>Personal</p>
<a href="/index.html#about">[About]</a>
<a href="/blog">[Blog]</a> <a href="/blog">[Blog]</a>
<p>Interests</p>
<a href="/projects">[Projects]</a> <a href="/projects">[Projects]</a>
<a href="/rockets">[Rockets]</a> <a href="/rockets">[Rockets]</a>
<a href="/linux">[Linux]</a> <a href="/linux">[Linux]</a>
<p>Other Web</p>
<a href="#">[Buttons]</a>
<a href="/contact">[Contact]</a>
</div> </div>
<div class="main"> <div class="main div">
<h2>A header!</h2> <div id="about">
<p>Some text</p> <h2>About me</h2>
<p>
Hi, I'm chopster44 and this is my website. Here I put anything I have worked on/used/made which I think
is cool. This isn't a professional site so things might get a bit messy/all over the place and hard to
navigate. I hope you enjoy looking around!
<br>
If you want to ask me something about anything here, take a look at <a href="contact">[Contact]</a>.
</p>
</div>
<div class="changelog">
<h2>Changes</h2>
<div>
<p>2024-07-06 - new page layouts, updated some text</p>
</div>
</div>
</div> </div>
<div class="footer"> <div class="footer div">
<p>&#169; chopster44</p> <p>&#169; chopster44 | Page last edited: 2024-07-06</p>
</div> </div>
</body> </body>
</html> </html>