flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add and edit responsive style on homepage

Browse Source
This commit is contained in:
Shelby Kay
2021-10-03 19:14:24 +02:00
parent f6da3c4b55
commit 54afac2ed5
11 changed files with 203 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/style/organisms/_footer.scss
View File

@@ -1,6 +1,10 @@
.footer {
height: 120px;
background-color: $color-primary-darker;
padding: 40px 0;
@include bp (sm) {
height: 120px;
}
.container {
align-items: center;
@@ -9,21 +13,44 @@
}
.site-title {
grid-column: 2 / span 3;
grid-column: 1 / span var(--columns);
grid-row: 1;
margin-bottom: 40px;
@include bp (sm) {
grid-column: 2 / span 5;
grid-row: 1;
margin: 0;
}
}
&__links {
grid-column: 5 / span 16;
grid-row: 1;
grid-column: 1 / span var(--columns);
grid-row: 2;
@include bp (sm) {
grid-column: 5 / span 16;
grid-row: 1;
}
ul {
display: flex;
justify-content: center;
@include bp (sm) {
display: flex;
justify-content: center;
}
}
li {
display: block;
margin: 0 16px;
margin-bottom: 16px;
@include bp (sm) {
margin: 0 16px;
}
&:last-child {
margin-bottom: 0;
}
}
a {
display: block;
@@ -38,9 +65,16 @@
}
&__ctf {
grid-column: 19 / span 5;
grid-row: 1;
grid-column: 1 / span var(--columns);
grid-row: 2;
margin-left: auto;
margin-top: auto;
@include bp (sm) {
grid-column: 19 / span 5;
grid-row: 1;
margin-top: 0;
}
span {
font-size: rem(12px);

7
src/style/organisms/_locations.scss
View File

@@ -1,5 +1,9 @@
.browse {
margin: 96px 0 128px;
margin: 96px 0;
@include bp (sm) {
margin-bottom: 128px;
}
// Description
&__description {
@@ -7,6 +11,7 @@
margin: 0 auto 32px;
max-width: 230px;
text-align: center;
color: $color-tertiary;
@include bp (sm) {
font-size: rem(28px);

80
src/style/organisms/_newsletter.scss
View File

@@ -14,33 +14,23 @@
--columns: 18;
grid-column: 4 / span var(--columns);
}
}
h3 {
color: $color-secondary;
margin-bottom: 16px;
}
p {
margin-bottom: 40px;
color: $color-text;
font-weight: 300;
}
span {
font-size: rem(16px);
line-height: 1.2;
color: rgba($color-text, 0.6);
}
h3 {
color: $color-secondary;
margin-bottom: 8px;
// Past issues
a {
text-decoration: none;
color: $color-text;
font-size: rem(14px);
span {
@include bp (sm) {
margin-bottom: 16px;
}
}
p {
margin-bottom: 32px;
color: $color-text;
margin-left: 12px;
border-bottom: 1px solid $color-text;
font-weight: 300;
@include bp (sm) {
margin-bottom: 40px;
}
}
}
@@ -49,11 +39,12 @@
position: relative;
display: flex;
width: 100%;
max-width: 600px;
height: 64px;
margin-bottom: 20px;
padding: 0 30px;
border-radius: 100vh;
box-shadow: inset 0 0 0 3px $color-secondary;
box-shadow: inset 0 0 0 2px $color-secondary;
transition: box-shadow 0.6s var(--ease-quart);
input {
@@ -95,8 +86,43 @@
// Past Issues
.past-issues {
display: flex;
justify-content: space-between;
display: block;
text-align: center;
font-size: rem(14px);
max-width: 600px;
@include bp (sm) {
display: flex;
justify-content: space-between;
font-size: rem(16px);
}
a {
text-decoration: none;
color: $color-text;
}
span {
font-size: rem(14px);
color: $color-text;
margin-left: 8px;
border-bottom: 1px solid $color-text;
@include bp (sm) {
margin-left: 16px;
}
}
p {
color: $color-gray;
line-height: 1.3;
margin-top: 16px;
margin-bottom: 0;
@include bp (sm) {
margin-top: 0;
}
}
}
// Variants

47
src/style/organisms/_shop.scss
View File

@@ -5,10 +5,12 @@
border-radius: 12px;
.content {
display: grid;
grid-template-columns: 40% 1fr;
grid-template-rows: 1fr;
height: 100%;
@include bp (sm) {
display: grid;
grid-template-columns: 40% 1fr;
grid-template-rows: 1fr;
height: 100%;
}
}
// Image
@@ -17,13 +19,18 @@
overflow: hidden;
img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
height: 216px;
object-fit: cover;
@include bp (sm) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
}
@@ -31,9 +38,13 @@
&__info {
display: flex;
flex-direction: column;
padding: 64px 72px 40px 64px;
padding: 32px 40px;
border-radius: 12px;
@include bp (sm) {
padding: 64px 72px 40px 64px;
}
.button {
margin-right: auto;
}
@@ -42,19 +53,31 @@
// Title
.title-medium {
color: $color-lightpurple;
margin-bottom: 16px;
margin-bottom: 8px;
@include bp (sm) {
margin-bottom: 16px;
}
}
p {
font-weight: 300;
margin-bottom: 24px;
margin-bottom: 20px;
@include bp (sm) {
margin-bottom: 24px;
}
}
.detail {
margin: auto 0 0;
padding-top: 24px;
padding-top: 32px;
color: $color-gray;
line-height: 1.4;
font-size: rem(14px);
@include bp (sm) {
padding-top: 24px;
}
}
}