Layout & Added Socials
This commit is contained in:
Keyemail
parent
e763964c99
commit
efff7676a9
11911
package-lock.json
generated
Normal file
11911
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -8,6 +8,11 @@
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||||
|
"@fortawesome/free-brands-svg-icons": "^6.5.1",
|
||||||
|
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
||||||
|
"@fortawesome/vue-fontawesome": "^3.0.5",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"vue": "^3.2.13",
|
"vue": "^3.2.13",
|
||||||
"vue-router": "^4.0.3"
|
"vue-router": "^4.0.3"
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.png">
|
<link rel="icon" href="<%= BASE_URL %>favicon.png">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
<script src="https://kit.fontawesome.com/d18ce6e9fb.js" crossorigin="anonymous"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|
|
||||||
14
src/App.vue
14
src/App.vue
|
|
@ -16,12 +16,24 @@ export default {
|
||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');
|
||||||
|
|
||||||
|
html, body, #app {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: auto;
|
||||||
|
margin: 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #192236;
|
background-color: #192236;
|
||||||
margin: 20px 20px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Rubik', sans-serif;
|
font-family: 'Rubik', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar h1{
|
.navbar h1{
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="workinprogress">
|
<div class="socials">
|
||||||
<h1>Work In Progress</h1>
|
<h1>Work In Progress</h1>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.workinprogress {
|
.socials {
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Rubik', sans-serif;
|
font-family: 'Rubik', sans-serif;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
font-size: 40px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -10,11 +10,11 @@
|
||||||
<img alt="Profile Picture" src="../assets/roller_profile_circle.png">
|
<img alt="Profile Picture" src="../assets/roller_profile_circle.png">
|
||||||
</div>
|
</div>
|
||||||
<div class="workinprogress">
|
<div class="workinprogress">
|
||||||
<h1>-- More is to come soon! Work in progress. --</h1>
|
<h1>-- Alpha site. Change is possible. --</h1>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.header {
|
.header {
|
||||||
position: relative;
|
position: relative;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -56,6 +56,7 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1376px){
|
@media only screen and (max-width: 1376px){
|
||||||
.workinprogress{
|
.workinprogress{
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,150 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="workinprogress">
|
<div class="socials">
|
||||||
<h1>Work In Progress</h1>
|
<h1>My Socials!</h1>
|
||||||
|
<div class="socialsgrid">
|
||||||
|
<div class="discord">
|
||||||
|
<h2>Discord</h2>
|
||||||
|
<p>keyemail</p>
|
||||||
|
<i class="fa-brands fa-discord"></i>
|
||||||
|
</div>
|
||||||
|
<a href="https://github.com/Keyemail" target="_blank">
|
||||||
|
<div class="github">
|
||||||
|
<h2>GitHub</h2>
|
||||||
|
<p>Keyemail</p>
|
||||||
|
<i class="fa-brands fa-github"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://steamcommunity.com/id/keyemail/" target="_blank">
|
||||||
|
<div class="steam">
|
||||||
|
<h2>Steam</h2>
|
||||||
|
<p>Keyemail</p>
|
||||||
|
<i class="fa-brands fa-steam"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://open.spotify.com/user/316yuurxrw3zcprxsnrvgamxktp4" target="_blank">
|
||||||
|
<div class="spotify">
|
||||||
|
<h2>Spotify</h2>
|
||||||
|
<p>Keyemail</p>
|
||||||
|
<i class="fa-brands fa-spotify"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.youtube.com/channel/UCCNkKG8XoZCh52vLCbXYy7g" target="_blank">
|
||||||
|
<div class="youtube">
|
||||||
|
<h2>YouTube</h2>
|
||||||
|
<p>Keyemail</p>
|
||||||
|
<i class="fa-brands fa-youtube"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.instagram.com/keyemail1?igsh=OGQ5ZDc2ODk2ZA%3D%3D&utm_source=qr" target="_blank">
|
||||||
|
<div class="instagram">
|
||||||
|
<h2>Instagram</h2>
|
||||||
|
<p>keyemail1</p>
|
||||||
|
<i class="fa-brands fa-instagram"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.workinprogress {
|
.socials {
|
||||||
color: white;
|
|
||||||
font-family: 'Rubik', sans-serif;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Rubik', sans-serif;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socials h1 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialsgrid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto auto;
|
||||||
|
align-content: start;
|
||||||
|
grid-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialsgrid a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialsgrid div{
|
||||||
|
margin: 5px;
|
||||||
|
width: 275px;
|
||||||
|
height: 170px;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
border-color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 4px solid transparent;
|
||||||
|
transition: 0.4s border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialsgrid div:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
border: 4px;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
.socialsgrid i {
|
||||||
|
font-size: 35px;
|
||||||
|
margin-top: auto;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socialsgrid h2 {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.discord {
|
||||||
|
background-color: #5865F2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github {
|
||||||
|
background-color: #171515;
|
||||||
|
}
|
||||||
|
|
||||||
|
.steam {
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spotify {
|
||||||
|
background-color: #1DB954;
|
||||||
|
}
|
||||||
|
|
||||||
|
.youtube {
|
||||||
|
background-color: #CD201F;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instagram {
|
||||||
|
background-color: #C13584;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 905px){
|
||||||
|
.socialsgrid{
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 615px){
|
||||||
|
.socialsgrid{
|
||||||
|
grid-template-columns: auto;
|
||||||
|
width: 80%
|
||||||
|
}
|
||||||
|
.socials {
|
||||||
|
margin-top: 80px;
|
||||||
|
justify-content: unset;
|
||||||
|
}
|
||||||
|
.socialsgrid div {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in a new issue