From: Steinar H. Gunderson Date: Fri, 11 Oct 2019 19:40:55 +0000 (+0200) Subject: Move to Trøndisk again; this time using SASS to switch. X-Git-Url: https://git.sesse.net/?p=ultimatescore;a=commitdiff_plain;h=10a8910705983c36f00ff21f8e19035209921dd8 Move to Trøndisk again; this time using SASS to switch. --- diff --git a/box-bg.png b/generic/box-bg.png similarity index 100% rename from box-bg.png rename to generic/box-bg.png diff --git a/foul.png b/generic/foul.png similarity index 100% rename from foul.png rename to generic/foul.png diff --git a/foul.svg b/generic/foul.svg similarity index 100% rename from foul.svg rename to generic/foul.svg diff --git a/lowerthird-bg.png b/generic/lowerthird-bg.png similarity index 100% rename from lowerthird-bg.png rename to generic/lowerthird-bg.png diff --git a/lowerthird-bg2.png b/generic/lowerthird-bg2.png similarity index 100% rename from lowerthird-bg2.png rename to generic/lowerthird-bg2.png diff --git a/out.png b/generic/out.png similarity index 100% rename from out.png rename to generic/out.png diff --git a/out.svg b/generic/out.svg similarity index 100% rename from out.svg rename to generic/out.svg diff --git a/pick.png b/generic/pick.png similarity index 100% rename from pick.png rename to generic/pick.png diff --git a/pick.svg b/generic/pick.svg similarity index 100% rename from pick.svg rename to generic/pick.svg diff --git a/stall.png b/generic/stall.png similarity index 100% rename from stall.png rename to generic/stall.png diff --git a/stall.svg b/generic/stall.svg similarity index 100% rename from stall.svg rename to generic/stall.svg diff --git a/travel.png b/generic/travel.png similarity index 100% rename from travel.png rename to generic/travel.png diff --git a/travel.svg b/generic/travel.svg similarity index 100% rename from travel.svg rename to generic/travel.svg diff --git a/score.html b/score.html index 08873cb..70d5889 100644 --- a/score.html +++ b/score.html @@ -4,6 +4,7 @@ + diff --git a/score.css b/score.scss similarity index 72% rename from score.css rename to score.scss index a5b5d5b..f2d77d8 100644 --- a/score.css +++ b/score.scss @@ -1,3 +1,5 @@ +$trondisk: true; + * { box-sizing: border-box; } @@ -14,12 +16,21 @@ body { transform-origin: top left; */ } body { - font-family: 'Exo', sans-serif; - color: #222; + @if $trondisk { + font-family: 'Lato', sans-serif; + color: white; + + /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */ + --main-padding-top-adjust: 4px; + --main-padding-top-large-adjust: 0px; + } @else { + font-family: 'Exo', sans-serif; + color: #222; - /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */ - --main-padding-top-adjust: 2px; - --main-padding-top-large-adjust: 4px; + /* Needs to be adjusted per-font! 2px/4px is a good choice for Exo. */ + --main-padding-top-adjust: 2px; + --main-padding-top-large-adjust: 4px; + } } #entire-bug { @@ -35,11 +46,19 @@ body { top: 10px; border-collapse: collapse; white-space: nowrap; - border: 1px solid #ccc; + @if $trondisk { + border: 1px solid black; + } @else { + border: 1px solid #ccc; + } z-index: 1; } .scorebug td { - border: 1px solid #ccc; + @if $trondisk { + border: 1px solid #000; + } @else { + border: 1px solid #ccc; + } } .scorebug2 { /*top: 52px; */ @@ -59,35 +78,59 @@ body { } .team1color { background-color: red; - background-image: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0)); + @if $trondisk { + background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0)); + } @else { + background-image: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0)); + } } .team2color { background-color: green; - background-image: linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0)); + @if $trondisk { + background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0)); + } @else { + background-image: linear-gradient(to left, rgba(255,255,255,0.2), rgba(255,255,255,0.05) 3px, rgba(255,255,255,0)); + } } .team1, .team2 { font-weight: bold; width: 100px; text-align: center; height: 35px; - background: linear-gradient(to bottom, #fff, #eee); + @if $trondisk { + background: linear-gradient(to bottom, #00a, #008); + } @else { + background: linear-gradient(to bottom, #fff, #eee); + } padding-top: var(--main-padding-top-adjust); } #score2_team1, #score2_team2 { - background: linear-gradient(to bottom, #fff8, #eee8); + @if $trondisk { + background: linear-gradient(to bottom, #00a8, #0088); + } @else { + background: linear-gradient(to bottom, #fff8, #eee8); + } } #score2_team1, #score2_team2, #score2_score { height: 30px; } .score { text-align: center; - background: linear-gradient(to bottom, #fff, #eee); + @if $trondisk { + background: linear-gradient(to bottom, #00c, #00a); + } @else { + background: linear-gradient(to bottom, #fff, #eee); + } width: 110px; height: 35px; padding-top: var(--main-padding-top-adjust); } #score2_score { - background: linear-gradient(to bottom, #fff8, #eee8); + @if $trondisk { + background: linear-gradient(to bottom, #00c8, #00a8); + } @else { + background: linear-gradient(to bottom, #fff8, #eee8); + } } /* Clock, to the right of score */ @@ -98,18 +141,31 @@ body { top: 10px; border-collapse: collapse; white-space: nowrap; - border: 1px solid #ccc; + @if $trondisk { + border: 1px solid black; + } @else { + border: 1px solid #ccc; + } } .clock { - border: 1px solid #ccc; - background: linear-gradient(to bottom, #fff, #eee); + @if $trondisk { + border: 1px solid #000; + background: linear-gradient(to bottom, #00a, #008); + } @else { + border: 1px solid #ccc; + background: linear-gradient(to bottom, #fff, #eee); + } text-align: center; height: 35px; padding-top: var(--main-padding-top-adjust); width: 90px; } #clock2 { - background: linear-gradient(to bottom, #fff8, #eee8); + @if $trondisk { + background: linear-gradient(to bottom, #00a8, #0088); + } @else { + background: linear-gradient(to bottom, #fff8, #eee8); + } height: 30px; } .clockbug-hidden { @@ -131,11 +187,20 @@ body { top: 52px; border-collapse: collapse; white-space: nowrap; - border: 1px solid #ccc; + @if $trondisk { + border: 1px solid black; + } @else { + border: 1px solid #ccc; + } } .comment { - border: 1px solid #ccc; - background: linear-gradient(to bottom, #fff, #eee); + @if $trondisk { + border: 1px solid #000; + background: linear-gradient(to bottom, #00a, #008); + } @else { + border: 1px solid #ccc; + background: linear-gradient(to bottom, #fff, #eee); + } text-align: center; height: 30px; width: 334px; @@ -160,12 +225,17 @@ body { top: 520px; border-collapse: collapse; white-space: nowrap; - border: 1px solid #ccc; + @if $trondisk { + border: 2px solid #ccc; + background-image: url(trondisk/lowerthird-bg.png); + } @else { + border: 1px solid #ccc; + background-image: url(generic/lowerthird-bg.png); + } height: 118px; font-weight: bold; width: 1050px; /*background: linear-gradient(to right, #ccc, #fff 15px); */ - background-image: url(lowerthird-bg.png); color: black; /* padding-top: 20px; */ display: flex; @@ -208,11 +278,16 @@ body { width: 600px; border-collapse: collapse; white-space: nowrap; - border: 1px solid #6ad; + @if $trondisk { + border: 1px solid black; + background-image: url(trondisk/lowerthird-bg2.png); + } @else { + border: 1px solid #6ad; + background-image: url(generic/lowerthird-bg2.png); + } /*display: flex; align-items: center; */ /*background: linear-gradient(to right, #44c, #33a 15px); */ - background-image: url(lowerthird-bg2.png); display: flex; align-items: center; } @@ -334,7 +409,11 @@ body { } #carousel tr { /* background: rgba(0, 0, 170, 0.8); */ - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)); + @if $trondisk { + background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9)); + } @else { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)); + } /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */ -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease; } @@ -446,11 +525,19 @@ body { @-webkit-keyframes scale-in { 0% { width: 1050px; - border: 1px solid #ccc; + @if $trondisk { + border: 2px solid #ccc; + } @else { + border: 1px solid #ccc; + } } 100% { width: 0px; - border: 1px solid #ccc; + @if $trondisk { + border: 2px solid #ccc; + } @else { + border: 1px solid #ccc; + } } } @-webkit-keyframes scale-in-no-border { @@ -471,7 +558,11 @@ body { } 20% { width: 0px; - border: 1px solid #6ad; + @if $trondisk { + border: 1px solid black; + } @else { + border: 1px solid #6ad; + } } 100% { width: 600px; @@ -480,7 +571,11 @@ body { @-webkit-keyframes scale-in-small { 0% { width: 600px; - border: 1px solid #6ad; + @if $trondisk { + border: 1px solid black; + } @else { + border: 1px solid #6ad; + } } 80% { width: 0px;