From 3c58857bf9f6958c23dda5013094b0cf5211c1ff Mon Sep 17 00:00:00 2001
From: Aayush Kumar Sahu <54525741+aayushmau5@users.noreply.github.com>
Date: Sat, 19 Sep 2020 22:56:44 +0530
Subject: [PATCH] Event and Team components with responsive design (#8)
---
src/components/EventComponent.svelte | 59 ++++++++++++++++++++++++++
src/components/Nav.svelte | 41 ++++++++++--------
src/components/TeamComponent.svelte | 63 ++++++++++++++++++++++++++++
src/routes/events.svelte | 36 +++++-----------
src/routes/team.svelte | 48 +++++++++------------
5 files changed, 175 insertions(+), 72 deletions(-)
create mode 100644 src/components/EventComponent.svelte
create mode 100644 src/components/TeamComponent.svelte
diff --git a/src/components/EventComponent.svelte b/src/components/EventComponent.svelte
new file mode 100644
index 0000000..78a8101
--- /dev/null
+++ b/src/components/EventComponent.svelte
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+
{title}
+
{about}
+
{time}
+
{location}
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 5629250..6965571 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -1,8 +1,11 @@
@@ -34,7 +37,8 @@
margin-right: 50px;
}
- a {
+ a,
+ .toggle-button {
text-decoration: none;
padding: .1em 0.25em;
display: block;
@@ -45,7 +49,8 @@
border-bottom: 2px solid #fff;
}
- a::after {
+ a::after,
+ .toggle-button::after {
content: "";
position: absolute;
bottom: 0;
@@ -58,20 +63,28 @@
background-color: #fff;
}
- a:hover::after {
+ a:hover::after,
+ .toggle-button:hover::after {
height: 100%;
opacity: 1;
}
- a:hover {
+ a:hover,
+ .toggle-button:hover {
color: #000;
}
.toggle-button {
+ background-color: transparent;
+ outline: none;
+ border: none;
+ border-bottom: 2px solid #fff;
+ color: white;
font-size: 2rem;
position: absolute;
display: none;
right: 28px;
+ cursor: pointer;
}
@media (max-width:700px) {
@@ -109,18 +122,10 @@
- ☰
- {#if active}
-
- {:else}
-
- {/if}
+ ☰
+
\ No newline at end of file
diff --git a/src/components/TeamComponent.svelte b/src/components/TeamComponent.svelte
new file mode 100644
index 0000000..2c27d2f
--- /dev/null
+++ b/src/components/TeamComponent.svelte
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/routes/events.svelte b/src/routes/events.svelte
index fddf0c6..98a2713 100644
--- a/src/routes/events.svelte
+++ b/src/routes/events.svelte
@@ -2,21 +2,16 @@
Events
-
+
EVENTS
-
-
-
-
-
-
HACKTOBERFEST
-
WIN A TSHIRT AT HACKTOBERFEST BY CONTRIBUTING TO OPEN SOURCE PROJECTS.
-
31 FEB 2023 12:30AM
-
LT5
-
-
+
+
\ No newline at end of file
diff --git a/src/routes/team.svelte b/src/routes/team.svelte
index 92b1421..4dcd35a 100644
--- a/src/routes/team.svelte
+++ b/src/routes/team.svelte
@@ -2,27 +2,22 @@
Team
-
+
TEAMS
Core Members
-
-
-
-
-
-
HACKTOBERFEST
-
WORLD’S GREATEST DETECTIVE. HE SOLVES CRIME AND HATES THE WORLD. GO TO HIS REPO TO SOLVE MURDER
- MYSTERIES.
-
-
-
+
+
@@ -32,22 +27,17 @@
font-weight: bold;
}
- .team-container {
- margin-top: 2rem;
- padding-bottom: 1rem;
- border-bottom: 1px solid white;
- }
-
- .team-member {
- display: flex;
+ .team-type {
+ font-weight: bold;
}
- .right {
- padding: 0 0 0 2rem;
+ .team-container {
+ font-family: 'Red Hat Display', sans-serif;
}
- .name {
- font-size: 3rem;
- font-weight: bold;
+ @media (max-width:700px) {
+ .main-title {
+ font-size: 2rem;
+ }
}
\ No newline at end of file