hello
This commit is contained in:
parent
749310f99f
commit
ff46b9b1f5
9 changed files with 8666 additions and 46 deletions
|
@ -1,52 +1,71 @@
|
|||
.photos-list {
|
||||
|
||||
.photos-list-title {
|
||||
margin-bottom: 1em;
|
||||
.fa {
|
||||
margin-right: 10px;
|
||||
.photos-list-title {
|
||||
margin-bottom: 1em;
|
||||
.fa {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photos-list-photos {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column-gap: 1.2em;
|
||||
grid-row-gap: 1.2em;
|
||||
justify-content: center;
|
||||
}
|
||||
.photos-list-photos {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column-gap: 1.2em;
|
||||
grid-row-gap: 1.2em;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.photos-list-item {
|
||||
border-radius: 5px;
|
||||
height: 17.5em;
|
||||
min-width: 14em;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.photos-list-item {
|
||||
border-radius: 5px;
|
||||
height: 17.5em;
|
||||
/*min-width: 14em;*/
|
||||
width:17.5em;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transition: opacity 0.2s;
|
||||
span#caption{
|
||||
display:none;
|
||||
background-color:rgba(27, 27,27, 0.7);
|
||||
color:white;
|
||||
width:17.5em;
|
||||
overflow:auto;
|
||||
height:17.5em;
|
||||
word-wrap:break-word;
|
||||
word-break:break-word;
|
||||
padding:10px;
|
||||
text-decoration:none!important;
|
||||
}
|
||||
|
||||
.photos-list-item:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
}
|
||||
.photos-list-item:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
span#caption{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
.photos-more {
|
||||
float: right;
|
||||
}
|
||||
.photos-more {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: $responsive-medium) {
|
||||
.photos-list {
|
||||
.photos-list-photos {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
.photos-list {
|
||||
.photos-list-photos {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/*.photos-list-item {
|
||||
min-width: 17.5em;
|
||||
span#caption{
|
||||
width:calc(17.5em - 10px);
|
||||
}
|
||||
}*/
|
||||
}
|
||||
.photos-list-item {
|
||||
min-width: 17.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@ $responsive-large: 1500px;
|
|||
|
||||
|
||||
@import "tailwind.min";
|
||||
@import url('https://fonts.googleapis.com/css?family=Audiowide|Roboto+Slab');
|
||||
@import "robotocss";
|
||||
@import url('https://use.fontawesome.com/releases/v5.3.1/css/all.css');
|
||||
|
||||
@import "variables";
|
||||
|
|
12
assets/scss/robotocss.css
Normal file
12
assets/scss/robotocss.css
Normal file
|
@ -0,0 +1,12 @@
|
|||
@font-face {
|
||||
font-family: 'Audiowide';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/v20.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/v34.ttf) format('truetype');
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue