Skip to content

Commit

Permalink
Big changes to CSS
Browse files Browse the repository at this point in the history 
elements adjust to screen size
  • Loading branch information
@ThaBluNate
ThaBluNate committed Dec 5, 2022
1 parent 4e919c3 commit 9da1ae6
Show file tree
Hide file tree
Showing 6 changed files with 41 additions and 38 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
.gitignore
README.md
README.md
Binary file modified assets/set.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion cookie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ function wipe(){delcook('gif');delcook('time')}
function save(){cookset('gif',document.getElementById('slide').value);cookset('time',document.getElementById('text').value)}

cookchie('gif','3')
cookchie('time','4000')
cookchie('time','4000')
32 changes: 17 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>ClassicMonet</title>
<meta name="description" content="10 Years of CacheMonet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="./assets/icons/icon.png" />
<link id="icon" rel="icon" type="image/png" href="./assets/icons/icon.png" />
<script src="./cookie.js" async defer></script>
<link rel="stylesheet" href="./site.css">
<script src="./site.js" async defer></script>
Expand All @@ -14,32 +14,34 @@
<meta name="theme-color" content="#ddd"/>
<link rel="manifest" href="./manifest.json">
</head>

<body onClick="reTimer()" style="background-image:none">
<audio loop id="Audio"><source src="./assets/windowdipper.mp3" type="audio/mpeg"></audio>
<div id="topdiv">
<button aria-label="Sound" id="sound" onClick="snd()" style="background-image:url('./assets/mute.png')"></button>
<button aria-label="Settings" id="set" onClick="settings('open')" style="background-image:url('./assets/set.png')"></button>
<button aria-label="My Github" onClick="githubPage()" class="git"></button>
</div>
<image alt="foreground" src="" id="center"></image>

<div id="setpanel" class="invis">
<div id="top">
<image alt="Icon" src="./assets/icons/icon.png" id="icon" width="30px"></image>
<image alt="Icon" src="./assets/icons/icon.png" id="icons" width="30px"></image>
<h1>Settings</h1>
<button aria-label="Close Settings" onClick="settings('close')" style="background-color:#eee;border:#eee;width:34px;height:30px;border-radius:0;right:0px;background-size:contain;background-image:url('./assets/close.png')"></button>
<button aria-label="Close Settings" id="close" onClick="settings('close')"></button>
</div>
<h2>GIF pak</h2>
<input type="range" min="1" max="3" value="3" id="slide">
<h2 style="top:40px">GIF pak</h2>
<h2 id="GIFs" style="top:100px">...</h2>
<hr style="top:135px"/>
<h2 style="top:140px">Time (MS)</h2>
<input id="text" type="number" style="top:170px" value=4000 onchange="chTimer()" />
<h2 id="MS" style="top:200px">Time MS</h2>
<h2 style="top:220px">=</h2>
<h2 id="Sec" style="top:240px">Time Sec</h2>
<image id="sav" alt="Save" onclick="save()" onmousedown="md()" onmouseup="mu()" style="top:270px;position:absolute;width:115px;" src="./assets/save.png"></image>
<image id="del" alt="Delete" onclick="wipe()" onmousedown="md(1)" onmouseup="mu(1)" style="top:270px;right:0px;position:absolute;width:115px;" src="./assets/del.png"></image>
<button aria-label="My Github" onClick="githubPage()" class="git" style="background-image:url('./assets/git.png')"></button>
<button aria-label="Request a GIF" onClick="reqPage()" class="gif" style="background-image:url('./assets/gif.png')"></button>
<h2 id="GIFs">...</h2>
<h2>Time (MS)</h2>
<input id="text" type="number" value=4000 onchange="chTimer()" />
<h2 id="MS">Time MS</h2>
<h2>=</h2>
<h2 id="Sec">Time Sec</h2>
<div id="sadel">
<image id="sav" alt="Save" onclick="save()" onmousedown="md()" onmouseup="mu()" src="./assets/save.png"></image>
<image id="del" alt="Delete" onclick="wipe()" onmousedown="md(1)" onmouseup="mu(1)" src="./assets/del.png"></image>
</div>
</div>
</body>
</html>
43 changes: 22 additions & 21 deletions site.css
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
*{padding:0;cursor:url('./assets/cur.png'),default;margin:0;image-rendering:pixelated;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
button{background-repeat:no-repeat;top:0;right:0;position:absolute;width:40px;height:40px;border-radius:100%;background-color:#000;background-size:cover;border:#000}
*{cursor:url('./assets/cur.png'),default;padding:0;margin:0;image-rendering:pixelated;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
button{background-repeat:no-repeat;top:0;right:0;position:absolute;height:max(40px,7vh);aspect-ratio:1/1;border-radius:100%;background-color:#000;background-size:cover;border:#000}
body{width:100vw;height:100vh;overflow:hidden}
input{left:10%;position:absolute;width:80%;height:25px;background:#d3d3d3;outline:none;-webkit-appearance:none;border:0}
input::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:25px;height:25px;background:#777}
input::-moz-range-thumb {width:25px;height:25px;background:#777}
h1{color:#ddd;font-size:25px;top:0;left:35px;position:absolute;font-family:monospace}
h2{color:#333;font-size:25px;position:absolute;font-family:monospace;text-align:center;width:100%}
input{font-size:max(25px,3vh);margin-left:10%;width:80%;height:max(25px,3vh);background:#d3d3d3;outline:none;-webkit-appearance:none;border:0}
input::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:max(25px,3vh);height:max(25px,3vh);background:#777}
input::-moz-range-thumb {width:max(25px,3vh);height:max(25px,3vh);background:#777}
h1{color:#ddd;font-size:max(25px,2.5vh);font-family:monospace}
h2{color:#333;font-size:max(25px,4vh);font-family:monospace;text-align:center;width:100%}
hr{position:absolute;width:100%;border-left:0;border-right:0}
.git{top:310px;right:70px;}
.gif{top:310px;right:120px;}
#set{right:45px}
.git{background-image:url('./assets/git.png');right:16vh}
#set{right:8vh}
#icons{width:max(30px,3vh);height:max(30px,3vh)}
#close{background-color:#0000;position:absolute;border:#eee;height:max(30px,3vh);aspect-ratio:34/30;border-radius:0;right:0px;background-size:contain;background-image:url('./assets/close.png')}
#slide{top:70px}
#center{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}
#setpanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:230px;height:355px;background-color:#c0c0c0}
#top{position:absolute;top:0;left:0;height:30px;width:100%;background:linear-gradient(90deg,rgba(0,0,153,1)0%,rgba(0,255,255,1)100%)}
#center{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:100vw;height:calc(100vh - 14vh);object-fit:contain}
#setpanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:max(230px, 90vw);height:max(355px,60vh);background-color:#c0c0c0}
#top{display:flex;height:max(30px,3vh);width:100%;background:linear-gradient(90deg,rgba(0,0,153,1)0%,rgba(0,255,255,1)100%)}
#sliderinfo{top:65px}
.invis{visibility:hidden}
@media screen and (min-width:2560px){
button{width:120px;height:120px}
#setpanel{transform:scale(2);height:375px !important}
#set{right:125px !important}
.git{width:60px;height:60px;right:50px !important}
.gif{width:60px;height:60px;right:130px !important}
}
#sadel{display:flex;flex-wrap:wrap}
#sav,#del{width:clamp(115px,50%,550px)}
#del{margin-left:calc(100% - clamp(115px,50%,550px) * 2)}
#set:hover{animation:speen 1s cubic-bezier(0.56, -0.25, 1, 1) alternate}
@keyframes speen{to{transform: rotate(360deg)}}
@keyframes unspeen{to{transform: rotate(0deg)}}

.invis{visibility:hidden}
1 change: 0 additions & 1 deletion site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ chTimer(cookget('gif'))
if('serviceWorker' in navigator){navigator.serviceWorker.register('./sw.js')} //PWA setup

function githubPage(){window.location.href="https://github.com/ThaBluNate/ClassicMonet"}
function reqPage(){window.location.href="https://github.com/ThaBluNate/ClassicMonet/issues/new"}

function snd(){ //This runs if you click the sound button
if(sndv==0){
Expand Down

0 comments on commit 9da1ae6

Please sign in to comment.