website is now phone
This commit is contained in:
esef committed
1 parent
f4457c5c17
commit
827f524107
16 files changed
+359
-175
No files matched your search
+18
-9
@@ -1,6 +1,4 @@
|
||||
/* Bucketlist tab — password gated, baked-in left panel, internal scroll only */
|
||||
|
||||
/* ── Lock screen (pitch black, centered form) ─────────────── */
|
||||
/* lock screen */
|
||||
.bl-lock {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
@@ -61,14 +59,14 @@
|
||||
min-height: 1.2em;
|
||||
}
|
||||
|
||||
/* ── Lock section to viewport so body never scrolls ────────── */
|
||||
/* lock section to viewport so body never scrolls */
|
||||
#bucketlist.tab-content {
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Panel (framed, no extra space) ────────────────────────── */
|
||||
/* panel */
|
||||
.bl-panel {
|
||||
width: 420px;
|
||||
height: calc(100vh - 210px);
|
||||
@@ -83,7 +81,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Scrollable list (fills the frame exactly) ────────────── */
|
||||
/* scrollable list */
|
||||
.bl-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -93,7 +91,7 @@
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
/* ── Item card ────────────────────────────────────────────── */
|
||||
/* item card */
|
||||
.bl-item {
|
||||
padding: 14px 18px;
|
||||
background: rgba(35, 35, 41, 0.75);
|
||||
@@ -107,7 +105,7 @@
|
||||
box-shadow: 0 3px 16px rgba(184, 68, 87, 0.08);
|
||||
}
|
||||
|
||||
/* Completed items */
|
||||
/* done items */
|
||||
.bl-item.bl-done { opacity: 0.5; }
|
||||
.bl-item.bl-done .bl-title { text-decoration: line-through; }
|
||||
|
||||
@@ -128,7 +126,7 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── Empty state ─────────────────────────────────────────── */
|
||||
/* empty state */
|
||||
.bl-empty {
|
||||
text-align: center;
|
||||
color: rgba(244, 242, 245, 0.3);
|
||||
@@ -136,3 +134,14 @@
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media (max-width: 900px) {
|
||||
.bl-panel {
|
||||
width: auto;
|
||||
height: calc(100vh - 84px);
|
||||
margin: 68px 12px 16px;
|
||||
}
|
||||
.bl-lock-box input,
|
||||
.bl-lock-box button { width: min(260px, 80vw); }
|
||||
}
|
||||
+22
-5
@@ -1,6 +1,6 @@
|
||||
/* Calendar tab */
|
||||
|
||||
/* ── Two-column layout ─────────────────────────────────────── */
|
||||
/* two-column layout */
|
||||
.cal-wrap {
|
||||
max-width: 95vw; margin: 0 auto;
|
||||
padding: 110px 24px 40px;
|
||||
@@ -10,7 +10,7 @@
|
||||
.cal-main { flex: 1; min-width: 0; }
|
||||
.cal-sidebar { width: 300px; flex-shrink: 0; background: rgba(35,35,41,0.7); border: 1px solid rgba(251,196,204,0.25); border-radius: 12px; padding: 18px; }
|
||||
|
||||
/* ── Month nav ─────────────────────────────────────────────── */
|
||||
/* month nav */
|
||||
.cal-nav {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: 20px; margin-bottom: 18px;
|
||||
@@ -26,7 +26,7 @@
|
||||
}
|
||||
.cal-nav button:hover { background: rgba(251,196,204,0.4); }
|
||||
|
||||
/* ── Month grid ────────────────────────────────────────────── */
|
||||
/* month grid */
|
||||
.cal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
@@ -59,7 +59,7 @@
|
||||
margin: 2px 2px 0 0; vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ── Hover popup ───────────────────────────────────────────── */
|
||||
/* hover popup */
|
||||
.cal-popup {
|
||||
display: none; position: absolute;
|
||||
top: 100%; left: 50%; transform: translateX(-50%);
|
||||
@@ -86,7 +86,7 @@
|
||||
font-size: 0.7rem; color: rgba(244,242,245,0.55); margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ── Sidebar ───────────────────────────────────────────────── */
|
||||
/* sidebar */
|
||||
.cal-sidebar h3 {
|
||||
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;
|
||||
color: rgba(244,242,245,0.65); margin: 0 0 14px;
|
||||
@@ -112,3 +112,20 @@
|
||||
}
|
||||
|
||||
.cal-tz-note { font-size: 0.65rem; color: rgba(244,242,245,0.35); text-align: center; margin-top: 16px; }
|
||||
|
||||
/* mobile */
|
||||
@media (max-width: 900px) {
|
||||
.cal-wrap {
|
||||
flex-direction: column;
|
||||
padding: 72px 0 20px;
|
||||
}
|
||||
.cal-sidebar { width: auto; }
|
||||
.cal-nav h2 { min-width: 0; font-size: 1.2rem; }
|
||||
.cal-grid { gap: 2px; }
|
||||
.cal-day { min-height: 52px; padding: 3px 4px; }
|
||||
.cal-day .day-dot { width: 7px; height: 7px; }
|
||||
}
|
||||
|
||||
/* popups on the first/last column open inwards so they don't go off screen */
|
||||
.cal-grid > .cal-day:nth-child(7n+1) .cal-popup { left: 0; transform: none; }
|
||||
.cal-grid > .cal-day:nth-child(7n) .cal-popup { left: auto; right: 0; transform: none; }
|
||||
+36
-15
@@ -1,8 +1,4 @@
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
STEAM PROFILE COMMENT STYLE
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── About hero (top half) ──────────────────────────────── */
|
||||
/* about hero */
|
||||
#about-hero {
|
||||
padding: 120px 20px 50px;
|
||||
display: flex;
|
||||
@@ -59,7 +55,7 @@
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ── Steam panel wrapper ─────────────────────────────────── */
|
||||
/* steam panel wrapper */
|
||||
#comments-section {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@@ -71,7 +67,7 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ── Panel header bar ────────────────────────────────────── */
|
||||
/* panel header bar */
|
||||
.steam-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -97,7 +93,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Comment rows ────────────────────────────────────────── */
|
||||
/* comment rows */
|
||||
#comments-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -157,7 +153,6 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Username */
|
||||
.comment-name {
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
@@ -174,7 +169,6 @@
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* Comment text */
|
||||
.comment-text {
|
||||
color: #000000 !important;
|
||||
font-size: 0.85rem !important;
|
||||
@@ -197,7 +191,7 @@
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Post form (above the feed) ──────────────────────────── */
|
||||
/* post form */
|
||||
.steam-form-area {
|
||||
background: transparent;
|
||||
margin: 20px 0;
|
||||
@@ -214,7 +208,7 @@
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ── Avatar colour picker ────────────────────────────────── */
|
||||
/* avatar colour picker */
|
||||
#avatar-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -256,7 +250,7 @@
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
/* ── Form inputs ─────────────────────────────────────────── */
|
||||
/* form inputs */
|
||||
#comment-form input[type="text"],
|
||||
#comment-form textarea {
|
||||
width: 100%;
|
||||
@@ -324,7 +318,7 @@
|
||||
}
|
||||
#comment-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
|
||||
|
||||
/* ── Custom PFP Upload ───────────────────────────────────── */
|
||||
/* custom pfp upload */
|
||||
.custom-pfp-upload {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -380,7 +374,7 @@
|
||||
color: #ff7070;
|
||||
}
|
||||
|
||||
/* ── Pagination ──────────────────────────────────────────── */
|
||||
/* pagination */
|
||||
.steam-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -412,3 +406,30 @@
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* smaller screens: clicker goes next to the text instead of covering it */
|
||||
@media (max-width: 1300px) {
|
||||
#click-counter-container { position: static; }
|
||||
#about-hero { gap: 48px; }
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media (max-width: 900px) {
|
||||
#about-hero {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 80px 8px 20px;
|
||||
}
|
||||
#click-counter-container {
|
||||
position: static;
|
||||
}
|
||||
#yuuka-click-btn { width: 150px; }
|
||||
.hero-text { text-align: center; }
|
||||
|
||||
#comments-section {
|
||||
margin-top: 20px;
|
||||
padding: 0 4px 30px;
|
||||
}
|
||||
/* bigger tap targets for the colour swatches */
|
||||
.av-opt { width: 26px; height: 26px; }
|
||||
}
|
||||
+13
-2
@@ -2,7 +2,7 @@
|
||||
display:grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 10px;
|
||||
padding: 210px 70px 70px; /* extra top padding clears the fixed nav bar */
|
||||
padding: 210px 70px 70px; /* room for the nav bar */
|
||||
}
|
||||
|
||||
.gallery-grid img {
|
||||
@@ -69,4 +69,15 @@
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media (max-width: 900px) {
|
||||
.gallery-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 6px;
|
||||
padding: 72px 4px 20px;
|
||||
}
|
||||
.lightbox-content { max-width: 96%; }
|
||||
.lightbox-close { top: 8px; right: 16px; }
|
||||
}
|
||||
+24
-9
@@ -1,10 +1,6 @@
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
SERVICES TAB — one banner per service, Bot Status look
|
||||
Add a service by copying a .svc-banner block in index.html and
|
||||
setting its --brand color (used for the left stripe only).
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
/* to add a service copy a .svc-banner in index.html, --brand is the stripe color */
|
||||
|
||||
/* ── Tab header (matches .dash-header) ────────────────────── */
|
||||
/* tab header */
|
||||
.svc-header {
|
||||
padding: 120px 20px 30px;
|
||||
text-align: center;
|
||||
@@ -16,7 +12,7 @@
|
||||
text-shadow: 0 0 30px rgba(91, 111, 222, 0.5);
|
||||
}
|
||||
|
||||
/* ── Banner list ──────────────────────────────────────────── */
|
||||
/* banner list */
|
||||
.svc-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -24,7 +20,7 @@
|
||||
padding: 0 48px 60px;
|
||||
}
|
||||
|
||||
/* ── Banner (same glass as .dash-card) ────────────────────── */
|
||||
/* banner */
|
||||
.svc-banner {
|
||||
--brand: #5b6fde;
|
||||
display: flex;
|
||||
@@ -61,7 +57,7 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* overrides the global p rule in styles.css */
|
||||
/* global p is huge */
|
||||
.svc-banner .svc-desc {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
@@ -90,3 +86,22 @@
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/* mobile */
|
||||
@media (max-width: 900px) {
|
||||
.svc-header { padding: 72px 12px 20px; }
|
||||
.svc-header h1 { font-size: 2rem; }
|
||||
.svc-list { padding: 0 4px 30px; gap: 12px; }
|
||||
.svc-banner {
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
.svc-logo { width: 52px; height: 52px; }
|
||||
.svc-name { font-size: 1.3rem; }
|
||||
.svc-btn {
|
||||
flex-basis: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
+126
-7
@@ -33,7 +33,7 @@ html, body {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 115px; /* 95px + 2×10px padding — other tabs' top offsets assume this */
|
||||
height: 115px; /* other tabs are spaced for this height */
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(2px);
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
@@ -45,7 +45,12 @@ html, body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#top-line button {
|
||||
#nav-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#nav-tabs button {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
@@ -64,12 +69,12 @@ html, body {
|
||||
transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
#top-line button:hover {
|
||||
#nav-tabs button:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ── Calendar-themed top bar buttons only ─────────────── */
|
||||
#top-line.cal-theme button {
|
||||
/* calendar theme */
|
||||
#top-line.cal-theme #nav-tabs button {
|
||||
border-bottom-color: #FBC4CC;
|
||||
border-left-color: #FBC4CC;
|
||||
border-right-color: #FBC4CC;
|
||||
@@ -77,8 +82,8 @@ html, body {
|
||||
transition: border-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
/* ── Bucketlist-themed top bar buttons ─────────────────── */
|
||||
#top-line.bucketlist-theme button {
|
||||
/* bucketlist theme */
|
||||
#top-line.bucketlist-theme #nav-tabs button {
|
||||
border-bottom-color: #B5B1C6;
|
||||
border-left-color: #B5B1C6;
|
||||
border-right-color: #B5B1C6;
|
||||
@@ -102,3 +107,117 @@ p {
|
||||
img {
|
||||
display:block;
|
||||
}
|
||||
|
||||
/* mobile only */
|
||||
#nav-current,
|
||||
#nav-hamburger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* mobile, same setup as userevolt.app */
|
||||
@media (max-width: 1300px) {
|
||||
#nav-tabs button {
|
||||
padding: 22px 18px;
|
||||
margin: 30px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
#top-line {
|
||||
height: 56px;
|
||||
padding: 0 8px 0 16px;
|
||||
justify-content: space-between;
|
||||
background: rgba(13, 17, 23, 0.75);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
#nav-current {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
#nav-hamburger {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#nav-hamburger span {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
border-radius: 1px;
|
||||
transition: transform 0.25s, opacity 0.25s;
|
||||
}
|
||||
/* turns into an X */
|
||||
#top-line.nav-open #nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
||||
#top-line.nav-open #nav-hamburger span:nth-child(2) { opacity: 0; }
|
||||
#top-line.nav-open #nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
||||
|
||||
#nav-tabs {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
background: rgba(13, 17, 23, 0.95);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding: 8px 0;
|
||||
}
|
||||
#top-line.nav-open #nav-tabs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#nav-tabs button,
|
||||
#top-line.cal-theme #nav-tabs button,
|
||||
#top-line.bucketlist-theme #nav-tabs button {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 12px 24px;
|
||||
min-height: 44px;
|
||||
border: none;
|
||||
border-left: 3px solid transparent;
|
||||
border-radius: 0;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
#nav-tabs button:hover {
|
||||
text-decoration: none;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-left-color: #5b6fde;
|
||||
}
|
||||
#top-line.cal-theme #nav-tabs button:hover { border-left-color: #FBC4CC; }
|
||||
#top-line.bucketlist-theme #nav-tabs button:hover { border-left-color: #B84457; }
|
||||
|
||||
/* keep the video centered on tall screens */
|
||||
#background-video,
|
||||
#calendar-background-video,
|
||||
#bucketlist-background-video,
|
||||
#yuukabot-background-video {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-content { padding: 12px; }
|
||||
|
||||
h1 { font-size: 2.2rem; }
|
||||
p { font-size: 1.2rem; }
|
||||
}
|
||||
+36
-21
@@ -1,18 +1,12 @@
|
||||
/* ═══════════════════════════════════════════════════════════
|
||||
YUUKA BOT DASHBOARD — live system stats
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── LAYOUT: edit these to change the grid ────────────────── */
|
||||
/* grid settings */
|
||||
:root {
|
||||
--dash-columns: 6; /* number of columns (2 = 2×2, 3 = 3-wide, etc.) */
|
||||
--dash-gap: 20px; /* space between boxes */
|
||||
--dash-min-card-height: 200px;/* minimum height of each box */
|
||||
--dash-max-width: none; /* max width of the whole grid */
|
||||
--dash-columns: 6;
|
||||
--dash-gap: 20px;
|
||||
--dash-min-card-height: 200px;
|
||||
--dash-max-width: none;
|
||||
}
|
||||
|
||||
/* Card widths come from the .spanN helpers at the bottom of this file. */
|
||||
|
||||
/* ── Tab header ───────────────────────────────────────────── */
|
||||
/* tab header */
|
||||
.dash-header {
|
||||
padding: 120px 20px 30px;
|
||||
text-align: center;
|
||||
@@ -39,7 +33,7 @@
|
||||
.dash-header .offline { background: #ef4444; box-shadow: 0 0 12px #ef4444; animation: none; }
|
||||
.dash-header .pending { background: #64748b; box-shadow: none; animation: none; }
|
||||
|
||||
/* ── Card grid ────────────────────────────────────────────── */
|
||||
/* card grid */
|
||||
.dash-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--dash-columns), 1fr);
|
||||
@@ -49,7 +43,7 @@
|
||||
padding: 0 48px 60px;
|
||||
}
|
||||
|
||||
/* ── Glass card ───────────────────────────────────────────── */
|
||||
/* glass card */
|
||||
.dash-card {
|
||||
background: rgba(15, 15, 35, 0.55);
|
||||
backdrop-filter: blur(16px);
|
||||
@@ -68,7 +62,7 @@
|
||||
box-shadow: 0 6px 28px rgba(91, 111, 222, 0.12);
|
||||
}
|
||||
|
||||
/* ── Card header ──────────────────────────────────────────── */
|
||||
/* card header */
|
||||
.card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -82,7 +76,7 @@
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* ── Card value ───────────────────────────────────────────── */
|
||||
/* card value */
|
||||
.card-value {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
@@ -96,7 +90,7 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ── Progress bar (CPU / RAM / Disk) ──────────────────────── */
|
||||
/* progress bar */
|
||||
.card-bar-wrap {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
@@ -115,7 +109,7 @@
|
||||
.card-bar-fill.disk { background: linear-gradient(90deg, #34d399, #6ee7b7); }
|
||||
.card-bar-fill.swap { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
|
||||
|
||||
/* ── Detail text (used / total) ───────────────────────────── */
|
||||
/* detail text */
|
||||
.card-detail {
|
||||
font-size: 0.78rem;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
@@ -123,7 +117,7 @@
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── Fastfetch text block ──────────────────────────────────── */
|
||||
/* fastfetch text block */
|
||||
.card-fetch {
|
||||
margin: 12px 0 0;
|
||||
font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;
|
||||
@@ -134,7 +128,28 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Span helpers (6-col grid) ──────────────────────────────── */
|
||||
/* card widths */
|
||||
.dash-card.span2 { grid-column: span 2; } /* 3 per row */
|
||||
.dash-card.span3 { grid-column: span 3; } /* 2 per row — stretched */
|
||||
.dash-card.span3 { grid-column: span 3; } /* 2 per row */
|
||||
.dash-card.span6 { grid-column: span 6; } /* full width */
|
||||
|
||||
/* mobile */
|
||||
/* 2 columns on tablets, 1 on phones */
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--dash-columns: 2;
|
||||
--dash-gap: 12px;
|
||||
--dash-min-card-height: 130px;
|
||||
}
|
||||
.dash-header { padding: 72px 12px 20px; }
|
||||
.dash-header h1 { font-size: 2rem; }
|
||||
.dash-grid { padding: 0 4px 30px; }
|
||||
.dash-card { padding: 20px; }
|
||||
.dash-card.span2,
|
||||
.dash-card.span3 { grid-column: span 1; }
|
||||
.dash-card.span6 { grid-column: 1 / -1; }
|
||||
.card-value { font-size: 2.2rem; }
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
:root { --dash-columns: 1; }
|
||||
}
|
||||
Reference in new issue
Block a user