kazhnuz/bluesky-bootstrap-theme
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improvement: refactor the whole preview system

Browse source
This commit is contained in:
Kazhnuz 2019-11-05 13:46:11 +01:00
parent 36db38dc5f
commit f649e2e8f2
3 changed files with 83 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
scss/components/_previews.scss
View file

@ -1,35 +1,15 @@
.previews-section {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
grid-gap: 1.5rem;
padding-bottom: 1.5rem;
}
.preview-container {
margin-bottom:1em;
padding:0.4em;
width:100%
}
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
.prev-col-2 .preview-container {
width:50%;
}
.prev-col-3 .preview-container {
width:33%;
}
.prev-col-4 .preview-container {
width:25%;
}
}
.card-preview {
@include border-radius();
width:100%;
@ -42,7 +22,6 @@
}
.preview-item {
height:200px;
overflow:hidden;
font-size:0.9em;
@ -62,27 +41,27 @@
.preview-content {
max-height:200px;
}
.preview-content > p {
& > p {
width:100%;
margin:auto;
}
.preview-content > p.p-img {
&.p-img {
text-align:center;
margin:auto;
padding:auto;
display: block;
width:100%;
}
}
.preview-content > p > img {
& > img {
max-width:100%;
height:auto;
vertical-align:middle;
margin:auto;
text-align:center;
}
}
}
.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
@ -108,9 +87,8 @@
background-color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
backdrop-filter: none;
}
.preview-overlay h1 {
h1 {
max-width:100%;
padding-top:0.3em;
margin:auto;
@ -119,6 +97,7 @@
display:block;
font-size:2em;
color: white;
}
}
.preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10 {

27
style.css
View file

@ -940,30 +940,17 @@ a.list-group-item:hover {
}
.previews-section {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
grid-gap: 1.5rem;
padding-bottom: 1.5rem;
}
.preview-container {
margin-bottom: 1em;
padding: 0.4em;
width: 100%;
}
@media (min-width: 992px) {
.prev-col-2 .preview-container {
width: 50%;
}
.prev-col-3 .preview-container {
width: 33%;
}
.prev-col-4 .preview-container {
width: 25%;
}
}
.card-preview {
border-radius: 3px 3px 3px 3px;
width: 100%;
@ -994,12 +981,10 @@ a.list-group-item:hover {
.preview-content {
max-height: 200px;
}
.preview-content > p {
width: 100%;
margin: auto;
}
.preview-content > p.p-img {
text-align: center;
margin: auto;
@ -1007,7 +992,6 @@ a.list-group-item:hover {
display: block;
width: 100%;
}
.preview-content > p > img {
max-width: 100%;
height: auto;
@ -1040,7 +1024,6 @@ a.list-group-item:hover {
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
backdrop-filter: none;
}
.preview-overlay h1 {
max-width: 100%;
padding-top: 0.3em;

2
style.css.map
View file

File diff suppressed because one or more lines are too long