From 92ed012c4d0792d85bfdf3c9979111e10235d8a9 Mon Sep 17 00:00:00 2001 From: Death916 Date: Sun, 23 Mar 2025 07:28:27 -0700 Subject: [PATCH] trying to fit on pi screen --- deathclock/assets/style.css | 52 +++++++++++++++++++++++++------------ deathclock/weather.py | 2 +- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/deathclock/assets/style.css b/deathclock/assets/style.css index 0bf4be7..9594417 100644 --- a/deathclock/assets/style.css +++ b/deathclock/assets/style.css @@ -6,7 +6,7 @@ body { padding: 10px; font-size: 16px; overflow-x: hidden; - min-width: 360px; /* Minimum width to prevent extreme squishing */ + min-width: 360px; } h1 { @@ -25,18 +25,20 @@ h2 { flex-wrap: wrap; gap: 20px; width: 100%; - justify-content: center; /* Center items on small screens */ + justify-content: center; } #nba-container, -#mlb-container{ +#mlb-container { flex: 1; - min-width: 300px; /* Minimum width for the containers */ + min-width: 300px; } + /* Individual Score Containers */ .score-container { width: 100%; - padding: 5px; + padding: 0; /* Remove padding from score container */ + margin: 0; /* remove margin from score container */ } #mlb-scores-display { @@ -45,22 +47,27 @@ h2 { .score-box { background-color: #232338; - padding: 5px; - margin-bottom: 5px; + padding: 2px 5px; /* Reduced padding on score boxes */ + margin-bottom: 2px; /* Reduced margin on score boxes */ border-radius: 6px; border: 1px solid #4a4a82; + display: flex; /* Use flexbox for inner alignment */ + flex-direction: column; /* Stack the game-score and game-period vertically */ + justify-content: center; /* Center vertically */ } .game-score { font-size: 0.9em; color: #e6e6fa; text-align: center; + margin: 2px 0; /* Add a small top/bottom margin */ } .game-period { font-size: 0.8em; color: #b39ddb; text-align: center; + margin: 2px 0; /* Add a small top/bottom margin */ } /* Weather Styles */ @@ -73,7 +80,7 @@ h2 { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); border: 1px solid #4a4a82; transition: all 0.3s ease; - flex: 1; /* Each section takes equal width */ + flex: 1; } #weather-display:hover { @@ -117,7 +124,7 @@ h2 { } /* Media Queries */ -@media (min-width: 1000px) { +@media (min-width: 750px) { /* Landscape layout */ body { padding: 20px; @@ -127,8 +134,8 @@ h2 { } #main-content-container { - flex-wrap: nowrap; /* No wrapping on landscape */ - justify-content: space-around; + flex-wrap: nowrap; + justify-content: space-around; } #mlb-scores-display { @@ -136,19 +143,19 @@ h2 { } .score-container { - padding: 10px; + padding: 0; /* Remove padding from score container */ + margin: 0; /* remove margin from score container */ } .score-box { - padding: 8px; - margin-bottom: 8px; + padding: 2px 5px; /* Reduced padding on score boxes */ + margin-bottom: 2px; /* Reduced margin on score boxes */ } #weather-display { padding: 20px; - margin: 0; /* Remove vertical margin on landscape */ + margin: 0; max-width: 400px; - } .ticker { @@ -183,17 +190,28 @@ h2 { #main-content-container { gap: 1px; } + #nba-container, - #mlb-container{ + #mlb-container { min-width: 0; } + .score-container { + padding: 0; /* Remove padding from score container */ + margin: 0; /* remove margin from score container */ + } + .score-box { + padding: 2px 5px; /* Reduced padding on score boxes */ + margin-bottom: 2px; /* Reduced margin on score boxes */ + } .game-score { font-size: 0.8em; + margin: 2px 0; /* Add a small top/bottom margin */ } .game-period { font-size: 0.7em; + margin: 2px 0; /* Add a small top/bottom margin */ } .ticker { diff --git a/deathclock/weather.py b/deathclock/weather.py index 95accfd..c98b121 100644 --- a/deathclock/weather.py +++ b/deathclock/weather.py @@ -38,7 +38,7 @@ class Weather: curl_command = [ "curl", "-s", # Silent mode - "v2.wttr.in/Sacramento.png?0pq&scale=2", # Fetch weather data for Sacramento + "v2.wttr.in/Sacramento.png?0pq&scale=.5", # Fetch weather data for Sacramento "-o", screenshot_path, ]