Skip to content

Commit

Permalink
new theme v1
Browse files Browse the repository at this point in the history
  • Loading branch information
@briangtn
briangtn committed Feb 18, 2024
1 parent 7f805d2 commit 7a24128
Show file tree
Hide file tree
Showing 11 changed files with 104 additions and 97 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ json_schemas/interfaces/
.idea
.iml
.npmrc
.DS_STORE
4 changes: 0 additions & 4 deletions src/components/commun/jumbo/jumbo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
font-size: 3rem;
background-size: contain;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: transparent;
position: relative;
// background: var(--primary);
Expand Down
5 changes: 3 additions & 2 deletions src/components/home/home.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
.jumbo {

.logo-jumbo-home {
width: 100%;
height: 50%;
flex-grow: 1;
img {
height: 100%;
width: 70%;
height: auto;
width: 100%;
margin: auto;
display: block;
}
Expand Down
19 changes: 10 additions & 9 deletions src/components/home/jumbo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,17 @@ export const HomeJumbo = () => {
<div className="logo-jumbo-home">
<img
alt="logo"
src="/images/logo_transparent.svg"
height="200"
width="400"
src="/images/jumbo-image.jpg"
/>
</div>

<Typography variant="h1" textAlign="center">
{t("come-back")}
</Typography>
<Typography variant="h1" textAlign="center">
{t("date")}
</Typography>
<div>
<Typography variant="h1" textAlign="center">
{t("come-back")}
</Typography>
<Typography variant="h1" textAlign="center">
{t("date")}
</Typography>
{/*<Typography*/}
{/* variant="h2"*/}
{/* textAlign="center"*/}
Expand Down Expand Up @@ -113,6 +112,8 @@ export const HomeJumbo = () => {
<Button href="/our-values" color="secondary">{t('bring-ecocup')}</Button>
</Stack> */}
</Stack>
</div>

{/* <Modal open={modalOpen} onClose={() => setModalOpen(false)} className={"modal-apps"}>
<Paper className={"modal-content"}>
<Box className={"modal-body"}>
Expand Down
6 changes: 3 additions & 3 deletions src/layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
<CssBaseline />
<Topbar
toggleDrawer={toggleDrawer}
logo="/images/logo-long-bleu-blanc.svg"
logo="/images/logo-long.png"
/>

<BarMenu isOpen={isOpen} toggleDrawer={toggleDrawer} />
Expand Down Expand Up @@ -74,8 +74,8 @@ const Topbar: React.FC<{
className="logo-top-bar"
src={logo}
alt="Logo Devfest"
height="50"
width="150"
height="64"
width="226"
/>
</MyLink>
</Box>
Expand Down
154 changes: 77 additions & 77 deletions src/layout/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,66 @@
}

body {
--primary: #1a213d;
--primary-dark: #0e1324;
--primary: #000000;
--primary-dark: #000000;
--primary-light: #3577bc;
--secondary-light: #e9764f;
--secondary: #d14f34;
--secondary-light: #ba433f;
--secondary: #ff4e53;
--tertiary: #fcefb2;
--tertiary-dark: #f9e075;

background-color: var(--primary-dark) !important;

&:has(.jumbo), &:has(.hero) {

&:before {
content: "";
position: absolute;
z-index: -1000;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(
310deg,
transparent 75%,
rgba(255, 255, 255, 0.9) 79.5%,
rgba(255, 255, 255, 0.9) 80.5%,
transparent 85%
);
@media (max-width: 960px) {
background: linear-gradient(
300deg,
transparent 75%,
rgba(255, 255, 255, 0.9) 79.5%,
rgba(255, 255, 255, 0.9) 80.5%,
transparent 85%
);
}
}
&:after {
content: "";
z-index: -1000;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(
50deg,
transparent 75%,
rgba(255, 255, 255, 0.9) 79.5%,
rgba(255, 255, 255, 0.9) 80.5%,
transparent 85%
);
@media (max-width: 960px) {
background: linear-gradient(
60deg,
transparent 75%,
rgba(255, 255, 255, 0.9) 79.5%,
rgba(255, 255, 255, 0.9) 80.5%,
transparent 85%
);
}
}
// &:before {
// content: "";
// position: absolute;
// z-index: -1000;
// top: 0;
// width: 100%;
// height: 100%;
// background: linear-gradient(
// 310deg,
// transparent 75%,
// rgba(255, 255, 255, 0.9) 79.5%,
// rgba(255, 255, 255, 0.9) 80.5%,
// transparent 85%
// );
// @media (max-width: 960px) {
// background: linear-gradient(
// 300deg,
// transparent 75%,
// rgba(255, 255, 255, 0.9) 79.5%,
// rgba(255, 255, 255, 0.9) 80.5%,
// transparent 85%
// );
// }
// }
// &:after {
// content: "";
// z-index: -1000;
// position: absolute;
// top: 0;
// width: 100%;
// height: 100%;
// background: linear-gradient(
// 50deg,
// transparent 75%,
// rgba(255, 255, 255, 0.9) 79.5%,
// rgba(255, 255, 255, 0.9) 80.5%,
// transparent 85%
// );
// @media (max-width: 960px) {
// background: linear-gradient(
// 60deg,
// transparent 75%,
// rgba(255, 255, 255, 0.9) 79.5%,
// rgba(255, 255, 255, 0.9) 80.5%,
// transparent 85%
// );
// }
// }

}
}
Expand All @@ -89,30 +89,30 @@ a.md-link {
}
}

.bande-film-top {
&::before {
background-image: url("/images/bande-film.svg");
content: "";
height: 50px;
width: 100%;
background-repeat: repeat-x;
position: relative;
}
}
// .bande-film-top {
// &::before {
// background-image: url("/images/bande-film.svg");
// content: "";
// height: 50px;
// width: 100%;
// background-repeat: repeat-x;
// position: relative;
// }
// }

.bande-film-bottom {
&::after {
background-image: url("/images/bande-film.svg");
content: "";
height: 50px;
width: 100%;
bottom: -50px;
background-repeat: repeat-x;
position: relative;
}
// .bande-film-bottom {
// &::after {
// background-image: url("/images/bande-film.svg");
// content: "";
// height: 50px;
// width: 100%;
// bottom: -50px;
// background-repeat: repeat-x;
// position: relative;
// }

&.jumbo {
height: calc(100vh - 15px);
padding-bottom: 50px;
}
}
// &.jumbo {
// height: calc(100vh - 15px);
// padding-bottom: 50px;
// }
// }
12 changes: 10 additions & 2 deletions src/layout/theme.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { createTheme } from "@mui/material";
import "./theme.scss";

const primary = "#1a213d";
const primary = "#000000";
// const primary = "#d14f34";
const secondary = "#d14f34";
const secondary = "#ff4e53";
// const primary = "#c14d32";
// const secondary = "#36666a";
// A custom theme for this app
Expand Down Expand Up @@ -47,6 +47,14 @@ const theme = createTheme({
},
}
},
MuiAppBar: {
styleOverrides: {
root: {
backgroundColor: "#000000",
borderBottom: "2px solid " + secondary,
}
},
},
MuiButton: {
styleOverrides: {
containedSecondary: {
Expand Down
Binary file added static/images/jumbo-image.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 static/images/logo-long-bleu.svg → static/images/logo-long-bleu-old.svg
View file
File renamed without changes
Binary file added static/images/logo-long.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 static/images/logo_transparent.svg → static/images/logo_transparent-old.svg
View file
File renamed without changes

0 comments on commit 7a24128

Please sign in to comment.