code refactoring, new videos, new themes (not implemented yet), bring, new font
This commit is contained in:
parent
eef0452815
commit
3915cbf275
45
art.html
45
art.html
|
|
@ -3,34 +3,39 @@
|
|||
|
||||
<head>
|
||||
<title>Art - Gnawmon</title>
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<link id="theme" rel="stylesheet" href="/assets/css/style.css">
|
||||
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
|
||||
<script src="/assets/js/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<video autoplay muted loop class="bgvideo" id="bgvideo">
|
||||
<source src="Untitled.mp4" type="video/mp4">
|
||||
<video style="display: none;" muted loop autoplay class="bgvideo" id="bgvideo">
|
||||
<source src="/assets/videos/plasma.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<div class="navbar"> <a href="index.html">Main Page </a> <a href="projects.html
|
||||
">Projects </a></a> <a id="active" href="art.html
|
||||
">Art </a> <img src="assets/svg/gear.svg" class="gear" onclick="showSettings()" /></div>
|
||||
<div style="display: none;" class="settings" id="settings">
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="enableVideoBackground">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<p>Video Background</p>
|
||||
<br>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="enableRandomBackrounds">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<p>Random Backgrounds</p>
|
||||
</div>
|
||||
<div class="middlething">
|
||||
<img class="banner" id="banner" style="display: none;" src="/assets/images/banner.png">
|
||||
<div class="navbar"> <a href="index.html">Main Page </a> <a href="projects.html
|
||||
">Projects </a> <a id="active" href="art.html">Art </a> <img src="assets/svg/gear.svg" class="gear" onclick="showSettings()"/></div>
|
||||
<div style="display: none;" class="settings" id="settings">
|
||||
<p class=" windowbar hide " style="width: 100%; margin-top: 0px;"><img src="/assets/images/osxbuttons.png" class="hide"> Settings</p><br>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="enableVideoBackground">
|
||||
<span class="slider"></span>
|
||||
</label> <p>Video Background</p>
|
||||
<br>
|
||||
<label class="switch" >
|
||||
<input type="checkbox" id="backgroundVideoToggle">
|
||||
<span class="slider"></span>
|
||||
</label> <p>Random Backgrounds</p> <br>
|
||||
<select style="display: none;" id="themes" onchange = "changeTheme()">
|
||||
<option value="osx">OSX</option>
|
||||
<option value="glass">Glass</option>
|
||||
<option value="minewatch">MineWatch</option>
|
||||
<option value="vern">~vern</option>
|
||||
</select> <p style="display: none;">Theme</p>
|
||||
</div>
|
||||
<div class="artShowcases">
|
||||
<img src="assets/images/awdmodathon1_v5.png">
|
||||
<img src="assets/images/vaporwave_v2_t1.png">
|
||||
|
|
@ -46,7 +51,7 @@
|
|||
<img src="assets/images/forg.png">
|
||||
<img src="assets/images/forg2.png">
|
||||
</div>
|
||||
<p class="paragraph bottomtext"><a href="http://git.vern.cc/gnawmon/website" class="link">source code</a></p>
|
||||
<div class="bottomThingThatEveryWebsiteHas"> <p>written by hand <br> some css in the ~vern theme is taken from <a class="link" href="http://git.vern.cc/vern/website">here</a> <br> <a href="http://git.vern.cc/gnawmon/website" class="link">source code</a> is avaible here, not sure why anybody would want to check it but here it is </p></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 635 B |
Binary file not shown.
|
After Width: | Height: | Size: 594 B |
Binary file not shown.
|
After Width: | Height: | Size: 292 B |
Binary file not shown.
|
After Width: | Height: | Size: 434 B |
Binary file not shown.
|
After Width: | Height: | Size: 515 B |
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
|
|
@ -0,0 +1,579 @@
|
|||
:root {
|
||||
|
||||
--accent-color: rgb(227, 154, 228);
|
||||
--white: rgb(255, 255, 252);
|
||||
--overlay: #00000069;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background: url("/assets/blocks/a_dirt_dark.png");
|
||||
|
||||
|
||||
}
|
||||
.gallery,
|
||||
.showcase span,
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p,
|
||||
li {
|
||||
font-family: sans-serif;
|
||||
|
||||
font-variant: normal;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
button {
|
||||
background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background-position: 0% 0%;
|
||||
background-size: 100% 200%;
|
||||
border-bottom: 5px solid var(--accent-color);
|
||||
border-radius: 2px;
|
||||
transition: 0.3s;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-position: 0% 0%;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
button:active {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), var(--overlay);
|
||||
|
||||
z-index: 3;
|
||||
}
|
||||
.navbar::after{
|
||||
content: "Gnawmon's fsdafssdsdfsWebsite"
|
||||
}
|
||||
.navbar a {
|
||||
color: rgb(255, 218, 6);
|
||||
padding: 10px;
|
||||
text-decoration: underline;
|
||||
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 8px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.middlething {
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.454);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bgvideo {
|
||||
filter: brightness(80%);
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.gallery {
|
||||
|
||||
transition: all 1s ease;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
backdrop-filter: blur(50px);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(0, 0, 0, 0.369);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.div-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.dropdown {
|
||||
margin-left: 10px;
|
||||
border-bottom: 3px solid var(--accent-color);
|
||||
border-radius: 1px;
|
||||
cursor: pointer;
|
||||
transition: border-bottom 0.2s ease;
|
||||
user-select: none;
|
||||
text-shadow: 0 0 0.2em rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.dropdown:hover {
|
||||
border-bottom: 13px solid var(--accent-color);
|
||||
}
|
||||
|
||||
@-webkit-keyframes glow {
|
||||
from {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
|
||||
}
|
||||
|
||||
to {
|
||||
text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6, 0 0 40px #ff4da6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideaway {
|
||||
from {
|
||||
display: block;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(40px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(65, 65, 65);
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(155, 153, 153);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.gimage:hover {
|
||||
width: 1500px;
|
||||
position: fixed;
|
||||
float: none;
|
||||
transition: height 4s;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* bring your own prefixes */
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.gimage {
|
||||
transition: height 4s;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotateY(0deg);
|
||||
rotate: 0deg;
|
||||
}
|
||||
|
||||
to {
|
||||
|
||||
|
||||
transform: rotateY(360deg);
|
||||
rotate: -360deg;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rotate {
|
||||
animation: rotation 10s linear infinite;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: rgba(32, 32, 32, 0.507);
|
||||
|
||||
width: 24%;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 2px solid gray;
|
||||
outline: 0;
|
||||
font-size: 1.3rem;
|
||||
color: white;
|
||||
padding: 7px;
|
||||
transition: border-bottom 1s;
|
||||
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-bottom: 2px solid var(--accent-color);
|
||||
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: var(--white);
|
||||
border-bottom: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: #3d3d3dd3;
|
||||
width: 190px;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.invert {
|
||||
padding: 2px;
|
||||
color: var(--white);
|
||||
backdrop-filter: blur(60px);
|
||||
}
|
||||
|
||||
.contact {
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
backdrop-filter: blur(5px);
|
||||
vertical-align: baseline;
|
||||
margin-top: 2px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
}
|
||||
|
||||
.contact:hover {
|
||||
margin-left: 12px;
|
||||
box-shadow: 0 0 20px 1px var(--accent-color);
|
||||
backdrop-filter: blur(60px);
|
||||
border: rgb(200, 200, 200) 2px solid;
|
||||
}
|
||||
|
||||
.contact image {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.contact p {
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
|
||||
line-height: 10px;
|
||||
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.contact a {
|
||||
|
||||
display: block;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.smalimages {
|
||||
backdrop-filter: blur(60px);
|
||||
align-self: center;
|
||||
position: relative;
|
||||
image-rendering: pixelated;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
border-radius: 3px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.smalimages img {
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
}
|
||||
|
||||
.smalimages img:hover {
|
||||
position: relative;
|
||||
scale: 1.3;
|
||||
height: fit-content;
|
||||
filter: drop-shadow(8px 10px 0px var(--accent-color));
|
||||
position: relative;
|
||||
border: 0.2px solid rgba(255, 255, 255, 0.726);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.bottomtext {
|
||||
backdrop-filter: blur(60px);
|
||||
text-align: center;
|
||||
margin-top: 4%;
|
||||
bottom: 0;
|
||||
background: var(--overlay);
|
||||
}
|
||||
|
||||
.emote {
|
||||
width: 30px;
|
||||
margin-left: 3px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgb(9, 24, 37);
|
||||
|
||||
}
|
||||
|
||||
.showcases {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
.showcase {
|
||||
float: left;
|
||||
box-shadow: 0 0 0.2em rgb(0, 0, 0);
|
||||
border-radius: 3px;
|
||||
width: 800px;
|
||||
margin: 10px;
|
||||
margin-top: 20px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.showcase img:not(.background) {
|
||||
|
||||
padding: 10px;
|
||||
width: 60%;
|
||||
padding-left: 20px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.showcase span {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
overflow: inherit;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
white-space: normal;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.showcase h2 {
|
||||
border-bottom: 2px white solid;
|
||||
margin-left: 10px;
|
||||
border-bottom: 4px solid var(--accent-color);
|
||||
user-select: none;
|
||||
text-shadow: 0 0 0.2em rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.showcase .background {
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#relaunch {
|
||||
background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/alphaver.png");
|
||||
background-size: 50%;
|
||||
}
|
||||
|
||||
#minewatchWiki{
|
||||
background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/seahaven.png");
|
||||
background-size: 100%;
|
||||
background-position: 20 0px;
|
||||
}
|
||||
#doom {
|
||||
background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/doomBg.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
#blur {
|
||||
background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 1));
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.pausetext {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pausetext:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings {
|
||||
z-index: 11;
|
||||
position: fixed;
|
||||
width: 20%;
|
||||
background: #2929293c;
|
||||
border-radius: 3px;
|
||||
margin-left: auto;
|
||||
right: 0;
|
||||
top: 4%;
|
||||
transition: ease 0.2s all;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.532);
|
||||
}
|
||||
|
||||
.settings p {
|
||||
display: inline-block;
|
||||
transform: translateY(-11px);
|
||||
}
|
||||
|
||||
.gear {
|
||||
float: right;
|
||||
width: 20px;
|
||||
margin-top: 6px;
|
||||
margin-right: 10px;
|
||||
transition: ease-in-out 1s;
|
||||
}
|
||||
|
||||
.gear:hover {
|
||||
cursor: pointer;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.switch {
|
||||
|
||||
--button-width: 3.5em;
|
||||
--button-height: 2em;
|
||||
--toggle-diameter: 1.5em;
|
||||
--button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
|
||||
--toggle-shadow-offset: 10px;
|
||||
--toggle-wider: 3em;
|
||||
--color-grey: #cccccc;
|
||||
|
||||
}
|
||||
|
||||
.slider {
|
||||
margin-top: 4%;
|
||||
margin-left: 2%;
|
||||
display: inline-block;
|
||||
width: var(--button-width);
|
||||
height: var(--button-height);
|
||||
background-color: var(--color-grey);
|
||||
border-radius: calc(var(--button-height) / 2);
|
||||
position: relative;
|
||||
transition: 0.3s all ease-in-out;
|
||||
}
|
||||
|
||||
.slider::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: var(--toggle-diameter);
|
||||
height: var(--toggle-diameter);
|
||||
background-color: #fff;
|
||||
border-radius: calc(var(--toggle-diameter) / 2);
|
||||
position: absolute;
|
||||
top: var(--button-toggle-offset);
|
||||
transform: translateX(var(--button-toggle-offset));
|
||||
box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
||||
transition: 0.3s all ease-in-out;
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked+.slider {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked+.slider::after {
|
||||
transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
|
||||
box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:active+.slider::after {
|
||||
width: var(--toggle-wider);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked:active+.slider::after {
|
||||
transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
|
||||
}
|
||||
|
||||
.artShowcases {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto ;
|
||||
margin: auto;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.artShowcases img{
|
||||
margin-top: 20px;
|
||||
width: 500px;
|
||||
height: auto;
|
||||
box-shadow: 0.2em 0.3em 3em rgb(0, 0, 0);
|
||||
border-radius: 7px;
|
||||
transition: scale 0.2s ease;
|
||||
background: rgba(0, 0, 0, 0.532);
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
|
||||
.artShowcases img:hover {
|
||||
scale: 1.2;
|
||||
}
|
||||
.windowbar img {
|
||||
display: none;
|
||||
}
|
||||
.banner{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide {display: none;}
|
||||
|
|
@ -0,0 +1,610 @@
|
|||
:root {
|
||||
--cobblestone: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/blocks/cobblestone.png");
|
||||
--dirt: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/blocks/dirt.png");
|
||||
--grass: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/assets/blocks/grass_side.png");
|
||||
--obsidian: url("/assets/blocks/obsidian.png");
|
||||
--stone: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("/assets/blocks/stone.png");
|
||||
--dirt-scale: 3%;
|
||||
--accent-color: #64c9fb;
|
||||
--white: rgb(255, 255, 252);
|
||||
--overlay: #00000069;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
|
||||
z-index: -1;
|
||||
image-rendering: pixelated;
|
||||
background: var(--dirt);
|
||||
background-size: 3%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 39px;
|
||||
|
||||
background-image: var(--grass);
|
||||
|
||||
background-size: var(--dirt-scale);
|
||||
z-index: -1;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.showcase span,
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p,
|
||||
li {
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
|
||||
font-variant: normal;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
button {
|
||||
background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background-position: 0% 0%;
|
||||
background-size: 100% 200%;
|
||||
border-bottom: 5px solid var(--accent-color);
|
||||
border-radius: 2px;
|
||||
transition: 0.3s;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-position: 0% 0%;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
button:active {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
background: var(--stone);
|
||||
border: 1px white solid;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.middlething {
|
||||
|
||||
margin-top: -8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
background-color: rgba(0, 0, 0, 0.454);
|
||||
|
||||
background: var(--cobblestone);
|
||||
background-size: 4%;
|
||||
image-rendering: pixelated;
|
||||
border-style: solid;
|
||||
border-width: 0px 1px 0px 1px;
|
||||
border-color: #ffffffa6;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5),
|
||||
0 2px 2px rgba(0, 0, 0, 0.5),
|
||||
0 4px 4px rgba(0, 0, 0, 0.5),
|
||||
0 8px 90px rgba(0, 0, 0, 0.5),
|
||||
0 16px 16px rgba(0, 0, 0, 0.5);
|
||||
|
||||
}
|
||||
|
||||
.bgvideo {
|
||||
filter: brightness(80%);
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.gallery {
|
||||
background: var(--stone);
|
||||
background-size: 5%;
|
||||
transition: all 1s ease;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
|
||||
border-style: solid;
|
||||
border-color: white;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
border-width: 0px 1px 1px 1px;
|
||||
margin-top: -20px;
|
||||
|
||||
}
|
||||
|
||||
.div-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.dropdown {
|
||||
background: url("/assets/blocks/obsidian.png");
|
||||
background-size: 5%;
|
||||
text-align: center;
|
||||
width: 40.9%;
|
||||
border: 1px solid white;
|
||||
display: table;
|
||||
|
||||
cursor: pointer;
|
||||
transition: border-bottom 0.2s ease;
|
||||
user-select: none;
|
||||
text-shadow: 0 0 0.2em rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes glow {
|
||||
from {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
|
||||
}
|
||||
|
||||
to {
|
||||
text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6, 0 0 40px #ff4da6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideaway {
|
||||
from {
|
||||
display: block;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(40px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(65, 65, 65);
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(155, 153, 153);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.gimage:hover {
|
||||
width: 1500px;
|
||||
position: fixed;
|
||||
float: none;
|
||||
transition: height 4s;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* bring your own prefixes */
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.gimage {
|
||||
transition: height 4s;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotateY(0deg);
|
||||
rotate: 0deg;
|
||||
}
|
||||
|
||||
to {
|
||||
|
||||
|
||||
transform: rotateY(360deg);
|
||||
rotate: -360deg;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rotate {
|
||||
animation: rotation 10s linear infinite;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: rgba(32, 32, 32, 0.507);
|
||||
|
||||
width: 24%;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 2px solid gray;
|
||||
outline: 0;
|
||||
font-size: 1.3rem;
|
||||
color: white;
|
||||
padding: 7px;
|
||||
transition: border-bottom 1s;
|
||||
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-bottom: 2px solid var(--accent-color);
|
||||
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: var(--white);
|
||||
border-bottom: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: #3d3d3dd3;
|
||||
width: 190px;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.invert {
|
||||
padding: 2px;
|
||||
color: var(--white);
|
||||
backdrop-filter: blur(60px);
|
||||
}
|
||||
|
||||
.contact {
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
background: var(--stone);
|
||||
border: 1px white solid;
|
||||
background-size: 5%;
|
||||
vertical-align: baseline;
|
||||
margin-top: 2px;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.contact:hover {
|
||||
margin-left: 12px;
|
||||
|
||||
backdrop-filter: blur(60px);
|
||||
border: rgb(200, 200, 200) 2px solid;
|
||||
}
|
||||
|
||||
.contact image {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.contact p {
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
|
||||
line-height: 10px;
|
||||
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.contact a {
|
||||
|
||||
display: block;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.smalimages {
|
||||
|
||||
align-self: center;
|
||||
position: relative;
|
||||
image-rendering: pixelated;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
border-radius: 3px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
background: var(--stone);
|
||||
border: 1px white solid;
|
||||
background-size: 5%;
|
||||
}
|
||||
|
||||
.smalimages img {
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
}
|
||||
|
||||
.smalimages img:hover {
|
||||
position: relative;
|
||||
scale: 1.3;
|
||||
height: fit-content;
|
||||
filter: drop-shadow(8px 10px 0px var(--accent-color));
|
||||
position: relative;
|
||||
border: 0.2px solid rgba(255, 255, 255, 0.726);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--accent-color);
|
||||
text-shadow: #000000 1px 1px;
|
||||
}
|
||||
|
||||
.bottomtext {
|
||||
backdrop-filter: blur(60px);
|
||||
text-align: center;
|
||||
margin-top: 4%;
|
||||
bottom: 0;
|
||||
background: var(--overlay);
|
||||
}
|
||||
|
||||
.emote {
|
||||
width: 30px;
|
||||
margin-left: 3px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgb(9, 24, 37);
|
||||
|
||||
}
|
||||
|
||||
.showcases {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
.showcase {
|
||||
float: left;
|
||||
border: solid 1px white;
|
||||
background: var(--stone);
|
||||
background-size: 5%;
|
||||
width: 90%;
|
||||
margin: 10px;
|
||||
margin-top: 20px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.showcase img:not(.background) {
|
||||
|
||||
padding: 10px;
|
||||
width: 60%;
|
||||
padding-left: 20px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.showcase span {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
overflow: inherit;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
white-space: normal;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.showcase h2 {
|
||||
background: var(--obsidian);
|
||||
|
||||
border-bottom: 2px white solid;
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
user-select: none;
|
||||
text-shadow: 0 0 0.2em rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.showcase .background {
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pausetext {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pausetext:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings {
|
||||
z-index: 11;
|
||||
position: fixed;
|
||||
width: 20%;
|
||||
background: var(--stone);
|
||||
background-size: 5%;
|
||||
border: 1px white solid;
|
||||
border-radius: 3px;
|
||||
margin-left: auto;
|
||||
right: 0;
|
||||
top: 4%;
|
||||
|
||||
}
|
||||
|
||||
.settings p {
|
||||
display: inline-block;
|
||||
transform: translateY(-11px);
|
||||
}
|
||||
|
||||
.gear {
|
||||
float: right;
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.gear:hover {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.switch {
|
||||
|
||||
--button-width: 3.5em;
|
||||
--button-height: 2em;
|
||||
--toggle-diameter: 1.5em;
|
||||
--button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
|
||||
--toggle-shadow-offset: 10px;
|
||||
--toggle-wider: 3em;
|
||||
--color-grey: #cccccc;
|
||||
|
||||
}
|
||||
|
||||
.slider {
|
||||
margin-top: 4%;
|
||||
margin-left: 2%;
|
||||
display: inline-block;
|
||||
width: var(--button-width);
|
||||
height: var(--button-height);
|
||||
background-color: var(--color-grey);
|
||||
border-radius: calc(var(--button-height) / 2);
|
||||
position: relative;
|
||||
transition: 0.3s all ease-in-out;
|
||||
}
|
||||
|
||||
.slider::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: var(--toggle-diameter);
|
||||
height: var(--toggle-diameter);
|
||||
background-color: #fff;
|
||||
border-radius: calc(var(--toggle-diameter) / 2);
|
||||
position: absolute;
|
||||
top: var(--button-toggle-offset);
|
||||
transform: translateX(var(--button-toggle-offset));
|
||||
box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
||||
transition: 0.3s all ease-in-out;
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked+.slider {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked+.slider::after {
|
||||
transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
|
||||
box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:active+.slider::after {
|
||||
width: var(--toggle-wider);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked:active+.slider::after {
|
||||
transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
|
||||
}
|
||||
|
||||
.artShowcases {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
margin: auto;
|
||||
margin-top: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.artShowcases img {
|
||||
margin-top: 20px;
|
||||
width: 400px;
|
||||
height: auto;
|
||||
border: 1px solid white;
|
||||
background: rgba(0, 0, 0, 0.532);
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
|
||||
.artShowcases img:hover {
|
||||
scale: 1.2;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: block;
|
||||
width: 70%;
|
||||
align-self: center;
|
||||
border: 1px white solid;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 70%;
|
||||
height: 30px;
|
||||
background: white;
|
||||
border: 1px white solid;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
padding: 10px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
color: black;
|
||||
font-style: italic;
|
||||
}
|
||||
.windowbar img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide {display: none;}
|
||||
|
|
@ -0,0 +1,621 @@
|
|||
:root {
|
||||
|
||||
--accent-color: rgb(227, 154, 228);
|
||||
--white: rgb(255, 255, 252);
|
||||
--overlay: #00000069;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: myFirstFont;
|
||||
src: url(/assets/misc/lsansuni.ttf);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background: url("/assets/images/mbg.png");
|
||||
backdrop-filter: blur(10px);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.showcase span,
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p,
|
||||
li {
|
||||
font-family: myFirstFont;
|
||||
|
||||
font-variant: normal;
|
||||
color: black;
|
||||
}
|
||||
|
||||
button {
|
||||
background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background-position: 0% 0%;
|
||||
background-size: 100% 200%;
|
||||
border-bottom: 5px solid var(--accent-color);
|
||||
border-radius: 2px;
|
||||
transition: 0.3s;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-position: 0% 0%;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
button:active {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
color: white;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-image: url("/assets/images/osxbar.png");
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-weight: lighter;
|
||||
font-family: myFirstFont;
|
||||
text-decoration: none;
|
||||
margin-left: 20px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
.middlething {
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.454);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bgvideo {
|
||||
filter: brightness(80%);
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.div-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@-webkit-keyframes glow {
|
||||
from {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
|
||||
}
|
||||
|
||||
to {
|
||||
text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6, 0 0 40px #ff4da6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideaway {
|
||||
from {
|
||||
display: block;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(40px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(65, 65, 65);
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(155, 153, 153);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.gimage:hover {
|
||||
width: 1500px;
|
||||
position: fixed;
|
||||
float: none;
|
||||
transition: height 4s;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* bring your own prefixes */
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.gimage {
|
||||
transition: height 4s;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotateY(0deg);
|
||||
rotate: 0deg;
|
||||
}
|
||||
|
||||
to {
|
||||
|
||||
|
||||
transform: rotateY(360deg);
|
||||
rotate: -360deg;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rotate {
|
||||
animation: rotation 10s linear infinite;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: rgba(32, 32, 32, 0.507);
|
||||
|
||||
width: 24%;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 2px solid gray;
|
||||
outline: 0;
|
||||
font-size: 1.3rem;
|
||||
color: white;
|
||||
padding: 7px;
|
||||
transition: border-bottom 1s;
|
||||
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-bottom: 2px solid var(--accent-color);
|
||||
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: black;
|
||||
border-bottom: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: #3d3d3dd3;
|
||||
width: 190px;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.invert {}
|
||||
|
||||
.contact {
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
backdrop-filter: blur(5px);
|
||||
vertical-align: baseline;
|
||||
margin-top: 2px;
|
||||
border-radius: 5px;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contact image {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.contact p {
|
||||
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
line-height: 10px;
|
||||
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.contact a {
|
||||
|
||||
display: block;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.smalimages {
|
||||
|
||||
align-self: center;
|
||||
position: relative;
|
||||
image-rendering: pixelated;
|
||||
background: #EEEEEE;
|
||||
padding: 20px;
|
||||
border-radius: 0px 0px 5px 5px;
|
||||
width: 50%;
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.smalimages img:not(.windowbar img) {
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
}
|
||||
|
||||
.smalimages img:hover:not(.windowbar img) {
|
||||
position: relative;
|
||||
scale: 1.3;
|
||||
height: fit-content;
|
||||
filter: drop-shadow(8px 10px 0px var(--accent-color));
|
||||
position: relative;
|
||||
border: 0.2px solid rgba(255, 255, 255, 0.726);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.bottomtext {
|
||||
backdrop-filter: blur(60px);
|
||||
text-align: center;
|
||||
margin-top: 4%;
|
||||
bottom: 0;
|
||||
background: var(--overlay);
|
||||
}
|
||||
|
||||
.emote {
|
||||
width: 30px;
|
||||
margin-left: 3px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgb(9, 24, 37);
|
||||
|
||||
}
|
||||
|
||||
.showcases {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
.showcase {
|
||||
float: left;
|
||||
box-shadow: 0 0 0.2em rgb(0, 0, 0);
|
||||
border-radius: 3px;
|
||||
width: 800px;
|
||||
margin: 10px;
|
||||
margin-top: 20px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.showcase img:not(.background) {
|
||||
|
||||
padding: 10px;
|
||||
width: 60%;
|
||||
padding-left: 20px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.showcase span {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
overflow: inherit;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
white-space: normal;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.showcase h2 {
|
||||
|
||||
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.showcase .background {
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#relaunch {
|
||||
background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/alphaver.png");
|
||||
background-size: 50%;
|
||||
}
|
||||
|
||||
#minewatchWiki {
|
||||
background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/seahaven.png");
|
||||
background-size: 100%;
|
||||
background-position: 20 0px;
|
||||
}
|
||||
|
||||
#doom {
|
||||
background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/doomBg.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
#blur {
|
||||
background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 1));
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.pausetext {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pausetext:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings {
|
||||
z-index: 11;
|
||||
position: fixed;
|
||||
width: 20%;
|
||||
|
||||
border-radius: 0px 0px 5px 5px;
|
||||
margin-left: auto;
|
||||
right: 0;
|
||||
top: 4%;
|
||||
transition: ease 0.2s all;
|
||||
background: #EEEEEE;
|
||||
|
||||
}
|
||||
|
||||
.settings p {
|
||||
|
||||
display: inline-block;
|
||||
transform: translateY(-11px);
|
||||
}
|
||||
|
||||
.gear {
|
||||
filter: invert(100);
|
||||
float: right;
|
||||
width: 20px;
|
||||
margin-top: 2px;
|
||||
margin-right: 10px;
|
||||
transition: ease-in-out 1s;
|
||||
}
|
||||
|
||||
.gear:hover {
|
||||
cursor: pointer;
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
.switch {
|
||||
|
||||
--button-width: 3.5em;
|
||||
--button-height: 2em;
|
||||
--toggle-diameter: 1.5em;
|
||||
--button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
|
||||
--toggle-shadow-offset: 10px;
|
||||
--toggle-wider: 3em;
|
||||
--color-grey: #cccccc;
|
||||
|
||||
}
|
||||
|
||||
.slider {
|
||||
margin-top: 4%;
|
||||
margin-left: 2%;
|
||||
display: inline-block;
|
||||
width: var(--button-width);
|
||||
height: var(--button-height);
|
||||
background-color: var(--color-grey);
|
||||
border-radius: calc(var(--button-height) / 2);
|
||||
position: relative;
|
||||
transition: 0.3s all ease-in-out;
|
||||
}
|
||||
|
||||
.slider::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: var(--toggle-diameter);
|
||||
height: var(--toggle-diameter);
|
||||
background-color: #fff;
|
||||
border-radius: calc(var(--toggle-diameter) / 2);
|
||||
position: absolute;
|
||||
top: var(--button-toggle-offset);
|
||||
transform: translateX(var(--button-toggle-offset));
|
||||
box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
||||
transition: 0.3s all ease-in-out;
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked+.slider {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked+.slider::after {
|
||||
transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
|
||||
box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:active+.slider::after {
|
||||
width: var(--toggle-wider);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked:active+.slider::after {
|
||||
transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
|
||||
}
|
||||
|
||||
.artShowcases {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
margin: auto;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.artShowcases img {
|
||||
margin-top: 20px;
|
||||
width: 500px;
|
||||
height: auto;
|
||||
box-shadow: 0.2em 0.3em 3em rgb(0, 0, 0);
|
||||
border-radius: 7px;
|
||||
transition: scale 0.2s ease;
|
||||
background: rgba(0, 0, 0, 0.532);
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
|
||||
.artShowcases img:hover {
|
||||
scale: 1.2;
|
||||
}
|
||||
|
||||
.windowbar {
|
||||
|
||||
background: linear-gradient(#D9D2D9, #9B9B9B);
|
||||
height: 27px;
|
||||
color: black;
|
||||
font-weight: lighter;
|
||||
vertical-align: middle;
|
||||
font-size: large;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.windowbar img {
|
||||
width: 70px;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
user-select: none;
|
||||
font-family: myFirstFont;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
|
||||
margin-top: -16px;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
backdrop-filter: blur(50px);
|
||||
padding: 10px;
|
||||
background: #EEEEEE;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.gallery p {
|
||||
color: black;
|
||||
|
||||
}
|
||||
.banner{
|
||||
display: none;
|
||||
}
|
||||
.bnav {
|
||||
|
||||
background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 1, 12, 0.9)), url("/assets/images/bring.jpg");
|
||||
background-size: 100%;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
width: 150px;
|
||||
padding: 0px;
|
||||
animation-name: move-bg;
|
||||
}
|
||||
.bnav a{
|
||||
color: a;
|
||||
vertical-align: sub;
|
||||
font-size: 25px;
|
||||
text-decoration: none;
|
||||
}
|
||||
#left,#right{
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#left:hover{
|
||||
margin-right: 4px;
|
||||
}
|
||||
#right:hover{
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@ body {
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.gallery,
|
||||
.showcase span,
|
||||
a,
|
||||
h1,
|
||||
|
|
@ -30,6 +31,9 @@ li {
|
|||
font-variant: normal;
|
||||
color: var(--white);
|
||||
}
|
||||
a{
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
button {
|
||||
background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
|
||||
|
|
@ -61,14 +65,20 @@ button:active {
|
|||
}
|
||||
|
||||
.navbar {
|
||||
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), var(--overlay);
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.navbar a {
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(41, 41, 41, 0.507);
|
||||
|
|
@ -108,7 +118,7 @@ button:active {
|
|||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -346,22 +356,20 @@ input:focus {
|
|||
height: 31px;
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.smalimages img:hover {
|
||||
position: relative;
|
||||
scale: 1.3;
|
||||
scale: 1.2;
|
||||
height: fit-content;
|
||||
filter: drop-shadow(8px 10px 0px var(--accent-color));
|
||||
filter: drop-shadow(0px 0px 5px var(--accent-color));
|
||||
position: relative;
|
||||
border: 0.2px solid rgba(255, 255, 255, 0.726);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
|
||||
.bottomtext {
|
||||
backdrop-filter: blur(60px);
|
||||
|
|
@ -440,15 +448,20 @@ code {
|
|||
background-size: 50%;
|
||||
}
|
||||
|
||||
#minewatchWiki{
|
||||
#minewatchWiki {
|
||||
background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/seahaven.png");
|
||||
background-size: 100%;
|
||||
background-position: 20 0px;
|
||||
}
|
||||
|
||||
#doom {
|
||||
background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/doomBg.png");
|
||||
background-size: 100%;
|
||||
}
|
||||
#bring {
|
||||
background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 1)), url("/assets/images/bring.jpg");
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
#blur {
|
||||
background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 1));
|
||||
|
|
@ -475,6 +488,7 @@ code {
|
|||
transition: ease 0.2s all;
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.532);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.settings p {
|
||||
|
|
@ -556,11 +570,12 @@ code {
|
|||
|
||||
.artShowcases {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto ;
|
||||
grid-template-columns: auto auto auto;
|
||||
margin: auto;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.artShowcases img{
|
||||
|
||||
.artShowcases img {
|
||||
margin-top: 20px;
|
||||
width: 500px;
|
||||
height: auto;
|
||||
|
|
@ -569,9 +584,59 @@ code {
|
|||
transition: scale 0.2s ease;
|
||||
background: rgba(0, 0, 0, 0.532);
|
||||
margin-left: 20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.artShowcases img:hover {
|
||||
scale: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.windowbar img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottomGlow:empty::before {
|
||||
content: "\A0";
|
||||
}
|
||||
|
||||
.bottomThingThatEveryWebsiteHas {
|
||||
|
||||
margin-top: 20px;
|
||||
overflow: none;
|
||||
text-align: center;
|
||||
background: rgb(2, 2, 2);
|
||||
|
||||
}
|
||||
|
||||
.bnav {
|
||||
background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 1, 12, 0.9)), url("/assets/images/bring.jpg");
|
||||
background-size: 100%;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
width: 150px;
|
||||
padding: 0px;
|
||||
animation-name: move-bg;
|
||||
}
|
||||
.bnav a{
|
||||
vertical-align: sub;
|
||||
font-size: 25px;
|
||||
text-decoration: none;
|
||||
}
|
||||
#left,#right{
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#left:hover{
|
||||
margin-right: 4px;
|
||||
}
|
||||
#right:hover{
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,579 @@
|
|||
:root {
|
||||
--blue: #51afef;
|
||||
--accent-color: #ff6c6b;
|
||||
--white: #bbc2cf;
|
||||
--overlay: #00000069;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
|
||||
background: #282c34;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.gallery,
|
||||
.showcase span,
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p,
|
||||
li {
|
||||
|
||||
font-family: DejaVu Sans Mono, monospace;
|
||||
font-size: 20px;
|
||||
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
button {
|
||||
background: linear-gradient(1800deg, var(--accent-color), rgba(0, 0, 0, 0.355) 70%);
|
||||
color: var(--white);
|
||||
padding: 10px;
|
||||
|
||||
background-position: 0% 0%;
|
||||
background-size: 100% 200%;
|
||||
|
||||
transition: 0.3s;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-position: 0% 0%;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
button:active {
|
||||
filter: hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
|
||||
position: relative;
|
||||
width: 40%;
|
||||
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.middlething {
|
||||
|
||||
margin-top: -50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: 100%;
|
||||
width: 800px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bgvideo {
|
||||
filter: brightness(80%);
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
font-size: 1.3em;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.gallery {
|
||||
|
||||
|
||||
width: 100%;
|
||||
|
||||
|
||||
padding: 10px;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.div-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.dropdown {
|
||||
|
||||
width: 40.9%;
|
||||
|
||||
display: table;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
user-select: none;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes glow {
|
||||
from {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 10px #e60073, 0 0 20px #e60073, 0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
|
||||
}
|
||||
|
||||
to {
|
||||
text-shadow: 0 0 10px #fff, 0 0 15px #ff4da6, 0 0 20px #ff4da6, 0 0 25px #ff4da6, 0 0 30px #ff4da6, 0 0 35px #ff4da6, 0 0 40px #ff4da6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideaway {
|
||||
from {
|
||||
display: block;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(40px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(65, 65, 65);
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(155, 153, 153);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.gimage:hover {
|
||||
width: 1500px;
|
||||
position: fixed;
|
||||
float: none;
|
||||
transition: height 4s;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* bring your own prefixes */
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.gimage {
|
||||
transition: height 4s;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotateY(0deg);
|
||||
rotate: 0deg;
|
||||
}
|
||||
|
||||
to {
|
||||
|
||||
|
||||
transform: rotateY(360deg);
|
||||
rotate: -360deg;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rotate {
|
||||
animation: rotation 10s linear infinite;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: rgba(32, 32, 32, 0.507);
|
||||
|
||||
width: 24%;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 2px solid gray;
|
||||
outline: 0;
|
||||
font-size: 1.3rem;
|
||||
color: white;
|
||||
padding: 7px;
|
||||
transition: border-bottom 1s;
|
||||
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-bottom: 2px solid var(--accent-color);
|
||||
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
font-size: 1.1em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: var(--white);
|
||||
border-bottom: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: #3d3d3dd3;
|
||||
width: 190px;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contact {
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 40%;
|
||||
|
||||
|
||||
background-size: 5%;
|
||||
vertical-align: baseline;
|
||||
margin-top: 2px;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.contact:hover {
|
||||
margin-left: 12px;
|
||||
|
||||
backdrop-filter: blur(60px);
|
||||
border: rgb(200, 200, 200) 2px solid;
|
||||
}
|
||||
|
||||
.contact image {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.contact p {
|
||||
padding-left: 10px;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
|
||||
line-height: 10px;
|
||||
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.contact a {
|
||||
|
||||
display: block;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.smalimages {
|
||||
|
||||
align-self: center;
|
||||
position: relative;
|
||||
image-rendering: pixelated;
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
background-size: 5%;
|
||||
}
|
||||
|
||||
.smalimages img {
|
||||
width: 88px;
|
||||
height: 31px;
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
}
|
||||
|
||||
.smalimages img:hover {
|
||||
position: relative;
|
||||
scale: 1.3;
|
||||
height: fit-content;
|
||||
filter: drop-shadow(8px 10px 0px var(--accent-color));
|
||||
position: relative;
|
||||
border: 0.2px solid rgba(255, 255, 255, 0.726);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.bottomtext {
|
||||
width: 20px;
|
||||
|
||||
margin-top: 4%;
|
||||
bottom: 0;
|
||||
|
||||
}
|
||||
.bottomtext::after{
|
||||
content: "this theme uses css things <a>from vern</a>";
|
||||
}
|
||||
.emote {
|
||||
width: 30px;
|
||||
margin-left: 3px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgb(9, 24, 37);
|
||||
|
||||
}
|
||||
|
||||
.showcases {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
|
||||
.showcase {
|
||||
float: left;
|
||||
border: solid 1px white;
|
||||
|
||||
background-size: 5%;
|
||||
width: 90%;
|
||||
margin: 10px;
|
||||
margin-top: 20px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.showcase img:not(.background) {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
width: 60%;
|
||||
padding-left: 20px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.showcase span {
|
||||
padding-top: 10px;
|
||||
float: left;
|
||||
overflow: inherit;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
display: block;
|
||||
white-space: normal;
|
||||
width: 100%;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.showcase h2 {
|
||||
|
||||
|
||||
border-bottom: 2px white solid;
|
||||
text-align: center;
|
||||
margin-top: 0px;
|
||||
user-select: none;
|
||||
text-shadow: 0 0 0.2em rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.showcase .background {
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pausetext {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pausetext:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings {
|
||||
z-index: 11;
|
||||
position: fixed;
|
||||
width: 20%;
|
||||
|
||||
background-size: 5%;
|
||||
|
||||
margin-left: auto;
|
||||
right: 0;
|
||||
top: 4%;
|
||||
|
||||
}
|
||||
|
||||
.settings p {
|
||||
display: inline-block;
|
||||
transform: translateY(-11px);
|
||||
}
|
||||
|
||||
.gear {
|
||||
|
||||
float: right;
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
filter: brightness(0) saturate(100%) invert(56%) sepia(58%) saturate(4782%) hue-rotate(327deg) brightness(125%) contrast(113%);
|
||||
}
|
||||
|
||||
.gear:hover {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.switch {
|
||||
|
||||
--button-width: 3.5em;
|
||||
--button-height: 2em;
|
||||
--toggle-diameter: 1.5em;
|
||||
--button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
|
||||
--toggle-shadow-offset: 10px;
|
||||
--toggle-wider: 3em;
|
||||
--color-grey: #cccccc;
|
||||
|
||||
}
|
||||
|
||||
.slider {
|
||||
margin-top: 4%;
|
||||
margin-left: 2%;
|
||||
display: inline-block;
|
||||
width: var(--button-width);
|
||||
height: var(--button-height);
|
||||
background-color: var(--color-grey);
|
||||
border-radius: calc(var(--button-height) / 2);
|
||||
position: relative;
|
||||
transition: 0.3s all ease-in-out;
|
||||
}
|
||||
|
||||
.slider::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: var(--toggle-diameter);
|
||||
height: var(--toggle-diameter);
|
||||
background-color: #fff;
|
||||
border-radius: calc(var(--toggle-diameter) / 2);
|
||||
position: absolute;
|
||||
top: var(--button-toggle-offset);
|
||||
transform: translateX(var(--button-toggle-offset));
|
||||
box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
||||
transition: 0.3s all ease-in-out;
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked+.slider {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked+.slider::after {
|
||||
transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
|
||||
box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:active+.slider::after {
|
||||
width: var(--toggle-wider);
|
||||
}
|
||||
|
||||
.switch input[type="checkbox"]:checked:active+.slider::after {
|
||||
transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
|
||||
}
|
||||
|
||||
.artShowcases {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.artShowcases img {
|
||||
|
||||
margin-top: 20px;
|
||||
width: 400px;
|
||||
height: auto;
|
||||
border: 1px solid white;
|
||||
background: rgba(0, 0, 0, 0.532);
|
||||
margin-left: 20px;
|
||||
|
||||
}
|
||||
|
||||
.artShowcases img:hover {
|
||||
scale: 1.2;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
|
||||
border-bottom: 2px solid var(--accent-color);
|
||||
border-radius: 0.5rem;
|
||||
padding-bottom: 30px;
|
||||
display: flex;
|
||||
align-items:end;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
margin-right: 30px;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.windowbar img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 317 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 308 B |
|
|
@ -1,73 +1,96 @@
|
|||
const backgrounds = ["ubg.png", "vbg.png", "limbg.png", "lbg.png", "cbg.png"];
|
||||
const colors = ["#676667", 'rgb(227, 154, 228)', '#C9A333', 'rgb(236, 36, 36)', '#990066'];
|
||||
var backgroundVideo;
|
||||
var pausetext;
|
||||
var backgroundVideoToggle;
|
||||
var randomBackgroundToggle
|
||||
window.onload = function () {
|
||||
|
||||
//Hide divs
|
||||
try {
|
||||
document.getElementById("moreInfo").classList.add('div-hidden');
|
||||
document.getElementById("specs").classList.add('div-hidden');
|
||||
hideDropdowns();
|
||||
} catch (exception) {
|
||||
console.log("something was supposed to happen, but it didnt.");
|
||||
}
|
||||
|
||||
//set theme
|
||||
//setTheme(localStorage.getItem("theme"));
|
||||
|
||||
|
||||
backgroundVideoToggle = document.getElementById("enableVideoBackground");
|
||||
randomBackgroundToggle = document.getElementById("backgroundVideoToggle");
|
||||
backgroundVideo = document.getElementById("bgvideo");
|
||||
pausetext = document.getElementById("pausetext");
|
||||
var enableVideoBackground = document.getElementById("enableVideoBackground");
|
||||
var enableRandomBackrounds = document.getElementById("enableRandomBackrounds");
|
||||
|
||||
if(!localStorage.getItem("enableRandomBackrounds") && !localStorage.getItem("enableVideoBackground")){
|
||||
backgroundVideo.style.display = "block";
|
||||
|
||||
backgroundVideo.play();
|
||||
setDefaultColorAndBackground();
|
||||
}
|
||||
|
||||
if (!localStorage.getItem("enableRandomBackrounds") && !localStorage.getItem("enableVideoBackground")) {
|
||||
setDefaultBackground();
|
||||
enableVideoBackground();
|
||||
backgroundVideoToggle.checked = true;
|
||||
}
|
||||
if (localStorage.getItem("enableRandomBackrounds") == "true") {
|
||||
randomColorAndBackground();
|
||||
}
|
||||
if (localStorage.getItem("enableVideoBackground") == "true") {
|
||||
backgroundVideo.play();
|
||||
backgroundVideo.style.display = "block";
|
||||
enableVideoBackground.checked = true;
|
||||
setRandomBackground();
|
||||
}else{
|
||||
setDefaultBackground();
|
||||
}
|
||||
|
||||
enableVideoBackground.addEventListener('change', function () {
|
||||
if (localStorage.getItem("enableVideoBackground") == "true") {
|
||||
enableVideoBackground();
|
||||
}else{
|
||||
disableVideoBackground();
|
||||
}
|
||||
|
||||
|
||||
|
||||
backgroundVideoToggle.addEventListener('change', function () {
|
||||
if (this.checked) {
|
||||
backgroundVideo.style.display = "block";
|
||||
enableRandomBackrounds.checked = false;
|
||||
backgroundVideo.play();
|
||||
setDefaultColorAndBackground();
|
||||
localStorage.setItem("enableVideoBackground", true);
|
||||
setDefaultBackground();
|
||||
enableVideoBackground();
|
||||
randomBackgroundToggle.checked = false;
|
||||
|
||||
} else {
|
||||
backgroundVideo.style.display = "none";
|
||||
localStorage.setItem("enableVideoBackground", false);
|
||||
disableVideoBackground();
|
||||
}
|
||||
});
|
||||
enableRandomBackrounds.addEventListener('change', function () {
|
||||
|
||||
randomBackgroundToggle.addEventListener('change', function () {
|
||||
if (this.checked) {
|
||||
backgroundVideo.style.display = "none";
|
||||
randomColorAndBackground();
|
||||
enableVideoBackground.checked = false;
|
||||
localStorage.setItem("enableRandomBackrounds", true);
|
||||
localStorage.setItem("enableVideoBackground", false);
|
||||
disableVideoBackground();
|
||||
setRandomBackground();
|
||||
backgroundVideoToggle.checked = false;
|
||||
|
||||
} else {
|
||||
setDefaultColorAndBackground();
|
||||
setDefaultBackground();
|
||||
localStorage.setItem("enableRandomBackrounds", false);
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
function randomColorAndBackground() {
|
||||
function disableVideoBackground() {
|
||||
backgroundVideo.style.display = "none";
|
||||
localStorage.setItem("enableVideoBackground", false);
|
||||
}
|
||||
|
||||
function enableVideoBackground() {
|
||||
backgroundVideo.style.display = "block";
|
||||
setDefaultBackground();
|
||||
backgroundVideo.play();
|
||||
localStorage.setItem("enableVideoBackground", true);
|
||||
}
|
||||
|
||||
function hideDropdowns() {
|
||||
document.getElementById("moreInfo").classList.add('div-hidden');
|
||||
document.getElementById("specs").classList.add('div-hidden');
|
||||
}
|
||||
|
||||
function setRandomBackground() {
|
||||
console.log("ran");
|
||||
const randValue = getRandomInt(backgrounds.length);
|
||||
document.documentElement.style.setProperty('--accent-color', colors[randValue]);
|
||||
document.body.style.background = getBackground(randValue);
|
||||
document.body.style.backgroundSize = "cover";
|
||||
localStorage.setItem("enableRandomBackrounds", true);
|
||||
}
|
||||
function setDefaultColorAndBackground() {
|
||||
function setDefaultBackground() {
|
||||
document.documentElement.style.setProperty('--accent-color', colors[1]);
|
||||
document.body.style.background = getBackground(1);
|
||||
document.body.style.backgroundSize = "cover";
|
||||
|
|
@ -79,7 +102,7 @@ function pauseVideo() {
|
|||
backgroundVideo.play();
|
||||
}
|
||||
}
|
||||
function showThing(element) {
|
||||
function showElement(element) {
|
||||
var gallery = document.getElementById(element);
|
||||
if (gallery.classList.contains("div-hidden")) {
|
||||
gallery.classList.remove('div-hidden');
|
||||
|
|
@ -94,11 +117,6 @@ function rotate() {
|
|||
var button = document.getElementById("rotate_button");
|
||||
button.style.display = "none";
|
||||
}
|
||||
function reset_animation(element) {
|
||||
element.style.animation = 'none';
|
||||
element.offsetHeight; /* trigger reflow */
|
||||
element.style.animation = null;
|
||||
}
|
||||
|
||||
function getBackground(i) {
|
||||
return 'url("/assets/images/' + backgrounds[i] + '")';
|
||||
|
|
@ -107,15 +125,69 @@ function getBackground(i) {
|
|||
function getRandomInt(max) {
|
||||
return Math.floor(Math.random() * max);
|
||||
}
|
||||
|
||||
function showSettings() {
|
||||
var settings = document.getElementById("settings");
|
||||
if (settings.style.display == "none") {
|
||||
settings.style.display = "block";
|
||||
setTimeout(() => { settings.style.opacity = "1"; }, 200);
|
||||
|
||||
setTimeout(() => { settings.style.opacity = "1"; }, 200);
|
||||
|
||||
} else {
|
||||
settings.style.opacity = "0";
|
||||
setTimeout(() => { settings.style.display = "none"; }, 200);
|
||||
|
||||
setTimeout(() => { settings.style.display = "none"; }, 200);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changeTheme() {
|
||||
var themesList = document.getElementById("themes");
|
||||
console.log(themesList.options[themesList.selectedIndex].text);
|
||||
setTheme(themesList.options[themesList.selectedIndex].text);
|
||||
location.reload();
|
||||
}
|
||||
|
||||
function setTheme(themeToSet) {
|
||||
var themeLink = document.getElementById("theme");
|
||||
|
||||
var r = document.querySelector(':root');
|
||||
switch (themeToSet) {
|
||||
case "MineWatch":
|
||||
console.log("glass");
|
||||
themeLink.removeAttribute("href");
|
||||
themeLink.setAttribute("href", "/assets/css/minewatch.css");
|
||||
localStorage.setItem("theme", "MineWatch");
|
||||
document.documentElement.style.setProperty('--accent-color', '#64c9fb');
|
||||
break;
|
||||
case "Glass":
|
||||
console.log("glass");
|
||||
themeLink.removeAttribute("href");
|
||||
themeLink.setAttribute("href", "/assets/css/style.css");
|
||||
localStorage.setItem("theme", "Glass");
|
||||
backgroundVideoToggle.removeAttribute("disabled");
|
||||
enableVideoBackground.removeAttribute("disabled");
|
||||
document.documentElement.style.setProperty('--accent-color', '#E39AE4');
|
||||
break;
|
||||
case "OSX":
|
||||
console.log("glass");
|
||||
themeLink.removeAttribute("href");
|
||||
themeLink.setAttribute("href", "/assets/css/osx.css");
|
||||
localStorage.setItem("theme", "OSX");
|
||||
|
||||
backgroundVideoToggle.removeAttribute("disabled");
|
||||
enableVideoBackground.removeAttribute("disabled");
|
||||
document.documentElement.style.setProperty('--accent-color', '#E39AE4');
|
||||
break;
|
||||
case "~vern":
|
||||
console.log("glass");
|
||||
themeLink.removeAttribute("href");
|
||||
themeLink.setAttribute("href", "/assets/css/vern.css");
|
||||
localStorage.setItem("theme", "~vern");
|
||||
|
||||
backgroundVideoToggle.removeAttribute("disabled");
|
||||
enableVideoBackground.removeAttribute("disabled");
|
||||
document.documentElement.style.setProperty('--accent-color', '#ff6c6b');
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
99
index.html
99
index.html
|
|
@ -2,8 +2,8 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<title>Homepage - Gnawmon</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<title >Homepage - Gnawmon</title>
|
||||
<link id="theme" rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/fetch.css">
|
||||
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
|
@ -11,43 +11,55 @@
|
|||
|
||||
<body>
|
||||
|
||||
<video muted loop class="bgvideo" id="bgvideo">
|
||||
<source src="Untitled.mp4" type="video/mp4">
|
||||
<video style="display: none;" muted loop autoplay class="bgvideo" id="bgvideo">
|
||||
<source src="/assets/videos/plasma.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<div class="middlething">
|
||||
<div class="navbar"> <a id="active" href="index.html">Main Page </a> <a href="projects.html
|
||||
<img class="banner" id="banner" src="/assets/images/banner.png">
|
||||
<div class="navbar"> <img src="http://freevector.co/wp-content/uploads/2014/07/72887-pear-fruit.png" class="hide" style="width: 10px; scale: 1.7; margin-left: 10px;"> <a id="active" href="index.html">Main Page </a> <a href="projects.html
|
||||
">Projects </a> <a href="art.html">Art </a> <img src="assets/svg/gear.svg" class="gear" onclick="showSettings()"/></div>
|
||||
<div style="display: none;" class="settings" id="settings">
|
||||
<p class=" windowbar hide " style="width: 100%; margin-top: 0px;"><img src="/assets/images/osxbuttons.png" class="hide"> Settings</p><br>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="enableVideoBackground">
|
||||
<span class="slider"></span>
|
||||
</label> <p>Video Background</p>
|
||||
<br>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="enableRandomBackrounds">
|
||||
<label class="switch" >
|
||||
<input type="checkbox" id="backgroundVideoToggle">
|
||||
<span class="slider"></span>
|
||||
</label> <p>Random Backgrounds</p>
|
||||
</label> <p>Random Backgrounds</p> <br>
|
||||
<select style="display: none;" id="themes" onchange = "changeTheme()">
|
||||
<option value="osx">OSX</option>
|
||||
<option value="glass">Glass</option>
|
||||
<option value="minewatch">MineWatch</option>
|
||||
<option value="vern">~vern</option>
|
||||
</select> <p style="display: none;">Theme</p>
|
||||
</div>
|
||||
|
||||
<h3 class="paragraph invert" style="margin-top: 40px;">Hello hi, I'm Gnawmon</h3>
|
||||
<p class="paragraph">
|
||||
<h3 style="width: 41%; margin-top: 40px;" class="paragraph invert windowbar" ><img src="/assets/images/osxbuttons.png"> Hello hi, I'm Gnawmon</h3>
|
||||
<div class="gallery" style="margin-top: -18px;">
|
||||
I'm a programmer and an artist <br> <br>
|
||||
I program in c# and python, I wanna learn a <tot class="tooltip">lower level language<span
|
||||
class="tooltiptext">rust, c or c++ idk</span> </tot> at one point too. I've made a few games in
|
||||
I program in c# and python, I wanna learn a <p class="tooltip">lower level language<span
|
||||
class="tooltiptext">rust, c or c++ idk</span> </p> at one point too. I've made a few games in
|
||||
unity and never posted them online. <br> <br>
|
||||
I've made <tot class="tooltip">a few scenery<span class="tooltiptext">You're looking at them right now!
|
||||
Although they're blurred</span> </tot> in blender and posted a few on <a class="link"
|
||||
I've made <p class="tooltip">a few scenery <span
|
||||
class="tooltiptext">check them out in the art section!</span> </p> in blender and posted a few on <a class="link"
|
||||
target=”_blank” href="https://nitter.net/Gnawmon">twitter</a> but stopped posting a while back. I
|
||||
also made prodecural textures with substance 3d in the past.<br><br>
|
||||
I use an arch based os btw<br><br>
|
||||
also made prodecural textures with substance 3d in the past.
|
||||
<div class="gallery bnav">
|
||||
<p><a href="https://webring.crumpetalpaca.eu.org/gnawmon/previous" id="left"><</a> bring <a href="https://webring.crumpetalpaca.eu.org/gnawmon/next" id="right">></a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <button onclick="pauseVideo()">Pause the video</button> -->
|
||||
|
||||
|
||||
</p>
|
||||
<h2 onclick="showThing('moreInfo')" class="paragraph dropdown">More</h2>
|
||||
<h2 style="width: 41%;" onclick="showElement('moreInfo')" class="paragraph dropdown windowbar"><img src="/assets/images/osxbuttons.png"> More</h2>
|
||||
<div class="gallery" id="moreInfo">
|
||||
<p class="paragraph">
|
||||
|
||||
I speak <s>3</s> 2 languages <br> <br>
|
||||
<p>Not in a particular order, my favourite video games</p>
|
||||
<ul>
|
||||
|
|
@ -65,11 +77,11 @@
|
|||
<li>Team Fortress 2</li>
|
||||
<li>Oneshot</li>
|
||||
</ul>
|
||||
<a> also heres <a class="link" href="assets/misc/pgp.txt"> my pgp key</a>
|
||||
also heres <a class="link" href="assets/misc/pgp.txt"> my pgp key</a>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<h2 onclick="showThing('specs')" class="paragraph dropdown">Computers</h2>
|
||||
<h2 style="width: 41%;" onclick="showElement('specs')" class="paragraph dropdown windowbar"><img src="/assets/images/osxbuttons.png"> Computers</h2>
|
||||
<div class="gallery" id="specs" style="margin-bottom: 2px;">
|
||||
<h3>Lonix Machine </h3>
|
||||
<ul>
|
||||
|
|
@ -77,7 +89,6 @@
|
|||
<li>Nvidia GTX GPU</li>
|
||||
<li>AMD CPU</li>
|
||||
<li>Runs EndeavourOS with KDE Plasma</li>
|
||||
<li><code>curl http://gnawmon.vern.cc/endeavour</code> run this to see fetch on your computer</li> </ul>
|
||||
<div class="term-container"><span class="term-fg31 term-fg1"> ./</span><span class="term-fg35 term-fg1">o</span><span class="term-fg34 term-fg1">.</span> <span class="term-fg31 term-fg1">gnawmon</span>@<span class="term-fg31 term-fg1">lepc</span>
|
||||
<span class="term-fg31 term-fg1"> ./</span><span class="term-fg35 term-fg1">sssso</span><span class="term-fg34 term-fg1">-</span> ------------
|
||||
<span class="term-fg31 term-fg1"> `:</span><span class="term-fg35 term-fg1">osssssss+</span><span class="term-fg34 term-fg1">-</span> <span class="term-fg35 term-fg1">OS</span>: EndeavourOS Linux x86_64
|
||||
|
|
@ -107,7 +118,6 @@
|
|||
<li>Another Nvidia GTX GPU</li>
|
||||
<li>Intel CPU</li>
|
||||
<li>Runs Windows 10</li>
|
||||
<li><code>curl http://gnawmon.vern.cc/windows</code></li>
|
||||
</ul>
|
||||
<div class="term-container"><span class="term-fg36 term-fg1"> ..,</span> <span class="term-fg36 term-fg1">Gnawmon@DESKTOP-BVIMVA0</span>
|
||||
<span class="term-fg36 term-fg1"> ....,,:;+ccllll</span> ------------------
|
||||
|
|
@ -163,7 +173,7 @@
|
|||
<span class="term-fgx8 term-bgx8"> </span><span class="term-fgx9 term-bgx9"> </span><span class="term-fgx10 term-bgx10"> </span><span class="term-fgx11 term-bgx11"> </span><span class="term-fgx12 term-bgx12"> </span><span class="term-fgx13 term-bgx13"> </span><span class="term-fgx14 term-bgx14"> </span><span class="term-fgx15 term-bgx15"> </span></div>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<img src="assets/svg/matrix.svg" height="40" width="40" />
|
||||
<img src="assets/svg/matrix.svg" height="40" width="40" />
|
||||
<p>@gnawmon@matrix.org</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -187,33 +197,36 @@
|
|||
<img src="assets/svg/mail.svg" height="40" width="40" />
|
||||
<p>gnawmon@vern.cc</p>
|
||||
</div>
|
||||
<div class="smalimages">
|
||||
|
||||
<div class="smalimages gallery">
|
||||
<p class="windowbar hide" style="width: 104.2%; margin-top: -47px; margin-left: -20px;"><img src="/assets/images/osxbuttons.png">Buttons!</p>
|
||||
<p>people</p>
|
||||
<a href="https://dottych.github.io/"> <img src="assets/88x31/dottych.png"></img></a>
|
||||
<a href="https://andrewidot.neocities.org"><img src="https://andrewidot.neocities.org/assets/88x31/andrewidot_88x31.gif"></a>
|
||||
<a href="https://gnawmon.vern.cc"> <img src="assets/88x31/gnawmon.png"></img></a>
|
||||
<a href="https://tauon.dev/" target="_blank"><img src="https://tauon.dev/images/88x31/lily.png" alt="lily" /></a>
|
||||
<a href="https://liminalityyy.github.io/"> <img src="assets/88x31/liminal.png"></img></a>
|
||||
<a href="https://illudens.neocities.org"><img src="https://illudens.neocities.org/illudens.gif"></a>
|
||||
<a href="https://dottych.github.io/"> <img title="dottych" alt="dottych" src="assets/88x31/dottych.png"></img></a>
|
||||
<a href="https://andrewidot.neocities.org"><img title="andrewidot" alt="andrewidot" src="https://andrewidot.neocities.org/assets/88x31/andrewidot_88x31.gif"></a>
|
||||
<a href="https://gnawmon.vern.cc"> <img title="me!" alt="me!" src="assets/88x31/gnawmon.png"></img></a>
|
||||
<a href="https://tauon.dev/" target="_blank"><img title="tauon" alt="tauon" src="https://tauon.dev/images/88x31/lily.png" alt="lily" /></a>
|
||||
<a href="https://liminalityyy.github.io/"> <img title="liminal" alt="liminal" src="assets/88x31/liminal.png"></img></a>
|
||||
<a href="https://illudens.neocities.org"><img title="illudens" alt="illudens" src="https://illudens.neocities.org/illudens.gif"></a>
|
||||
|
||||
<p>software i like</p>
|
||||
<a href="https://endeavouros.com/"> <img src="assets/88x31/endeavour.png"></img> </a>
|
||||
<a href="https://www.mozilla.org/en-US/firefox/new"> <img src="assets/88x31/firefox.gif"></img></a>
|
||||
<a href="https://balls-online-plus.onrender.com"> <img src="assets/88x31/bop.gif"></img></a>
|
||||
<a href="https://endeavouros.com/"> <img title="endeavour os" alt="endeavour os" src="assets/88x31/endeavour.png"></img> </a>
|
||||
<a href="https://www.mozilla.org/en-US/firefox/new"> <img title="firefox" alt="firefox" src="assets/88x31/firefox.gif"></img></a>
|
||||
<a href="https://balls-online-plus.onrender.com"> <img title="balls online plus" alt="balls online plus" src="assets/88x31/bop.gif"></img></a>
|
||||
|
||||
<p>other</p>
|
||||
<a href="https://vern.cc"> <img src="assets/88x31/vern.png"></img></a>
|
||||
<img src="assets/88x31/ie_exploder.gif"></img>
|
||||
<a href="https://yesterweb.org/no-to-web3/"><img src="assets/88x31/saynotoweb3.gif"></img></a>
|
||||
<a href="https://www.youtube.com/@Windows969"><img src="assets/88x31/96.png"></img></a>
|
||||
<a href="https://vern.cc"> <img title="~vern" alt="~vern" src="assets/88x31/vern.png"></img></a>
|
||||
<img title="internet exploder" alt="internet exploder" src="assets/88x31/ie_exploder.gif"></img>
|
||||
<a href="https://yesterweb.org/no-to-web3/"><img title="say no to web3" alt="say no to web3" src="assets/88x31/saynotoweb3.gif"></img></a>
|
||||
<a href="https://www.youtube.com/@Windows969"><img title="windows 96" alt="windows 96" src="assets/88x31/96.png"></img></a>
|
||||
<p>unfiction</p>
|
||||
<img src="assets/88x31/mwd.png"></img>
|
||||
<a href="https://www.youtube.com/@minewatch/about"> <img src="assets/88x31/minexplorer.png"></img></a>
|
||||
<a href="https://www.youtube.com/@unintelligible-synapse"> <img src="assets/88x31/tbotvact1.png"></img></a>
|
||||
<a href="https://www.youtube.com/@minewatch/about"> <img src="assets/88x31/minewatch.png"></img></a>
|
||||
<img title="mwd" alt="mwd" src="assets/88x31/mwd.png"></img>
|
||||
<a href="https://www.youtube.com/@minewatch/about"> <img title="minexplorer" alt="minexplorer" src="assets/88x31/minexplorer.png"></img></a>
|
||||
<a href="https://www.youtube.com/@unintelligible-synapse"> <img title="tbotv act 1" alt="tbotv act 1" src="assets/88x31/tbotvact1.png"></img></a>
|
||||
<a href="https://www.youtube.com/@minewatch/about"> <img title="minewatch" alt="minewatch" src="assets/88x31/minewatch.png"></img></a>
|
||||
</div>
|
||||
<button id="rotate_button" onclick="rotate()" style="width: 90px; align-self: center;">rotate</button>
|
||||
<p class="paragraph bottomtext"><a href="http://git.vern.cc/gnawmon/website" class="link">source code</a></p>
|
||||
|
||||
<div class="bottomThingThatEveryWebsiteHas"> <p>written by hand <br> some css in the ~vern theme is taken from <a class="link" href="http://git.vern.cc/vern/website">here</a> <br> <a href="http://git.vern.cc/gnawmon/website" class="link">source code</a> is avaible here, not sure why anybody would want to check it but here it is </p></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -3,31 +3,39 @@
|
|||
|
||||
<head>
|
||||
<title>Projects - Gnawmon</title>
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<link id="theme" rel="stylesheet" href="/assets/css/style.css">
|
||||
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
|
||||
<script src="/assets/js/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<video autoplay muted loop class="bgvideo" id="bgvideo">
|
||||
<source src="Untitled.mp4" type="video/mp4">
|
||||
<video style="display: none;" muted loop autoplay class="bgvideo" id="bgvideo">
|
||||
<source src="/assets/videos/plasma.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<div class="navbar"> <a href="index.html">Main Page </a> <a id="active" href="projects.html
|
||||
">Projects </a><a href="art.html">Art </a> <img src="assets/svg/gear.svg" class="gear" onclick="showSettings()"/></div>
|
||||
<div style="display: none;" class="settings" id="settings">
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="enableVideoBackground">
|
||||
<span class="slider"></span>
|
||||
</label> <p>Video Background</p>
|
||||
<br>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="enableRandomBackrounds">
|
||||
<span class="slider"></span>
|
||||
</label> <p>Random Backgrounds</p>
|
||||
</div>
|
||||
<div class="middlething">
|
||||
<img class="banner" id="banner" style="display: none;" src="/assets/images/banner.png">
|
||||
<div class="navbar"> <a href="index.html">Main Page </a> <a id="active" href="projects.html
|
||||
">Projects </a> <a href="art.html">Art </a> <img src="assets/svg/gear.svg" class="gear" onclick="showSettings()"/></div>
|
||||
<div style="display: none;" class="settings" id="settings">
|
||||
<p class=" windowbar hide " style="width: 100%; margin-top: 0px;"><img src="/assets/images/osxbuttons.png" class="hide"> Settings</p><br>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="enableVideoBackground">
|
||||
<span class="slider"></span>
|
||||
</label> <p>Video Background</p>
|
||||
<br>
|
||||
<label class="switch" >
|
||||
<input type="checkbox" id="backgroundVideoToggle">
|
||||
<span class="slider"></span>
|
||||
</label> <p>Random Backgrounds</p> <br>
|
||||
<select style="display: none;" id="themes" onchange = "changeTheme()">
|
||||
<option value="osx">OSX</option>
|
||||
<option value="glass">Glass</option>
|
||||
<option value="minewatch">MineWatch</option>
|
||||
<option value="vern">~vern</option>
|
||||
</select> <p style="display: none;">Theme</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="showcases" >
|
||||
|
|
@ -36,7 +44,7 @@
|
|||
src="/assets/cats/fanofargs.png"></img> </p>
|
||||
<div class="showcase" id="relaunch">
|
||||
|
||||
<h2>ReLaunch | A Minecraft Launcher</h2>
|
||||
<h2 class="windowbar">ReLaunch | A Minecraft Launcher</h2>
|
||||
<img src="/assets/images/minecraftLauncher.png">
|
||||
<span>A launcher made with <a href="https://alphaver.miraheze.org/wiki/AlphaVer_Wiki" class="link">Alphaver</a> in mind. <br><br> It will/was going to have windows and linux support. <br> <br> <a class="link" href="http://git.vern.cc/gnawmon/ReLaunch">Git Repo</a></span>
|
||||
</div>
|
||||
|
|
@ -57,18 +65,24 @@
|
|||
<img src="/assets/images/minewatchWiki.png">
|
||||
<span>I wrote most of the pages. <br><br> Also please don't use fandom version of this wiki. <br> <br> <a href="https://minewatch.miraheze.org/wiki/Minewatch_Wiki" class="link">Link</a></span>
|
||||
</div>
|
||||
<div class="showcase" id="blur">
|
||||
<div class="showcase" id="bring">
|
||||
<h2>Bring</h2>
|
||||
<span style="margin-left: 20px; width: 75%;">A webring (software) written in python.<br><br> <a class="link" href="http://git.vern.cc/gnawmon/bring"> Git Repo</a> <br><br><a class="link" href="https://webring.crumpetalpaca.eu.org">Link</a> </span>
|
||||
</div>
|
||||
<div class="showcase" >
|
||||
|
||||
<h2>This Website?</h2>
|
||||
<span style="margin-left: 20px;">lorem ipsum i forgot </span>
|
||||
|
||||
<span>lorem ipsum sir i forgot the rest</span>
|
||||
</div>
|
||||
|
||||
|
||||
<br> <br>
|
||||
<!-- <button onclick="pauseVideo()">Pause the video</button> -->
|
||||
|
||||
</div>
|
||||
|
||||
<p class="paragraph bottomtext"><a href="http://git.vern.cc/gnawmon/website" class="link">source code</a></p>
|
||||
<div class="bottomThingThatEveryWebsiteHas"> <p>written by hand <br> some css in the ~vern theme is taken from <a class="link" href="http://git.vern.cc/vern/website">here</a> <br> <a href="http://git.vern.cc/gnawmon/website" class="link">source code</a> is avaible here, not sure why anybody would want to check it but here it is </p></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue