phga
/
phga.de-legacy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Sorting the css properties

Browse Source
master
Toerd@480 5 years ago
parent 8ed171a311
commit 2f9512bb87
2 changed files with 54 additions and 53 deletions
Show Stats Download Patch File Download Diff File

105
inc/css/main.css
Unescape View File

@ -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;
font-family: hkg, sans-serif;
color: var(--c2);
padding: 0;
margin: 0;
text-decoration: none;
color: var(--c2);
font-family: hkg, sans-serif;
}
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);
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;
left: 97.5vw;
bottom: 2.5vh;
overflow-y: auto;
overflow-x: hidden;
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 {
/* 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;
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;
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);
top: 17vh;
left: 50vw;
height: calc(var(--h-info) * 0.5);
margin-left: calc(var(--h-info) * 0.25 * -0.70);
top: 17vh;
}
.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;
}

2
tmpl/soon.html
Unescape View File

@ -1,3 +1,3 @@
{{define "body"}}
<h1 class="coming-soon">❤ COMING SOON ❤</h1>
<div class="coming-soon"><p>❤ COMING SOON ❤</p></div>
{{end}}

Write Preview
Loading…
Cancel
Save