Skip to content

GitLab

Commit 3dd13cd2 authored by Laura Kalbag's avatar Laura Kalbag ⚡
Browse files

Apply grid to header, content, and footer for wider layouts

parent 1860f8b2
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 320 deletions
layouts/_default/baseof.html
View file @ 3dd13cd2
......@@ -42,8 +42,10 @@
{{ partial "header.html" .}}
{{ end }}
<main id="content">
<main>
<div id="content">
{{ block "main" . }}{{ end }}
</div>
</main>
{{ block "footer" . }}{{ partial "footer.html" . }}{{ end }}
......
layouts/partials/footer.html
View file @ 3dd13cd2
<footer class="site-footer">
<h2>A bit about me</h2>
<p>Hello! I&#8217;m a British designer, living in Ireland, and working as one half of <a href="https://ind.ie">Ind.ie</a>. We make an app called <a href="https://better.fyi">Better</a> that protects you while you’re browsing the web. My book <a href="https://abookapart.com/products/accessibility-for-everyone">Accessibility For Everyone</a> is available in paperback, ebook, and audiobook from A Book Apart.</p>
<p><small class="site-info">Copyright &copy; <a href="{{ .Site.BaseURL }}" >{{ .Site.Title }}</a>, {{ now.Format "2006" }}. <a href="/rss">RSS feeds</a></small></p>
<div class="footer-wrap">
<h2>A bit about me</h2>
<p>Hello! I&#8217;m a British designer, living in Ireland, and working as one half of <a href="https://ind.ie">Ind.ie</a>. We make an app called <a href="https://better.fyi">Better</a> that protects you while you’re browsing the web. My book <a href="https://abookapart.com/products/accessibility-for-everyone">Accessibility For Everyone</a> is available in paperback, ebook, and audiobook from A Book Apart.</p>
<p><small class="site-info">Copyright &copy; <a href="{{ .Site.BaseURL }}" >{{ .Site.Title }}</a>, {{ now.Format "2006" }}. <a href="/rss">RSS feeds</a></small></p>
</div>
</footer>
layouts/partials/header.html
View file @ 3dd13cd2
<header class="site-header">
{{ partial "tile-svg.html" . }}
<h2 class="site-title h-card">
<a href="{{ .Site.BaseURL }}" rel="home" class="p-name u-url">{{ .Site.Title }}</a>
</h2>
<div class="header-wrap">
<h2 class="site-title h-card">
<a href="{{ .Site.BaseURL }}" rel="home" class="p-name u-url">{{ .Site.Title }}</a>
</h2>
</div>
{{ partial "navigation.html" . }}
</header>
\ No newline at end of file
layouts/partials/tile-svg.html deleted 100644 → 0
View file @ 1860f8b2
<svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="tilet">
<pattern id="tilet" x="0" y="0" width="400px" height="320px" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<g id="transparent-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="1">
<g transform="translate(-13.000000, -21.000000)">
<path d="M52.4393398,142.56066 C51.8535534,141.974874 51.8535534,141.025126 52.4393398,140.43934 C53.0251263,139.853553 53.9748737,139.853553 54.5606602,140.43934 L134.56691,220.44559 C135.152696,221.031376 135.152696,221.981123 134.56691,222.56691 C133.981123,223.152696 133.031376,223.152696 132.44559,222.56691 L52.4393398,142.56066 Z" id="diagonal-line" fill="#444040" style="fill:hsl(var(--text));" fill-rule="nonzero"></path>
<path d="M173.06066,302.06066 C172.474874,302.646447 171.525126,302.646447 170.93934,302.06066 C170.353553,301.474874 170.353553,300.525126 170.93934,299.93934 L210.93934,259.93934 C211.525126,259.353553 212.474874,259.353553 213.06066,259.93934 L252,298.87868 L290.93934,259.93934 C291.520142,259.358538 292.460046,259.352876 293.047804,259.926638 L335.043898,300.922731 C335.636699,301.501417 335.648142,302.451096 335.069456,303.043898 C334.49077,303.636699 333.541092,303.648142 332.94829,303.069456 L292.012703,263.108617 L253.06066,302.06066 C252.474874,302.646447 251.525126,302.646447 250.93934,302.06066 L212,263.12132 L173.06066,302.06066 Z" id="zigzag" fill="#D7D7D7" style="fill: hsl(var(--tab-two));" fill-rule="nonzero" transform="translate(252.998047, 281.498047) rotate(-180.000000) translate(-252.998047, -281.498047) "></path>
<path d="M315.396561,214.04479 C314.604742,214.814918 313.338535,214.797335 312.568406,214.005517 C311.798278,213.213699 311.81586,211.947491 312.607679,211.177363 L328.657061,195.567607 C329.433375,194.812558 330.66963,194.812558 331.445943,195.567607 L346.100885,209.821118 L360.755827,195.567607 C361.525445,194.819069 362.748771,194.811705 363.527346,195.550922 L380.377631,211.549397 C381.178663,212.309937 381.21149,213.575841 380.450951,214.376874 C379.690411,215.177907 378.424507,215.210733 377.623474,214.450194 L362.166966,199.775037 L347.495326,214.04479 C346.719012,214.799838 345.482758,214.799838 344.706444,214.04479 L330.051502,199.791278 L315.396561,214.04479 Z" id="little-zigzag" fill="#D7D7D7" style="fill: hsl(var(--tab-two));" fill-rule="nonzero" transform="translate(346.501337, 205.000560) rotate(-30.000000) translate(-346.501337, -205.000560) "></path>
<path d="M50.9382667,48.6536575 L33.449414,66.1425101 L31.5048704,63.8444131 L49.8776065,45.471677 C50.4633929,44.8858905 51.4131404,44.8858905 51.9989269,45.471677 L90.9382667,84.4110168 L129.877607,45.471677 C130.458408,44.8908751 131.398313,44.8852127 131.986071,45.4589746 L173.982164,86.4550684 C174.574966,87.0337545 174.586409,87.983433 174.007723,88.5762347 C173.429037,89.1690365 172.479358,89.1804795 171.886557,88.6017934 L130.95097,48.6409542 L91.9989269,87.5929973 C91.4131404,88.1787837 90.4633929,88.1787837 89.8776065,87.5929973 L50.9382667,48.6536575 Z" id="zigzag" fill="#D0D0D0" style="fill:hsl(var(--tab-three));" fill-rule="nonzero" transform="translate(102.969616, 67.030384) rotate(-225.000000) translate(-102.969616, -67.030384) "></path>
<g id="dot-square" transform="translate(173.000000, 101.000000)" fill="#C5C6C6" style="fill:hsl(var(--tab-four));">
<circle id="Oval-2" cx="3" cy="3" r="3"></circle>
<circle id="Oval-2" cx="13" cy="3" r="3"></circle>
<circle id="Oval-2" cx="23" cy="3" r="3"></circle>
<circle id="Oval-2" cx="33" cy="3" r="3"></circle>
<circle id="Oval-2" cx="3" cy="13" r="3"></circle>
<circle id="Oval-2" cx="13" cy="13" r="3"></circle>
<circle id="Oval-2" cx="23" cy="13" r="3"></circle>
<circle id="Oval-2" cx="33" cy="13" r="3"></circle>
<circle id="Oval-2" cx="3" cy="23" r="3"></circle>
<circle id="Oval-2" cx="13" cy="23" r="3"></circle>
<circle id="Oval-2" cx="23" cy="23" r="3"></circle>
<circle id="Oval-2" cx="33" cy="23" r="3"></circle>
<circle id="Oval-2" cx="3" cy="33" r="3"></circle>
<circle id="Oval-2" cx="13" cy="33" r="3"></circle>
<circle id="Oval-2" cx="23" cy="33" r="3"></circle>
<circle id="Oval-2" cx="33" cy="33" r="3"></circle>
</g>
<g id="dot-square" transform="translate(173.000000, 141.000000)" fill="#C5C6C6" style="fill:hsl(var(--tab-four));">
<circle id="Oval-2" cx="3" cy="3" r="3"></circle>
<circle id="Oval-2" cx="13" cy="3" r="3"></circle>
<circle id="Oval-2" cx="23" cy="3" r="3"></circle>
<circle id="Oval-2" cx="33" cy="3" r="3"></circle>
<circle id="Oval-2" cx="3" cy="13" r="3"></circle>
<circle id="Oval-2" cx="13" cy="13" r="3"></circle>
<circle id="Oval-2" cx="23" cy="13" r="3"></circle>
<circle id="Oval-2" cx="33" cy="13" r="3"></circle>
<circle id="Oval-2" cx="3" cy="23" r="3"></circle>
<circle id="Oval-2" cx="13" cy="23" r="3"></circle>
<circle id="Oval-2" cx="23" cy="23" r="3"></circle>
<circle id="Oval-2" cx="33" cy="23" r="3"></circle>
<circle id="Oval-2" cx="3" cy="33" r="3"></circle>
<circle id="Oval-2" cx="13" cy="33" r="3"></circle>
<circle id="Oval-2" cx="23" cy="33" r="3"></circle>
<circle id="Oval-2" cx="33" cy="33" r="3"></circle>
</g>
<g id="dot-square" transform="translate(213.000000, 141.000000)" fill="#C5C6C6" style="fill:hsl(var(--tab-four));">
<circle id="Oval-2" cx="3" cy="3" r="3"></circle>
<circle id="Oval-2" cx="13" cy="3" r="3"></circle>
<circle id="Oval-2" cx="23" cy="3" r="3"></circle>
<circle id="Oval-2" cx="33" cy="3" r="3"></circle>
<circle id="Oval-2" cx="3" cy="13" r="3"></circle>
<circle id="Oval-2" cx="13" cy="13" r="3"></circle>
<circle id="Oval-2" cx="23" cy="13" r="3"></circle>
<circle id="Oval-2" cx="33" cy="13" r="3"></circle>
<circle id="Oval-2" cx="3" cy="23" r="3"></circle>
<circle id="Oval-2" cx="13" cy="23" r="3"></circle>
<circle id="Oval-2" cx="23" cy="23" r="3"></circle>
<circle id="Oval-2" cx="33" cy="23" r="3"></circle>
<circle id="Oval-2" cx="3" cy="33" r="3"></circle>
<circle id="Oval-2" cx="13" cy="33" r="3"></circle>
<circle id="Oval-2" cx="23" cy="33" r="3"></circle>
<circle id="Oval-2" cx="33" cy="33" r="3"></circle>
</g>
<g id="dot-square" transform="translate(405.424621, 305.575379) rotate(-315.000000) translate(-405.424621, -305.575379) translate(387.424621, 277.075379)" fill="#C5C6C6" style="fill:hsl(var(--tab-four));">
<circle id="Oval-2" cx="3.70710678" cy="3.69491347" r="3"></circle>
<circle id="Oval-2" cx="3.70710678" cy="13.6949135" r="3"></circle>
<circle id="Oval-2" cx="13.7071068" cy="13.6949135" r="3"></circle>
<circle id="Oval-2" cx="3" cy="24" r="3"></circle>
<circle id="Oval-2" cx="13" cy="24" r="3"></circle>
<circle id="Oval-2" cx="23" cy="24" r="3"></circle>
<circle id="Oval-2" cx="3" cy="34" r="3"></circle>
<circle id="Oval-2" cx="13" cy="34" r="3"></circle>
<circle id="Oval-2" cx="23" cy="34" r="3"></circle>
<circle id="Oval-2" cx="33" cy="34" r="3"></circle>
<circle id="Oval-2" cx="3" cy="44" r="3"></circle>
<circle id="Oval-2" cx="13" cy="44" r="3"></circle>
<circle id="Oval-2" cx="23" cy="44" r="3"></circle>
<circle id="Oval-2" cx="33" cy="44" r="3"></circle>
<circle id="Oval-2" cx="3" cy="54" r="3"></circle>
<circle id="Oval-2" cx="13" cy="54" r="3"></circle>
<circle id="Oval-2" cx="23" cy="54" r="3"></circle>
<circle id="Oval-2" cx="33" cy="54" r="3"></circle>
</g>
<g id="dot-square" transform="translate(27.000000, 285.000000) rotate(-315.000000) translate(-27.000000, -285.000000) translate(9.000000, 267.000000)" fill="#C5C6C6" style="fill:hsl(var(--tab-four));">
<circle id="Oval-2" cx="3" cy="3" r="3"></circle>
<circle id="Oval-2" cx="13" cy="3" r="3"></circle>
<circle id="Oval-2" cx="23" cy="3" r="3"></circle>
<circle id="Oval-2" cx="33" cy="3" r="3"></circle>
<circle id="Oval-2" cx="3" cy="13" r="3"></circle>
<circle id="Oval-2" cx="13" cy="13" r="3"></circle>
<circle id="Oval-2" cx="23" cy="13" r="3"></circle>
<circle id="Oval-2" cx="33" cy="13" r="3"></circle>
<circle id="Oval-2" cx="3" cy="23" r="3"></circle>
<circle id="Oval-2" cx="13" cy="23" r="3"></circle>
<circle id="Oval-2" cx="23" cy="23" r="3"></circle>
<circle id="Oval-2" cx="33" cy="23" r="3"></circle>
<circle id="Oval-2" cx="13" cy="33" r="3"></circle>
<circle id="Oval-2" cx="23" cy="33" r="3"></circle>
<circle id="Oval-2" cx="33" cy="33" r="3"></circle>
</g>
<g id="dot-square" transform="translate(12.142136, 313.000000) rotate(-315.000000) translate(-12.142136, -313.000000) translate(4.142136, 305.000000)" fill="#C5C6C6" style="fill:hsl(var(--tab-four));">
<circle id="Oval-2" cx="3" cy="3" r="3"></circle>
<circle id="Oval-2" cx="13" cy="3" r="3"></circle>
<circle id="Oval-2" cx="13" cy="13" r="3"></circle>
</g>
<path d="M162.119891,327.253166 L148.477756,340.895302 C147.891969,341.481088 146.942222,341.481088 146.356435,340.895302 C145.770649,340.309515 145.770649,339.359768 146.356435,338.773981 L159.909619,325.042893 L162.119891,327.253166 Z" id="zigzag-end" fill="#D0D0D0" style="fill:hsl(var(--tab-three));" fill-rule="nonzero" transform="translate(154.018493, 333.188767) rotate(-225.000000) translate(-154.018493, -333.188767) "></path>
<path d="M313,64 L296,98 L330,98 L313,64 Z M315.683282,62.6583592 L332.683282,96.6583592 C333.680633,98.6530625 332.230146,101 330,101 L296,101 C293.769854,101 292.319367,98.6530625 293.316718,96.6583592 L310.316718,62.6583592 C311.422291,60.4472136 314.577709,60.4472136 315.683282,62.6583592 Z" id="triangle" fill="#A2A4A4" style="fill:hsl(var(--brilliant));" fill-rule="nonzero"></path>
<path d="M33,184.996129 L16,218.996129 L50,218.996129 L33,184.996129 Z M35.6832816,183.654489 L52.6832816,217.654489 C53.6806332,219.649192 52.2301461,221.996129 50,221.996129 L16,221.996129 C13.7698539,221.996129 12.3193668,219.649192 13.3167184,217.654489 L30.3167184,183.654489 C31.4222912,181.443343 34.5777088,181.443343 35.6832816,183.654489 Z" id="triangle" fill="#A2A4A4" style="fill:hsl(var(--brilliant));" fill-rule="nonzero" transform="translate(33.000000, 201.996129) rotate(-90.000000) translate(-33.000000, -201.996129) "></path>
<path d="M256.338773,214.546036 L261.133646,224.135782 C261.798547,225.465584 260.831555,227.030209 259.344791,227.030209 L249.755045,227.030209 C248.268281,227.030209 247.30129,225.465584 247.966191,224.135782 L252.761064,214.546036 C253.498112,213.071938 255.601724,213.071938 256.338773,214.546036 Z" id="little-fat-triangle" fill="#7E8080" style="fill:hsl(var(--tab-six));" fill-rule="nonzero" transform="translate(254.549918, 220.235336) rotate(-330.000000) translate(-254.549918, -220.235336) "></path>
<circle id="little-filled-circle" fill="#444040" style="fill:hsl(var(--text));" cx="133.5" cy="141.5" r="4.5"></circle>
<g id="lined-triangle" transform="translate(245.069935, 48.857304) rotate(-62.500000) translate(-245.069935, -48.857304) translate(225.069935, 28.357304)" fill="#313131" style="fill:hsl(var(--linktext));" fill-rule="nonzero">
<path d="M20.107902,0.548158132 C20.3574473,0.0554659849 20.9591497,-0.141643421 21.4518419,0.107901953 C21.944534,0.357447326 22.1416434,0.959149721 21.892098,1.45184187 L2.39209805,39.9518419 C2.14255267,40.444534 1.54085028,40.6416434 1.04815813,40.392098 C0.555465985,40.1425527 0.358356579,39.5408503 0.607901953,39.0481581 L20.107902,0.548158132 Z" id="line"></path>
<path d="M22.107902,4.54815813 C22.3574473,4.05546598 22.9591497,3.85835658 23.4518419,4.10790195 C23.944534,4.35744733 24.1416434,4.95914972 23.892098,5.45184187 L6.46907561,39.8511426 C6.21953024,40.3438347 5.61782784,40.5409441 5.1251357,40.2913988 C4.63244355,40.0418534 4.43533414,39.440151 4.68487952,38.9474588 L22.107902,4.54815813 Z" id="line"></path>
<path d="M24.107902,8.54815813 C24.3574473,8.05546598 24.9591497,7.85835658 25.4518419,8.10790195 C25.944534,8.35744733 26.1416434,8.95914972 25.892098,9.45184187 L10.4571798,39.9259112 C10.2076345,40.4186033 9.60593206,40.6157127 9.11323992,40.3661673 C8.62054777,40.116622 8.42343836,39.5149196 8.67298374,39.0222274 L24.107902,8.54815813 Z" id="line"></path>
<path d="M26.107902,12.5481581 C26.3574473,12.055466 26.9591497,11.8583566 27.4518419,12.107902 C27.944534,12.3574473 28.1416434,12.9591497 27.892098,13.4518419 L14.5356524,39.8222601 C14.2861071,40.3149523 13.6844047,40.5120617 13.1917125,40.2625163 C12.6990204,40.012971 12.501911,39.4112686 12.7514563,38.9185764 L26.107902,12.5481581 Z" id="line"></path>
<path d="M28.107902,16.5481581 C28.3574473,16.055466 28.9591497,15.8583566 29.4518419,16.107902 C29.944534,16.3574473 30.1416434,16.9591497 29.892098,17.4518419 L18.5237566,39.8970287 C18.2742113,40.3897209 17.6725089,40.5868303 17.1798167,40.3372849 C16.6871246,40.0877395 16.4900152,39.4860372 16.7395605,38.993345 L28.107902,16.5481581 Z" id="line"></path>
<path d="M30.107902,20.5481581 C30.3574473,20.055466 30.9591497,19.8583566 31.4518419,20.107902 C31.944534,20.3574473 32.1416434,20.9591497 31.892098,21.4518419 L22.6022292,39.7933777 C22.3526839,40.2860699 21.7509815,40.4831793 21.2582893,40.2336339 C20.7655972,39.9840885 20.5684878,39.3823861 20.8180331,38.889694 L30.107902,20.5481581 Z" id="line"></path>
<path d="M32.107902,24.5481581 C32.3574473,24.055466 32.9591497,23.8583566 33.4518419,24.107902 C33.944534,24.3574473 34.1416434,24.9591497 33.892098,25.4518419 L26.5903335,39.8681463 C26.3407881,40.3608385 25.7390857,40.5579479 25.2463935,40.3084025 C24.7537014,40.0588571 24.556592,39.4571547 24.8061374,38.9644626 L32.107902,24.5481581 Z" id="line"></path>
<path d="M34.107902,28.5481581 C34.3574473,28.055466 34.9591497,27.8583566 35.4518419,28.107902 C35.944534,28.3574473 36.1416434,28.9591497 35.892098,29.4518419 L30.6688061,39.7644953 C30.4192607,40.2571874 29.8175583,40.4542968 29.3248661,40.2047515 C28.832174,39.9552061 28.6350646,39.3535037 28.88461,38.8608116 L34.107902,28.5481581 Z" id="line"></path>
<path d="M36.107902,32.5481581 C36.3574473,32.055466 36.9591497,31.8583566 37.4518419,32.107902 C37.944534,32.3574473 38.1416434,32.9591497 37.892098,33.4518419 L34.6569103,39.8392639 C34.4073649,40.331956 33.8056625,40.5290654 33.3129704,40.2795201 C32.8202782,40.0299747 32.6231688,39.4282723 32.8727142,38.9355802 L36.107902,32.5481581 Z" id="line"></path>
<path d="M38.107902,36.5481581 C38.3574473,36.055466 38.9591497,35.8583566 39.4518419,36.107902 C39.944534,36.3574473 40.1416434,36.9591497 39.892098,37.4518419 L38.7353829,39.7356129 C38.4858375,40.228305 37.8841351,40.4254144 37.3914429,40.175869 C36.8987508,39.9263237 36.7016414,39.3246213 36.9511868,38.8319291 L38.107902,36.5481581 Z" id="line"></path>
</g>
<path d="M373.091623,19.908377 L374.243453,21.1265782 L411.687238,58.5659181 C412.273025,59.1517045 412.273025,60.101452 411.687238,60.6872384 C411.101452,61.2730249 410.151705,61.2730249 409.565918,60.6872384 L373.111231,24.232551 L373.091623,19.908377 Z" id="diagonal-line" fill="#313131" style="fill:hsl(var(--linktext));" fill-rule="nonzero" transform="translate(392.609101, 40.517478) rotate(-270.000000) translate(-392.609101, -40.517478) "></path>
<g id="diagonal-line" transform="translate(410.500000, 341.031830) rotate(-270.000000) translate(-410.500000, -341.031830) translate(408.500000, 338.531830)" fill="#313131" style="fill:hsl(var(--linktext));" fill-rule="nonzero">
<path d="M0.439339828,2.56066017 C-0.146446609,1.97487373 -0.146446609,1.02512627 0.439339828,0.439339828 C1.02512627,-0.146446609 1.97487373,-0.146446609 2.56066017,0.439339828 L3.68566017,1.56433983 L2.56433983,4.68566017 L0.439339828,2.56066017 Z"></path>
</g>
</g>
</g>
</pattern>
<rect id="space" x="0" y="0" fill="url(#tilet)" height="18.8em" width="100%" />
</svg>
\ No newline at end of file
layouts/partials/tile-transparent-svg.html deleted 100644 → 0
View file @ 1860f8b2
<svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="tilett">
<pattern id="tilett" x="0" y="0" width="600" height="480" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<g id="transparent-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
<g fill="none" fill-rule="evenodd" transform="translate(-19.5 -31.5)">
<path d="m78.65 213.84c-.87-.87-.87-2.30 0-3.18.87-.87 2.30-.87 3.18 0l120.00 120.00c.87.87.87 2.30 0 3.18s-2.30.87-3.18 0z" fill="#444040" style="fill:hsl(var(--text));" fill-rule="nonzero"/>
<path d="m259.59 453.09c-.87.87-2.30.87-3.18 0-.87-.87-.87-2.30 0-3.18l60-60c.87-.87 2.30-.87 3.18 0l58.40 58.40 58.40-58.40c.87-.87 2.28-.87 3.16-.01l62.99 61.49c.88.86.90 2.29.03 3.18-.86.88-2.29.90-3.18.03l-61.40-59.94-58.42 58.42c-.87.87-2.30.87-3.18 0l-58.40-58.40z" fill="#D7D7D7" style="fill: hsl(var(--tab-two));" fill-rule="nonzero" transform="matrix(-1 0 0 -1 758.99 844.49)"/>
<path d="m473.09 321.06c-1.18 1.15-3.08 1.12-4.24-.05s-1.12-3.08.05-4.24l24.07-23.41c1.16-1.13 3.01-1.13 4.18 0l21.98 21.38 21.98-21.38c1.15-1.12 2.98-1.13 4.15-.02l25.27 23.99c1.20 1.14 1.25 3.03.10 4.24s-3.03 1.25-4.24.10l-23.18-22.01-22.00 21.40c-1.16 1.13-3.01 1.13-4.18 0l-21.98-21.38z" fill="#D7D7D7" style="fill: hsl(var(--tab-two));" fill-rule="nonzero" transform="matrix(.86 -.5 .5 .86 -84.11 301.07)"/>
<path d="m76.40 72.98-26.23 26.23-2.91-3.44 27.55-27.55c.87-.87 2.30-.87 3.18 0l58.40 58.40 58.40-58.40c.87-.87 2.28-.87 3.16-.01l62.99 61.49c.88.86.90 2.29.03 3.18-.86.88-2.29.90-3.18.03l-61.40-59.94-58.42 58.42c-.87.87-2.30.87-3.18 0z" fill="#D0D0D0" style="fill:hsl(var(--tab-three));" fill-rule="nonzero" transform="matrix(-.70 .70 -.70 -.70 334.76 62.42)"/>
<g fill="#C5C6C6" style="fill:hsl(var(--tab-four));">
<g>
<circle cx="264" cy="156" r="4.5"/>
<circle cx="279" cy="156" r="4.5"/>
<circle cx="294" cy="156" r="4.5"/>
<circle cx="309" cy="156" r="4.5"/>
<circle cx="264" cy="171" r="4.5"/>
<circle cx="279" cy="171" r="4.5"/>
<circle cx="294" cy="171" r="4.5"/>
<circle cx="309" cy="171" r="4.5"/>
<circle cx="264" cy="186" r="4.5"/>
<circle cx="279" cy="186" r="4.5"/>
<circle cx="294" cy="186" r="4.5"/>
<circle cx="309" cy="186" r="4.5"/>
<circle cx="264" cy="201" r="4.5"/>
<circle cx="279" cy="201" r="4.5"/>
<circle cx="294" cy="201" r="4.5"/>
<circle cx="309" cy="201" r="4.5"/>
</g>
<g>
<circle cx="264" cy="216" r="4.5"/>
<circle cx="279" cy="216" r="4.5"/>
<circle cx="294" cy="216" r="4.5"/>
<circle cx="309" cy="216" r="4.5"/>
<circle cx="264" cy="231" r="4.5"/>
<circle cx="279" cy="231" r="4.5"/>
<circle cx="294" cy="231" r="4.5"/>
<circle cx="309" cy="231" r="4.5"/>
<circle cx="264" cy="246" r="4.5"/>
<circle cx="279" cy="246" r="4.5"/>
<circle cx="294" cy="246" r="4.5"/>
<circle cx="309" cy="246" r="4.5"/>
<circle cx="264" cy="261" r="4.5"/>
<circle cx="279" cy="261" r="4.5"/>
<circle cx="294" cy="261" r="4.5"/>
<circle cx="309" cy="261" r="4.5"/>
</g>
<g>
<circle cx="324" cy="216" r="4.5"/>
<circle cx="339" cy="216" r="4.5"/>
<circle cx="354" cy="216" r="4.5"/>
<circle cx="369" cy="216" r="4.5"/>
<circle cx="324" cy="231" r="4.5"/>
<circle cx="339" cy="231" r="4.5"/>
<circle cx="354" cy="231" r="4.5"/>
<circle cx="369" cy="231" r="4.5"/>
<circle cx="324" cy="246" r="4.5"/>
<circle cx="339" cy="246" r="4.5"/>
<circle cx="354" cy="246" r="4.5"/>
<circle cx="369" cy="246" r="4.5"/>
<circle cx="324" cy="261" r="4.5"/>
<circle cx="339" cy="261" r="4.5"/>
<circle cx="354" cy="261" r="4.5"/>
<circle cx="369" cy="261" r="4.5"/>
</g>
<g transform="matrix(.70 .70 -.70 .70 619.27 409.04)">
<circle cx="5.56" cy="5.54" r="4.5"/>
<circle cx="5.56" cy="20.54" r="4.5"/>
<circle cx="20.56" cy="20.54" r="4.5"/>
<circle cx="4.5" cy="36" r="4.5"/>
<circle cx="19.5" cy="36" r="4.5"/>
<circle cx="34.5" cy="36" r="4.5"/>
<circle cx="4.5" cy="51" r="4.5"/>
<circle cx="19.5" cy="51" r="4.5"/>
<circle cx="34.5" cy="51" r="4.5"/>
<circle cx="49.5" cy="51" r="4.5"/>
<circle cx="4.5" cy="66" r="4.5"/>
<circle cx="19.5" cy="66" r="4.5"/>
<circle cx="34.5" cy="66" r="4.5"/>
<circle cx="49.5" cy="66" r="4.5"/>
<circle cx="4.5" cy="81" r="4.5"/>
<circle cx="19.5" cy="81" r="4.5"/>
<circle cx="34.5" cy="81" r="4.5"/>
<circle cx="49.5" cy="81" r="4.5"/>
</g>
<g transform="matrix(.70 .70 -.70 .70 40.5 389.31)">
<circle cx="4.5" cy="4.5" r="4.5"/>
<circle cx="19.5" cy="4.5" r="4.5"/>
<circle cx="34.5" cy="4.5" r="4.5"/>
<circle cx="49.5" cy="4.5" r="4.5"/>
<circle cx="4.5" cy="19.5" r="4.5"/>
<circle cx="19.5" cy="19.5" r="4.5"/>
<circle cx="34.5" cy="19.5" r="4.5"/>
<circle cx="49.5" cy="19.5" r="4.5"/>
<circle cx="4.5" cy="34.5" r="4.5"/>
<circle cx="19.5" cy="34.5" r="4.5"/>
<circle cx="34.5" cy="34.5" r="4.5"/>
<circle cx="49.5" cy="34.5" r="4.5"/>
<circle cx="19.5" cy="49.5" r="4.5"/>
<circle cx="34.5" cy="49.5" r="4.5"/>
<circle cx="49.5" cy="49.5" r="4.5"/>
</g>
<g transform="matrix(.70 .70 -.70 .70 18.21 452.52)">
<circle cx="4.5" cy="4.5" r="4.5"/>
<circle cx="19.5" cy="4.5" r="4.5"/>
<circle cx="19.5" cy="19.5" r="4.5"/>
</g>
</g>
<path d="m243.17 490.87-20.46 20.46c-.87.87-2.30.87-3.18 0-.87-.87-.87-2.30 0-3.18l20.32-20.59z" fill="#D0D0D0" style="fill:hsl(var(--tab-three));" fill-rule="nonzero" transform="matrix(-.70 .70 -.70 -.70 747.78 689.82)"/>
<path d="m469.5 96-25.5 51h51zm4.02-2.01 25.5 51.00c1.49 2.99-.67 6.51-4.02 6.51h-51c-3.34 0-5.52-3.52-4.02-6.51l25.5-51.00c1.65-3.31 6.39-3.31 8.04 0z" fill="#A2A4A4" style="fill:hsl(var(--brilliant));" fill-rule="nonzero"/>
<path d="m49.5 277.49-25.5 51h51zm4.02-2.01 25.5 51c1.49 2.99-.67 6.51-4.02 6.51h-51c-3.34 0-5.52-3.52-4.02-6.51l25.5-51c1.65-3.31 6.39-3.31 8.04 0z" fill="#A2A4A4" style="fill:hsl(var(--brilliant));" fill-rule="nonzero" transform="matrix(0 -1 1 0 -253.49 352.49)"/>
<path d="m384.50 321.81 7.19 14.38c.99 1.99-.45 4.34-2.68 4.34h-14.38c-2.23 0-3.68-2.34-2.68-4.34l7.19-14.38c1.10-2.21 4.26-2.21 5.36 0z" fill="#7E8080" style="fill:hsl(var(--tab-six));" fill-rule="nonzero" transform="matrix(.86 .5 -.5 .86 216.33 -146.65)"/>
<circle cx="200.25" cy="212.25" fill="#444040" style="fill:hsl(var(--text));" r="6.75"/>
<g fill="#313131" style="fill:hsl(var(--linktext));" fill-rule="nonzero" transform="matrix(.46 -.88 .88 .46 326.47 85.69)">
<path d="m30.16.82c.37-.73 1.27-1.03 2.01-.66s1.03 1.27.66 2.01l-29.25 57.75c-.37.73-1.27 1.03-2.01.66-.73-.37-1.03-1.27-.66-2.01z"/>
<path d="m33.16 6.82c.37-.73 1.27-1.03 2.01-.66s1.03 1.27.66 2.01l-26.13 51.59c-.37.73-1.27 1.03-2.01.66-.73-.37-1.03-1.27-.66-2.01z"/>
<path d="m36.16 12.82c.37-.73 1.27-1.03 2.01-.66.73.37 1.03 1.27.66 2.01l-23.15 45.71c-.37.73-1.27 1.03-2.01.66-.73-.37-1.03-1.27-.66-2.01z"/>
<path d="m39.16 18.82c.37-.73 1.27-1.03 2.01-.66.73.37 1.03 1.27.66 2.01l-20.03 39.55c-.37.73-1.27 1.03-2.01.66-.73-.37-1.03-1.27-.66-2.01z"/>
<path d="m42.16 24.82c.37-.73 1.27-1.03 2.01-.66.73.37 1.03 1.27.66 2.01l-17.05 33.66c-.37.73-1.27 1.03-2.01.66-.73-.37-1.03-1.27-.66-2.01z"/>
<path d="m45.16 30.82c.37-.73 1.27-1.03 2.01-.66.73.37 1.03 1.27.66 2.01l-13.93 27.51c-.37.73-1.27 1.03-2.01.66-.73-.37-1.03-1.27-.66-2.01z"/>
<path d="m48.16 36.82c.37-.73 1.27-1.03 2.01-.66.73.37 1.03 1.27.66 2.01l-10.95 21.62c-.37.73-1.27 1.03-2.01.66-.73-.37-1.03-1.27-.66-2.01z"/>
<path d="m51.16 42.82c.37-.73 1.27-1.03 2.01-.66.73.37 1.03 1.27.66 2.01l-7.83 15.46c-.37.73-1.27 1.03-2.01.66-.73-.37-1.03-1.27-.66-2.01z"/>
<path d="m54.16 48.82c.37-.73 1.27-1.03 2.01-.66.73.37 1.03 1.27.66 2.01l-4.85 9.58c-.37.73-1.27 1.03-2.01.66-.73-.37-1.03-1.27-.66-2.01z"/>
<path d="m57.16 54.82c.37-.73 1.27-1.03 2.01-.66.73.37 1.03 1.27.66 2.01l-1.73 3.42c-.37.73-1.27 1.03-2.01.66-.73-.37-1.03-1.27-.66-2.01z"/>
</g>
<path d="m559.63 29.86 1.72 1.82 56.16 56.15c.87.87.87 2.30 0 3.18-.87.87-2.30.87-3.18 0l-54.68-54.68z" fill="#313131" style="fill:hsl(var(--linktext));" fill-rule="nonzero" transform="matrix(0 1 -1 0 649.68 -528.13)"/>
<path d="m.65 3.84c-.87-.87-.87-2.30 0-3.18.87-.87 2.30-.87 3.18 0l1.68 1.68-1.68 4.68z" fill="#313131" style="fill:hsl(var(--linktext));" fill-rule="nonzero" transform="matrix(0 1 -1 0 619.5 508.54)"/>
</g>
</g>
</pattern>
<rect id="space" x="0" y="0" fill="url(#tilett)" height="18.8em" width="100%" />
</svg>
\ No newline at end of file
themes/static-kalbag/static/css/style.css
View file @ 3dd13cd2
......@@ -193,15 +193,17 @@ h2#latest-photos, h2#latest-notes {
font-size: 2em;
}
}
h1, h1 a, h2, h2 a {
/* for really big text or long words */
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
@media screen and (max-width: 35em) {
h1, h1 a, h2, h2 a {
/* for really big text or long words on narrow viewports */
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
}
h3, footer h2 {
......@@ -260,7 +262,10 @@ a {
text-decoration: underline;
text-decoration-color: hsl(var(--brilliant));
-webkit-text-decoration-color: hsl(var(--brilliant));
/* for really long URLs */
}
@media screen and (max-width: 35em) {
/* for really long URLs on narrow viewports */
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
......@@ -349,19 +354,111 @@ hr {
/* - - - - - - - - LAYOUT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - Header */
/* grid is applied to element level where it is required */
header {
}
@media screen and (min-width: 37em) {
main {
/* - - - - - - - - HEADER */
}
.header-wrap {
display: grid;
grid-template-columns: repeat(7, minmax(14.285714286%, 7.4em));
/* centre everything */
margin: 0 auto;
max-width: 51.8em;
}
.header-wrap .site-title {
grid-column: 2 / 7;
}
footer {
.navigation-menu {
display: grid;
grid-template-columns: repeat(7, minmax(14.285714286%, 7.4em));
/* centre everything */
margin: 0 auto;
max-width: 51.8em;
}
.navigation-menu ul {
grid-column: 2 / 7;
}
/* - - - - - - - - MAIN/CONTENT */
/* centre everything */
#content {
margin: 0 auto;
max-width: 51.8em;
}
.h-entry {
display: grid;
grid-template-columns: repeat(7, minmax(14.285714286%, 7.4em));
}
.h-entry h1,
.h-entry .entry-meta,
.h-entry .entry-notes {
grid-column: 2 / 7;
margin-left: 0;
margin-right: 0;
}
.h-entry .entry-meta p,
.h-entry .entry-notes p {
margin-left: 0;
margin-right: 0;
}
.entry-content {
grid-column: 1 / 8; /* inside h-entry */
display: grid;
grid-template-columns: repeat(7, minmax(14.285714286%, 7.4em));
}
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content blockquote,
.entry-content ul,
.entry-content ol {
grid-column: 2 / 7;
margin-left: 0;
margin-right: 0;
}
.entry-content figure,
.entry-content img {
grid-column: 2 / 8;
margin-left: 0;
margin-right: 0;
}
/* - - - - - - - - FOOTER */
.footer-wrap {
display: grid;
grid-template-columns: repeat(7, minmax(14.285714286%, 7.4em));
/* centre everything */
margin: 0 auto;
max-width: 51.8em;
}
.site-footer .footer-wrap h2,
.site-footer .footer-wrap p {
grid-column: 2 / 6;
margin-left: 0;
margin-right: 0;
}
}
/* - - - - - - - - CLASSES AND IDs
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
......@@ -410,8 +507,11 @@ figcaption, .site-footer p, .site-footer small, .note {
/* - - - - - - - - MAIN */
#content {
main {
background: white;
}
#content {
/* to clear contained margins */
padding: 0.5em 0 4.5em;
}
......@@ -448,8 +548,8 @@ figcaption, .site-footer p, .site-footer small, .note {
top: -10em;
}
.navigation-menu {
background: hsla(var(--tab-five), 0.1);
nav {
background: hsla(var(--secondary-bg), 1);
}
.navigation-menu ul {
......@@ -786,39 +886,6 @@ figcaption {
}
/* - - - - - - - - SVG TILE
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* SVGs are included in the HTML because otherwise they can’t pick up from the CSS variables */
.tilet {
display: block;
height: 15em;
margin-top: -0.5em; /* offset top margin */
position: absolute;
width: 100%;
z-index: 1;
}
.tilett {
z-index: -1; /* position behind everything */
}
.site-header {
position: relative; /* allow absolute positioning inside */
}
.site-header .tilet {
height: 3.4em; /* height of title */
margin-top: -1em; /* offset top margin */
}
@media screen and (min-width: 35em) {
.site-header .tilet {
height: 4em; /* height of title */
}
}
/* - - - - - - - - SYNTAX HIGHLIGHTING
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Like this? Fund us! Your patronage helps keep us independent and going.