RustyStriker/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

better colors and better looks

Browse source
This commit is contained in:
Aviv "RustyStriker" Romem 2022-04-16 17:40:41 +03:00
parent 26d7ec006c
commit d00b65bd1e
4 changed files with 130 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
another_page.html
View file

@ -6,56 +6,60 @@
<link rel="stylesheet" type="text/css" href="default_style.css" media="all">
</head>
<body onscroll="onBodyScroll()">
Oh good, the last page got really crowded,
ok, back to the nonsense!
<h1>
Links are stupid
</h1>
<h3>
"hErE's WhY"
</h3>
<p>
So, if you want a hyper link in your site,
you need to use the &lt;a&gt; tag, but you have a &lt;link&gt;
tag, which links to another file(to import it, which indeed is useful),
but like, it could have a more "correct" name, and if you want to get a hyper link
you need to use the &lt;a&gt; tag.
<br>
And, I'm not saying you need to remove/replace the link, but like,
instead of &lt;a&gt; do something like &lt;hyper&gt;
or &lt;hyperlink&gt; or even &lt;hlink&gt;
(the last one might be confusing since it looks a lot like link,
but it is still better than fucking &lt;a&gt;)
Oh good, the last page got really crowded,
ok, back to the nonsense!
</p>
<div style="width:60%; background-color: rgb(112, 26, 26); color:rgb(133, 255, 255); margin:auto;">
<div style="width: 98%;">
<h1>
Links are stupid
</h1>
<h3>
"hErE's WhY"
</h3>
<p>
Boy this page looks blend only with text,
and KDE keeps crashing on my laptop...
So, if you want a hyper link in your site,
you need to use the &lt;a&gt; tag, but you have a &lt;link&gt;
tag, which links to another file(to import it, which indeed is useful),
but like, it could have a more "correct" name, and if you want to get a hyper link
you need to use the &lt;a&gt; tag.
<br>
(in case you were wondering this div is "width:60%; margin:auto"
with some color values)
And, I'm not saying you need to remove/replace the link, but like,
instead of &lt;a&gt; do something like &lt;hyper&gt;
or &lt;hyperlink&gt; or even &lt;hlink&gt;
(the last one might be confusing since it looks a lot like link,
but it is still better than fucking &lt;a&gt;)
</p>
<div class="borderless" style="width:80%; background-color: rgb(112, 26, 26); color:rgb(133, 255, 255); margin:auto;">
<p>
Boy this page looks blend only with text,
and KDE keeps crashing on my laptop...
<br>
(in case you were wondering this div is "width:60%; margin:auto"
with some color values)
</p>
</div>
<p>
Any cool stuff I can try to make? Maybe an animated image
which flies in when you scroll down enough?
<br>
Sounds kinda stupid, and I hate it when websites makes scrolling
"digital"(by digital I mean it has discrete states, which I know everything
in computers are in discrete states since you cannot have the infinity in
a computer because reasons, but like, you get the point, its like having
a couple of stupid sites stitched on top of each other, which just sucks)
<br>
I will try it tho
</p>
</div>
<p>
Any cool stuff I can try to make? Maybe an animated image
which flies in when you scroll down enough?
<br>
Sounds kinda stupid, and I hate it when websites makes scrolling
"digital"(by digital I mean it has discrete states, which I know everything
in computers are in discrete states since you cannot have the infinity in
a computer because reasons, but like, you get the point, its like having
a couple of stupid sites stitched on top of each other, which just sucks)
<br>
I will try it tho
</p>
<div style="margin:auto;height: 350px;">
<div style="margin:auto;height: 360px;">
<img src="molly.jpg" width="350px" height="350px" style="float:left;">
<img id="animatedImage" src="louise.jpg" width="350px" height="350px" style="float:right; visibility: hidden;">
<div style="width: 50%; margin:auto;">
<div class="borderless" style="width: 40%; margin:auto; height: 300px;">
<p>
Please enjoy Molly's picture as I figure how to get the scroll data...
</p>
<div id="cat_par2" style="visibility: hidden;">
<div class="borderless" id="cat_par2" style="visibility: hidden;">
<p>
Taadaaa!
<br>
@ -64,13 +68,13 @@
But things to note here, both cats are using `style="float:right;"`
(with the sliding one also being invisible until the animation appears)
and the animation used is with the `animate` method(and a lot of trial and error)
<br><br>
Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
</p>
<p>
Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
</p>
</div>
</div>
</div>
<br>
<div>
<p>
Anyway, some questions arise while im doing this, like
@ -107,7 +111,7 @@
If i dont "trust" CSS i can just disable it.
<br>
But with JavaScript, it is a fully blown scripting language(a shitty one but still),
people made countless things with js, from fully featured web games, to a bloody backend system(why?).
people made countless things with js, from fully featured web games, to a bloody server backend(why?).
<br>
Also JavaScript is a script running locally, so if the browser did a bad job sandboxing it from the system,
some bad things may happen
@ -119,7 +123,7 @@
var needToAnimateImage = true;
function onBodyScroll() {
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
if (needToAnimateImage && scrollPercent > 0.99) {
if (needToAnimateImage && scrollPercent > 0.50) {
needToAnimateImage = false;
let img = document.getElementById("animatedImage");
img.style.visibility = "inherit";

42
default_style.css
View file

@ -1,5 +1,45 @@
body {
background-color: #01011f;
background-color: rgb(5, 0, 11);
color: rgb(255, 150, 150);
text-align: center;
align-content: center;
}
h1 {
color : rgb(255, 40, 60);
}
div {
width: 90%;
position: relative;
margin: auto;
align-self: center;
text-align: center;
border-color: rgb(60, 0, 90);
border-width: thick;
border-style: double;
background-color: rgb(21,0,31);
padding: 5px;
padding-bottom: 10px;
margin-bottom: 10px;
}
a {
color:rgb(150, 150, 255);
}
.borderless {
border-width: 0px;
}
.left {
float: left;
text-align: center;
clear: left;
width: 25%;
}
.right {
float: right;
text-align: center;
clear: right;
width: 25%;
}

60
index.html
View file

@ -13,31 +13,33 @@
<h1 style="color: crimson;">
Rusty's Awesome Test Site
</h1>
<p>
Welcome to my awesome test site,
I will Attempt to learn html using it,
and you can view my progress here(i guess)...
</p>
<p>
Why am i doing this for myself?
Because it is about time I learn to make websites
(and i want to really know how bad js is and if ts is actually any good)
</p>
<p style="background-color: whitesmoke; color: black; text-align: left;">
Imma do a lot of dumb shit here, like not centering this text.
<br>
And also giving it different colors
</p>
<p>
But enough with the games!
<h1>
I PRESENT TO YOU: &#129345;&#129345;&#129345;
</h1>
</p>
<p>
A button
</p>
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
<div>
<p>
Welcome to my awesome test site,
I will Attempt to learn html using it,
and you can view my progress here(i guess)...
</p>
<p>
Why am i doing this for myself?
Because it is about time I learn to make websites
(and i want to really know how bad js is and if ts is actually any good)
</p>
<p style="background-color: whitesmoke; color: black; text-align: left;">
Imma do a lot of dumb shit here, like not centering this text.
<br>
And also giving it different colors
</p>
<p>
But enough with the games!
<h1>
I PRESENT TO YOU: &#129345;&#129345;&#129345;
</h1>
</p>
<p>
A button
</p>
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
</div>
<div id="appearing-div" style="visibility: hidden;">
<p>
As you can see, clicking that button changes the background.
@ -66,8 +68,8 @@
<br>
Only one way to find out!
</p>
<input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
</div>
<input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
<div id="animated">
<p>
And now, I will attempt to animate this div
@ -82,9 +84,8 @@
(I really hope it works well)
</p>
<button onclick="animateDivAgain()">I hope this is better</button>
</div>
<p>
This is indeed MUCH MUCH better. BUT, it is experimental
<p>
This is indeed MUCH MUCH better. BUT, it is experimental
and not supported on everything or something
(like Safari, and also IE but that is deprecated).
<br>
@ -99,6 +100,7 @@
<br>
<a href="another_page.html">I am really not sure how it works</a>
</p>
</div>
</body>
<script>

13
template.html
View file

@ -1,18 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>__PAGE TITLE__</title>
<!--Style stuff -->
<link ref='stylesheet' type='text/css' href='default_style.css' media='all'>
<link rel="stylesheet" type="text/css" href="default_style.css" media="all">
</head>
<body>
<!--header>__PAGE HEADER__</header-->
<h1 style="color:crimson;">
<h1>
This is the actual page title!
</h1>
<p>
And some paragraphs here
</p>
<div>
<p>
And some paragraphs here
</p>
</div>
</body>
</html>