UI changes and code refactoring
This commit is contained in:
sairaj mote
parent
3dcb8b0e5a
commit
4a1c3de62a
File diff suppressed because one or more lines are too long
48
css/main.css
48
css/main.css
@ -800,28 +800,22 @@ ul {
|
||||
padding-bottom: 3rem;
|
||||
align-content: flex-start;
|
||||
}
|
||||
#landing sm-carousel {
|
||||
width: min(100%, 64rem);
|
||||
margin: 0 auto;
|
||||
align-self: flex-start;
|
||||
--nav-background-color: white;
|
||||
--nav-icon-fill: black;
|
||||
}
|
||||
|
||||
.landing__card {
|
||||
display: grid;
|
||||
position: relative;
|
||||
width: min(64rem, 100%);
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
padding: 2rem max(1rem, 6vw);
|
||||
padding: 2rem max(1rem, 4vw);
|
||||
border-radius: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
.landing__card h1 {
|
||||
font-size: max(2rem, 2.5vw);
|
||||
font-size: max(1.5rem, 2vw);
|
||||
}
|
||||
.landing__card img {
|
||||
width: min(100%, 24rem);
|
||||
width: min(100%, 16rem);
|
||||
}
|
||||
.landing__card:first-of-type {
|
||||
background-color: #2a2c35;
|
||||
@ -830,24 +824,6 @@ ul {
|
||||
.landing__card:first-of-type h1 {
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
.landing__card:nth-of-type(2) {
|
||||
background: url(../assets/globe.svg) no-repeat bottom right, rgba(var(--foreground-color), 1);
|
||||
background-size: max(60vw, 90vh);
|
||||
color: white;
|
||||
min-height: 24rem;
|
||||
}
|
||||
.landing__card:nth-of-type(2) img {
|
||||
align-self: flex-start;
|
||||
width: 20vmax;
|
||||
}
|
||||
.landing__card:nth-of-type(2) .grid {
|
||||
margin-top: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.landing__card:nth-of-type(2) p {
|
||||
margin-top: auto;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
#task_display_wrapper {
|
||||
margin: 0 auto;
|
||||
@ -1833,6 +1809,16 @@ input[type=date]:focus {
|
||||
.status-card__details {
|
||||
grid-area: 2/1/3/3;
|
||||
}
|
||||
.landing__card:first-of-type {
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
}
|
||||
.landing__card:first-of-type .flex {
|
||||
justify-content: center;
|
||||
}
|
||||
.landing__card:first-of-type img {
|
||||
grid-area: 1/1/2/2;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
.hide-on-desktop {
|
||||
@ -1847,6 +1833,12 @@ input[type=date]:focus {
|
||||
#secondary_pages header {
|
||||
padding: 1.5rem 8vw;
|
||||
}
|
||||
.landing__card {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
.landing__card img {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
#main_nav {
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -791,27 +791,21 @@ ul {
|
||||
overflow-y: auto;
|
||||
padding-bottom: 3rem;
|
||||
align-content: flex-start;
|
||||
sm-carousel {
|
||||
width: min(100%, 64rem);
|
||||
margin: 0 auto;
|
||||
align-self: flex-start;
|
||||
--nav-background-color: white;
|
||||
--nav-icon-fill: black;
|
||||
}
|
||||
}
|
||||
.landing__card {
|
||||
display: grid;
|
||||
position: relative;
|
||||
width: min(64rem, 100%);
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
padding: 2rem max(1rem, 6vw);
|
||||
padding: 2rem max(1rem, 4vw);
|
||||
border-radius: 1rem;
|
||||
align-items: center;
|
||||
h1 {
|
||||
font-size: max(2rem, 2.5vw);
|
||||
font-size: max(1.5rem, 2vw);
|
||||
}
|
||||
img {
|
||||
width: min(100%, 24rem);
|
||||
width: min(100%, 16rem);
|
||||
}
|
||||
&:first-of-type {
|
||||
background-color: #2a2c35;
|
||||
@ -820,25 +814,6 @@ ul {
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
background: url(../assets/globe.svg) no-repeat bottom right,
|
||||
rgba(var(--foreground-color), 1);
|
||||
background-size: max(60vw, 90vh);
|
||||
color: white;
|
||||
min-height: 24rem;
|
||||
img {
|
||||
align-self: flex-start;
|
||||
width: 20vmax;
|
||||
}
|
||||
.grid {
|
||||
margin-top: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
p {
|
||||
margin-top: auto;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
#task_display_wrapper {
|
||||
margin: 0 auto;
|
||||
@ -1813,6 +1788,18 @@ input[type="date"] {
|
||||
grid-area: 2/1/3/3;
|
||||
}
|
||||
}
|
||||
.landing__card {
|
||||
&:first-of-type {
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
.flex {
|
||||
justify-content: center;
|
||||
}
|
||||
img {
|
||||
grid-area: 1/1/2/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
.hide-on-desktop {
|
||||
@ -1831,6 +1818,12 @@ input[type="date"] {
|
||||
padding: 1.5rem 8vw;
|
||||
}
|
||||
}
|
||||
.landing__card {
|
||||
grid-template-columns: 1fr auto;
|
||||
img {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
#main_nav {
|
||||
padding: 0.5rem;
|
||||
|
||||
35
index.html
35
index.html
@ -82,31 +82,20 @@
|
||||
<theme-toggle></theme-toggle>
|
||||
</header>
|
||||
<div id="landing" class="grid inner-page hidden">
|
||||
<sm-carousel indicator>
|
||||
<div class="flex flex-wrap space-between gap-1-5 landing__card">
|
||||
<div class="grid gap-1-5">
|
||||
<h1 class="calistoga" style="max-width: 26rem;">
|
||||
Blockchain based <br> Internship Platform
|
||||
</h1>
|
||||
<div class="flex gap-0-3">
|
||||
<a href="#/sign_up" class="button"
|
||||
style="background-color: rgba( 0 0 0 / 0.3); padding: 0.8rem;">Get
|
||||
started</a>
|
||||
<a href="#/sign_in" class="button button--primary">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="assets/working-intern.svg" alt="">
|
||||
</div>
|
||||
<div class="flex flex-wrap space-between gap-1-5 landing__card">
|
||||
<img src="assets/paper-plane.svg" alt="">
|
||||
<div class="grid gap-0-5 text-align-right">
|
||||
<p>Work from place and time that suits <b class="uppercase">you</b></p>
|
||||
<h1 class="calistoga" style="max-width: 26rem;">
|
||||
Flexible, <br> Remote Work
|
||||
</h1>
|
||||
<div class="gap-1-5 landing__card">
|
||||
<div class="grid gap-1-5">
|
||||
<h1 class="calistoga" style="max-width: 26rem;">
|
||||
Blockchain based <br> Internship Platform
|
||||
</h1>
|
||||
<div class="flex gap-0-3">
|
||||
<a href="#/sign_up" class="button"
|
||||
style="background-color: rgba( 0 0 0 / 0.3); padding: 0.8rem;">Get
|
||||
started</a>
|
||||
<a href="#/sign_in" class="button button--primary">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</sm-carousel>
|
||||
<img src="assets/working-intern.svg" alt="">
|
||||
</div>
|
||||
<div id="task_display_wrapper" class="flex flex-wrap gap-2 justify-center">
|
||||
<div id="display_task_filters" class="grid gap-1">
|
||||
<h4>Filters</h4>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user