burkkyy/calebburke.dev
1
0
Fork 0
generated from alphane/template
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

making the sign in page simple

Browse Source
This commit is contained in:
Caleb Burke
2026-06-25 01:34:19 -07:00
parent 172e07060a
commit b5d44d2bb3
2 changed files with 87 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/SignInPage.vue
+8 -7
View File
@@ -12,24 +12,24 @@
class="px-8" class="px-8"
style="max-width: 500px" style="max-width: 500px"
> >
<img <!-- <img
class="d-inline-block d-lg-none" class="d-inline-block d-lg-none"
src="@/assets/app_logo_small.png" src="@/assets/app_logo_small.png"
style="height: 66px; transform: rotate(-12deg)" style="height: 66px; transform: rotate(-12deg)"
/> /> -->
<h2 <h2
class="text-h1 textPrimary font-weight-semibold mb-0" class="text-h1 textPrimary font-weight-semibold mb-0"
style="font-size: 2.5rem !important" style="font-size: 2.5rem !important"
> >
CALEBBURKEDEV {{ APPLICATION_NAME }}
</h2> </h2>
<h6 class="text-h6 text-medium-emphasis d-flex align-center mt-6 font-weight-medium"> <h6 class="text-h6 text-medium-emphasis d-flex align-center mt-6 font-weight-medium">
<v-btn <v-btn
block block
color="primary" color="primary"
text="Sign in"
@click="doLogin" @click="doLogin"
>Sign in</v-btn />
>
</h6> </h6>
<!-- <!--
@@ -59,7 +59,7 @@
</div> </div>
</div> </div>
</v-col> </v-col>
<v-col <!-- <v-col
cols="12" cols="12"
lg="7" lg="7"
xl="8" xl="8"
@@ -72,7 +72,7 @@
style="opacity: 0.15; width: 80%" style="opacity: 0.15; width: 80%"
/> />
</div> </div>
</v-col> </v-col> -->
</v-row> </v-row>
</div> </div>
</template> </template>
@@ -81,6 +81,7 @@
import { onMounted } from "vue" import { onMounted } from "vue"
import { useAuth0 } from "@auth0/auth0-vue" import { useAuth0 } from "@auth0/auth0-vue"
import { APPLICATION_NAME } from "@/config"
import useCurrentUser from "@/use/use-current-user" import useCurrentUser from "@/use/use-current-user"
const { reset: resetCurrentUser } = useCurrentUser() const { reset: resetCurrentUser } = useCurrentUser()
web/src/scss/pages/_authentication.scss
+79 -79
View File
@@ -1,90 +1,90 @@
.authentication{ .authentication {
&::before{ &::before {
content: ""; content: "";
position: absolute;
height: 100%;
width: 100%;
opacity: 0.3;
left: 0;
top: 0;
bottom: 0;
background: radial-gradient(rgb(210, 241, 223), rgb(211, 215, 250), rgb(186, 216, 244)) 0% 0% / 400% 400%;
}
@media screen and (max-width:1280px){
.auth-header{
position: unset;
}
}
}
.mw-450{
max-width: 450px;
width: 100%;;
}
.auth-header{
position: absolute; position: absolute;
height: 100%;
width: 100%;
opacity: 0.3;
left: 0;
top: 0; top: 0;
left: 0; bottom: 0;
} background: radial-gradient(rgb(210, 241, 223), rgb(211, 215, 250), rgb(186, 216, 244)) 0% 0% /
.verification{ 400% 400%;
.v-field__input{ }
text-align: center;
} @media screen and (max-width: 1280px) {
} .auth-header {
.auth-divider{ position: unset;
span{
z-index: 1;
}
&::before{
position: absolute;
width: 100%;
border-top: thin solid rgb(var(--v-theme-borderColor));
top: 50%;
content: "";
transform: translateY(50%);
left: 0;
}
&::after
{
position: absolute;
width: 100%;
border-top: thin solid rgb(var(--v-theme-borderColor));
top: 50%;
content: "";
transform: translateY(50%);
right: 0;
} }
}
}
.mw-450 {
max-width: 450px;
width: 100%;
}
.auth-header {
position: absolute;
top: 0;
left: 0;
}
.verification {
.v-field__input {
text-align: center;
}
}
.auth-divider {
span {
z-index: 1;
}
&::before {
position: absolute;
width: 100%;
border-top: thin solid rgb(var(--v-theme-borderColor));
top: 50%;
content: "";
transform: translateY(50%);
left: 0;
}
&::after {
position: absolute;
width: 100%;
border-top: thin solid rgb(var(--v-theme-borderColor));
top: 50%;
content: "";
transform: translateY(50%);
right: 0;
}
} }
@media (min-width: 1536px){ @media (min-width: 1536px) {
.auth{ .auth {
.v-col-lg-7{ .v-col-lg-7 {
flex: 0 0 66.66%; flex: 0 0 66.66%;
max-width: 66.66%; max-width: 66.66%;
}
.v-col-lg-5{
flex: 0 0 33.33%;
max-width: 33.33%;
}
} }
.v-col-lg-5 {
flex: 0 0 33.33%;
max-width: 33.33%;
}
}
} }
@media screen and (max-width:1280px){ @media screen and (max-width: 1280px) {
.mh-100{ .mh-100 {
height: 100% !important; height: 100% !important;
} }
} }
@media screen and (max-width:600px){ @media screen and (max-width: 600px) {
.mw-100{ .mw-100 {
width: 100%; width: 100%;
padding: 0 15px; padding: 0 15px;
} }
} }
.auth{ .auth {
.v-switch .v-label, .v-checkbox .v-label { .v-switch .v-label,
opacity: 0.7; .v-checkbox .v-label {
font-weight: 400 !important; opacity: 0.7;
} font-weight: 400 !important;
} }
}