radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Set various backgrounds on the different sections 

This is pretty much just working with what I have on hand,
ideally I would draw custom backgrounds for all the sections, using
jspaint, but this at least makes the animated GIFs feel more at home.
main
Isaiah Odhner 2023-08-11 05:38:47 -04:00
parent 52626f7350
commit c4cceb42d7
2 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
about.html
View File

@ -51,7 +51,7 @@
</head>
<body>
<section>
<section id="main-section">
<h1 style="text-align: center;">
<img src="images/icons/jspaint.svg" width="192" height="192" alt="">
<br>
@ -144,7 +144,7 @@
</div>
</section>
<section>
<section id="windows-98-section">
<h2>Windows 98 online</h2>
<p>
<a href="https://98.js.org" target="_blank">
@ -164,7 +164,9 @@
<img src="images/about/ENTERsolar.gif" width="128" height="45" alt="ENTER / 由此進入"
style="position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); mix-blend-mode: lighten">;
</a>
</section>
<section id="desktop-app-section">
<h2>Desktop Version</h2>
<img src="images/about/atombgwht.gif" width="60" height="65" alt="built with Electron" style="float: right;">
<p>
@ -219,7 +221,7 @@
</p>
</section>
<section>
<section id="other-projects-section">
<h2>Other Projects</h2>
<div id="junkbot-area" style="position: absolute; left: 40%">
<a href="https://1j01.github.io/janitorial-android/#junkbot" target="_blank">

31
styles/about.css
View File

@ -37,6 +37,29 @@ a[href^="https://98.js.org"]:focus #wooden-window-frame {
0 0 100px 50px rgba(100, 163, 214, 0.5);
}
#main-section {
background-image: url("../images/cursors/precise-dotted.png");
background-repeat: repeat;
background-size: 32px 32px;
/* background-color: lightgray; */
}
#windows-98-section {
background-image: url("https://raw.githubusercontent.com/1j01/98/361bd759a6d9b71d0fad9e479840598dc0128bb6/images/clouds.jpg");
background-color: rgb(100, 163, 214);
background-size: cover;
background-position: center center;
}
#desktop-app-section {
background-image: url("../images/about/atombgwht.gif");
background-repeat: repeat;
}
#desktop-app-section * {
background-color: yellow;
}
.os-icon {
display: inline-block;
vertical-align: middle;
@ -95,6 +118,14 @@ a[href^="https://98.js.org"]:focus #wooden-window-frame {
color: #ff0000;
}
#other-projects-section {
background-image: url("../images/tracky-mouse-16x16.png");
background-repeat: repeat;
background-size: 5.1px 160px;
background-color: #ffeb77;
background-blend-mode: overlay;
}
#junkbot-area {
display: inline-block;
padding: 50px;