matkapmoding

This commit is contained in:
MeowcaTheoRange 2024-08-21 10:51:57 -05:00
parent 54b255aa17
commit e350c5677c
10 changed files with 94 additions and 27 deletions

View file

@ -40,7 +40,7 @@ html {
body { body {
margin: 0; margin: 0;
padding: 16px; padding: 8px 16px;
box-sizing: border-box; box-sizing: border-box;
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
@ -49,7 +49,7 @@ body {
font-family: var(--font-text-legible); font-family: var(--font-text-legible);
} }
main { main, div.fakemain {
text-align: start; text-align: start;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@ -60,9 +60,14 @@ main {
color: var(--foreground); color: var(--foreground);
min-height: 100%; min-height: 100%;
padding: 8px; padding: 8px;
margin: 8px 0;
box-shadow: 4px 4px 0 var(--foreground); box-shadow: 4px 4px 0 var(--foreground);
} }
div.fakemain {
min-height: unset;
}
section { section {
margin: 1em; margin: 1em;
} }
@ -107,3 +112,19 @@ hr {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.web-button {
position: relative;
filter: grayscale(1);
left: 0;
top: 0;
transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.web-button:hover {
left: -4px;
top: -4px;
z-index: 999;
filter: grayscale(0);
box-shadow: 4px 4px 16px #0008;
}

View file

@ -27,11 +27,4 @@
</div> </div>
<img class="AboutboxElementImage" src="/assets/icons/links.png" /> <img class="AboutboxElementImage" src="/assets/icons/links.png" />
</div> </div>
<div class="AboutboxElement">
<div class="AboutboxElementText">
<h1><a href="/about/">ABOUT</a></h1>
<p>Who I am.</p>
</div>
<img class="AboutboxElementImage" src="/assets/icons/about.png" />
</div>
</div> </div>

View file

@ -1,13 +1,13 @@
<hr />
<footer> <footer>
<section> <section>
<p>abtmtr.link v13 &copy; MeowcaTheoRange 2024</p> <h2>abtmtr.link v13</h2>
<p>&copy; <a href="mailto:me@abtmtr.link">MeowcaTheoRange</a> 2023-2024</p>
<p>Licensed under the <a href="https://cdn.abtmtr.link/licenses/kkpl/license-v2.2.txt">Karkat Public License</a>.</p> <p>Licensed under the <a href="https://cdn.abtmtr.link/licenses/kkpl/license-v2.2.txt">Karkat Public License</a>.</p>
<p>Git repository: <a href="https://git.abtmtr.link/MeowcaTheoRange/abtmtr-v13" target="_blank">MeowcaTheoRange/abtmtr-v13</a></p> <p>Git repository: <a href="https://git.abtmtr.link/MeowcaTheoRange/abtmtr-v13" target="_blank">MeowcaTheoRange/abtmtr-v13</a></p>
</section> </section>
<section style="text-align: center;"> <section style="text-align: center;">
<% buttons.forEach((button) => { %> <% buttons.forEach((button) => { %>
<a href="<%= button.href %>"><img src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a> <a href="<%= button.href %>"><img class="web-button" src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
<% }) %> <% }) %>
</section> </section>
</footer> </footer>

View file

@ -8,9 +8,9 @@
</div> </div>
<div class="HeaderLinks"> <div class="HeaderLinks">
<a class="HeaderLinksLink" href="/">Home</a> <a class="HeaderLinksLink" href="/">Home</a>
<a class="HeaderLinksLink" href="/matkap/">matkap zone</a>
<a class="HeaderLinksLink" href="/services/">Services</a> <a class="HeaderLinksLink" href="/services/">Services</a>
<a class="HeaderLinksLink" href="/computers/">Computers</a> <a class="HeaderLinksLink" href="/computers/">Computers</a>
<a class="HeaderLinksLink" href="/links/">Links</a> <a class="HeaderLinksLink" href="/links/">Links</a>
<a class="HeaderLinksLink" href="/about/">About</a>
</div> </div>
</div> </div>

View file

@ -10,14 +10,18 @@
</head> </head>
<body> <body>
<main> <div class="fakemain">
<%- include("../../components/header.ejs") %> <%- include("../../components/header.ejs") %>
</div>
<main>
<p class="tagline">Who I am.</p> <p class="tagline">Who I am.</p>
<section> <section>
<p>abtmtr.link is a website. that's for sure</p> <p>abtmtr.link is a website. that's for sure</p>
</section> </section>
<%- include("../../components/footer.ejs") %>
</main> </main>
<div class="fakemain">
<%- include("../../components/footer.ejs") %>
</div>
<script src="/assets/script.js"></script> <script src="/assets/script.js"></script>
</body> </body>

View file

@ -10,16 +10,20 @@
</head> </head>
<body> <body>
<main> <div class="fakemain">
<%- include("../../components/header.ejs") %> <%- include("../../components/header.ejs") %>
</div>
<main>
<p class="tagline">Computers I own, use, and host stuff on.</p> <p class="tagline">Computers I own, use, and host stuff on.</p>
<div class="Aboutbox"> <div class="Aboutbox">
<% computers.forEach((computer) => { %> <% computers.forEach((computer) => { %>
<%- include("../../components/computer-boxes.ejs", computer) %> <%- include("../../components/computer-boxes.ejs", computer) %>
<% }) %> <% }) %>
</div> </div>
<%- include("../../components/footer.ejs") %>
</main> </main>
<div class="fakemain">
<%- include("../../components/footer.ejs") %>
</div>
<script src="/assets/script.js"></script> <script src="/assets/script.js"></script>
</body> </body>

View file

@ -10,8 +10,10 @@
</head> </head>
<body> <body>
<main> <div class="fakemain">
<%- include("../components/header.ejs") %> <%- include("../components/header.ejs") %>
</div>
<main>
<% statuses.forEach((status) => { %> <% statuses.forEach((status) => { %>
<div class="boxThing"> <div class="boxThing">
<h1><%= status.title %></h1> <h1><%= status.title %></h1>
@ -21,8 +23,10 @@
<% }) %> <% }) %>
<p class="tagline">abtmtr.link is a domain for all kinds of services, from web search to live-streaming.</p> <p class="tagline">abtmtr.link is a domain for all kinds of services, from web search to live-streaming.</p>
<%- include("../components/about-boxes.ejs") %> <%- include("../components/about-boxes.ejs") %>
<%- include("../components/footer.ejs") %>
</main> </main>
<div class="fakemain">
<%- include("../components/footer.ejs") %>
</div>
<script src="/assets/script.js"></script> <script src="/assets/script.js"></script>
</body> </body>

View file

@ -10,16 +10,20 @@
</head> </head>
<body> <body>
<main> <div class="fakemain">
<%- include("../../components/header.ejs") %> <%- include("../../components/header.ejs") %>
</div>
<main>
<p class="tagline">Where I am on the Internet.</p> <p class="tagline">Where I am on the Internet.</p>
<div class="Aboutbox"> <div class="Aboutbox">
<% links.forEach((link) => { %> <% links.forEach((link) => { %>
<%- include("../../components/link-boxes.ejs", link) %> <%- include("../../components/link-boxes.ejs", link) %>
<% }) %> <% }) %>
</div> </div>
<%- include("../../components/footer.ejs") %>
</main> </main>
<div class="fakemain">
<%- include("../../components/footer.ejs") %>
</div>
<script src="/assets/script.js"></script> <script src="/assets/script.js"></script>
</body> </body>

View file

@ -10,6 +10,9 @@
</head> </head>
<body> <body>
<div class="fakemain">
<a href="/">&lt; back to abtmtr.link</a>
</div>
<main> <main>
<div class="header"> <div class="header">
<p>welcome to ...</p> <p>welcome to ...</p>
@ -18,7 +21,7 @@
</div> </div>
<p style="text-align: center;font-size: 12px;">this website is best viewed on a computer</p> <p style="text-align: center;font-size: 12px;">this website is best viewed on a computer</p>
<h1>hey i'm mat what's up?</h1> <h1>hey i'm mat what's up?</h1>
<p style="text-align: right;letter-spacing: 3px;margin-right: 38px">you can call me mat but some call me matkap</p> <p style="text-align: right;letter-spacing: 3px;margin-right: 38px">you can call me mat but most call me matkap</p>
<div class="box"> <div class="box">
<p><b>ABOUT ME</b></p> <p><b>ABOUT ME</b></p>
<ul> <ul>
@ -26,8 +29,7 @@
<li>i go by he/they <b>pronou</b>ns</li> <li>i go by he/they <b>pronou</b>ns</li>
<li>im 17 (minor ! !!! !!!)</li> <li>im 17 (minor ! !!! !!!)</li>
<li>i tied my hair once and i never stopped doing it</li> <li>i tied my hair once and i never stopped doing it</li>
<li>my name is <b>mattias kopernicus</b> and i think it's pretentious as fuck</li> <li>my favorite artists are <a href="https://brningbrainsoundindustries.bandcamp.com/">BRN1NG BRA1N SOUND INDUSTRIES</a> <a href="https://femtanyl.bandcamp.com/">femtanyl</a> <a href="https://klausveen.bandcamp.com/">klaus veen</a> and others</li>
<li>my favorite artists are <a href="https://brningbrainsoundindustries.bandcamp.com/">BRN1NG BRA1N SOUND INDUSTRIES</a> <a href="https://femtanyl.bandcamp.com/">femtanyl</a> and others</li>
<li>i watch some youtube. <a href="https://youtube.com/@kurtisconner">kurtis conner</a> and <a href="https://youtube.com/@Danny-Gonzalez">danny gonzalez</a> are cool</li> <li>i watch some youtube. <a href="https://youtube.com/@kurtisconner">kurtis conner</a> and <a href="https://youtube.com/@Danny-Gonzalez">danny gonzalez</a> are cool</li>
<li><a href="https://twitter.com/mattkp134">follow me on twitter</a></li> <li><a href="https://twitter.com/mattkp134">follow me on twitter</a></li>
<li><a href="https://spectrum.avris.it/9Z96">my spectrum</a> and also <a href="https://cake.avris.it/bB5">have a slice of my cake!</a></li> <li><a href="https://spectrum.avris.it/9Z96">my spectrum</a> and also <a href="https://cake.avris.it/bB5">have a slice of my cake!</a></li>
@ -36,14 +38,29 @@
<p><a href="https://users3.smartgb.com/g/g.php?a=s&i=this-is-fake-and-im-not-very-creative-give-me-a-break">sign my guestbook</a></p> <p><a href="https://users3.smartgb.com/g/g.php?a=s&i=this-is-fake-and-im-not-very-creative-give-me-a-break">sign my guestbook</a></p>
</div> </div>
<p>this is my website! i sure hope you like it.</p> <p>this is my website! i sure hope you like it.</p>
<img src="/assets/matkap/me.jpg" style="width: calc(66% - 32px); height: 200px;" /> <p>my name is <b>mattias kopernicus</b> and i think it's pretentious as fuck.</p>
<img src="/assets/matkap/me.jpg" width="463" height="200" />
<center><p><b><i>this is me</i></b></p></center> <center><p><b><i>this is me</i></b></p></center>
<p>i am a 🌈g<b>ay dude</b>🌈 i sorta like men but also i'm aroace so DON'T flirt with me !!!! thank you</p>
<div class="box2">
<h2>dni list</h2>
<ul>
<li>*-phobic</li>
<li><a href="https://basic-dni.crd.co/">basically everything here</a> except the toothpaste flag stuff. i love that flag</li>
</ul>
</div>
<h2>now playing</h2>
<p>classical by klaus veen</p>
<iframe width="200" height="200" src="https://www.youtube.com/embed/fzynKBSruwY?si=y6J2OVNajxPVbG24&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h2>this site is a work in progress</h2> <h2>this site is a work in progress</h2>
<p>im not very good at this website stuff someone help me</p> <p>im not very good at this website stuff someone help me</p>
<script type="text/javascript" src="https://counter.websiteout.com/js/6/10/0/0"></script> <script type="text/javascript" src="https://counter.websiteout.com/js/6/10/0/0"></script>
</main> </main>
<script src="/assets/script.js"></script> <script src="/assets/script.js"></script>
<style> <style>
main {
width: 768px;
}
@keyframes flash { @keyframes flash {
0% { 0% {
color: var(--grey); color: var(--grey);
@ -71,6 +88,22 @@
} }
} }
.box2 {
display: inline-block;
width: 100%;
border: 1px solid currentColor;
box-sizing: border-box;
padding: 8px;
margin-top: 8px;
:first-child {
margin-top: 0;
}
:last-child {
margin-bottom: 0;
}
}
.header { .header {
border: 1px solid currentColor; border: 1px solid currentColor;
padding: 8px; padding: 8px;

View file

@ -10,16 +10,20 @@
</head> </head>
<body> <body>
<main> <div class="fakemain">
<%- include("../../components/header.ejs") %> <%- include("../../components/header.ejs") %>
</div>
<main>
<p class="tagline">Stuff I host here on abtmtr.link.</p> <p class="tagline">Stuff I host here on abtmtr.link.</p>
<div class="Aboutbox"> <div class="Aboutbox">
<% services.forEach((service) => { %> <% services.forEach((service) => { %>
<%- include("../../components/service-boxes.ejs", {...service, arr: visibility}) %> <%- include("../../components/service-boxes.ejs", {...service, arr: visibility}) %>
<% }) %> <% }) %>
</div> </div>
<%- include("../../components/footer.ejs") %>
</main> </main>
<div class="fakemain">
<%- include("../../components/footer.ejs") %>
</div>
<script src="/assets/script.js"></script> <script src="/assets/script.js"></script>
</body> </body>