manos/Photos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bigger buttons, better spacing, and OCD

Browse Source
This commit is contained in:
Manos Katsomallos 2020-07-21 02:45:39 +02:00
parent 8b30d0bcd5
commit 287d101a30
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/styles.css
View File

@ -12,7 +12,7 @@ body {
margin: auto; margin: auto;
max-width: 1080px; max-width: 1080px;
box-sizing: content-box; box-sizing: content-box;
padding: 0 1em 1em 1em; padding: 0 1em;
} }
#list:target + .photos { #list:target + .photos {
@ -101,7 +101,7 @@ body {
top: 50%; top: 50%;
left: 50%; left: 50%;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 0 0.1em black; box-shadow: 0 0 .1em black;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
opacity: 1; opacity: 1;
z-index: 3; z-index: 3;
@ -123,7 +123,7 @@ body {
cursor: default; cursor: default;
pointer-events: auto; pointer-events: auto;
z-index: 1; z-index: 1;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, .5);
color: white; color: white;
text-shadow: 0 0 .1em black; text-shadow: 0 0 .1em black;
text-decoration: none; text-decoration: none;
@ -272,10 +272,10 @@ body {
} }
.button { .button {
filter: invert(100%) drop-shadow(0 0 0.1em black); filter: invert(100%) drop-shadow(0 0 .1em black);
display: inline-block; display: inline-block;
font-family: sans-serif; font-family: sans-serif;
font-size: calc(0.5em + 0.25vw); font-size: calc(.75em + .25vw);
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
@ -284,11 +284,11 @@ body {
width: 33.33%; width: 33.33%;
height: 2em; height: 2em;
padding: 0; padding: 0;
margin: 1em 0 1em 0; margin: 1em 0;
} }
.button:hover { .button:hover {
filter: invert(90%) drop-shadow(0 0 0.1em black); filter: invert(90%) drop-shadow(0 0 .1em black);
} }
#footer { #footer {
@ -299,7 +299,7 @@ body {
#footer .text { #footer .text {
margin-top: 2em; margin-top: 2em;
font-size: 0.75em; font-size: .75em;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
color: gray; color: gray;