site revamp with pure html and css, fixing missing links for bsky and twitch
This commit is contained in:
parent
a77f19ee3a
commit
201618e8f3
6 changed files with 317 additions and 451 deletions
370
main/index.css
370
main/index.css
|
|
@ -1,345 +1,93 @@
|
||||||
@import url(https://fonts.bunny.net/css?family=poppins);
|
@import url(https://fonts.bunny.net/css?family=azeret-mono);
|
||||||
|
*{
|
||||||
body {
|
font-family: 'Azeret Mono', monospace;
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
padding:0px;
|
|
||||||
margin:0px;
|
|
||||||
max-width:100vw;
|
|
||||||
overflow-x:hidden;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
}
|
||||||
@keyframes rotate {
|
body{
|
||||||
0% {transform: rotate(0deg);}
|
|
||||||
100% {transform: rotate(360deg);}
|
|
||||||
}
|
|
||||||
header {
|
|
||||||
width:92vw;
|
|
||||||
padding:6vh 4vw;
|
padding:6vh 4vw;
|
||||||
position:fixed;
|
}
|
||||||
|
/* The side navigation menu */
|
||||||
|
.sidebar {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 200px;
|
||||||
|
background-color: #5e344a
|
||||||
|
position: fixed;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
/* Sidebar links */
|
||||||
|
.sidebar a {
|
||||||
|
display: block;
|
||||||
|
color: black;
|
||||||
|
padding: 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
/* Active/current link */
|
||||||
|
.sidebar a.active {
|
||||||
|
background-color: #04AA6D;
|
||||||
|
color: #5e344a;
|
||||||
|
}
|
||||||
|
/* Links on mouse-over */
|
||||||
|
.sidebar a:hover:not(.active) {
|
||||||
|
background-color: #555;
|
||||||
|
color: #5e344a;
|
||||||
|
}
|
||||||
|
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
|
||||||
|
div.content {
|
||||||
|
margin-left: 200px;
|
||||||
|
padding: 16px 16px;
|
||||||
|
}
|
||||||
|
/* On screens that are less than 700px wide, make the sidebar into a topbar */
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.sidebar {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.sidebar a {float: left;}
|
||||||
|
div.content {margin-left: 0;}
|
||||||
|
}
|
||||||
|
/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.sidebar a {
|
||||||
|
text-align: center;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#home {
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
background:transparent;
|
|
||||||
color:#fff;
|
|
||||||
transition:0.4s ease-in-out;
|
|
||||||
z-index:2;
|
|
||||||
}
|
|
||||||
header table {
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
#logo {
|
|
||||||
width:20%;
|
|
||||||
}
|
|
||||||
#navigation {
|
|
||||||
width:80%;
|
|
||||||
}
|
|
||||||
#img_here {
|
|
||||||
width:60%;
|
|
||||||
height:90%;
|
|
||||||
background-size:contain !important;
|
|
||||||
background-repeat:no-repeat !important;
|
|
||||||
margin:0px auto;
|
|
||||||
}
|
|
||||||
#logo {
|
|
||||||
font-size:24px;
|
|
||||||
color:rgb(255, 44, 90);
|
|
||||||
}
|
|
||||||
#navigation {
|
|
||||||
text-align:right;
|
|
||||||
}
|
|
||||||
#navigation a {
|
|
||||||
color:inherit;
|
|
||||||
text-decoration:none;
|
|
||||||
padding:5px 10px;
|
|
||||||
border-bottom:2px solid transparent;
|
|
||||||
margin-left:2vw;
|
|
||||||
margin-right:2vw;
|
|
||||||
transition:0.4s ease-in-out;
|
|
||||||
}
|
|
||||||
#navigation a:hover{
|
|
||||||
border-bottom:2px solid #fff;
|
|
||||||
}
|
|
||||||
#top_part {
|
|
||||||
width:100%;
|
|
||||||
/* border:2vh solid #fff; */
|
|
||||||
}
|
|
||||||
#top_part tr td{
|
|
||||||
width:50%;
|
|
||||||
}
|
|
||||||
#about {
|
|
||||||
width:84% !important;
|
|
||||||
height:95vh;
|
|
||||||
display:flex;
|
|
||||||
flex-direction:column;
|
|
||||||
justify-content:center;
|
|
||||||
text-align:left;
|
|
||||||
padding:0px 8%;
|
|
||||||
}
|
|
||||||
#about h1 {
|
|
||||||
font-size:45px;
|
|
||||||
word-wrap:break-word;
|
|
||||||
}
|
|
||||||
#about table {
|
|
||||||
width:70%;
|
|
||||||
margin-top:4vh;
|
|
||||||
}
|
|
||||||
#about table tr td {
|
|
||||||
width:20% !important;
|
|
||||||
text-align:left;
|
|
||||||
}
|
|
||||||
.social {
|
|
||||||
color:rgb(255, 44, 90);
|
|
||||||
font-size:23px;
|
|
||||||
padding:12px 17px;
|
|
||||||
border-radius:50%;
|
|
||||||
background:transparent;
|
|
||||||
transition:0.4s ease-in-out;
|
|
||||||
font-weight:bold;
|
|
||||||
margin:0px 8px;
|
|
||||||
}
|
|
||||||
.social:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
color:#fff;
|
|
||||||
background:rgb(255, 44, 90);
|
|
||||||
box-shadow:0px 10px 30px rgba(255, 66, 107,0.8);
|
|
||||||
}
|
|
||||||
.btn_one {
|
|
||||||
font-size:18px;
|
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
color:rgb(255, 44, 90);
|
|
||||||
background:#fff;
|
|
||||||
border:3px solid rgb(255, 44, 90);
|
|
||||||
padding:8px 40px;
|
|
||||||
width:35%;
|
|
||||||
border-radius:80px;
|
|
||||||
font-weight:bold;
|
|
||||||
margin:2vh 0px;
|
|
||||||
transition:0.4s ease-in-out;
|
|
||||||
}
|
|
||||||
.btn_one:hover {
|
|
||||||
box-shadow:0px 10px 30px rgba(255, 44, 90, 0.8);
|
|
||||||
cursor:pointer;
|
|
||||||
color:#fff;
|
|
||||||
background:rgb(255, 44, 90);
|
|
||||||
}
|
|
||||||
#rightImage {
|
|
||||||
width:100%;
|
|
||||||
height:100vh;
|
|
||||||
background:linear-gradient(0deg,rgba(255, 44, 90, 0.8),rgba(255, 44, 90, 0.8)), url("images/xeniakiki.png") center center;
|
|
||||||
background-size:cover;
|
|
||||||
background-repeat:no-repeat;
|
|
||||||
}
|
}
|
||||||
#gallery {
|
#gallery {
|
||||||
width:92vw;
|
|
||||||
padding:6vh 4vw;
|
|
||||||
font-weight:bold;
|
|
||||||
}
|
}
|
||||||
#gallery h1 {
|
#gallery h1 {
|
||||||
padding:5px 0px;
|
|
||||||
border-bottom:4px solid rgb(255, 44, 90);
|
border-bottom:4px solid rgb(255, 44, 90);
|
||||||
width:6%;
|
width:6%;
|
||||||
}
|
}
|
||||||
#photos {
|
#photos {
|
||||||
width:100%;
|
width:50%;
|
||||||
columns:3;
|
|
||||||
column-gap:4%;
|
column-gap:4%;
|
||||||
z-index:1;
|
|
||||||
transition:0.4s ease-in-out;
|
transition:0.4s ease-in-out;
|
||||||
}
|
}
|
||||||
#photos img {
|
#photos img {
|
||||||
width:100%;
|
width:20%;
|
||||||
height:auto;
|
height:auto;
|
||||||
margin:4.5% 0px;
|
margin:4.5% 0px;
|
||||||
transition:0.4s ease-in-out;
|
transition:0.4s ease-in-out;
|
||||||
}
|
}
|
||||||
#photos img:hover {
|
#photos img:hover {
|
||||||
transform: scale(1.1);
|
transform: scale(2);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#comms {
|
|
||||||
width:92vw;
|
|
||||||
padding:6vh 4vw;
|
|
||||||
font-weight:bold;
|
|
||||||
}
|
|
||||||
#comms h1 {
|
|
||||||
padding:5px 0px;
|
|
||||||
border-bottom:4px solid rgb(255, 44, 90);
|
|
||||||
width:25%;
|
|
||||||
}
|
|
||||||
#contact {
|
#contact {
|
||||||
width:92vw;
|
width:auto;
|
||||||
padding:6vh 4vw;
|
|
||||||
}
|
}
|
||||||
#contact h1 {
|
#contact h1 {
|
||||||
padding:5px 0px;
|
|
||||||
border-bottom:4px solid rgb(255, 44, 90);
|
border-bottom:4px solid rgb(255, 44, 90);
|
||||||
width:10%;
|
width:10%;
|
||||||
}
|
}
|
||||||
#contact table {
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
#contact table tr td {
|
|
||||||
width:50%;
|
|
||||||
}
|
|
||||||
#inner_div table{
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
#inner_div table tr td{
|
|
||||||
font-weight:bold;
|
|
||||||
}
|
|
||||||
#inner_table tr td{
|
|
||||||
padding:10px 20px !important;
|
|
||||||
}
|
|
||||||
#footer {
|
#footer {
|
||||||
width:100%;
|
width:100%;
|
||||||
padding:10vh 0px;
|
padding:10vh 0px;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
}
|
}
|
||||||
#footer a {
|
|
||||||
color:rgb(255, 44, 90);
|
|
||||||
text-decoration:none;
|
|
||||||
}
|
|
||||||
::placeholder {
|
|
||||||
color:#000;
|
|
||||||
}
|
|
||||||
button:focus {
|
|
||||||
outline:none;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width:5px;
|
|
||||||
height:5px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: #f1f1f1;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: rgb(0, 0, 0);
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: rgba(0, 0, 0,0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1000px){
|
|
||||||
#photos {
|
|
||||||
columns:1;
|
|
||||||
column-gap:0%;
|
|
||||||
}
|
|
||||||
#photos img {
|
|
||||||
margin:2% 0px;
|
|
||||||
}
|
|
||||||
#photos img:hover {
|
|
||||||
transform: scale(1);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
#rightImage {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#top_part {
|
|
||||||
border:0px;
|
|
||||||
}
|
|
||||||
#top_part tr td{
|
|
||||||
width:100%;
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
#about {
|
|
||||||
width:92% !important;
|
|
||||||
height:75vh;
|
|
||||||
padding-top:20vh !important;
|
|
||||||
text-align:center;
|
|
||||||
padding:0px 4%;
|
|
||||||
}
|
|
||||||
#about table {
|
|
||||||
width:100%;
|
|
||||||
margin-top:6vh;
|
|
||||||
}
|
|
||||||
#about table tr td {
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
.btn_one {
|
|
||||||
padding:6px 30px;
|
|
||||||
width:60%;
|
|
||||||
margin:4vh auto;
|
|
||||||
box-shadow:0px 10px 20px rgba(255, 44, 90, 0.8);
|
|
||||||
background:rgb(255, 44, 90);
|
|
||||||
color:#fff;
|
|
||||||
}
|
|
||||||
.btn_one:hover {
|
|
||||||
box-shadow:0px 10px 40px rgba(255, 44, 90, 0.8);
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
#contact table tr td {
|
|
||||||
width:100%;
|
|
||||||
display:block;
|
|
||||||
}
|
|
||||||
#inner_table tr td{
|
|
||||||
padding:10px 0px !important;
|
|
||||||
}
|
|
||||||
#contact form input {
|
|
||||||
width:90%;
|
|
||||||
}
|
|
||||||
#contact form textarea {
|
|
||||||
width:90%;
|
|
||||||
}
|
|
||||||
#gallery h1 {
|
|
||||||
width:19%;
|
|
||||||
}
|
|
||||||
#comms h1 {
|
|
||||||
width:25%;
|
|
||||||
}
|
|
||||||
#contact h1 {
|
|
||||||
width:33%;
|
|
||||||
}
|
|
||||||
header {
|
|
||||||
width:96vw;
|
|
||||||
background:#fff;
|
|
||||||
padding:4vh 2vw;
|
|
||||||
position:absolute;
|
|
||||||
}
|
|
||||||
#header table tr td {
|
|
||||||
width:100%;
|
|
||||||
display:block;
|
|
||||||
text-align:center;
|
|
||||||
padding:15px 0px;
|
|
||||||
}
|
|
||||||
#navigation a {
|
|
||||||
color:#000;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Dropdown Button */
|
|
||||||
.dropbtn {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The container <div> - needed to position the dropdown content */
|
|
||||||
.dropdown {
|
|
||||||
position: center;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dropdown Content (Hidden by Default) */
|
|
||||||
.dropdown-content {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
background-color: purple;
|
|
||||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Links inside the dropdown */
|
|
||||||
.dropdown-content a {
|
|
||||||
color:inherit;
|
|
||||||
text-decoration:none;
|
|
||||||
padding:5px 10px;
|
|
||||||
border-bottom:2px solid transparent;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Change color of dropdown links on hover */
|
|
||||||
#dropdown-content a:hover {background-color: #grey;}
|
|
||||||
|
|
||||||
/* Show the dropdown menu on hover */
|
|
||||||
.dropdown:hover .dropdown-content {display: block;}
|
|
||||||
|
|
||||||
/* Change the background color of the dropdown button when the dropdown content is shown
|
|
||||||
.dropdown:hover .dropbtn {background-color: #3e8e41;}
|
|
||||||
*/
|
|
||||||
|
|
|
||||||
145
main/index.html
145
main/index.html
|
|
@ -1,77 +1,76 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>Alison Kit</title>
|
||||||
<title>Alison Kit</title>
|
<link rel="stylesheet" href="style.css">
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
</head>
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
<body>
|
||||||
<link rel="stylesheet" href="index.css">
|
<!-- The sidebar -->
|
||||||
</head>
|
<div class="sidenav">
|
||||||
<body>
|
<a href="#home">Home</a>
|
||||||
<header id="header">
|
<a href="#gallery">Gallery</a>
|
||||||
<table>
|
<a href="#about">About</a>
|
||||||
<tr>
|
<a href="#contact">Contact</a>
|
||||||
<td id="logo">Alison Kit</td>
|
|
||||||
<td id="navigation">
|
|
||||||
<a href="#gallery">Gallery</a>
|
|
||||||
<a href="#comms">Commission</a>
|
|
||||||
<a href="https://nuzzle.thecomicseries.com">Nuzzle</a>
|
|
||||||
<div class="dropdown">
|
|
||||||
<a class="dropbtn">Contact</a>
|
|
||||||
<div class="dropdown-content">
|
|
||||||
<a href="https://ko-fi.com/alisonkit">Ko-Fi</a>
|
|
||||||
<a href="https://cohost.org.alisonkit">Cohost</a>
|
|
||||||
<a rel="me" href="https://mastodon.art/@alisonkit">Mastodon</a>
|
|
||||||
<a href="https://bsky.app/alisonkit.com">Bluesky</a>
|
|
||||||
<a href="https://twitch.tv/alisonkit">Twitch</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</header>
|
|
||||||
<table id="top_part">
|
|
||||||
<tr>
|
|
||||||
<td id="about">
|
|
||||||
<h1>Artist, Writer, Red Panda.</h1>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td><a class="social" href="https://mastodon.art/@alisonkit"><i class="fab fa-mastodon"></i></a></td>
|
|
||||||
<td><a class="social" href="https://tumblr.com/alisonkit"><i class="fab fa-tumblr"></i></a></td>
|
|
||||||
<td><a class="social" href="https://cohost.org/alisonkit">Cohost</a></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
<td id="rightImage"></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<div id="gallery">
|
|
||||||
<h1>Gallery</h1>
|
|
||||||
<div id="photos">
|
|
||||||
<img onclick="magnify($(this).attr('src'))" src="images/xenia.png">
|
|
||||||
<img onclick="magnify($(this).attr('src'))" src="images/niko.png">
|
|
||||||
<img onclick="magnify($(this).attr('src'))" src="images/nona.png">
|
|
||||||
<img onclick="magnify($(this).attr('src'))" src="images/alisonterra.jpg">
|
|
||||||
<img onclick="magnify($(this).attr('src'))" src="images/sybil.png">
|
|
||||||
<img onclick="magnify($(this).attr('src'))" src="images/pueblomagico.png">
|
|
||||||
<img onclick="magnify($(this).attr('src'))" src="images/mystfawf.png">
|
|
||||||
<img onclick="magnify($(this).attr('src'))" src="images/akautomata.png">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="main"><!-- container to push stuff aside from nav bar -->
|
||||||
<div id="comms">
|
<!-- home -->
|
||||||
<h1>Commissions</h1>
|
<div id="home">
|
||||||
<h2>Commissions are open.</h2>
|
<br>
|
||||||
<button>Commission Info</button>
|
<h1>Alison Kit</h1>
|
||||||
<button>Commission Queue</button>
|
<h2>My WAH-bsite!</h2>
|
||||||
<p>For current commission slot availability, check social media for any annoucements.</p>
|
<p>I'm an illustrator, animator, and comic artist. I draw furry art and anything cringe.</p>
|
||||||
</div>
|
</div>
|
||||||
<div id="footer">
|
<!-- gallery -->
|
||||||
Alison Kit 2023 <br> website based on template by <a href="https://imfunniee.github.io">imfunniee</a>
|
<div id="gallery">
|
||||||
</div>
|
<h2>Gallery</h2>
|
||||||
<div style="text-align:right">
|
<div id="photos">
|
||||||
<a href="https://cd5k.net/tau/">τ</a>
|
<img onclick="magnify($(this).attr('src'))" src="images/xenia.png">
|
||||||
<script src="index.js" type="text/javascript"></script>
|
<img onclick="magnify($(this).attr('src'))" src="images/niko.png">
|
||||||
</body>
|
<img onclick="magnify($(this).attr('src'))" src="images/nona.png">
|
||||||
|
<img onclick="magnify($(this).attr('src'))" src="images/alisonterra.jpg">
|
||||||
|
<img onclick="magnify($(this).attr('src'))" src="images/sybil.png">
|
||||||
|
<img onclick="magnify($(this).attr('src'))" src="images/pueblomagico.png">
|
||||||
|
<img onclick="magnify($(this).attr('src'))" src="images/mystfawf.png">
|
||||||
|
<img onclick="magnify($(this).attr('src'))" src="images/akautomata.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- about-->
|
||||||
|
<div id="about">
|
||||||
|
<h2>About</h2>
|
||||||
|
<ul>
|
||||||
|
<li><p>25, she/they</p></li>
|
||||||
|
<li><p>EN/ES</p></li>
|
||||||
|
<li><p>Red Panda fursona</p></li>
|
||||||
|
<li><p>Latine</p></li>
|
||||||
|
<li><p>Very queer and autistic</p></li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<!-- Contact -->
|
||||||
|
<div id="contact">
|
||||||
|
<h2>Contact</h2>
|
||||||
|
<p><a href="mailto:alisonkit@tuta.io">Mail</a> >>> for commission contact</p>
|
||||||
|
<p><a href="https://ko-fi.com/alisonkit">Ko-Fi</a> >>> tip me!!!</p>
|
||||||
|
<p><a href="https://cohost.org.alisonkit">Cohost</a> >>> for thoughts</p>
|
||||||
|
<p><a rel="me" href="https://mastodon.art/@alisonkit">Mastodon</a> >>> fedi!!!</p>
|
||||||
|
<p><a href="https://bsky.app/alisonkit.net">Bluesky</a> >>> better twitter</p>
|
||||||
|
<p><a href="https://twitch.tv/alison_kit">Twitch</a> >>> Art Streams!</p>
|
||||||
|
<p><a href="https://twitter.com/kittwah">Twitter</a> ...sigh</p>
|
||||||
|
<p><a href="https:/https://discord.gg/t7X5uUEC/">Discord</a> >>> let's hang out!</p>
|
||||||
|
<br>
|
||||||
|
<h3>Commissions are open.</h3>
|
||||||
|
<p>For current commission slot availability, check social media for any annoucements.</p>
|
||||||
|
<h3>About my streams</h3>
|
||||||
|
<p><a href="live/">Visit this link to see more information about my streams.</a></p>
|
||||||
|
</div>
|
||||||
|
<div id="footer">
|
||||||
|
<p>Alison Kit 2024</p>
|
||||||
|
</div>
|
||||||
|
<div style="text-align:right">
|
||||||
|
<a href="https://cd5k.net/tau/">τ</a>
|
||||||
|
</div>
|
||||||
|
</div> <!-- main -->
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
var width = $(window).width();
|
|
||||||
window.onscroll = function(){
|
|
||||||
if ((width >= 1000)){
|
|
||||||
if(document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
|
|
||||||
$("#header").css("background","#fff");
|
|
||||||
$("#header").css("color","#000");
|
|
||||||
$("#header").css("box-shadow","0px 0px 20px rgba(0,0,0,0.09)");
|
|
||||||
$("#header").css("padding","4vh 4vw");
|
|
||||||
$("#navigation a").hover(function(){
|
|
||||||
$(this).css("border-bottom","2px solid rgb(255, 44, 90)");
|
|
||||||
},function(){
|
|
||||||
$(this).css("border-bottom","2px solid transparent");
|
|
||||||
});
|
|
||||||
}else{
|
|
||||||
$("#header").css("background","transparent");
|
|
||||||
$("#header").css("color","#fff");
|
|
||||||
$("#header").css("box-shadow","0px 0px 0px rgba(0,0,0,0)");
|
|
||||||
$("#header").css("padding","6vh 4vw");
|
|
||||||
$("#navigation a").hover(function(){
|
|
||||||
$(this).css("border-bottom","2px solid #fff");
|
|
||||||
},function(){
|
|
||||||
$(this).css("border-bottom","2px solid transparent");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function magnify(imglink){
|
|
||||||
$("#img_here").css("background",`url('${imglink}') center center`);
|
|
||||||
$("#magnify").css("display","flex");
|
|
||||||
$("#magnify").addClass("animated fadeIn");
|
|
||||||
setTimeout(function(){
|
|
||||||
$("#magnify").removeClass("animated fadeIn");
|
|
||||||
},800);
|
|
||||||
}
|
|
||||||
|
|
||||||
function closemagnify(){
|
|
||||||
$("#magnify").addClass("animated fadeOut");
|
|
||||||
setTimeout(function(){
|
|
||||||
$("#magnify").css("display","none");
|
|
||||||
$("#magnify").removeClass("animated fadeOut");
|
|
||||||
$("#img_here").css("background",`url('') center center`);
|
|
||||||
},800);
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(function(){
|
|
||||||
$("#loading").addClass("animated fadeOut");
|
|
||||||
setTimeout(function(){
|
|
||||||
$("#loading").removeClass("animated fadeOut");
|
|
||||||
$("#loading").css("display","none");
|
|
||||||
},800);
|
|
||||||
},1650);
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
|
||||||
$("a").on('click', function(event) {
|
|
||||||
if (this.hash !== "") {
|
|
||||||
event.preventDefault();
|
|
||||||
var hash = this.hash;
|
|
||||||
$('body,html').animate({
|
|
||||||
scrollTop: $(hash).offset().top
|
|
||||||
}, 1800, function(){
|
|
||||||
window.location.hash = hash;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
92
main/live/style.css
Normal file
92
main/live/style.css
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
@import url(https://fonts.bunny.net/css?family=azeret-mono);
|
||||||
|
*{
|
||||||
|
font-family: 'Azeret Mono', monospace;
|
||||||
|
background-color:#2b1d22;
|
||||||
|
color:#edd0db;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
padding:6vh 4vw;
|
||||||
|
background-color: rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6,p,a{
|
||||||
|
background-color: rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: #f98498;
|
||||||
|
border-bottom:4px solid #af3d56;
|
||||||
|
width:10%;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
color: #f98498;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color: #ef679b;
|
||||||
|
}
|
||||||
|
.sidenav {
|
||||||
|
width: 150px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
top: 25px;
|
||||||
|
left: 25px;
|
||||||
|
background: #6b3b46;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav a {
|
||||||
|
padding: 6px 8px 6px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #edd0db;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav a:hover {
|
||||||
|
color: #af3d56;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin-left: 140px; /* Same width as the sidebar + left position in px */
|
||||||
|
padding: 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-height: 450px) {
|
||||||
|
.sidenav {padding-top: 15px;}
|
||||||
|
.sidenav a {font-size: 18px;}
|
||||||
|
}
|
||||||
|
#home {
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
#home h2{
|
||||||
|
width:25%;
|
||||||
|
}
|
||||||
|
#gallery {
|
||||||
|
width:auto;
|
||||||
|
}
|
||||||
|
#photos {
|
||||||
|
width:100%;
|
||||||
|
columns:3;
|
||||||
|
column-gap:4%;
|
||||||
|
transition:0.4s ease-in-out;
|
||||||
|
}
|
||||||
|
#photos img {
|
||||||
|
width:100%;
|
||||||
|
height:auto;
|
||||||
|
margin:4.5% 0px;
|
||||||
|
transition:0.4s ease-in-out;
|
||||||
|
}
|
||||||
|
#photos img:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#contact {
|
||||||
|
width:auto;
|
||||||
|
}
|
||||||
|
#footer {
|
||||||
|
width:100%;
|
||||||
|
padding:10vh 0px;
|
||||||
|
text-align:center;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
2
main/robots.txt
Normal file
2
main/robots.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
User-agent: *
|
||||||
|
Disallow: /
|
||||||
92
main/style.css
Normal file
92
main/style.css
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
@import url(https://fonts.bunny.net/css?family=azeret-mono);
|
||||||
|
*{
|
||||||
|
font-family: 'Azeret Mono', monospace;
|
||||||
|
background-color:#2b1d22;
|
||||||
|
color:#edd0db;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
padding:6vh 4vw;
|
||||||
|
background-color: rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6,p,a{
|
||||||
|
background-color: rgba(0,0,0,0);
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
color: #f98498;
|
||||||
|
border-bottom:4px solid #af3d56;
|
||||||
|
width:10%;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
color: #f98498;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color: #ef679b;
|
||||||
|
}
|
||||||
|
.sidenav {
|
||||||
|
width: 150px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
top: 25px;
|
||||||
|
left: 25px;
|
||||||
|
background: #6b3b46;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav a {
|
||||||
|
padding: 6px 8px 6px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #edd0db;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav a:hover {
|
||||||
|
color: #af3d56;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin-left: 140px; /* Same width as the sidebar + left position in px */
|
||||||
|
padding: 0px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-height: 450px) {
|
||||||
|
.sidenav {padding-top: 15px;}
|
||||||
|
.sidenav a {font-size: 18px;}
|
||||||
|
}
|
||||||
|
#home {
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
#home h2{
|
||||||
|
width:25%;
|
||||||
|
}
|
||||||
|
#gallery {
|
||||||
|
width:auto;
|
||||||
|
}
|
||||||
|
#photos {
|
||||||
|
width:100%;
|
||||||
|
columns:3;
|
||||||
|
column-gap:4%;
|
||||||
|
transition:0.4s ease-in-out;
|
||||||
|
}
|
||||||
|
#photos img {
|
||||||
|
width:100%;
|
||||||
|
height:auto;
|
||||||
|
margin:4.5% 0px;
|
||||||
|
transition:0.4s ease-in-out;
|
||||||
|
}
|
||||||
|
#photos img:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#contact {
|
||||||
|
width:auto;
|
||||||
|
}
|
||||||
|
#footer {
|
||||||
|
width:100%;
|
||||||
|
padding:10vh 0px;
|
||||||
|
text-align:center;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue