albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

sidebar rework (part1) /home gomb javítandó, hogy úgy működjön, mint a többi/

Browse source
This commit is contained in:
ndaniel1102 2021-02-24 01:27:25 +01:00
parent 0fb1822c44
commit 58db2e3d24
4 changed files with 38 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

0
npm run dev.txt Normal file
View file

4
src/components/layout.js
View file

@ -80,11 +80,11 @@ export default function Layout({
<div /> <div />
</span> </span>
<div className="sidebarheader"> <div className="sidebarheader">
<img <a href="/"><img
style={{ maxWidth: '100%' }} style={{ maxWidth: '100%' }}
src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`} src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
alt="Frylabs" alt="Frylabs"
/> /></a>
</div> </div>
</div> </div>
{sidebarOpen ? ( {sidebarOpen ? (

53
src/defaultStyles.css
View file

@ -1,13 +1,16 @@
:root { :root {
--text-color: #9999ff; --text-color: #F2CB05;
--bright-color: #f2f2f2; --bright-color: #f2f2f2;
--background-color: #222426; --background-color: #222426;
--hoover-color: #202020; --hoover-color: #202020;
} }
@import url('https://fonts.googleapis.com/css2?family=Kameron&family=Overpass+Mono:wght@300;400&display=swap');
body { body {
font: normal 14px Verdana; font-family: 'Kameron', serif;
color: #999999; font-family: 'Overpass Mono', monospace;
color: #999999;
} }
a { a {
@ -43,21 +46,34 @@ a {
} }
.sidebarLinks a { .sidebarLinks a {
display: block; display: block;
color: black; text-align: center;
padding: 16px; color: black;
text-decoration: none; font-size: 108%;
color: var(--bright-color); padding: 14px;
margin-top: 4px;
margin-bottom: 4px;
text-decoration: none;
color: var(--bright-color);
} }
.sidebarLinks a.active { .sidebarLinks a:hover {
background-color: var(--text-color); transition: width 0.5s, height 0.5s, ease-out 0.5s;
color: black; }
.sidebarLinks a.active{
border: 0.5px solid var(--text-color);
color: white;
text-shadow: 2px 2px 8px black;
font-weight: bold;
} }
.sidebarLinks a:hover:not(.active) { .sidebarLinks a:hover:not(.active) {
background-color: #555; background-color: var(--text-color);
color: white; color: black;
font-weight: bold;
text-shadow: 2px 2px 8px black;
transition: width 0.5s, height 0.5s, ease-out 0.5s;
} }
.menuicon div { .menuicon div {
@ -81,7 +97,11 @@ a {
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
position: relative; position: relative;
margin: 10px; overflow: hidden;
padding-top: 15px;
padding-bottom: 17px;
padding-right: 2px;
padding-left: 2px;
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
@ -121,6 +141,7 @@ a {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
padding-top: 20px;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
} }
@ -209,10 +230,6 @@ a {
color: white; color: white;
} }
.donate {
background-color: #222a26;
}
.rtfmImage { .rtfmImage {
justify-content: center; justify-content: center;
margin: 0px 10px; margin: 0px 10px;

2
src/pages/index.module.css
View file

@ -45,7 +45,7 @@
} }
.title { .title {
color: #9999ff; color: #F2CB05;
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;
} }