From fb8e284e12a739d4f37d92934ab5c0fb1762ee77 Mon Sep 17 00:00:00 2001
From: Trygve <trygve@posteo.net>
Date: Tue, 13 Apr 2021 21:28:13 +0200
Subject: [PATCH] Fiksa litt css

---
 css/main.css            | 38 ++++++++++++++++++-----
 diverse/index.php       |  2 +-
 filopplasting/index.php |  6 ++--
 speedtest/index.php     | 68 ++++++++++++++++++++---------------------
 4 files changed, 69 insertions(+), 45 deletions(-)

diff --git a/css/main.css b/css/main.css
index a1c18bd..d2be092 100644
--- a/css/main.css
+++ b/css/main.css
@@ -7,6 +7,8 @@
   --dark-text-color: #eeeeee;
   --dark-btn-color: #303f9f;
   --dark-link-color: #5C6BC0;
+  --dark-shadow-color: #1a1a1a;
+
 }
 body {
   min-height: 100%;
@@ -20,6 +22,7 @@ body {
   --text-color: black;
   --btn-color: #303f9f;
   --link-color: #3949AB;
+  --shadow-color: rgba(0,0,0,.15);
   background-color: var(--bg-color);
   color: var(--text-color);
 
@@ -78,6 +81,7 @@ a {
 /* Container for main content */
 .cont {
   margin: auto;
+  min-width: 20%;
   background: var(--cont-bg-color);
   border-radius: 1rem;
   grid-area: main;
@@ -99,17 +103,16 @@ a {
   background-repeat: no-repeat;
   width: 10rem;
   height: 8rem;
-  border: thin solid #3c4043;
-  border-radius: 0.5rem;
-  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
 
-.service-list li:hover {
+.service-list li a:focus {
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-  box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important;
-
+  box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem var(--shadow-color) !important;
+}
+.service-list li a:hover {
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  box-shadow: 0 0 2px 2px var(--accent-color), 0 .5rem 1rem var(--shadow-color) !important;
 }
-
 
 .service-list li a {
   font-size: 1.5rem;
@@ -124,6 +127,10 @@ a {
   flex-flow: column;
   align-items: center;
   justify-content: center;
+
+  border: thin solid #3c4043;
+  border-radius: 0.5rem;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
 
 .service-list li a div {
@@ -140,10 +147,23 @@ a {
 
 @media screen and (max-width:600px){
   .cont {
+    max-width: 100%;
     width: calc(100% - 0.5rem);
     padding: 0.25rem;
   }
 }
+@media only screen and (max-width:800px){
+  .cont {
+    max-width: 90%;
+  }
+}
+
+@media only screen and (min-width:800px){
+  .cont {
+    max-width: 80%;
+  }
+}
+
 @media only screen and (min-width:1000px){
   .cont {
     padding: 1rem;
@@ -161,6 +181,9 @@ a {
   html {              
     font-size: 20px;
   }
+  .cont {
+    max-width: 40%;
+  }
 }
 
 
@@ -175,6 +198,7 @@ a {
     --btn-color: var(--dark-btn-color);
     --accent-color: var(--dark-accent-color);
     --link-color: var(--dark-link-color);
+    --shadow-color: var(--dark-shadow-color);
     }    
     #li-nextcloud {  }
     #li-matrix { filter: invert(); }
diff --git a/diverse/index.php b/diverse/index.php
index 454acf3..86aa425 100644
--- a/diverse/index.php
+++ b/diverse/index.php
@@ -14,7 +14,7 @@
 
 <div class="cont">
 
-<h1>Flere saker</h1>
+<h1 class="center-txt">Flere saker</h1>
 <ul>
   <li><a href="/phpsysinfo/">Server info</a></li>
   <li><a href="/active-forks/">Gaffelsøker</a></li>
diff --git a/filopplasting/index.php b/filopplasting/index.php
index 4ae7f05..3cb08c7 100755
--- a/filopplasting/index.php
+++ b/filopplasting/index.php
@@ -48,11 +48,11 @@ session_start();
     Her kan du laste opp filer for å dele med andre. Filene kan være maks 5GB.<br /> Serveren ligger i Kristiansand og har 500/500 internet <br />
     All opplasting skjer på eget ansvar.
   </p>
-  <div>
-    <a class="center-txt" href="http://trygve.me/filopplasting/filer/">Se alle filer</a>
+  <div class="center-txt">
+    <a href="http://trygve.me/filopplasting/filer/">Se alle filer</a>
   </div>
   <hr class="my-4">
-   <div>
+   <div class="center-txt">
      <form action="upload.php" method="post" enctype="multipart/form-data">
        <div class="form-group">
          <input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="123" />
diff --git a/speedtest/index.php b/speedtest/index.php
index 09b688a..9500b47 100644
--- a/speedtest/index.php
+++ b/speedtest/index.php
@@ -17,40 +17,40 @@
   <?php include "../common/header.html"; ?>
 
 <div class="cont">
-
-	<button id="startStopBtn" onclick="startStop()"></button>
-	<div id="test">
-        <div class="testGroup">
-			<div class="testArea2">
-				<div class="testName">Ping</div>
-				<div id="pingText" class="meterText" style="color:#3949ab"></div>
-				<div class="unit">ms</div>
-			</div>
-			<div class="testArea2">
-				<div class="testName">Jitter</div>
-				<div id="jitText" class="meterText" style="color:#3949ab"></div>
-				<div class="unit">ms</div>
-			</div>
-		</div>
-		<div class="testGroup">
-			<div class="testArea">
-				<div class="testName">Download</div>
-				<canvas id="dlMeter" class="meter"></canvas>
-				<div id="dlText" class="meterText"></div>
-				<div class="unit">Mbps</div>
-			</div>
-			<div class="testArea">
-				<div class="testName">Upload</div>
-				<canvas id="ulMeter" class="meter"></canvas>
-				<div id="ulText" class="meterText"></div>
-				<div class="unit">Mbps</div>
-			</div>
-		</div>
-		<div id="ipArea">
-			<span id="ip"></span>
-		</div>
-	</div>
-	<a href="https://github.com/librespeed/speedtest">Source code</a>
+  <h1 class="center-txt">Nettverkstest</h1>
+  <button id="startStopBtn" onclick="startStop()"></button>
+  <div id="test">
+  <div class="testGroup">
+    <div class="testArea2">
+      <div class="testName">Ping</div>
+      <div id="pingText" class="meterText" style="color:#3949ab"></div>
+      <div class="unit">ms</div>
+    </div>
+    <div class="testArea2">
+      <div class="testName">Jitter</div>
+      <div id="jitText" class="meterText" style="color:#3949ab"></div>
+      <div class="unit">ms</div>
+    </div>
+  </div>
+  <div class="testGroup">
+  <div class="testArea">
+  <div class="testName">Download</div>
+  <canvas id="dlMeter" class="meter"></canvas>
+  <div id="dlText" class="meterText"></div>
+  <div class="unit">Mbps</div>
+  </div>
+  <div class="testArea">
+  <div class="testName">Upload</div>
+  <canvas id="ulMeter" class="meter"></canvas>
+  <div id="ulText" class="meterText"></div>
+  <div class="unit">Mbps</div>
+  </div>
+  </div>
+  <div id="ipArea">
+  <span id="ip"></span>
+  </div>
+</div>
+<a href="https://github.com/librespeed/speedtest">Source code</a>
 
 </div>
 <script type="text/javascript">setTimeout(function(){initUI()},100);</script>