diff options
Diffstat (limited to 'rannak/mangud/partorg')
-rw-r--r-- | rannak/mangud/partorg/kuulsused/index.html | 5 | ||||
-rw-r--r-- | rannak/mangud/partorg/kuulsused/styles.css | 62 | ||||
-rw-r--r-- | rannak/mangud/partorg/plakat/img/lenin.png | bin | 0 -> 37366 bytes | |||
-rw-r--r-- | rannak/mangud/partorg/plakat/img/nazi.png | bin | 0 -> 20381 bytes | |||
-rw-r--r-- | rannak/mangud/partorg/plakat/img/normalSelect.cur | bin | 0 -> 4286 bytes | |||
-rw-r--r-- | rannak/mangud/partorg/plakat/img/redStar.png | bin | 0 -> 39590 bytes | |||
-rw-r--r-- | rannak/mangud/partorg/plakat/img/stalinAddOn.png | bin | 0 -> 976997 bytes | |||
-rw-r--r-- | rannak/mangud/partorg/plakat/index.html | 64 | ||||
-rw-r--r-- | rannak/mangud/partorg/plakat/main.js | 83 | ||||
-rw-r--r-- | rannak/mangud/partorg/plakat/style.css | 93 | ||||
-rw-r--r-- | rannak/mangud/partorg/sonaragastik/index.html | 31 | ||||
-rw-r--r-- | rannak/mangud/partorg/sonaragastik/script.js | 4 | ||||
-rw-r--r-- | rannak/mangud/partorg/sonaragastik/style.css | 77 |
13 files changed, 290 insertions, 129 deletions
diff --git a/rannak/mangud/partorg/kuulsused/index.html b/rannak/mangud/partorg/kuulsused/index.html index b0503a2..80fc8c9 100644 --- a/rannak/mangud/partorg/kuulsused/index.html +++ b/rannak/mangud/partorg/kuulsused/index.html @@ -4,12 +4,13 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kuulsused</title> - <link rel="stylesheet" href="styles.css"> <!-- Bootstrap - CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> + + <link rel="stylesheet" href="styles.css"> </head> -<body class="bg-dark text-white"> +<body class="text-white"> <div class="container text-center text-white align-items-center pb-5"> <h1 class="pb-1 pt-2">Olulised isikud</h1> diff --git a/rannak/mangud/partorg/kuulsused/styles.css b/rannak/mangud/partorg/kuulsused/styles.css index 108bde9..f05f71d 100644 --- a/rannak/mangud/partorg/kuulsused/styles.css +++ b/rannak/mangud/partorg/kuulsused/styles.css @@ -1,22 +1,28 @@ * { - box-sizing: border-box !important; + box-sizing: border-box; +} +body{background-color: #4D5157;} + +h1 { + color: #a1000e; + font-weight: bold; } .lists{ - margin-bottom: 20px !important; + margin-bottom: 20px; } /* Modal Stuff */ .avatar { border-radius: 20px; - width: 100% !important; + width: 100%; } .modalHeaderWrapper{ text-align: center; - margin: 0 !important; - width: 100% !important; + margin: 0; + width: 100%; } .closeModalButton { @@ -29,17 +35,17 @@ right: 0; padding: 6px; padding: 9px 25px; - background-color: rgba(0,136,169,1) !important; - border: none !important; - border-radius: 50px !important; - cursor: pointer !important; - transition: all 0.3 ease 0 !important; - margin: 3% !important; - font-size: 1.2rem !important; + background-color: rgba(0,136,169,1); + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3 ease 0; + margin: 3%; + font-size: 1.2rem; } .modalButton:hover{ - background-color: rgba(0,136,169,0.8) !important; + background-color: rgba(0,136,169,0.8); } @@ -86,35 +92,35 @@ button:disabled{ .carousel { border-left: 5px solid white; - padding: 1rem !important; - margin: auto !important; - width: 60% !important; - height: auto !important; + padding: 1rem; + margin: auto; + width: 60%; + height: auto; } -.carousel-item{text-align: center !important;} -.carousel-item .text{padding-top: 10px !important;} +.carousel-item{text-align: center;} +.carousel-item .text{padding-top: 10px;} .carousel-item img{ - margin: auto !important; - max-width: 35% !important; - height: auto !important; + margin: auto; + max-width: 35% ; + height: auto; } .carousel-item .list { background-color: rgba(0, 0, 0, 0.3); min-height: 3.7rem; margin: .5rem; - border-radius: 8px !important; + border-radius: 8px; } .list-item { - background-color: #b2beb5 !important; + background-color: #b2beb5; color: #21201E; margin: 0.5rem 0; height: 2.5rem; - border-radius: 8px !important; + border-radius: 8px; cursor: pointer; } @@ -123,12 +129,12 @@ button:disabled{ /* Other */ .modal-header img { - max-width: 15rem !important; - height: auto !important; + max-width: 15rem; + height: auto; padding: .3rem; } .startBasket { - height: 100% !important; + height: 100%; min-height: 2rem; } diff --git a/rannak/mangud/partorg/plakat/img/lenin.png b/rannak/mangud/partorg/plakat/img/lenin.png Binary files differnew file mode 100644 index 0000000..e36df3d --- /dev/null +++ b/rannak/mangud/partorg/plakat/img/lenin.png diff --git a/rannak/mangud/partorg/plakat/img/nazi.png b/rannak/mangud/partorg/plakat/img/nazi.png Binary files differnew file mode 100644 index 0000000..87e616e --- /dev/null +++ b/rannak/mangud/partorg/plakat/img/nazi.png diff --git a/rannak/mangud/partorg/plakat/img/normalSelect.cur b/rannak/mangud/partorg/plakat/img/normalSelect.cur Binary files differnew file mode 100644 index 0000000..fdd943c --- /dev/null +++ b/rannak/mangud/partorg/plakat/img/normalSelect.cur diff --git a/rannak/mangud/partorg/plakat/img/redStar.png b/rannak/mangud/partorg/plakat/img/redStar.png Binary files differnew file mode 100644 index 0000000..b6eee79 --- /dev/null +++ b/rannak/mangud/partorg/plakat/img/redStar.png diff --git a/rannak/mangud/partorg/plakat/img/stalinAddOn.png b/rannak/mangud/partorg/plakat/img/stalinAddOn.png Binary files differnew file mode 100644 index 0000000..d3e05fd --- /dev/null +++ b/rannak/mangud/partorg/plakat/img/stalinAddOn.png diff --git a/rannak/mangud/partorg/plakat/index.html b/rannak/mangud/partorg/plakat/index.html index a15849e..9f1416b 100644 --- a/rannak/mangud/partorg/plakat/index.html +++ b/rannak/mangud/partorg/plakat/index.html @@ -3,12 +3,11 @@ <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="style.css"> <title>Plakat</title> - <!-- Bootstrap - CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> + <link rel="stylesheet" href="style.css"> </head> <body> <section class="wrapper"> @@ -17,7 +16,7 @@ <div class="intro"> <h1>Kujunda Plakatit</h1> - <p>Vali Välja Üks plakat ja muuda/lisa selle kujundust vastavalt enda äranägemise järgi</p> + <p>Vali välja üks plakat ja muuda/lisa selle kujundust vastavalt enda äranägemisele.</p> <button class="moveOn" disabled>Liigu Edasi</button> <!-- Button trigger modal --> @@ -25,22 +24,27 @@ Sissejuhatus </button> + <button id="clear">Puhasta</button> </div> - <form> - <p class="toolbarDiv"> - <label for="stroke">Värv</label> - <input id="stroke" name='stroke' type="color"> - </p> - - <p class="toolbarDiv"> - <label for="lineWidth">Joone Paksus</label> - <input id="lineWidth" name='lineWidth' type="number" value="5"> - </p> - - </form> + <div class="inputs"> + <form> + <p class="toolbarDiv"> + <label for="stroke">Värv</label> + <input id="stroke" name='stroke' type="color"> + </p> + + <p class="toolbarDiv"> + <label for="lineWidth">Joone Paksus</label> + <input id="lineWidth" name='lineWidth' type="number" value="5" maxlength="1"> + </p> + + <!-- + <button id="clear">Puhasta</button> + --> + </form> + </div> - <button id="clear">Puhasta</button> <!-- Image Pick--> @@ -50,8 +54,21 @@ <img id="veekogud" class="pickImg" alt="Veekogude Plakat" src="img/veekogud.jpg"/> </div> + + <!-- Add-Ons Pick--> + <h2 class="ValiTxt"> Vali Lisasid </h2> + <div class="pickingSec"> + <img id="redStar" class="pickImg" alt="red star" src="img/redStar.png"/> + <img id="lenin" class="pickImg" alt="lenin" src="img/lenin.png"/> + <img id="nazi" class="pickImg" alt="Nazi Flag" src="img/nazi.png"/> + <img id="stalinAddOn" class="pickImg" alt="Stalin" src="img/stalinAddOn.png"/> + </div> + </div> - + + + + <div class="canvasWrap"> <canvas id="drawing-board"></canvas> </div> @@ -76,7 +93,18 @@ <div class="modal-body"> - Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo urna, molestie at elementum eu, facilisis sed odio morbi quis commodo odio aenean sed adipiscing! + Peale ajalehe väljalõigete olen aastate jooksul kogunud ja säilitanud meeleolukaid plakateid nõukogudeaja kuldsest elust. + <br/> + Jagan siinkohal teiega, seltsimehed noored, nelja nendest. Plakatid on pärit erinevatest aastakümnetest: <br/>1950ndad, 1960ndad, 1970ndad ja 1980ndad aastad. + <br/> + <br/> + Palun uurige nende plakatite sisu ja vormi. + <br/> + Õppige, õppige, õppige! Kas tajute, millisesse kümnendisse iga plakat kuulub? + <br/> <br/> + <strong> + Mõelge plakatitele välja uus, kaasaega sobiv lööklause. Samuti kaunistage ja täiendage plakatit kaasaegsete kunsiliste detailidega. Ka huumor on lubatud! + </strong> </div> diff --git a/rannak/mangud/partorg/plakat/main.js b/rannak/mangud/partorg/plakat/main.js index 48626c6..9ae8e54 100644 --- a/rannak/mangud/partorg/plakat/main.js +++ b/rannak/mangud/partorg/plakat/main.js @@ -4,6 +4,7 @@ document.addEventListener('DOMContentLoaded', () => { }); +console.log("FAAAAK"); /* Inital Setup*/ @@ -25,12 +26,16 @@ function copyImageToCanvas(image, x, y) { ctx.drawImage(image, 0, 0, canvas.width, canvas.height) } + + + // Initial Drawring setTimeout(() => { copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); }, 300); + window.onresize = () => { canvasOffsetX = canvas.offsetLeft; canvasOffsetY = canvas.offsetTop; @@ -44,20 +49,45 @@ window.onresize = () => { /* EventHandlers and stuff*/ +let addOnHasBeenAdded = false; +let addOnActive = false; +let newAddOn; +let hasPainted = false; + let isPainting = false; let lineWidth = 5; let startX; let startY; +const pildid = new Array(); +const addOns = new Array(); + toolbar.addEventListener('click', e => { + + //Plakatid const stalinImg = document.getElementById("stalin"); const veekogudImg = document.getElementById("veekogud"); - const pildid = new Array(); pildid.push(stalinImg); pildid.push(veekogudImg); + + //Addons + + const naziImg = document.getElementById("nazi"); + const lenin = document.getElementById("lenin"); + const redStar = document.getElementById("redStar"); + const stalinAddOn = document.getElementById("stalinAddOn"); + + addOns.push(naziImg); + addOns.push(lenin); + addOns.push(redStar); + addOns.push(stalinAddOn); + + + + if (e.target.id === "stalin" || e.target.id === "veekogud") { for (el in pildid) { pildid[el].classList.remove("picked"); @@ -72,17 +102,60 @@ toolbar.addEventListener('click', e => { } - if (e.target.id === 'clear') { + else if (e.target.id === 'clear') { ctx.clearRect(0, 0, canvas.width, canvas.height); copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); moveOnDisable(); } + + else if (e.target.id === 'nazi' || e.target.id === 'lenin' || e.target.id === 'redStar' || e.target.id === 'stalinAddOn') { + addOnActive = true; + document.body.style.cursor = "url('img/normalSelect.cur'), auto"; + + for (el in addOns) { + addOns[el].classList.remove("addOnPicked"); + } + + newAddOn = document.getElementById(e.target.id); + newAddOn.classList.add("addOnPicked"); + } + + +}); + + + +canvas.addEventListener('click', e => { + + if(addOnActive == true){ + addOnActive = false; + document.body.style.cursor = "auto"; + + for (el in addOns) { + addOns[el].classList.remove("addOnPicked"); + } + + let xCord = e.offsetX - (newAddOn.clientWidth / 2) + let yCord = e.offsetY - (newAddOn.clientHeight / 2) + ctx.drawImage(newAddOn, xCord, yCord, newAddOn.clientWidth, newAddOn.clientHeight); + + + addOnHasBeenAdded = true; + if (hasPainted) + moveOnEnable(); + } }); + + + + + /* Drawing stuff from here */ + toolbar.addEventListener('change', e => { if(e.target.id === 'stroke') { ctx.strokeStyle = e.target.value; @@ -108,7 +181,9 @@ const draw = (e) => { //ctx.lineTo(e.clientX - abiOffset, e.clientY); ctx.stroke(); - moveOnEnable(); + hasPainted = true; + if (addOnHasBeenAdded) + moveOnEnable(); } @@ -132,8 +207,8 @@ canvas.addEventListener('mousemove', draw); -// Move On Stuff +// Move On Stuff function moveOnEnable(){ const btn = document.querySelector(".moveOn"); diff --git a/rannak/mangud/partorg/plakat/style.css b/rannak/mangud/partorg/plakat/style.css index bc5c2c4..215c073 100644 --- a/rannak/mangud/partorg/plakat/style.css +++ b/rannak/mangud/partorg/plakat/style.css @@ -1,7 +1,13 @@ body { - height: 100% !important; - overflow: hidden !important; - color: white !important; + height: 100%; + overflow: hidden; + color: white; + background-color: #43464b; +} + +h1 { + color: #a1000e; + font-weight: bold; } @@ -9,15 +15,15 @@ body { .avatar { border-radius: 20px; - width: 100% !important; - max-width: 15rem !important; + width: 100%; + max-width: 15rem; } .modalHeaderWrapper{ text-align: center; - margin: 0 !important; - width: 100% !important; + margin: 0; + width: 100%; } button:disabled{ @@ -47,18 +53,18 @@ button:disabled{ } .modalButton{ - background-color: rgba(0,136,169,1) !important; - border: none !important; - border-radius: 50px !important; - cursor: pointer !important; - transition: all 0.3 ease 0 !important; - font-size: 1.2rem !important; - text-align: center !important; - margin-left: 30px !important; + background-color: rgba(0,136,169,1); + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3 ease 0; + font-size: 1.2rem; + text-align: center; + margin-left: 30px; } .modalButton:hover{ - background-color: rgba(0,136,169,0.8) !important; + background-color: rgba(0,136,169,0.8); } @@ -71,7 +77,6 @@ button:disabled{ } /* Toolbar */ - .intro{ text-align: center; border-bottom: 2px solid gray; @@ -86,7 +91,7 @@ button:disabled{ padding: 5px; width: 20%; min-width:350px; - background-color: #202020; + background-color: #43464b; } #clear{ @@ -99,14 +104,18 @@ button:disabled{ } #toolbar * {margin-bottom: 6px;} -#toolbar input {width: 50%;} +#toolbar input {width: 4rem;} + +.toolbarDiv {width: 100%;} + +form { + display: flex; + align-items: center; +} -form { display: table !important;} -input { display: table-cell !important;} -.toolbarDiv {width: 100% !important;} label { - display: table-cell !important; - font-size: 1.2rem !important; + display: table-cell; + font-size: 1.2rem; } @@ -118,15 +127,24 @@ label { overflow-y: scroll; } + .valiTxt { border-bottom: 4px solid gray; padding-top: 10px; } + .picked{ border: 2px solid lime; } + +.addOnPicked{ + border: 2px solid aqua; +} + + + .pickImg { width: 50%; height: auto; @@ -141,3 +159,30 @@ canvas{ display: block; margin: 0 auto; } + + + + + +/* Responsivness */ + +@media screen and (max-width: 1400px) { + .pickImg { + width: 30%; + height: auto; + padding: 7px; + margin-left: calc(7% - 21px); + } + +} + + +@media screen and (max-width: 900px) { + .pickImg { + width: 24%; + height: auto; + padding: 3px; + margin-left: calc(1% - 10px); + } + +} diff --git a/rannak/mangud/partorg/sonaragastik/index.html b/rannak/mangud/partorg/sonaragastik/index.html index 11d31ec..be6093e 100644 --- a/rannak/mangud/partorg/sonaragastik/index.html +++ b/rannak/mangud/partorg/sonaragastik/index.html @@ -4,10 +4,10 @@ <meta charset="UTF-8"> <title>Sõnarägastik</title> - - <link rel="stylesheet" href="style.css"> <!-- Bootstrap - CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> + + <link rel="stylesheet" href="style.css"> </head> <body> @@ -34,16 +34,11 @@ </div> </div> - - <!-- Button trigger modal --> <button type="button" class="btn btn-primary modalButton" data-bs-toggle="modal" data-bs-target="#myModal"> Sissejuhatus </button> - - - <!-- Modal --> <div class="modal fade text-black" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> @@ -63,6 +58,8 @@ Meie kaasaeg ja kuulsusrikas nõukogude lähiminevik on ellu kutsunud mitmed huvitavad mõisted ja uudissõnad, kas ka teie tunnete neid? <br/> <strong>Leidke need mõisted ja uudissõnad sõnarägastikust.</strong> + <br/> + <strong>NB! Kontrolli sõnu ükshaaval.</strong> </div> @@ -108,10 +105,6 @@ </li> <li> - <strong class="Vtuusik">TUUSIK</strong>. Neid jagasid töökohtade ametiühingukomiteed. Olenevalt tuusikust sai minna kas mõne vennasvabariigi puhkekodusse, sanatooriumisse või turismibaasi või näiteks turismirongiga Poola, Saksa Demokraatlikku Vabariiki vm sotsmaale. - </li> - - <li> <strong class="Vplaanimajandus">PLAANIMAJANDUS.</strong> Kuna riik otsustas, kui palju mingit kaupa toodetakse, oli asju tavaliselt kas üle (nt povidlo) või puudu (nt viinerid, defitsiit!). </li> @@ -135,6 +128,7 @@ <!-- Sõnarägastik --> + <div class="tableWrapper"> <table class="text-center text-white"> <!-- Essa Rida--> @@ -162,7 +156,7 @@ <td></td> <td></td> <td class="tsaika"><span>Š</span></td> - <td class="tuusik"><span>T</span></td> + <td></td> <td></td> <td></td> <td></td> @@ -181,7 +175,7 @@ <td></td> <td class="tsaika"><span>A</span></td> <td></td> - <td class="tuusik"><span>U</span></td> + <td></td> <td></td> <td></td> <td class="redis"><span>R</span></td> @@ -200,7 +194,7 @@ <td class="letialuneKaup tsaika"><span>I</span></td> <td class="letialuneKaup"><span>A</span></td> <td class="letialuneKaup"><span>L</span></td> - <td class="letialuneKaup tuusik"><span>U</span></td> + <td class="letialuneKaup"><span>U</span></td> <td class="letialuneKaup"><span>N</span></td> <td class="letialuneKaup redis"><span>E</span></td> <td class="letialuneKaup"><span>K</span></td> @@ -219,7 +213,7 @@ <td></td> <td></td> <td></td> - <td class="tuusik"><span>S</span></td> + <td></td> <td class="redis"><span>D</span></td> <td></td> <td class="plaanimajandus"><span>N</span></td> @@ -238,7 +232,7 @@ <td></td> <td></td> <td></td> - <td class="redis tuusik"><span>I</span></td> + <td class="redis"><span>I</span></td> <td></td> <td class="plaanimajandus"><span>I</span></td> <td class="rubla"><span>L</span></td> @@ -257,7 +251,7 @@ <td class="talongid"><span>I</span></td> <td class="talongid"><span>D</span></td> <td class="redis"><span>S</span></td> - <td class="tuusik"><span>K</span></td> + <td></td> <td class="plaanimajandus"><span>M</span></td> <td class="rubla"><span>A</span></td> <td></td> @@ -390,7 +384,8 @@ </tr> </tr> - </table> +</table> +</div> </div> <!-- End of main class--> diff --git a/rannak/mangud/partorg/sonaragastik/script.js b/rannak/mangud/partorg/sonaragastik/script.js index 33626b1..2e6ffb4 100644 --- a/rannak/mangud/partorg/sonaragastik/script.js +++ b/rannak/mangud/partorg/sonaragastik/script.js @@ -40,7 +40,7 @@ function message(msg, color){ // Main stuff -const vastused = ["valuuta", "tuusik", "tsaika", "redis", "plaanimajandus", +const vastused = ["valuuta", "tsaika", "redis", "plaanimajandus", "rubla", "letialuneKaup", "talongid", "maantee", "piiritsoon", "defitsiit"]; @@ -98,7 +98,7 @@ function proovi(){ õigedCounter++; //console.log(õigedCounter); } - if (õigedCounter >= 11) + if (õigedCounter >= 10) moveOnEnable(); diff --git a/rannak/mangud/partorg/sonaragastik/style.css b/rannak/mangud/partorg/sonaragastik/style.css index 73bfa90..690ad14 100644 --- a/rannak/mangud/partorg/sonaragastik/style.css +++ b/rannak/mangud/partorg/sonaragastik/style.css @@ -3,7 +3,12 @@ } body{ - background-color: #212121 !important; + background-color: #4D5157; +} + +h1{ + color: #a1000e; + font-weight: bold; } .moveOn{ @@ -30,14 +35,14 @@ button:disabled{ .avatar { border-radius: 20px; - width: 100% !important; - max-width: 15rem !important; + width: 100%; + max-width: 15rem; } .modalHeaderWrapper{ text-align: center; - margin: 0 !important; - width: 100% !important; + margin: 0; + width: 100%; } @@ -53,17 +58,17 @@ button:disabled{ right: 0; padding: 6px; padding: 9px 25px; - background-color: rgba(0,136,169,1) !important; - border: none !important; - border-radius: 50px !important; - cursor: pointer !important; - transition: all 0.3 ease 0 !important; - margin: 3% !important; - font-size: 1.2rem !important; + background-color: rgba(0,136,169,1); + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3 ease 0; + margin: 3%; + font-size: 1.2rem; } .modalButton:hover{ - background-color: rgba(0,136,169,0.8) !important; + background-color: rgba(0,136,169,0.8); } /* Input Box styles */ @@ -94,15 +99,15 @@ button:disabled{ /* Adding classes */ .selected { - background-color: lime !important; + background-color: #ECAC76; } .doneV{ - background-color: #562ABF; + background-color: #284F8F; } .doneH{ - background-color: #FF0883; + background-color: #C5E17A; } .done{ @@ -115,51 +120,57 @@ button:disabled{ .main{ display: flex; + justify-content: center; } .left { margin: 10px; - width: calc((100vw - (14*3rem) - 10rem)/ 2) !important; + width: 35%; font-size: .8rem; + padding: 1rem; + margin: 0; } .left strong{ font-size: 1rem; } +.tableWrapper { + width: 65%; +} + table{ - margin: 10px auto; - margin-left: 5rem; + margin: 10px ; } td { - border: 4px solid white !important; - width: 3.5rem !important; + border: 4px solid white; + width: 3.5rem; font-weight: bold; } /* td { - display: block !important; - float: left !important; - border: 2px solid white !important; - width: 5% !important; - padding-bottom: 5% !important; + display: block; + float: left; + border: 2px solid white; + width: 5%; + padding-bottom: 5%; } -td span { position: absolute !important} +td span { position: absolute} table { - display: block !important; - width: 100% !important; + display: block; + width: 100%; } tr { - display: block !important; - width: 100% !important; + display: block; + width: 100%; } tbody { - display: block !important; - width: 100% !important; + display: block; + width: 100%; } */ |