Develop #8
22
src/App.vue
22
src/App.vue
@@ -27,20 +27,20 @@ export default {
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
margin: 58px auto 0 auto;
|
||||
max-width: 1200px;
|
||||
padding: 2rem 1rem 1rem 1rem;
|
||||
background-color: @secondary-color;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='%230c9696' fill-opacity='0.35'%3E%3Cpath fill-rule='evenodd' d='M29.42 29.41c.36-.36.58-.85.58-1.4V0h-4v26H0v4h28c.55 0 1.05-.22 1.41-.58h.01zm0 29.18c.36.36.58.86.58 1.4V88h-4V62H0v-4h28c.56 0 1.05.22 1.41.58zm29.16 0c-.36.36-.58.85-.58 1.4V88h4V62h26v-4H60c-.55 0-1.05.22-1.41.58h-.01zM62 26V0h-4v28c0 .55.22 1.05.58 1.41.37.37.86.59 1.41.59H88v-4H62zM18 36c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm16-26a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 58a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 78a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zM34 4a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm-8 82a2 2 0 1 1 4 0v2h-4v-2zm0-68a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V18zM66 4a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm0 72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm-48 0a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm0-72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm24-4h4v2a2 2 0 1 1-4 0V0zm0 60a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V60zm14-24c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm-28-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM36 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-8-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 68a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-34a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-12a2 2 0 1 0 0 4 6 6 0 1 1 0 12 2 2 0 1 0 0 4 10 10 0 1 0 0-20zm-64 0a2 2 0 1 1 0 4 6 6 0 1 0 0 12 2 2 0 1 1 0 4 10 10 0 1 1 0-20zm56-12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-48 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm24 32a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-4a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm36-36a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM10 44c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm56 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm8 24c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zM3 68c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm0-48c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm71 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm6 66a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM8 86a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-68A6 6 0 1 1 8 2a6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm36 36a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/g%3E%3C/svg%3E");
|
||||
background-attachment: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
|
||||
h2 {
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
margin: 0 auto 1rem auto;
|
||||
width: max-content;
|
||||
padding-right: 1rem;
|
||||
padding-bottom: 0.35rem;
|
||||
font-size: 26px;
|
||||
border-bottom: 2px solid @primary-color;
|
||||
margin-bottom: 1.35rem;
|
||||
text-align: left;
|
||||
padding: 0.85rem 2rem 0.75rem 2rem;
|
||||
border-radius: 25px;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
||||
@@ -25,15 +25,15 @@ export default {
|
||||
column-gap: 1rem;
|
||||
row-gap: 1.5rem;
|
||||
|
||||
@media screen and (min-width: @sm) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@media screen and (min-width: @md) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media screen and (min-width: @lg) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
@media screen and (min-width: @xl) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,8 +28,8 @@ export default {
|
||||
|
||||
<style scoped lang="less">
|
||||
.grid-item {
|
||||
background-color: @secondary-color;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
|
||||
&:hover .thumbnail img {
|
||||
@@ -74,7 +74,7 @@ export default {
|
||||
|
||||
.tag {
|
||||
border-radius: 25px;
|
||||
padding: 0.55rem;
|
||||
padding: 0.55rem 0.75rem 0.35rem 0.75rem;
|
||||
margin-left: 0.75rem;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<nav class="main-nav">
|
||||
<nav id="header" class="main-nav">
|
||||
<img src="https://www.cycloid.io/themes/cycloid/images/owl_logo.png" alt="Cycloid.io" />
|
||||
<h1>Fruits</h1>
|
||||
</nav>
|
||||
@@ -7,7 +7,20 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Header"
|
||||
name: "Header",
|
||||
created() {
|
||||
// const header = document.getElementById("header");
|
||||
// this.observeElmt(header);
|
||||
},
|
||||
methods: {
|
||||
// observeElmt(elmt) {
|
||||
// const observer = new IntersectionObserver(
|
||||
// ([e]) => e.target.classList.toggle("box-shadow", e.intersectionRatio < 1),
|
||||
// { threshold: [1] }
|
||||
// );
|
||||
// observer.observe(elmt);
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -17,7 +30,8 @@ nav {
|
||||
align-items: center;
|
||||
background-color: @secondary-color;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0 19px 34px -15px #d2d2f2;
|
||||
// TODO: Use
|
||||
box-shadow: 0 0px 14px 0px #cecece;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
@@ -26,9 +40,11 @@ nav {
|
||||
}
|
||||
|
||||
&.main-nav {
|
||||
position: fixed;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
width: 100%;
|
||||
height: calc(58px - 0.5rem * 2);
|
||||
z-index: 15;
|
||||
|
||||
@@ -20,3 +20,10 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.fruits {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user