Projects/nettsiden
8
2
Fork 1
Code Issues 15 Pull Requests 1 Activity

redo css, adaptive scaling

Browse Source
This commit is contained in:
Felix Albrigtsen
2022-01-25 15:04:00 +01:00
parent 3335f5958e
commit 516287ee85
4 changed files with 75 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
www/css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

62
www/css/gallery.css
View File

@@ -1,28 +1,54 @@
body, main {
body, main, html {
width: 100%;
margin: 0;
padding: 0;
}
main {
background-color: #ddd;
margin-top: 4em;
margin-top: 3em;
margin-left: 0 !important; /* Override style.css */
margin-right: 0 !important;
padding: 4em;
}
.gallery-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
width: 95%;
margin: 6em auto 15px auto;
grid-template-columns: repeat(3, minmax(0, 1fr));;
width: 100%;
grid-gap: 20px;
}
figure {
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border-radius: 1.5em;
background-color: #f1f1f1;
width: 100%;
}
.card-image-div {
margin: auto 0;
max-height: 45vh;
overflow: hidden;
border-radius: 1.5em;
}
.card-image {
margin: auto 0;
object-fit: scale-down;
object-position: 0 50%;
object-position: center;
max-width: 100%;
object-fit: cover;
max-height: 45vh;
object-position: center;
vertical-align: center;
}
.card-body, .card-footer {
font-family: monospace;
text-align: left;
width: 90%;
margin: 0;
word-wrap: break-word;
}
.card-body {
font-size: 1.5em;
}
/* #region modal */
@@ -97,7 +123,7 @@ figure {
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 72px;
font-size: 4em;
font-weight: bold;
transition: 0.3s;
}
@@ -111,15 +137,17 @@ figure {
/* #region screen-size media-rules */
@media only screen and (min-width:320px) {
.gallery-container {grid-template-columns: 1fr !important; }
.gallery-container { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
main { padding: 1em; }
}
@media only screen and (min-width: 641px) {
.gallery-container { grid-template-columns: repeat(2, 1fr) !important;}
.gallery-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
main { padding: 1em; }
}
@media only screen and (min-width: 961px) {
.gallery-container { grid-template-columns: repeat(3, 1fr) !important;}
.gallery-container { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media only screen and (min-width: 1281px) {
.gallery-container { grid-template-columns: repeat(4, 1fr) !important;}
.gallery-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* #endregion */