Skip to content

Commit

Permalink
Finished css and page contents
Browse files Browse the repository at this point in the history
  • Loading branch information
@faab007nl
faab007nl committed Dec 24, 2023
1 parent 6194131 commit 7fb87c4
Show file tree
Hide file tree
Showing 9 changed files with 671 additions and 430 deletions.
432 changes: 5 additions & 427 deletions resources/scss/app.scss
View file

Large diffs are not rendered by default.

225 changes: 225 additions & 0 deletions resources/scss/partials/auth-box.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
.auth-box-container{
display: grid;
place-items: center;

.auth-box-screen-to-small{
display: none;
}

.auth-box-title{
font-size: 2rem;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
.error-message{
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
border-radius: 6px;
border: 1px solid rgba(199, 40, 40, 0.48);
background: rgba(199, 40, 40, 0.16);
padding: 15px 30px;
margin-bottom: 10px;

.error-message-icon{
width: 45px;
height: 45px;
fill: #ff7273;

svg{
width: 100%;
height: 100%;
}
}
.error-message-text{
display: flex;
flex-direction: column;
gap: 5px;
.title{
font-size: 1.2rem;
font-weight: bold;
color: #ff7273;
}
.message{
font-size: 1rem;
color: #ff7273;
}
}
}
.success-message{
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
border-radius: 6px;
border: 1px solid rgba(40, 199, 111, 0.48);
background: rgba(40, 199, 111, 0.16);
padding: 15px 30px;
margin-bottom: 10px;

.success-message-icon{
width: 45px;
height: 45px;
fill: #28C76F;

svg{
width: 100%;
height: 100%;
}
}
.success-message-text{
display: flex;
flex-direction: column;
gap: 5px;
.title{
font-size: 1.2rem;
font-weight: bold;
color: #28C76F;
}
.message{
font-size: 1rem;
color: #28C76F;
}
}
}

.auth-box{
background-color: rgba(134, 146, 208, 0.08);
border: 1px solid rgba(134, 146, 208, 0.16);
border-radius: 10px;
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
width: 382px;

.info-text{
color: #FFF;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 28px;
}
.plugin-name{
color: #D7D8DE;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-size: 26px;
font-style: normal;
font-weight: 600;
line-height: 36px;
margin-bottom: 10px;
}
.from-text{
color: #8692D0;
font-feature-settings: 'clig' off, 'liga' off;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.current-version{
font-size: 1.2rem;
border-radius: 5px;
background: rgba(234, 84, 85, 0.24);
padding: 10px 5px;
width: 250px;
display: flex;
justify-content: center;
color: #ff7273;
}
.to-text{
color: #8692D0;
font-feature-settings: 'clig' off, 'liga' off;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 14px;
}
.update-to{
font-size: 1.2rem;
border-radius: 5px;
background: rgba(40, 199, 111, 0.16);
padding: 10px 5px;
width: 250px;
display: flex;
justify-content: center;
color: var(--Light-Solid-Color-Success-Success---300, #28C76F);
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 146.667% */
margin-bottom: 20px;
}
.auth-text{
color: #8692D0;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 22px;
width: 70%;
}

}

.discord-button{
border-radius: 10px;
background: rgba(66, 103, 178, 0.16);
display: flex;
height: 48px;
justify-content: center;
align-items: center;
gap: 10px;
align-self: stretch;
font-size: 1.1rem;
padding: 2px 0;
cursor: pointer;
transition: background 0.3s ease-in-out;
width: 80%;
margin: 0 auto;

svg{
width: 40px;
height: 40px;
}
&:hover{
background: rgba(66, 103, 178, 0.24);
}
}
.join-discord-btn{
width: 300px;
.discord-button{
width: 100%;
}
}
}

@media screen and (max-width: 470px){
.auth-box-container{
.auth-box-screen-to-small{
display: none;
}

.auth-box{
width: 100%;
}
}
}
@media screen and (max-width: 350px){
.auth-box-container{
.auth-box-screen-to-small{
display: block;
}
.auth-box{
display: none;
}
}
}
49 changes: 49 additions & 0 deletions resources/scss/partials/blobs.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
.page-blobs{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
z-index: 5;
overflow: hidden;
pointer-events: none;

.page-blob{
position: absolute;
filter: blur(175px);
aspect-ratio: 1;

&.page-blob-1{
background: radial-gradient(circle, rgba(0,128,255,1) 0%, rgba(0,171,255,0.5130427170868348) 58%, rgba(0,212,255,0) 100%);
top: -25%;
left: -20%;
width: 600px;
border-radius: 50%;
opacity: .3;
}
&.page-blob-2{
background: radial-gradient(circle, rgba(177,86,220,1) 0%, rgba(177,86,220,1) 58%, rgba(0,212,255,0) 100%);
top: 25%;
right: 0;
width: 600px;
border-radius: 50%;
opacity: .1;
}
&.page-blob-3{
background: radial-gradient(circle, rgba(0,128,255,1) 0%, rgba(0,171,255,0.5130427170868348) 58%, rgba(0,212,255,0) 100%);
bottom: 8%;
left: -15%;
width: 500px;
border-radius: 50%;
opacity: .2;
}
&.page-blob-4{
background: radial-gradient(circle, rgba(177,86,220,1) 0%, rgba(177,86,220,1) 58%, rgba(0,212,255,0) 100%);
bottom: -15%;
left: 10%;
width: 500px;
border-radius: 50%;
opacity: .2;
}
}
}
109 changes: 109 additions & 0 deletions resources/scss/partials/content.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
.app-content{
width: calc(100% - var(--container-padding) * 2);
padding: 0 var(--container-padding);
color: white;
margin: 100px 0 200px 0;
min-height: calc(100vh - 80px - 392px - 300px);

.page-title{
font-size: 4rem;
font-weight: bold;
margin-bottom: 10px;
}
.page-subtitle{
font-size: 1rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 50px;
}

.image-text-container{
width: 100%;
display: flex;


.image-container{
width: 50vw;
aspect-ratio: 16/9;
border-radius: 20px;

img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
}
.image-text{
width: calc(100% - 200px);
padding: 0 40px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;

&__title{
font-size: 1.5rem;
font-weight: bold;
}
&__subtitle{
font-size: 1rem;
}
}
}
}

@media screen and (max-width: 1000px){
.app-content{
.image-text-container{
.image-container{
width: 60vw;
}
}
}
}

@media screen and (max-width: 805px){
.app-content{
margin: 50px 0 100px 0;

.page-title{
text-align: center;
}
.page-subtitle{
text-align: center;
}
.image-text-container{
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;


.image-container{
width: 50vw;
}
.image-text{
padding: 0;
}
}
}
}
@media screen and (max-width: 630px){
.app-content{
.image-text-container{
.image-container{
width: 80vw;
}
.image-text{
width: 80vw;
}
}
}
}
@media screen and (max-width: 430px){
.app-content{
.page-title{
font-size: 3rem;
}
}
}
Loading

0 comments on commit 7fb87c4

Please sign in to comment.