Skip to content

Commit

Permalink
2nd Commit (Homepage + Menu 1 SASS)
Browse files Browse the repository at this point in the history
arthur-lemeur committed Oct 21, 2022
0 parents commit 8cd7a2b
Showing 37 changed files with 980 additions and 0 deletions.
Binary file added .DS_Store
Binary file not shown.
64 changes: 64 additions & 0 deletions CSS/normalizer.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
padding: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
padding: 0;
list-style-type: none;
}

/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}

/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a {
text-decoration: none;
}

/* Make images easier to work with */
img,
picture {
width:100%;
max-width: 100%;
display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
padding: 0;
}
Binary file added SASS/.DS_Store
Binary file not shown.
Binary file added SASS/abstracts/.DS_Store
Binary file not shown.
13 changes: 13 additions & 0 deletions SASS/abstracts/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
$padding: 3vh;

$shadows: 1px 2px 10px rgba(128, 128, 128, 0.431);

$shadows-hover: 2px 4px 10px rgba(102, 99, 99, 0.909);

$color-hover: #9356dc;

$color_new-background: #99e2d0;

$color_new-text: #008766;

$color_background-menus: #f6f6f6;
3 changes: 3 additions & 0 deletions SASS/base/_base.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
body {
max-width: 768px;
}
34 changes: 34 additions & 0 deletions SASS/base/_typography.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
h1 {
font-family: "Shrikhand", cursive;
font-size: 30px;
}

* {
font-family: "Roboto", sans-serif;
color: black;
}
header p,
h4 {
font-weight: 500;
}

h2 {
font-weight: 700;
}

p {
font-weight: 300;
}

.heart {
transform: scale(0.1);
}

.item_selection {
h3 {
font-size: 16px;
}
p {
font-size: 12px;
}
}
13 changes: 13 additions & 0 deletions SASS/components/_buttons.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.button-discover {
padding: 1vh 2vh;
border-radius: 25px;
border: 0px;
color: white;
background-image: linear-gradient(#ff79da, #9356dc);
box-shadow: $shadows;
&:hover {
cursor: pointer;
opacity: 80%;
box-shadow: $shadows-hover;
}
}
10 changes: 10 additions & 0 deletions SASS/components/_display.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.display_new {
width: 25%;
padding: 1%;
position: absolute;
top: $padding;
right: $padding;
text-align: center;
color: $color_new-text;
background-color: $color_new-background;
}
78 changes: 78 additions & 0 deletions SASS/components/_menus.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
.cards-home {
border-radius: 15px;
box-shadow: $shadows;
position: relative;
margin-bottom: $padding;
figure {
img {
border-radius: 15px 15px 0px 0px;
height: 200px;
object-fit: cover;
}
figcaption {
padding: 1vh;
}
}
i {
position: absolute;
bottom: $padding;
right: $padding;
transform: scale(1.5);
}
}

.item_selection {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
border: 0px solid white;
border-radius: 10px;
box-shadow: $shadows;
margin-top: $padding;
padding-left: 1vh;
position: relative;
text-align: left;
height: 60px;
flex: 4;
.selector {
height: 100%;
display: none;
background-color: #99e2d0;
width: 20%;
border-radius: 0px 9px 9px 0px;
position: relative;
flex: 1;
.fa-solid {
transform: scale(1.5);
color: white;
position: absolute;
top: 35%;
left: 35%;
}
}
> div {
flex-wrap: nowrap;
flex: 3;
overflow: hidden;
}
> h3 {
display: flex;
border-radius: 0px 9px 9px 0px;
font-size: medium;
height: 100%;
max-width: 15%;
text-align: end;
align-items: flex-end;
flex: 1;
}
&:hover {
.selector {
display: block;
}
div {
> p {
display: none;
}
}
}
}
19 changes: 19 additions & 0 deletions SASS/layout/_footer.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
footer {
background-color: #353535;
gap: 1vh;
padding-bottom: $padding;
* {
color: white;
text-align: left;
margin-left: 3vh;
justify-content: start;
padding-top: 0.7vh;
}
h1 {
padding: $padding;
}
a {
display: flex;
align-items: center;
}
}
38 changes: 38 additions & 0 deletions SASS/layout/_header.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
header {
h1 {
text-align: center;
border-bottom: 1px solid white;
box-shadow: $shadows;
padding: 1vh;
position: relative;
}
div {
display: flex;
justify-content: center;
align-items: center;
background-color: #eaeaea;
padding: 1vh;
gap: 1vh;
}
}
.header_menus {
display: flex;
border-bottom: 1px solid white;
box-shadow: $shadows;
padding: 1vh;
position: relative;
align-items: center;
justify-content: center;
height: 60px;
h1 {
text-align: center;
border-bottom: 0px;
box-shadow: 0px 0px white;
}
i {
transform: scale(1.5);
position: absolute;
left: $padding;
top: $padding;
}
}
Loading

0 comments on commit 8cd7a2b

Please sign in to comment.