0xMRTT/webcompile
1
0
Fork 0
forked from ProjectSegfault/website
Code Pull Requests Activity

move footer to the bottom and align member socials

Browse Source
This commit is contained in:
Akis 2022-06-18 20:53:25 +03:00
parent 928e025114
commit 05231b6967
4 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@ -13,6 +13,6 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body> <body>
<div>%sveltekit.body%</div> %sveltekit.body%
</body> </body>
</html> </html>

3
src/lib/Footer.svelte
View File

@ -33,6 +33,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 20px; font-size: 20px;
position: absolute;
bottom: 0;
width: calc(100vw - 2rem);
} }
hr { hr {

6
src/lib/app.css
View File

@ -20,10 +20,16 @@ body {
background-color: var(--primary); background-color: var(--primary);
color: var(--text); color: var(--text);
margin: 0; margin: 0;
display: flex;
flex-direction: column;
position: relative;
min-height: 100vh;
} }
main { main {
padding: 1rem; padding: 1rem;
flex-grow: 1;
padding-bottom: 200px;
} }
a { a {

66
src/routes/contact.md
View File

@ -21,29 +21,20 @@ description: Do you want to contact us?
<div id="Active" style="display:none"> <div id="Active" style="display:none">
<h1>People</h1> <h1>People</h1>
<div> <div class="parent">
<span>Midou:</span> <div class="div1">Midou:</div>
<a class="matrixcolored" href="https://matrix.to/#/@midou:projectsegfau.lt">[Matrix]</a> <a class="div2 matrixcolored" href="https://matrix.to/#/@midou:projectsegfau.lt">[Matrix]</a>
<div class="div3"></div>
<div class="div4">MrLeRien:</div>
<a class="div5 discordcolored" href="https://discord.com/users/213634643327582208">Discord</a>
<div class="div6"></div>
<div class="div7">Odyssey:</div>
<a class="div8 matrixcolored" href="https://matrix.to/#/@odyssey346:projectsegfau.lt">[Matrix]</a>
<a class="div9 discordcolored" href="https://discord.com/users/315843700490240002">Discord</a>
<div class="div10">Devnol:</div>
<a class="div11 matrixcolored" href="https://matrix.to/#/@devnol:projectsegfau.lt">[Matrix]</a>
<a class="div12 discordcolored" href="https://discordapp.com/users/429353559566319626">Discord</a>
</div> </div>
<div>
<span>MrLeRien:</span>
<a class="discordcolored" href="https://discord.com/users/213634643327582208">Discord</a>
</div>
<div>
<span>Odyssey:</span>
<a class="matrixcolored" href="https://matrix.to/#/@odyssey346:projectsegfau.lt">[Matrix]</a>
<a class="discordcolored" href="https://discord.com/users/315843700490240002">Discord</a>
</div>
<div>
<span>Devnol:</span>
<a class="matrixcolored" href="https://matrix.to/#/@devnol:projectsegfau.lt">[Matrix]</a>
<a class="discordcolored" href="https://discordapp.com/users/429353559566319626">Discord</a>
</div>
</div> </div>
<button <button
@ -66,15 +57,30 @@ onclick='document.getElementById("Active").style.display ="block"; document.getE
font-family: var(--font-primary); font-family: var(--font-primary);
} }
#Active { .parent {
display: flex; display: grid;
flex-direction: column; grid-template-columns: repeat(3, max-content);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 16px;
grid-row-gap: 16px;
max-width: 50%;
align-items: center;
} }
#Active > div { .div1 { grid-area: 1 / 1 / 2 / 2; }
margin-top: 36px; .div2 { grid-area: 1 / 2 / 2 / 3; }
margin-bottom: 36px; .div3 { grid-area: 1 / 3 / 2 / 4; }
} .div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 3 / 3 / 4; }
.div7 { grid-area: 3 / 1 / 4 / 2; }
.div8 { grid-area: 3 / 2 / 4 / 3; }
.div9 { grid-area: 3 / 3 / 4 / 4; }
.div10 { grid-area: 4 / 1 / 5 / 2; }
.div11 { grid-area: 4 / 2 / 5 / 3; }
.div12 { grid-area: 4 / 3 / 5 / 4; }
#Active a { #Active a {
border: none; border: none;
@ -84,7 +90,6 @@ onclick='document.getElementById("Active").style.display ="block"; document.getE
font-family: var(--font-primary); font-family: var(--font-primary);
color: var(--secondary); color: var(--secondary);
text-decoration: none; text-decoration: none;
margin-right: 8px;
} }
.matrixcolored { .matrixcolored {
@ -95,4 +100,5 @@ onclick='document.getElementById("Active").style.display ="block"; document.getE
background-color: #5865F2; background-color: #5865F2;
color: #fff !important; color: #fff !important;
} }
</style> </style>