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 @@