316 lines
7.2 KiB
CSS
316 lines
7.2 KiB
CSS
.login-button {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
margin-left: auto; /* Push the button to the right */
|
|
margin-right: 10px;
|
|
background-color: hsl(315, 80%, 42%); /* Use a solid, high-contrast color */
|
|
color: #fff; /* Ensure text is white */
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
transition: background-color 0.2s ease;
|
|
font-size: 0.9em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.login-button:hover {
|
|
background-color: #003c8f; /* Darker shade for hover */
|
|
text-decoration: none;
|
|
}
|
|
|
|
.git-code-button {
|
|
display: inline-block;
|
|
background: #30363d;
|
|
color: white !important;
|
|
padding: 0.6rem 1.2rem;
|
|
border-radius: 20px;
|
|
text-decoration: none;
|
|
font-size: 0.95rem;
|
|
font-weight: bold;
|
|
margin-left: 1rem;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.git-code-button:hover {
|
|
background: #444d56;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.git-code-button .material-icons {
|
|
font-size: 1rem;
|
|
vertical-align: middle;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* Styles for the new home page design */
|
|
:root {
|
|
--bnk-dark-bg: #1e2127; /* Existing */
|
|
--bnk-yellow: #ffd700; /* Existing */
|
|
--bnk-text: rgba(255, 255, 255, 0.95); /* Existing */
|
|
--bnk-accent: #9f70ff; /* Existing */
|
|
--bnk-yellow-transparent: rgba(255, 215, 0, 0.2);
|
|
}
|
|
|
|
.hero-section {
|
|
text-align: center;
|
|
padding: 3rem 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.hero-section h1 {
|
|
color: var(--bnk-yellow);
|
|
font-size: 2.8rem;
|
|
margin-bottom: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hero-section .subtitle {
|
|
font-size: 1.4rem;
|
|
color: var(--bnk-text);
|
|
margin-bottom: 2.5rem;
|
|
max-width: 700px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.hero-section .cta-button {
|
|
display: inline-block;
|
|
background: var(--bnk-accent);
|
|
color: white !important;
|
|
padding: 0.8rem 1.8rem;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
transition: background 0.3s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.hero-section .cta-button:hover {
|
|
background: #8656e5;
|
|
transform: translateY(-2px);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.quick-start-section {
|
|
background: rgba(40, 44, 52, 0.5); /* Similar to info-section */
|
|
border: 1px solid rgba(var(--md-code-fg-color--rgb), 0.12); /* Consistent border */
|
|
border-radius: 8px; /* Rounded corners */
|
|
padding: 2rem;
|
|
margin: 2.5rem auto;
|
|
max-width: 850px; /* Consistent max-width */
|
|
text-align: left; /* Align text to the left */
|
|
}
|
|
|
|
.quick-start-section h2 {
|
|
color: var(--bnk-yellow); /* Consistent heading color */
|
|
margin-top: 0;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.8rem; /* Consistent heading size */
|
|
border-bottom: 2px solid var(--bnk-accent); /* Accent border */
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.quick-start-section p {
|
|
line-height: 1.7;
|
|
font-size: 1.05rem;
|
|
color: var(--bnk-text); /* Consistent text color */
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.quick-start-section .code-container {
|
|
background: rgba(0, 0, 0, 0.6); /* Darker background for code */
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin: 1.5rem 0;
|
|
font-family: 'Fira Code', monospace; /* Monospace font for code */
|
|
color: #e0e0e0; /* Light text color for code */
|
|
border: 1px solid rgba(var(--md-code-fg-color--rgb), 0.1);
|
|
}
|
|
|
|
.quick-start-section .code-container pre {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
background: transparent !important; /* Ensure pre background is transparent */
|
|
padding: 0; /* Remove padding from pre if container handles it */
|
|
}
|
|
|
|
.quick-start-section .code-container code {
|
|
font-family: 'Fira Code', monospace; /* Ensure code tag also uses monospace */
|
|
color: #e0e0e0; /* Consistent code text color */
|
|
background: transparent !important; /* Ensure code background is transparent */
|
|
font-size: 0.95rem; /* Slightly smaller font for code block */
|
|
}
|
|
|
|
.quick-start-section .quick-note {
|
|
font-size: 0.9rem;
|
|
color: rgba(255, 255, 255, 0.7); /* Subtler text color for the note */
|
|
margin-top: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.quick-start-section .button {
|
|
display: inline-block;
|
|
background: var(--bnk-accent);
|
|
color: white !important;
|
|
padding: 0.7rem 1.4rem;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.quick-start-section .button:hover {
|
|
background: #8656e5;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.info-section {
|
|
background: rgba(40, 44, 52, 0.5);
|
|
border: 1px solid rgba(var(--md-code-fg-color--rgb), 0.12);
|
|
border-radius: 8px;
|
|
padding: 2rem;
|
|
margin: 2.5rem auto;
|
|
max-width: 850px;
|
|
}
|
|
|
|
.info-section h2 {
|
|
color: var(--bnk-yellow);
|
|
margin-top: 0;
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.8rem;
|
|
border-bottom: 2px solid var(--bnk-accent);
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.info-section p, .info-section ul {
|
|
line-height: 1.7;
|
|
font-size: 1.05rem;
|
|
color: var(--bnk-text); /* Or var(--md-default-fg-color) for theme consistency */
|
|
}
|
|
|
|
.info-section ul {
|
|
padding-left: 20px;
|
|
}
|
|
.info-section ul li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.info-section .code-block {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin: 1.5rem 0;
|
|
font-family: 'Fira Code', monospace; /* Or var(--md-code-font-family) */
|
|
color: #e0e0e0; /* Or var(--md-code-fg-color) */
|
|
border: 1px solid rgba(var(--md-code-fg-color--rgb), 0.1);
|
|
}
|
|
.info-section .code-block pre {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.apps-grid-container {
|
|
max-width: 1200px;
|
|
margin: 2.5rem auto;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.apps-grid-container h2 {
|
|
color: var(--bnk-yellow);
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.apps-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.app-card {
|
|
background: var(--md-typeset-table-color);
|
|
border: 1px solid rgba(var(--md-code-fg-color--rgb), 0.12);
|
|
border-radius: 8px;
|
|
padding: 1.75rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.app-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 12px 24px rgba(0,0,0,0.15), 0 0 15px var(--bnk-yellow-transparent);
|
|
}
|
|
|
|
.app-card h3 {
|
|
color: var(--bnk-yellow);
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.app-card h3 .material-icons {
|
|
margin-right: 0.75rem;
|
|
color: var(--bnk-accent);
|
|
}
|
|
|
|
.app-card p {
|
|
font-size: 1rem;
|
|
color: var(--md-default-fg-color);
|
|
flex-grow: 1;
|
|
margin-bottom: 1.25rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.app-card .button {
|
|
display: inline-block;
|
|
background: var(--bnk-accent);
|
|
color: white !important;
|
|
padding: 0.7rem 1.4rem;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
margin-top: 1rem;
|
|
transition: background 0.3s ease;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.app-card .button:hover {
|
|
background: #8656e5;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-section h1 {
|
|
font-size: 2.2rem;
|
|
}
|
|
.hero-section .subtitle {
|
|
font-size: 1.2rem;
|
|
}
|
|
.info-section h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
.apps-grid-container h2 {
|
|
font-size: 1.7rem;
|
|
}
|
|
.apps-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.app-card h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
.app-card p {
|
|
font-size: 0.95rem;
|
|
}
|
|
}
|