windows have correct buttons from xp.css, formatted the files a bit

puksh · Jul 15, 2024 · afb1da9 · afb1da9
1 parent 2b5363e
commit afb1da9
Show file tree

Hide file tree

Showing 3 changed files with 278 additions and 305 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">    
+    <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
     <meta http-equiv="X-Content-Type-Options" content="nosniff">
@@ -25,8 +26,6 @@
     <meta name="twitter:title" content="kot  kot  kot">
     <meta name="twitter:description" content="A kot has appeared.">
     <meta name="twitter:image" content="https://kot.li/images/meow%20(35).webp">
-    <meta name="twitter:site" content="@SephirothSword_">
-
 </head>
 
 <body>
@@ -46,7 +45,7 @@
             <img src="startButton.png" alt="Start button">
         </a>
     </div>
-    
+
     <script src="startButton.js"></script>
     <script src="window.js"></script>
     <script src="gallery.js"></script>
@@ -98,4 +97,5 @@
 Microsoft SQL Native Client err
 Query failed: ERROR: syntax error at or nea
 -->
+
 </html>
diff --git a/styles.css b/styles.css
@@ -1,43 +1,33 @@
-/*@keyframes gradient {
-	0% {
-		background-position: 0% 50%;
-	}
-	50% {
-		background-position: 100% 50%;
-	}
-	100% {
-		background-position: 0% 50%;
-	}
-}
-*/
-html, body{
-    margin: 0;
-    padding: 0;
-    height: 100%;
-}
-
-@font-face{
-  font-family:"Pixelated MS Sans Serif";
-  src:url(fonts/ms_sans_serif.woff2) format("woff2");
-  src:url(fonts/ms_sans_serif.woff) format("woff");
-  font-weight:400;
-  font-style:normal;
-}
-@font-face{
-  font-family:"Pixelated MS Sans Serif";
-  src:url(fonts/ms_sans_serif_bold.woff2) format("woff2");
-  src:url(fonts/ms_sans_serif_bold.woff) format("woff");
-  font-weight:700;
-  font-style:normal;
-}
-
-  @font-face{
-    font-family:"Perfect DOS VGA 437 Win";
-    src:  url(fonts/PerfectDOSVGA437Win.woff2) format("woff2"),
-          url(fonts/PerfectDOSVGA437Win.woff) format("woff");
-    font-weight:400;
-    font-style:normal;
-  }
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+@font-face {
+  font-family: "Pixelated MS Sans Serif";
+  src: url(fonts/ms_sans_serif.woff2) format("woff2");
+  src: url(fonts/ms_sans_serif.woff) format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Pixelated MS Sans Serif";
+  src: url(fonts/ms_sans_serif_bold.woff2) format("woff2");
+  src: url(fonts/ms_sans_serif_bold.woff) format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Perfect DOS VGA 437 Win";
+  src: url(fonts/PerfectDOSVGA437Win.woff2) format("woff2"),
+    url(fonts/PerfectDOSVGA437Win.woff) format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
 
 
 .desktop {
@@ -46,9 +36,9 @@ html, body{
   left: 0;
   width: 100%;
   height: 100vh;
-  background:url(windows-xp-bliss-4k-lu-1920x1080.jpg);
-  overflow:hidden;
-  height:100%;
+  background: url(windows-xp-bliss-4k-lu-1920x1080.jpg);
+  overflow: hidden;
+  height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
@@ -58,8 +48,8 @@ html, body{
   pointer-events: auto;
 }
 
-h1{ 
-  font-family: "Pixelated MS Sans Serif",Arial;
+h1 {
+  font-family: "Pixelated MS Sans Serif", Arial;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -71,33 +61,33 @@ h1{
   padding: 0px;
   width: 100%;
   height: 28px;
-  background: linear-gradient(180deg, 
-            #4590f5 5%, 
-            #225fdc 25%, 
-            #255fda 50%, 
-            #225fdc 75%, 
-            #1045af 95%);
+  background: linear-gradient(180deg,
+      #4590f5 5%,
+      #225fdc 25%,
+      #255fda 50%,
+      #225fdc 75%,
+      #1045af 95%);
   z-index: 8;
-
 }
+
 .startbutton {
-    display: block;
-    width: 82px;
-    height: 27px;
-    overflow: hidden;
-    cursor: pointer;
-  }
-  
-  .startbutton img {
-    width: 82px;
-  }
-  
-  .startbutton:hover img {
-    transform: translateY(-27px);
-  }
-  
-  .startbutton.clicked img {
-    transform: translateY(-54px);
+  display: block;
+  width: 82px;
+  height: 27px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.startbutton img {
+  width: 82px;
+}
+
+.startbutton:hover img {
+  transform: translateY(-27px);
+}
+
+.startbutton.clicked img {
+  transform: translateY(-54px);
 }
 
 
@@ -132,40 +122,13 @@ h1{
 
 .window {
   position: absolute;
-  width: 400px;
+  width: 420px;
   height: 200px;
-  background-color: #f1f1f1;
-  border: 3px solid #4590f5;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   display: flex;
   flex-direction: column;
   z-index: 4 !important;
 }
 
-.header {
-  background-color: #0078D7;
-  color: white;
-  padding: 3px;
-  cursor: move;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.header-buttons {
-  display: flex;
-  min-height: 23px;
-  padding: 0 12px;
-}
-
-.header-buttons button {
-  background: none;
-  border: none;
-  color: white;
-  font-weight: bold;
-  cursor: pointer;
-}
-
 .content {
   flex-grow: 1;
   padding: 10px;
@@ -192,10 +155,12 @@ h1{
   flex-wrap: wrap;
   gap: 10px;
 }
+
 #gallery.loaded img {
-  width:100%;
-  height:auto
+  width: 100%;
+  height: auto
 }
+
 .column {
   flex: 1;
   display: flex;
@@ -211,6 +176,8 @@ h1{
   background: #fff;
 }
 
-.gallery-container.loaded .imgGrooby, .window, body.disable-select {
+.gallery-container.loaded .imgGrooby,
+.window,
+body.disable-select {
   user-select: none;
 }