Repalced CSS Themes with styled-components on index, about and games
This commit is contained in:
parent
dd1ab4bad9
commit
d60c6ca3b5
7 changed files with 166 additions and 197 deletions
styles
|
@ -2,72 +2,6 @@
|
|||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
color: var(--def-blue);
|
||||
min-height: 100vh;
|
||||
padding: 1rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-bottom: 1px solid var(--def-blue);
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.navelem {
|
||||
width: auto;
|
||||
color: var(--def-blue);
|
||||
margin: 0.2rem;
|
||||
border: 1px solid;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 0.05;
|
||||
}
|
||||
|
||||
.navelem:hover {
|
||||
color: var(--def-orange);
|
||||
background-color: var(--black-1e);
|
||||
}
|
||||
|
||||
.navelem_active {
|
||||
width: auto;
|
||||
color: var(--def-orange);
|
||||
margin: 0.2rem;
|
||||
border: 1px solid;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 0.05;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: var(--def-blue);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid var(--def-blue);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.title a {
|
||||
color: var(--def-orange);
|
||||
text-decoration: none;
|
||||
|
@ -79,23 +13,6 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: var(--black-1e);
|
||||
border-radius: 5px;
|
||||
|
@ -105,39 +22,6 @@
|
|||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.statusOffline {
|
||||
color: var(--def-red);
|
||||
}
|
||||
|
||||
.statusOnline {
|
||||
color: var(--def-green);
|
||||
}
|
||||
|
||||
.statusLoading {
|
||||
color: var(--def-orange);
|
||||
}
|
||||
|
||||
.contentcard {
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--black-2d);
|
||||
border-radius: 10px;
|
||||
border-color: var(--def-blue);
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.contentcardstatic {
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
|
@ -177,37 +61,6 @@
|
|||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--black-2d);
|
||||
border-radius: 10px;
|
||||
border-color: var(--def-blue);
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: var(--def-orange);
|
||||
border-color: var(--def-orange);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.cardwarn {
|
||||
color: var(--def-orange);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue