update landing page+sidebar

This commit is contained in:
ktyl 2021-12-22 22:09:19 +00:00
parent 185c9bbe6d
commit 6b93fb69b8
4 changed files with 60 additions and 13 deletions

50
src/inc_css/landing.css Normal file
View File

@ -0,0 +1,50 @@
.landing {
margin-top: 10%;
text-align: center;
}
.landing .fsText a {
color: var(--foreground-inactive);
font-size: 2em;
transform: translate(0,50%);
transition: all 0.3s;
}
.landing .fsText a:hover {
color: var(--accent);
}
.landing ul {
width: 100%;
padding: .5em 0 0;
margin: 0;
}
.landing li a {
position: relative;
font-size: 2.5em;
margin: 0 .2em;
color: var(--foreground-inactive);
}
.landing li a:hover {
transform: translateY(-10%);
color: var(--accent);
}
.landing .socials {
position: relative;
background-color: var(--clear);
top: 1em;
left: auto;
right: auto;
text-align: center;
}
.landing .socials i {
color: var(--foreground-inactive);
font-size: 3.5em;
padding: 0 .07em;
}

View File

@ -32,6 +32,10 @@
transition: transform 0.3s; transition: transform 0.3s;
} }
.sidebar li a::before {
content: "/";
}
.sidebar li:hover { .sidebar li:hover {
transform: translate(1vmax); transform: translate(1vmax);
} }

View File

@ -1,10 +1,7 @@
<div class="sidebarContent"> <div class="sidebarContent">
<ul> <ul>
<li><a href="about.html" class="fsText">/about</a></li> <li><a href="about.html" class="fsText">about</a></li>
<li><a href="gallery.html" class="fsText">/gallery</a></li> <li><a href="gallery.html" class="fsText">gallery</a></li>
<li><a href="blog.html" class="fsText">/blog</a></li> <li><a href="blog.html" class="fsText">blog</a></li>
<li><a href="contact.html" class="fsText">/contact</a></li>
</ul> </ul>
</div> </div>
#include socials.html

View File

@ -6,18 +6,14 @@
<body> <body>
<title>ktyl ~ home</title> <title>ktyl ~ home</title>
<div class="sidebar"> <div class="landing page">
#include titlestart.html #include titlestart.html
#include titleend.html #include titleend.html
#include sidebarlinks.html #include sidebarlinks.html
</div>
<div class="page">
<h1>cats stuff</h1>
<p> <p>
hi, im cat and i do things and stuff. eventually i want to make this an actual, useful landing page for people interested in me and what i do. unfortunately, im very scatterbrained and not very organised! as a result, this is just one of myriad ongoing projects that i constantly try to chip away at, to varying degrees of success. #include socials.html
</p> </p>
</div> </div>