diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 88a8350..718c30c 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -12,9 +12,8 @@ - + - @@ -367,10 +373,10 @@ - + - + diff --git a/public/index.html b/public/index.html index e31be85..e42a74d 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,5 @@ - + @@ -26,7 +26,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + qrbtf.com diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index b38bac1..516fbe2 100644 --- a/src/components/Qrcode.css +++ b/src/components/Qrcode.css @@ -1,12 +1,19 @@ .Qr-titled { background-color: rgba(0,0,0,0.06); box-sizing: border-box; - border-top: rgba(0,0,0,0.06) solid 3px; - border-bottom: rgba(0,0,0,0.06) solid 3px; + border-top: rgba(0,0,0,0.06) solid 2px; + border-bottom: rgba(0,0,0,0.06) solid 2px; padding-top: calc((10px + 2vmin) * 2); padding-bottom: calc((10px + 2vmin) * 2); } +@media (min-width: 500px) { + .Qr-titled { + border-top: rgba(0,0,0,0.06) solid 3px; + border-bottom: rgba(0,0,0,0.06) solid 3px; + } +} + .Qr-titled-nobg { padding-top: calc((10px + 2vmin) * 2); padding-bottom: calc((10px + 2vmin) * 2); @@ -77,13 +84,19 @@ height: calc((100vw - 56px) / 2); border-radius: 10px; box-sizing: border-box; - border: rgba(0,0,0,0.12) solid 3px; + border: rgba(0,0,0,0.12) solid 2px; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ transition-duration: 0.2s; } +@media (min-width: 500px) { + .Qr-item-image { + border: rgba(0,0,0,0.12) solid 3px; + } +} + .Qr-item-image-inner { opacity: 0.36; -webkit-transition-timing-function: ease-in-out; @@ -152,17 +165,29 @@ table { font-size: calc(10px + 2vmin); margin-top: calc((10px + 2vmin) * 2); margin-bottom: calc((10px + 2vmin) * 2); - border: rgba(0,0,0,0.12) solid 3px; + border: rgba(0,0,0,0.12) solid 2px; width: 20em; max-width: calc(100vw - 46px); } +@media (min-width: 500px) { + .big-input { + border: rgba(0,0,0,0.12) solid 3px; + } +} + .small-input { font-size: 0.9em; - border: rgba(0,0,0,0.12) solid 3px; + border: rgba(0,0,0,0.12) solid 2px; width: calc((100vw - 56px) / 2); } +@media (min-width: 500px) { + .small-input { + border: rgba(0,0,0,0.12) solid 3px; + } +} + @media (min-width: 500px) { .small-input { width: 200px; @@ -234,7 +259,7 @@ table { outline: none; padding: 0; box-sizing: border-box; - border: rgba(0,0,0,0.12) solid 3px; + border: rgba(0,0,0,0.12) solid 2px; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 0.2s; /* Safari */ @@ -247,6 +272,12 @@ table { color: rgba(0,0,0,0.6); } +@media (min-width: 500px) { + .dl-btn { + border: rgba(0,0,0,0.12) solid 3px; + } +} + .dl-btn:hover { border-color: #44D7B6; color: #44D7B6;