sorogon/StaticGalleryBuilder
1
0
Fork 0
mirror of https://github.com/greflm13/StaticGalleryBuilder.git synced 2026-02-05 02:59:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

changed info display position

Browse Source
This commit is contained in:
Flo Greistorfer
2024-07-07 23:57:08 +02:00
parent ce58a65ac7
commit 03af91e1a1
6 changed files with 114 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
files/global.css
View File

@@ -10,45 +10,6 @@ body {
height: 100%;
}
.tooltip {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 100;
top: 40px;
left: 50%;
transform: translate(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.folders {
text-align: center;
display: -ms-flexbox;
@@ -93,74 +54,6 @@ figure {
margin: 0;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 12.5%;
flex: 12.5%;
max-width: 12.5%;
padding: 0 4px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a four column-layout instead of eight columns */
@media screen and (max-width: 1000px) {
.column {
-ms-flex: 25%;
flex: 25%;
max-width: 25%;
}
.folders img {
width: 80px;
}
.folders figcaption {
width: 100px;
font-size: small;
}
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
.folders img {
width: 60px;
}
.folders figcaption {
width: 80px;
font-size: x-small;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
.folders img {
width: 40px;
}
.folders figcaption {
width: 60px;
font-size: xx-small;
}
}
.caption {
padding-top: 4px;
text-align: center;
@@ -192,6 +85,7 @@ figure {
position: fixed;
top: 0;
width: 100%;
font-size: large;
}
.navbar li {
@@ -210,4 +104,108 @@ figure {
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.tooltip {
position: relative;
}
.tooltip .tooltiptext {
display: none;
width: max-content;
position: absolute;
z-index: 100;
opacity: 0;
transition: opacity 0.3s;
padding: 12px;
}
.tooltip:hover .tooltiptext {
display: block;
opacity: 1;
}
.tooltip:active .tooltiptext {
display: block;
opacity: 1;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 12.5%;
flex: 12.5%;
max-width: 12.5%;
padding: 0 4px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a four column-layout instead of eight columns */
@media screen and (max-width: 1000px) {
.column {
-ms-flex: 25%;
flex: 25%;
max-width: 25%;
}
.folders img {
width: 80px;
}
.folders figcaption {
width: 100px;
font-size: small;
}
.navbar {
font-size: medium;
}
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
.folders img {
width: 60px;
}
.folders figcaption {
width: 80px;
font-size: x-small;
}
.navbar {
font-size: small;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
.folders img {
width: 40px;
}
.folders figcaption {
width: 60px;
font-size: xx-small;
}
.navbar {
font-size: smaller;
}
}