Create Home.module.css

src/routes/Home/Home.module.css

@@ -0,0 +1,81 @@
+.banner {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+ background-color: #080A0E;
+ height: 250px;
+
+ color: white;
+}
+
+.banner > h1 {
+ font-weight: 300;
+}
+
+.blue {
+ color: var(--accent);
+}
+
+.content {
+ display: flex;
+ padding: 25px;
+ align-items: flex-start;
+ gap: 25px;
+ align-self: stretch;
+ min-height: calc(100% - 250px);
+
+ background: var(--white-background);
+}
+
+.content_inner {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ gap: 25px;
+ flex: 1 0 0;
+}
+
+.sidebar {
+ display: flex;
+ width: 350px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 25px;
+ align-self: stretch;
+}
+
+.discord_box {
+ display: flex;
+ padding: 25px;
+ align-items: flex-start;
+ gap: 10px;
+ align-self: stretch;
+
+ border-radius: 8px;
+ background: #5561EF;
+
+ color: #FFF;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ text-transform: uppercase;
+
+ /* background-image: linear-gradient(133deg, #4458D1 45.69%, rgba(17, 52, 132, 0.00) 95.38%), url(/src/assets/DiscordBanner.png);
+ background-position: 0, 115.562px -55.512px;
+ background-size: auto, 114% 290.613%;
+ background-repeat: no-repeat, no-repeat; */
+
+ background-image: linear-gradient(90deg, #4458D1 40%, rgba(17, 52, 132, 0.00) 75%), url(/src/assets/Background.png);
+ background-position: 0, 115.562px -55.512px;
+ background-size: auto, 114% 290.613%;
+ background-repeat: no-repeat, no-repeat;
+}
+
+@media only screen and (max-width: 1100px) {
+ .sidebar {
+ display: none;
+ }
+}