Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-08-04 09:15:28 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

card sections now responsive

Browse Source
This commit is contained in:
mrjvs 2018-11-05 11:15:14 +01:00
parent d81b47bdc6
commit 8782fd1440
3 changed files with 64 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/pretendo-common.css
View File

@ -164,8 +164,6 @@ button.btn-alt {
border: 1px solid #673db6;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
border-radius: 5px;
position: absolute;
bottom: 20px;
}
/* helper classes */
@ -174,4 +172,15 @@ button.btn-alt {
}
.flex-item {
flex: 1;
}
@media screen and (max-width: 500px) {
section.bigCardWrapper {
padding: 0;
padding-bottom: 3em;
}
section.bigCardWrapper .bigCard {
max-width: 100vw;
padding: 50px;
}
}

44
assets/css/pretendo-home.css
View File

@ -65,9 +65,6 @@ header h3 {
/* news cards */
.smallCard {
width: 100%;
max-width: 250px;
height: 350px;
padding: 20px;
border: 1px solid #9474cc; border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
@ -77,4 +74,45 @@ header h3 {
.smallCard h3 {
font-size: 1.5em !important;
margin: 0;
}
/* specific */
.smallCardWidth {
width: 100%;
max-width: 300px;
}
@media screen and (max-width: 1050px) {
.bigCard.cont-flex {
flex-direction: column;
}
.bigCard > .flex-item {
margin-bottom: 3em;
}
.smallCardWidth .smallCard {
margin-left: 0;
margin: 1em;
}
.bigCard.cont-flex > .cont-flex {
align-items: center;
justify-content: center;
}
}
@media screen and (max-width: 888px) {
.profile {
width: 100%;
max-width: 100%;
min-width: 100%;
}
.smallCard {
width: 100%;
max-width: 250px;
}
.smallCardWidth {
}
.bigCard.cont-flex > .cont-flex {
flex-direction: column;
}
}

20
views/newhome.hbs
View File

@ -103,15 +103,19 @@
<button class="btn">Learn more!</button>
</div>
<div class="cont-flex">
<div class="smallCard">
<h3 class="txt-smallHeading">Super cool</h3>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
<button class="btn-alt">Read more</button>
<div class="smallCardWidth">
<div class="smallCard">
<h3 class="txt-smallHeading">Super cool</h3>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
<button class="btn-alt">Read more</button>
</div>
</div>
<div class="smallCard">
<h3 class="txt-smallHeading">Super cool</h3>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
<button class="btn-alt">Read more</button>
<div class="smallCardWidth">
<div class="smallCard">
<h3 class="txt-smallHeading">Super cool</h3>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
<button class="btn-alt">Read more</button>
</div>
</div>
</div>
</div>