Sorting the css properties
This commit is contained in:
Toerd@480
parent
8ed171a311
commit
2f9512bb87
111
inc/css/main.css
111
inc/css/main.css
@ -1,6 +1,6 @@
|
||||
@font-face {
|
||||
font-family: hkg;
|
||||
src: url("/inc/fonts/HKGrotesk-Regular.woff");
|
||||
font-family: hkg;
|
||||
}
|
||||
|
||||
:root {
|
||||
@ -18,19 +18,19 @@
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
color: var(--c2);
|
||||
font-family: hkg, sans-serif;
|
||||
color: var(--c2);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html, body {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -38,7 +38,7 @@ body {
|
||||
}
|
||||
|
||||
header, #bg-box, #exhibition, .flying-text {
|
||||
border-radius: 0.8vh;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
@ -50,19 +50,19 @@ header, #bg-box, #exhibition, .flying-text {
|
||||
header {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: var(--h-header);
|
||||
font-size: 1.5vmax;
|
||||
background-color: var(--c1);
|
||||
width: 60%;
|
||||
height: var(--h-header);
|
||||
margin: 2.5vh auto;
|
||||
text-align: center;
|
||||
background-color: var(--c1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
min-width: 16%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@ -75,9 +75,9 @@ a:hover {
|
||||
}
|
||||
|
||||
#logo img {
|
||||
filter: grayscale(1);
|
||||
width: calc(var(--h-header) + 3vh);
|
||||
margin-top: -1.5vh;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
#logo img:hover {
|
||||
@ -85,7 +85,7 @@ a:hover {
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
header {
|
||||
header {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
@ -100,28 +100,28 @@ a:hover {
|
||||
scrollbar-width: none;
|
||||
|
||||
transform-origin: bottom left;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
background-color: var(--c1);
|
||||
position: absolute;
|
||||
/* because of the transform width and height are switched */
|
||||
width: var(--h-ex);
|
||||
height: 95vw;
|
||||
left: 97.5vw;
|
||||
bottom: 2.5vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
position: absolute;
|
||||
background-color: var(--c1);
|
||||
/* because of the transform width and height are switched */
|
||||
bottom: 2.5vh;
|
||||
left: 97.5vw;
|
||||
width: var(--h-ex);
|
||||
height: 95vw;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.thumb-box {
|
||||
height: var(--h-ex-thumb);
|
||||
margin-top: calc(var(--h-ex-thumb) * 0.53);
|
||||
transform-origin: bottom left;
|
||||
/* keep the ~ratio of a photo
|
||||
(spacing should be the same all the time) */
|
||||
width: calc(var(--h-ex-thumb) * 1.49);
|
||||
transform-origin: bottom left;
|
||||
/* shift the thumbs 1*width to the left */
|
||||
height: var(--h-ex-thumb);
|
||||
margin-top: calc(var(--h-ex-thumb) * 0.53);
|
||||
/* shift the thumbs 1.49*width to the left */
|
||||
transform: rotate(90deg) translateX(calc(var(--h-ex-thumb) * -1.49));
|
||||
}
|
||||
|
||||
@ -130,14 +130,14 @@ a:hover {
|
||||
}
|
||||
|
||||
.thumb {
|
||||
filter: blur(2px) grayscale(1);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(2px) grayscale(1);
|
||||
}
|
||||
|
||||
.thumb:hover {
|
||||
cursor: pointer;
|
||||
filter: grayscale(0);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@ -146,29 +146,26 @@ a:hover {
|
||||
|
||||
#info-box {
|
||||
position: relative;
|
||||
height: var(--h-info);
|
||||
width: 95%;
|
||||
height: var(--h-info);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#bg-box {
|
||||
background-color: var(--c1);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--c1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#info-box table {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
padding: 5vh;
|
||||
/* Element does not respect the padding of parent >:|
|
||||
So I will make it respect it...*/
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
padding: 5vh;
|
||||
margin-bottom: 2.5vh;
|
||||
|
||||
}
|
||||
|
||||
#info-box table * {
|
||||
@ -185,13 +182,13 @@ a:hover {
|
||||
}
|
||||
|
||||
#btn-close {
|
||||
position: absolute;
|
||||
font-size: 4.5vw;
|
||||
color: var(--c2);
|
||||
top: 1.6vw;
|
||||
right: 1.6vw;
|
||||
/* I made this a bit smaller to make alignment easier */
|
||||
line-height: 2.0vw;
|
||||
font-size: 4.5vw;
|
||||
position: absolute;
|
||||
right: 1.6vw;
|
||||
top: 1.6vw;
|
||||
color: var(--c2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -203,20 +200,20 @@ a:hover {
|
||||
/******************* MAGNIFY *******************/
|
||||
|
||||
.magnify {
|
||||
display: inline-block;
|
||||
max-width: 60%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-clip: content-box;
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
||||
#bg-box {
|
||||
background-color: var(--c1);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--c1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -224,7 +221,7 @@ a:hover {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0 2.5vh;
|
||||
padding: 0 2.5%;
|
||||
margin-top: 7.5vh;
|
||||
}
|
||||
|
||||
@ -234,7 +231,6 @@ a:hover {
|
||||
|
||||
#info-box img {
|
||||
max-height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.magnify {
|
||||
@ -250,39 +246,44 @@ a:hover {
|
||||
|
||||
#welcome {
|
||||
position: absolute;
|
||||
height: var(--h-info);
|
||||
width: 100%;
|
||||
top: 12.5vh;
|
||||
width: 100%;
|
||||
height: var(--h-info);
|
||||
}
|
||||
|
||||
#welcome img {
|
||||
position: relative;
|
||||
height: calc(var(--h-info) * 0.5);
|
||||
left: 50vw;
|
||||
margin-left: calc(var(--h-info) * 0.25 * -0.70);
|
||||
top: 17vh;
|
||||
left: 50vw;
|
||||
height: calc(var(--h-info) * 0.5);
|
||||
margin-left: calc(var(--h-info) * 0.25 * -0.70);
|
||||
}
|
||||
|
||||
.flying-text {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
color: var(--c2);
|
||||
position: absolute;
|
||||
font-size: 0.01vw;
|
||||
color: var(--c2);
|
||||
background-color: var(--c1);
|
||||
padding: 0.5vw;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 0.5vw;
|
||||
text-align: center;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/******************* COMING SOON *******************/
|
||||
|
||||
.coming-soon {
|
||||
text-align: center;
|
||||
}
|
||||
.coming-soon p{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 8vmin;
|
||||
color: var(--c2);
|
||||
top: 30vh;
|
||||
background-color: var(--c1);
|
||||
border-radius: 1vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{{define "body"}}
|
||||
<h1 class="coming-soon">❤ COMING SOON ❤</h1>
|
||||
<div class="coming-soon"><p>❤ COMING SOON ❤</p></div>
|
||||
{{end}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user