diff --git a/rannak/mangud/uliopilane/tSark/main.js b/rannak/mangud/uliopilane/tSark/main.js index ddbd533..cc7ef3a 100644 --- a/rannak/mangud/uliopilane/tSark/main.js +++ b/rannak/mangud/uliopilane/tSark/main.js @@ -65,6 +65,15 @@ function nextText() { let gi6 = document.querySelector("g") newText.classList.add("sarkTekst") newText.innerHTML = "Uus Tekst"; + + // Move a little, so that new txt isnt exatly on top of old. + let newYVal = newText.y.baseVal[0].value; + if (newYVal < -150) + newText.y.baseVal[0].value += 50; + else + newText.y.baseVal[0].value -= 50; + //console.log(newText.y.baseVal[0].value); + gi6.appendChild(newText); } @@ -229,10 +238,18 @@ minus.addEventListener("click" , () => { + + + + + + + + + /* Rezisable Image Stuff */ const el = document.querySelector(".item"); -let isResizing = false; el.addEventListener("mousedown", mousedown); @@ -246,42 +263,57 @@ function mousedown(e) { function mousemove(e) { if (!isResizing) { - let item = document.querySelector(".item"); - item.style.pointerEvents = "none"; - let posers = document.elementFromPoint(e.x, e.y).id; - item.style.pointerEvents = ""; - if (posers != "sark"){ - console.log(posers); + const rect = el.getBoundingClientRect(); + + let item = document.querySelector(".item"); + item.style.pointerEvents = "none"; + //let posers = document.elementFromPoint(e.x, e.y).id; + + // New Stuff + let posers = document.elementFromPoint(rect.left, rect.top).id; + let posers2 = document.elementFromPoint(rect.right, rect.top).id; + let posers3 = document.elementFromPoint(rect.right, rect.bottom).id; + let posers4 = document.elementFromPoint(rect.left, rect.bottom).id; + // /// ///// + + console.log(posers, posers2, posers3, posers4); + + + item.style.pointerEvents = ""; - let newX = prevX - e.clientX; - let newY = prevY - e.clientY; - const rect = el.getBoundingClientRect(); - el.style.left = rect.left - newX + "px"; - el.style.top = rect.top - newY + "px"; + if (posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark"){ - prevX = e.clientX; - prevY = e.clientY; + let newX = prevX - e.clientX; + let newY = prevY - e.clientY; - mouseup() - } + // Pic back to Center + let brr = document.querySelector("#sark").getBoundingClientRect(); + el.style.left = brr.left + (brr.right - brr.left)/2 - (rect.right - rect.left)/2 + "px"; + el.style.top = brr.top + (brr.bottom - brr.top)/2 - (rect.bottom - rect.top)/2 + "px"; + //el.style.top = brr.bottom - 2*(rect.bottom - rect.top) + "px"; - else { - let newX = prevX - e.clientX; - let newY = prevY - e.clientY; + prevX = e.clientX; + prevY = e.clientY; + mouseup() + } - const rect = el.getBoundingClientRect(); + else { - el.style.left = rect.left - newX + "px"; - el.style.top = rect.top - newY + "px"; + let newX = prevX - e.clientX; + let newY = prevY - e.clientY; - prevX = e.clientX; - prevY = e.clientY; - - } + const rect = el.getBoundingClientRect(); + + el.style.left = rect.left - newX + "px"; + el.style.top = rect.top - newY + "px"; + + prevX = e.clientX; + prevY = e.clientY; + } } } @@ -294,8 +326,11 @@ function mousedown(e) { + const resizers = document.querySelectorAll(".resizer"); let currentResizer; +let isResizing = false; + for (let resizer of resizers) { resizer.addEventListener("mousedown", mousedown); @@ -312,35 +347,69 @@ for (let resizer of resizers) { function mousemove(e) { - const rect = el.getBoundingClientRect(); - - if (currentResizer.classList.contains("se")) { - el.style.width = rect.width - (prevX - e.clientX) + "px"; - el.style.height = rect.height - (prevY - e.clientY) + "px"; - } - - else if (currentResizer.classList.contains("sw")) { - el.style.width = rect.width + (prevX - e.clientX) + "px"; - el.style.height = rect.height - (prevY - e.clientY) + "px"; - el.style.left = rect.left - (prevX - e.clientX) + "px"; - } - - else if (currentResizer.classList.contains("ne")) { - el.style.width = rect.width - (prevX - e.clientX) + "px"; - el.style.height = rect.height + (prevY - e.clientY) + "px"; - el.style.top = rect.top - (prevY - e.clientY) + "px"; - } - - else { - el.style.width = rect.width + (prevX - e.clientX) + "px"; - el.style.height = rect.height + (prevY - e.clientY) + "px"; - el.style.top = rect.top - (prevY - e.clientY) + "px"; - el.style.left = rect.left - (prevX - e.clientX) + "px"; - } - - prevX = e.clientX; - prevY = e.clientY; - } + const rect = el.getBoundingClientRect(); + + + + let item = document.querySelector(".item"); + item.style.pointerEvents = "none"; + let posers = document.elementFromPoint(rect.left, rect.top).id; + let posers2 = document.elementFromPoint(rect.right, rect.top).id; + let posers3 = document.elementFromPoint(rect.right, rect.bottom).id; + let posers4 = document.elementFromPoint(rect.left, rect.bottom).id; + item.style.pointerEvents = ""; + + + + if ( !(posers != "sark" || posers2 != "sark" || posers3 != "sark" || posers4 != "sark")){ + + + if (currentResizer.classList.contains("se")) { + el.style.width = rect.width - (prevX - e.clientX) + "px"; + el.style.height = rect.height - (prevY - e.clientY) + "px"; + } + + else if (currentResizer.classList.contains("sw")) { + el.style.width = rect.width + (prevX - e.clientX) + "px"; + el.style.height = rect.height - (prevY - e.clientY) + "px"; + el.style.left = rect.left - (prevX - e.clientX) + "px"; + } + + else if (currentResizer.classList.contains("ne")) { + el.style.width = rect.width - (prevX - e.clientX) + "px"; + el.style.height = rect.height + (prevY - e.clientY) + "px"; + el.style.top = rect.top - (prevY - e.clientY) + "px"; + } + + else { + el.style.width = rect.width + (prevX - e.clientX) + "px"; + el.style.height = rect.height + (prevY - e.clientY) + "px"; + el.style.top = rect.top - (prevY - e.clientY) + "px"; + el.style.left = rect.left - (prevX - e.clientX) + "px"; + } + + } + + // If resizing out of boundaries + else{ + + if (currentResizer.classList.contains("se") || currentResizer.classList.contains("sw")) { + el.style.width = rect.width - 15 + "px"; + el.style.height = rect.height - 15 + "px"; + mouseup(); + } + + if (currentResizer.classList.contains("ne") || currentResizer.classList.contains("nw")) { + el.style.width = rect.width - 15 + "px"; + el.style.height = rect.height - 15 + "px"; + mouseup(); + } + + } + prevX = e.clientX; + prevY = e.clientY; + + } // Function mousemove end function mouseup() { window.removeEventListener("mousemove", mousemove); @@ -354,9 +423,11 @@ for (let resizer of resizers) { // Seting up resize Pic Pos let brr = document.querySelector("#sark").getBoundingClientRect(); -let it = document.querySelector(".item"); -it.style.left = brr.left + 200; -//it.style.top = brr.top + 300; +let it = document.querySelector(".item").getBoundingClientRect(); +let Boop = document.querySelector(".item"); +//it.style.left = brr.left + 200; +Boop.style.left = brr.left + (brr.right - brr.left)/2 - (it.right - it.left)/2 + "px"; +Boop.style.top = brr.top + (brr.bottom - brr.top)/2 - (it.bottom - it.top)/2 + "px"; @@ -438,11 +509,13 @@ nulliBtn.addEventListener("click", () => { document.querySelector(".sarkTekst").style.fill = "black"; - // Seting up resize Pic Pos - let brr = document.querySelector("#sark").getBoundingClientRect(); - let it = document.querySelector(".item"); - it.style.left = brr.left + 200; - //it.style.top = brr.top + 300; + + // Pic back to Center + let brr = document.querySelector("#sark").getBoundingClientRect(); + let rect = document.querySelector(".item").getBoundingClientRect(); + el.style.left = brr.left + (brr.right - brr.left)/2 - (rect.right - rect.left)/2 + "px"; + el.style.top = brr.top + (brr.bottom - brr.top)/2 - (rect.bottom - rect.top)/2 + "px"; + // Moving IMg Corners diff --git a/rannak/mangud/uliopilane/tSark/main.js.bak b/rannak/mangud/uliopilane/tSark/main.js.bak new file mode 100644 index 0000000..2685ad4 --- /dev/null +++ b/rannak/mangud/uliopilane/tSark/main.js.bak @@ -0,0 +1,537 @@ +document.addEventListener('DOMContentLoaded', () => { + let btn = document.querySelector('.modalButton'); + btn.click(); +}); + + + +/*Muutused Stuff*/ + +// Särgi color + +let colorFill = document.querySelector("#colorFiller"); +let colorStroke = document.querySelector("#colorStroke"); + +colorFill.addEventListener("input", () => { + let color = colorFill.value; + document.querySelector("#sark").style.fill = color; + + if (!stuffDone.includes("sarkColor")) + stuffDone.push("sarkColor"); +}) + +colorStroke.addEventListener("input", () => { + let color = colorStroke.value; + document.querySelector("#sark").style.stroke = color; + + if (!stuffDone.includes("sarkColor")) + stuffDone.push("sarkColor"); +}) + + +// Img upload + +const image_input = document.querySelector("#image_input"); +let uploadedImg = ""; + +image_input.addEventListener("change", () => { + const reader = new FileReader(); + reader.readAsDataURL(image_input.files[0]) + reader.addEventListener("load", () => { + uploadedImg = reader.result; + document.querySelector(".item").style.backgroundImage = `url(${uploadedImg})` + }); + + if (!stuffDone.includes("newImg")) + stuffDone.push("newImg"); +}) + + +/* Teksti Teema */ + +// Uus Tekst + +function nextText() { + document.querySelector("#sargiText").value = ""; + + let curText = document.querySelector(".sarkTekst") + let newText = curText.cloneNode(true); + curText.classList.remove("sarkTekst") + + //Reset Stuff + let angle=0; + let sarkFontSize = 20; + + let gi6 = document.querySelector("g") + newText.classList.add("sarkTekst") + newText.innerHTML = "Uus Tekst"; + gi6.appendChild(newText); +} + + + +// Input + +function chgTxt() { + + let tekstVali = document.querySelector("#sargiText"); + tekstVali.addEventListener("keyup", () => { + let sarkTekst = document.querySelector(".sarkTekst"); + sarkTekst.innerHTML = tekstVali.value; + + if (!stuffDone.includes("txt")) + stuffDone.push("txt"); + }); +} + +chgTxt() + + +/* +function getInputValue() { + // Selecting the input element and get its value + + //Btn + let inputVal = document.getElementById("sargiText").value; + //Txt + let sarkTekst = document.querySelector(".sarkTekst"); + sarkTekst.innerHTML = inputVal; + + if (!stuffDone.includes("newTxt")) + stuffDone.push("newTxt"); +} + +function enterSubmit(){ + document.getElementById('sargiText') + .addEventListener('keyup', event => { + if (event.code === 'Enter') + { + event.preventDefault(); + getInputValue(); + } + }); +} +enterSubmit() +*/ + + +// Color + +let colorText = document.querySelector("#colorText"); +colorText.addEventListener("input", () => { + let color = colorText.value; + document.querySelector(".sarkTekst").style.fill = color; + + if (!stuffDone.includes("txt")) + stuffDone.push("txt"); +}) + +// Position +const ules = document.querySelector(".ules"); +const alla = document.querySelector(".alla"); +const vasak = document.querySelector(".vasak"); +const parem = document.querySelector(".parem"); + +ules.addEventListener("click" , () => { + let tmpX = document.querySelector(".sarkTekst").x; + let tmpY = document.querySelector(".sarkTekst").y; + + tmpY.baseVal[0].value-=10; + + if (!stuffDone.includes("txt")) + stuffDone.push("txt"); +}); + +alla.addEventListener("click" , () => { + let tmpX = document.querySelector(".sarkTekst").x; + let tmpY = document.querySelector(".sarkTekst").y; + + tmpY.baseVal[0].value+=10; + + if (!stuffDone.includes("txt")) + stuffDone.push("txt"); +}); + +vasak.addEventListener("click", () => { + let tmpX = document.querySelector(".sarkTekst").x; + let tmpY = document.querySelector(".sarkTekst").y; + + tmpX.baseVal[0].value-=10; + + if (!stuffDone.includes("txt")) + stuffDone.push("txt"); +}); + +parem.addEventListener("click", () => { + let tmpX = document.querySelector(".sarkTekst").x; + let tmpY = document.querySelector(".sarkTekst").y; + + tmpX.baseVal[0].value+=10; + + if (!stuffDone.includes("txt")) + stuffDone.push("txt"); +}); + + +// Vertical Pos +const vasakule = document.querySelector(".vertVasak"); +const paremale = document.querySelector(".vertParem"); +let angle=0; + +vasakule.addEventListener("click" , () => { + let testing = document.querySelector(".sarkTekst"); + + angle -=5 + testing.setAttribute("transform", "rotate("+angle+")"); + + if (!stuffDone.includes("txt")) + stuffDone.push("txt"); +}); + +paremale.addEventListener("click" , () => { + let testing = document.querySelector(".sarkTekst"); + + angle +=5 + testing.setAttribute("transform", "rotate("+angle+")"); + + if (!stuffDone.includes("txt")) + stuffDone.push("txt"); +}); + + + +// FontZise + +const plus = document.querySelector(".plus"); +const minus = document.querySelector(".minus"); +let sarkFontSize = 20; + +plus.addEventListener("click" , () => { + let sarkForText = document.querySelector(".sarkTekst"); + + sarkFontSize +=2; + sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+""); + + if (!stuffDone.includes("txt")) + stuffDone.push("txt"); +}); + +minus.addEventListener("click" , () => { + let sarkForText = document.querySelector(".sarkTekst"); + + sarkFontSize-=2; + sarkForText.setAttributeNS(null,"font-size",""+sarkFontSize+""); + + if (!stuffDone.includes("txt")) + stuffDone.push("txt"); +}); + + + + +// https://stackoverflow.com/questions/54076532/how-to-test-if-a-point-is-inside-an-svg-closed-path + + +// Funcs to check whether draggable el inside Svg path + +function oMousePos(elmt, evt) { + let ClientRect = elmt.getBoundingClientRect(); + return { + //object + x: Math.round(evt.clientX - ClientRect.left), + y: Math.round(evt.clientY - ClientRect.top) + }; +} + +function draggablePoints(m) { + //top left + draggable.p0s[0][0] = m.x - draggable.delta.x - 1; + draggable.p0s[0][1] = m.y - draggable.delta.y - 1; + //top right + draggable.p0s[1][0] = m.x - draggable.delta.x + draggable.w + 1; + draggable.p0s[1][1] = m.y - draggable.delta.y + 1; + //bottom right + draggable.p0s[2][0] = m.x - draggable.delta.x + draggable.w + 1; + draggable.p0s[2][1] = m.y - draggable.delta.y + draggable.h + 1; + //bottom left + draggable.p0s[3][0] = m.x - draggable.delta.x + 1; + draggable.p0s[3][1] = m.y - draggable.delta.y + draggable.h + 1; +} + + +m = {},// the mouse position +thePath = document.querySelector("path"), + +/* Rezisable Image Stuff */ +draggable = document.querySelector(".item"); + +draggable.addEventListener("mousedown", mousedown); + +// NEw stuff +draggable.w = draggable.getBoundingClientRect().width; +draggable.h = draggable.getBoundingClientRect().height; +draggable.p0s = [[], [], [], []];//one array for every corner +draggable.delta = {};// distance between the click point and the left upper corner + + + +function mousedown(e) { + window.addEventListener("mousemove", mousemove); + window.addEventListener("mouseup", mouseup); + + // NEw stuff + draggable.delta = oMousePos(draggable, e); + // + + + let prevX = e.clientX; + let prevY = e.clientY; + + function mousemove(e) { + if (!isResizing) { + + let item = document.querySelector(".item"); + //item.style.pointerEvents = "none"; + + /* + let posers = document.elementFromPoint(e.x, e.y).id; + item.style.pointerEvents = ""; + + if (posers != "sark"){ + console.log(posers); + + let newX = prevX - e.clientX; + let newY = prevY - e.clientY; + + const rect = el.getBoundingClientRect(); + + el.style.left = rect.left - newX + "px"; + el.style.top = rect.top - newY + "px"; + + prevX = e.clientX; + prevY = e.clientY; + + mouseup() + } + */ + + let counter = 0;// how many corners are in path + //m = oMousePos(drag_parent, e); + m = oMousePos(thePath, e); + draggablePoints(m); + draggable.style.left = draggable.p0s[0][0] + 1 + "px"; + draggable.style.top = draggable.p0s[0][1] + 1 + "px"; + + draggable.p0s.map(p => { + if (document.elementFromPoint(p[0], p[1]) && document.elementFromPoint(p[0], p[1]).id == "sark") { + counter++; + } + console.log(counter, document.elementFromPoint(p[0], p[1]).id == "sark"); + }); + + if (counter == 4){ + console.log("moving"); + let newX = prevX - e.clientX; + let newY = prevY - e.clientY; + + const rect = draggable.getBoundingClientRect(); + + draggable.style.left = rect.left - newX + "px"; + draggable.style.top = rect.top - newY + "px"; + + prevX = e.clientX; + prevY = e.clientY; + } + + else { + console.log("Out of Bounds!"); + //console.log(counter); + // Set it to init pos; from downtown + // it.style.left = brr.left + 200; + console.log(draggable.p0s); + } + + } + } + + function mouseup() { + window.removeEventListener("mousemove", mousemove); + window.removeEventListener("mouseup", mouseup); + //D = false; + } + +} + + + + +// Resizing Pic + + +let isResizing = false; +const resizers = document.querySelectorAll(".resizer"); +let currentResizer; + +for (let resizer of resizers) { + resizer.addEventListener("mousedown", mousedown); + + function mousedown(e) { + currentResizer = e.target; + isResizing = true; + + let prevX = e.clientX; + let prevY = e.clientY; + + window.addEventListener("mousemove", mousemove); + window.addEventListener("mouseup", mouseup); + + function mousemove(e) { + + const rect = draggable.getBoundingClientRect(); + + if (currentResizer.classList.contains("se")) { + draggable.style.width = rect.width - (prevX - e.clientX) + "px"; + draggable.style.height = rect.height - (prevY - e.clientY) + "px"; + } + + else if (currentResizer.classList.contains("sw")) { + draggable.style.width = rect.width + (prevX - e.clientX) + "px"; + draggable.style.height = rect.height - (prevY - e.clientY) + "px"; + draggable.style.left = rect.left - (prevX - e.clientX) + "px"; + } + + else if (currentResizer.classList.contains("ne")) { + draggable.style.width = rect.width - (prevX - e.clientX) + "px"; + draggable.style.height = rect.height + (prevY - e.clientY) + "px"; + draggable.style.top = rect.top - (prevY - e.clientY) + "px"; + } + + else { + draggable.style.width = rect.width + (prevX - e.clientX) + "px"; + draggable.style.height = rect.height + (prevY - e.clientY) + "px"; + draggable.style.top = rect.top - (prevY - e.clientY) + "px"; + draggable.style.left = rect.left - (prevX - e.clientX) + "px"; + } + + prevX = e.clientX; + prevY = e.clientY; + } + + function mouseup() { + window.removeEventListener("mousemove", mousemove); + window.removeEventListener("mouseup", mouseup); + isResizing = false; + } + + } // Resizing mousedown end + +} + +// Seting up resize Pic Pos +let brr = document.querySelector("#sark").getBoundingClientRect(); +let it = document.querySelector(".item"); +it.style.left = brr.left + 200; +//it.style.top = brr.top + 300; + + + + + + + +/* Ending stuff + Reset */ + + +// Move on Button +function message(msg, color){ + messageBox = document.querySelector(".messageBox"); + messageBox.innerHTML = msg; + messageBox.style.color = color; +} + + +let stuffDone = new Array(); + +const chkBtn = document.querySelector(".checkMoveOn"); + +chkBtn.addEventListener("click", (e) => { + + if (stuffDone.length >= 3){ + message("Korras! Soovi korral tee screenshot (Win+Shift+S)", "#4BB543"); + moveOnEnable(); + } + else + message("valikuid kasutatud " + stuffDone.length + "/" + "3.", "Red"); +}); + +function moveOnEnable(){ + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = "../utlused"; + + let tst = document.querySelectorAll(".resizer"); + for (elinjo of tst){ + elinjo.style.height = 0; + elinjo.style.width = 0; + } + +} + +// 6 + + + +// Reset Everything + +const nulliBtn = document.querySelector(".nulliBtn"); +nulliBtn.addEventListener("click", () => { + + stuffDone = new Array(); + + //SarkColor + document.querySelector("#sark").style.fill = "white"; + + document.querySelector("#sark").style.stroke = "black"; + + + + // Tekstid + document.querySelector("#sargiText").value = ""; + + curText = document.querySelector(".sarkTekst"); + newText = curText.cloneNode(true); + curText.classList.remove("sarkTekst"); + + let koikTekstid = document.querySelectorAll(".doneTekst"); + + for (let i = 0; i < koikTekstid.length; i++) { + koikTekstid[i].innerHTML = ""; + } + + //Reset Stuff + angle=0; + sarkFontSize = 20; + + let brro = document.querySelector("g") + newText.classList.add("sarkTekst") + newText.innerHTML = "Tekst"; + + brro.appendChild(newText); + document.querySelector(".sarkTekst").style.fill = "black"; + + + // Seting up resize Pic Pos + let brr = document.querySelector("#sark").getBoundingClientRect(); + let it = document.querySelector(".item"); + it.style.left = brr.left + 200; + //it.style.top = brr.top + 300; + + + // Moving IMg Corners + let tst = document.querySelectorAll(".resizer"); + for (elinjo of tst){ + elinjo.style.height = "7px"; + elinjo.style.width = "7px"; + } + +}) diff --git a/rannak/mangud/uliopilane/tSark/style.css b/rannak/mangud/uliopilane/tSark/style.css index 1179fb0..fd6c352 100644 --- a/rannak/mangud/uliopilane/tSark/style.css +++ b/rannak/mangud/uliopilane/tSark/style.css @@ -1,10 +1,15 @@ body{ - background-color: #FADFCA !important; + background-color: #FADFCA; box-sizing: border-box; margin: 0; padding: 0; } +h1{ + color: #4169E1; + font-weight: bold; +} + .containeraa { width: 100%; height: 100vh; @@ -19,10 +24,13 @@ body{ height: 100vh; text-align: center; background-color: #544B44; + overflow: scroll; + overflow-x: hidden } + /* Move on Button */ button:disabled{ @@ -58,25 +66,31 @@ button:disabled{ padding-top: 7px; } +.kuiEiLeiaTeksti {font-size: .87rem;} + + + + + /* Modal Stuff */ .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%; } .modal{ - color: black !important; + color: black; } .closeModalButton { @@ -84,29 +98,45 @@ button:disabled{ } .modalButton{ - padding: 5px !important; - margin-left: 30px !important; - margin-top: 3px !important; - 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.1rem !important; + padding: 5px; + margin-left: 30px; + margin-top: 3px; + background-color: rgba(0,136,169,1); + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3 ease 0; + font-size: 1.1rem; } .modalButton:hover{ - background-color: rgba(0,136,169,0.8) !important; + background-color: rgba(0,136,169,0.8); } + + + + +/* Clipping for text overflow */ + +g { + clip-path: url(#clip1); +} + /* Svg stuff*/ +path { + maring: 0; + padding: 0; +} + svg { - width: 100% !important; - height: 100% !important; + width: 100%; + height: 100%; + overflow: hidden; } #sark { @@ -149,16 +179,20 @@ svg { text-align: center; } +.muutused h4 { + padding-top: .5rem; +} + .fileUpload { - margin-top: 5px; + margin-top: 2px; } .textPos, .nulliBtn{ - margin-top: 10px; + margin-top: 5px; } .textAddWrapper{ - margin: 10px; + margin: 5px; } .textAddWrapper *{ @@ -170,7 +204,7 @@ svg { } .nulliBtn { - background-color: red !important; + background-color: red; } .textAddWrapper button { @@ -179,7 +213,7 @@ svg { border-radius: 4px; font-size:1.3rem; color:white; - padding: 10px; + padding: 5px; margin: 0 2px; } diff --git a/rannak/mangud/uliopilane/utlused/index.html b/rannak/mangud/uliopilane/utlused/index.html index 54c9548..867bb00 100644 --- a/rannak/mangud/uliopilane/utlused/index.html +++ b/rannak/mangud/uliopilane/utlused/index.html @@ -7,13 +7,13 @@ Kuulsad Ütlused - + - + @@ -52,6 +52,14 @@ +

Ütlused

Ühenda omavahel tsitaadid ja nende autorid.

+ +

@@ -70,7 +78,7 @@

Hando Runnel

@@ -82,12 +90,7 @@

Marju Lauristin