Okraje rámečků podle návrhu

Rámečky nelze vkládat jako vektor, protože ho nelze spolehlivě škálovat bez zachování poměru stran. Proto jsou rámečky jako rastry o různých velikostech (s, m, l) a na telefonu ve verzi _phone_, aby nedocházelo k razantnímu škálování a zkreslení.
4 years ago · 64801b0707
parent ca1d7ed11c
commit 64801b0707
7 changed files with 97 additions and 24 deletions
--- a/css/style.css
+++ b/css/style.css
@ -56,32 +56,18 @@ main {
 .row>img { max-height: 30em; max-width: 40%; }

 article {
-	background-color: #eee;
-	border: 3px solid #ddd;
-	border-radius: 2% 6% 5% 3% / 1% 1% 2% 6%;
+	background-image: url(../img/box-border-m.png);
+	background-size: 100% 100%;
 	position: relative;
-	max-width: 32%; padding: 1.7em;
+	max-width: 32%;
+	padding: 2.4em;
+	padding-left: 2.8em;
 }
+article.border-s { background-image: url(../img/box-border-s.png); }
+article.border-l { background-image: url(../img/box-border-l.png); }
 article h2 { margin-top: -1.5em; font-size: 2.6em; white-space: nowrap; }
 article:nth-child(1) h2 { margin-right: -1.5em; text-align: right; }
 article:nth-child(2) h2 { margin-left: -1.5em; }
-article::before {
-	content: '';
-	border: 2px solid #dfdfdf;
-	display: block;
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
-	border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
-	z-index: -1;
-}
-article: nth-child(1)::before {
-	transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(-1deg);
-	border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
-}

@media screen and (max-width: 699px) {
 	body { background: none; font-size: 1em; }
@ -98,7 +84,10 @@ article: nth-child(1)::before {
 	.row:nth-child(even) { flex-direction: column-reverse; }
 	.row>img { max-height: 80%; max-width: 80%; margin: 1em 0; }

-	article { max-width: 100%; align-self: center !important; padding: 1em; }
+	article {
+		max-width: 100%; align-self: center !important; padding: 3em;
+		background-image: url(../img/box-border-phone.png) !important;
+	}
 	article h2 { margin-top: auto; font-size: 2.3em;  white-space: initial; }
 	article:nth-child(1) h2 { margin-right: auto; text-align: right; }
 	article:nth-child(2) h2 { margin-left: auto; }
--- a/img/box-border-l.png
+++ b/img/box-border-l.png
--- a/img/box-border-m.png
+++ b/img/box-border-m.png
--- a/img/box-border-phone.png
+++ b/img/box-border-phone.png
--- a/img/box-border-s.png
+++ b/img/box-border-s.png
--- a/img/box-border.svg
+++ b/img/box-border.svg
@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   sodipodi:docname="box-border.svg"
+   id="svg837"
+   version="1.1"
+   viewBox="0 0 333.47543 129.90698"
+   height="129.90698mm"
+   width="333.47543mm">
+  <defs
+     id="defs831" />
+  <sodipodi:namedview
+     inkscape:window-maximized="1"
+     inkscape:window-y="0"
+     inkscape:window-x="0"
+     inkscape:window-height="1180"
+     inkscape:window-width="1920"
+     showgrid="false"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer1"
+     inkscape:document-units="mm"
+     inkscape:cy="304.93454"
+     inkscape:cx="635.43896"
+     inkscape:zoom="0.98994949"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base" />
+  <metadata
+     id="metadata834">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(101.05888,-53.380805)"
+     id="layer1"
+     inkscape:groupmode="layer"
+     inkscape:label="Layer 1">
+    <path
+       sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc"
+       inkscape:export-ydpi="146.08665"
+       inkscape:export-xdpi="146.08665"
+       id="path1630"
+       d="m 140.7827,168.70953 -1.91228,-4.28199 1.40958,-3.7753 0.13378,-3.15337 -1.31372,-3.24299 1.4826,-3.80888 -0.30549,-3.59929 -2.01894,-3.26332 3.01799,-3.31947 -0.85958,-3.16416 1.03764,-4.00043 -1.27441,-2.53148 0.53962,-4.36761 -0.68796,-2.50045 0.12029,-1.05923 -0.97207,-3.12984 0.37191,-3.77154 0.73409,-2.67191 -1.79245,-3.52275 2.56354,-3.51648 -0.97549,-3.34774 0.65161,-3.204424 -2.11917,-3.18729 2.21716,-3.65698 -2.38731,-3.26888 2.19249,-3.84687 -1.42355,-2.81691 -0.63089,-3.9889 1.23585,-3.49949 -0.79312,-2.64847 1.21383,-3.92192 -3.84545,-1.12346 -3.39439,1.95909 -1.74735,0.008 -1.66228,0.52991 -3.66884,-2.19031 -3.25715,2.3975 -4.13707,-2.51594 -3.80486,1.36744 -2.78272,0.51524 -3.65891,-1.73124 -3.61155,0.41361 -2.9855,1.213079 -3.602356,0.52855 -3.60601,-2.62207 -3.35185,2.68199 -3.58054,-1.861649 -4.00324,0.78029 -2.4983,-0.0771 -6.37363,1.13533 0.47105,5.43668 -1.5986,3.72318 1.66672,3.23462 -2.58065,4.06988 0.90195,2.59374 0.0418,3.33573 1.01763,3.49484 -1.08519,7.549294 -1.50718,3.10216 0.25645,4.85637 0.49737,2.09624 -0.49174,4.61736 v 2.02639 l 1.62743,3.19363 -1.93048,3.19643 1.67183,4.52097 -0.10146,1.48905 0.44866,1.3447 -1.43638,3.31901 2.34071,2.93224 -2.18522,4.19571 -0.0646,2.76133 0.98327,3.213 0.397777,3.6495 0.32401,3.06505 -0.95812,4.31985 1.59155,2.74 -1.672,4.34249 2.51527,0.0315 2.73669,-1.29918 2.4937,0.77426 3.31454,-1.20606 3.84827,1.54208 3.01713,-1.38977 3.73278,0.82811 4.13943,-0.18451 3.434599,-0.35398 2.70096,0.19847 3.57814,-1.0041 3.39696,2.72348 3.82009,-0.25928 3.2715,-1.18996 3.56082,1.5981 4.01414,-1.51083 2.86139,-1.26238 6.06952,2.25376 z"
+       style="fill:#f2f2f2;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc"
+       style="fill:#f2f2f2;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m -5.6144323,77.709553 -0.63358,3.24428 1.14353,4.7818 -0.50086,3.39744 1.59667,2.99126 0.0564,4.98236 0.37266,1.61158 -0.6898,2.902947 0.28211,4.14049 -1.43792,3.7175 0.30549,3.59929 2.01894,3.26332 -3.01799,3.31947 0.85958,3.16416 -1.03764,4.00042 1.27441,2.53148 -0.53962,4.36761 2.63684,3.82942 -2.19249,3.84687 1.42355,2.81691 -0.29236,3.89182 -1.23585,3.49949 0.79312,2.64847 -1.20548,3.94686 4.76035,1.1956 3.39439,-1.95909 1.74735,-0.008 1.66228,-0.52991 3.66884,2.19031 3.2571503,-2.3975 4.13707,2.51594 3.80486,-1.36744 2.78272,-0.51524 3.65891,1.73124 3.61155,-0.41361 2.9855,-1.21308 3.60235,-0.52855 3.60601,2.62207 3.35185,-2.68199 3.58054,1.86165 4.00324,-0.78029 5.76301,0.85278 4.7895,-1.65759 -2.15163,-5.6901 1.5986,-3.72318 -1.66672,-3.23462 2.58065,-4.06988 -0.90195,-2.59374 1.21292,-4.46035 -1.67183,-4.52097 0.10146,-1.48905 -0.44866,-1.3447 1.43638,-3.319 -2.34071,-2.93224 2.18522,-4.19571 0.0646,-2.76133 -0.98327,-3.213 1.11543,-4.443 -0.0374,-2.50228 0.41103,-2.42784 -2.32418,-4.474137 0.44812,-3.30937 -0.32401,-3.06505 0.95812,-4.31985 0.96428,-3.79002 -0.88383,-3.29247 -2.51527,-0.0315 -2.73669,1.29918 -2.4937,-0.77426 -3.31454,1.20606 -3.84827,-1.54208 -3.01713,1.38977 -3.73278,-0.82811 -4.13943,0.18451 -3.43459,0.35398 -2.70096,-0.19847 -3.57814,1.0041 -3.39696,-2.72348 -3.82009,0.25928 -3.2715,1.18996 -3.56082,-1.5981 -4.0141403,1.51083 -2.86139,1.26238 -6.06952,-2.25376 z"
+       id="path1718"
+       inkscape:export-xdpi="146.17999"
+       inkscape:export-ydpi="146.17999" />
+    <path
+       inkscape:export-ydpi="124.06217"
+       inkscape:export-xdpi="124.06217"
+       id="path1720"
+       d="m -101.00982,143.44863 3.244266,0.63358 4.7818,-1.14353 3.39744,0.50086 2.99126,-1.59667 4.98236,-0.0564 1.61158,-0.37266 2.90295,0.6898 4.14049,-0.28211 3.7175,1.43792 3.59929,-0.30549 3.26332,-2.01894 3.31947,3.01799 3.16416,-0.85958 4.000424,1.03764 2.531481,-1.27441 4.367609,0.53962 3.82942,-2.63684 3.84687,2.19249 2.816911,-1.42355 3.891819,0.29236 3.49949,1.23585 2.64847,-0.79312 3.94686,1.20548 1.1956,-4.76035 -1.95909,-3.39439 -0.008,-1.74735 -0.52991,-1.66228 2.19031,-3.66884 -0.269596,-3.34428 -1.21308,-2.9855 -0.52855,-3.60235 2.622071,-3.60601 -2.681991,-3.35185 1.86165,-3.58054 -0.78029,-4.00324 0.85278,-5.763013 -1.65759,-4.7895 -5.6901,2.15163 -3.72318,-1.5986 -3.23462,1.66672 -4.06988,-2.58065 -2.59374,0.90195 -4.46035,-1.21292 -4.52097,1.67183 -1.48905,-0.10146 -1.3447,0.44866 -3.319005,-1.43638 -2.93224,2.34071 -4.19571,-2.18522 -2.76133,-0.0646 -3.213,0.98327 -4.443,-1.11543 -2.50228,0.0374 -2.42784,-0.41103 -4.47414,2.32418 -3.30937,-0.44812 -3.06505,0.32401 -4.31985,-0.95812 -3.79002,-0.96428 -3.292459,0.88383 -0.0315,2.51527 1.299169,2.73669 -0.774249,2.493703 1.206049,3.31454 -1.542069,3.84827 1.389759,3.01713 -0.82811,3.73278 0.18451,4.13943 0.35398,3.43459 -0.19847,2.70096 -0.534419,3.73367 1.262375,2.86139 -2.253745,6.06952 z"
+       style="fill:#f2f2f2;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc" />
+    <path
+       sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc"
+       style="fill:#f2f2f2;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 232.41655,182.71928 -1.91228,-4.28199 1.40958,-3.7753 0.13378,-3.15337 -2.14718,-3.25349 0.85389,-4.93299 -0.37266,-1.61158 0.6898,-2.90295 -0.28211,-4.14049 0.90442,-4.25125 -1.25514,-4.22329 1.3581,-4.04499 -0.51524,-3.76668 -0.30549,-3.59929 -2.01894,-3.26332 3.01799,-3.31947 -0.85958,-3.16416 1.03764,-4.00043 -1.27441,-2.53148 0.53962,-4.36761 -0.68796,-2.50045 0.12029,-1.05923 -0.97207,-3.12984 0.37191,-3.77154 0.73409,-2.67192 -1.79245,-3.52274 2.56354,-3.51648 -0.97549,-3.347735 0.65161,-3.204419 -2.11917,-3.18729 2.21716,-3.656981 -2.38731,-3.26888 2.19249,-3.84687 -1.42355,-2.81691 -0.63089,-3.9889 1.23585,-3.49949 -0.79312,-2.64847 1.21383,-3.92192 -3.84545,-1.12346 -3.39439,1.95909 -1.74735,0.008 -1.66228,0.52991 -3.66884,-2.19031 -3.25715,2.3975 -4.13707,-2.51594 -3.80486,1.36744 -2.78272,0.51524 -3.65891,-1.73124 -3.61155,0.41361 -2.9855,1.213079 -3.60235,0.52855 -3.60601,-2.62207 -3.35185,2.68199 -3.58054,-1.861649 -4.00324,0.78029 -2.4983,-0.0771 -6.37363,1.13533 0.47105,5.43668 -1.5986,3.72318 1.66672,3.23462 -2.58065,4.06988 0.90195,2.59374 0.0418,3.33573 1.01763,3.49484 -1.08519,7.54929 -1.50718,3.102155 0.25645,4.85638 0.49737,2.09623 -0.49174,4.61736 v 2.02639 l 1.62743,3.19363 -1.93048,3.19643 1.67183,4.52097 -0.10146,1.48905 0.44866,1.3447 -1.43638,3.31901 2.34071,2.93224 -2.18522,4.19571 -0.0646,2.76133 0.98327,3.213 -1.22457,4.96675 0.75364,4.90305 1.19801,2.99807 -0.89668,4.14384 0.0374,2.50228 -0.41103,2.42784 2.32418,4.47414 -0.44812,3.30937 0.32401,3.06505 -0.95812,4.31985 1.59155,2.74 -1.672,4.34249 2.51527,0.0315 2.73669,-1.29918 2.4937,0.77426 3.31454,-1.20606 3.84827,1.54208 3.01713,-1.38977 3.73278,0.82811 4.13943,-0.18451 3.43459,-0.35398 2.70096,0.19847 3.57814,-1.0041 3.39696,2.72348 3.82009,-0.25928 3.2715,-1.18996 3.56082,1.5981 4.01414,-1.51083 2.86139,-1.26238 6.06952,2.25376 z"
+       id="path1630-6"
+       inkscape:export-xdpi="145.63"
+       inkscape:export-ydpi="145.63" />
+  </g>
+</svg>
--- a/index.html
+++ b/index.html
@ -105,7 +105,7 @@

 <div class="row">
 	<img src="img/tabery.png" alt="oli">
-	<article style="align-self:flex-start;">
+	<article style="align-self:flex-start;" class="border-l">
 		<h2>První krůčky k&nbsp;úspěchu</h2>
 		<p>Na peďák nás přijali a&nbsp;já věděl co&nbsp;je&nbsp;můj první úkol – dostat Kubu na&nbsp;Dvorky. Když odcházel z&nbsp;přednášky, fakultou se&nbsp;už rozléhala hudba. Se sklopenou hlavou (hlavně aby s&nbsp;někým nenavázal oční kontakt) se&nbsp;odhodlal dojít si pro&nbsp;pivo. Vykukoval jsem z&nbsp;kapuce a&nbsp;pak najednou jsem ji uviděl. To je&nbsp;ta zrzka a&nbsp;jde přímo k&nbsp;nám! Poklepala Kubovi na&nbsp;rameno a&nbsp;já se&nbsp;jen modlil, aby hned neutekl. „Ahoj, nevíš v&nbsp;kolik začíná ta přednáška s&nbsp;Taberym?“ zeptala se&nbsp;ho. Ještě, že&nbsp;jsem měl celý program nastudovaný. „Za půl hoďky,“ pošeptal jsem mu. A&nbsp;on to&nbsp;po mně, s&nbsp;několika sekundovým zpožděním a&nbsp;zakoktáním, zopakoval. Ale&nbsp;neutekl. Měl jsem z&nbsp;něj radost.</p>
 	</article>
@ -128,7 +128,7 @@
 </div>

 <div class="row">
-	<article>
+	<article class="border-s">
 		<h2>Už mě nepotřebuje</h2>
 		<p>Když se&nbsp;další den šli projít, měl jsem spoustu skvělých nápadů, co&nbsp;by jí měl říct, on mě ale&nbsp;jemně zastrčil do kapsy. Věděl si rady sám a&nbsp;já se&nbsp;sotva udržel, abych nezačal křičet radostí.</p>
 	</article>