kamilniemczycki/kamilcraft.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Repair project button

Browse Source
This commit is contained in:
Kamil Niemczycki 2021-08-30 20:00:18 +02:00
parent ea3568ef88
commit 4178ac505b
2 changed files with 53 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/router/index.js
View File

@ -15,7 +15,7 @@ const routes = [
path: '/', path: '/',
name: 'Home', name: 'Home',
meta: { meta: {
title: 'Witam serdecznie 😊' title: 'Witam! 😊'
}, },
component: Home component: Home
}, },

84
src/views/Projects.vue
View File

@ -11,12 +11,12 @@
<div class="description"> <div class="description">
<p>{{ project.short_description }}</p> <p>{{ project.short_description }}</p>
</div> </div>
<div class="more-button"> </div>
<base-btn has-icon <div class="more-button">
icon="info" <base-btn has-icon
is-reverse icon="eye"
class="btn">Szczegóły</base-btn> is-reverse
</div> class="btn">O projekcie</base-btn>
</div> </div>
</div> </div>
</div> </div>
@ -29,11 +29,12 @@
padding: 15px 10px; padding: 15px 10px;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(80px, auto); grid-auto-rows: minmax(80px, auto);
column-gap: 20px; column-gap: 25px;
row-gap: 15px; row-gap: 20px;
.project { .project {
display: grid; display: grid;
position: relative;
grid-template-areas: 'image content'; grid-template-areas: 'image content';
background-color: #EFEFEF; background-color: #EFEFEF;
border: 1px solid rgba(0, 0, 0, .025); border: 1px solid rgba(0, 0, 0, .025);
@ -64,22 +65,6 @@
padding: 5px 0; padding: 5px 0;
} }
.more-button {
z-index: 6;
position: absolute;
left: 0;
bottom: 5px;
width: 100%;
.btn {
width: 100%;
min-width: unset;
max-width: 270px;
margin: 0 auto;
font-size: .8em;
}
}
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -96,6 +81,37 @@
} }
} }
@media screen and (min-width: 901px) {
.project {
.more-button {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
.btn {
display: none;
}
&:hover {
background: rgba(0, 0, 0, .3);
.btn {
display: flex;
color: white;
border-style: none;
&:hover {
background-color: #385c8a;
}
}
}
}
}
}
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
.project { .project {
grid-template-areas: 'image' 'content'; grid-template-areas: 'image' 'content';
@ -108,16 +124,20 @@
.project-content { .project-content {
height: auto; height: auto;
max-height: 250px; max-height: 250px;
}
.more-button { .more-button {
display: block; display: block;
bottom: 0; position: unset;
margin-top: 8px;
height: auto;
left: unset;
top: unset;
.btn {
display: flex;
width: 100%; width: 100%;
border-radius: 0;
.btn { border-style: solid;
width: 100%;
border-radius: 0;
}
} }
} }
} }