Rearrange footer sections into multiple columns
Krzysztof Andrzej Sikorski

Krzysztof Andrzej Sikorski commited on 2022-05-14 16:59:49
Showing 3 changed files, with 22 additions and 4 deletions.

... ...
@@ -1 +1 @@
1
-/*! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.tw-mx-4{margin-left:1rem;margin-right:1rem}.tw-my-8{margin-top:2rem;margin-bottom:2rem}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.tw-my-0{margin-top:0;margin-bottom:0}.tw-list-disc{list-style-type:disc}.tw-bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.tw-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.tw-text-2xl{font-size:1.5rem;line-height:2rem}.tw-text-xl{font-size:1.25rem;line-height:1.75rem}.tw-text-lg{font-size:1.125rem;line-height:1.75rem}.tw-text-emerald-500{--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity))}.tw-text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity))}.tw-text-indigo-300{--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity))}.tw-underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.tw-outline-dotted{outline-style:dotted}body{margin-left:1rem;margin-right:1rem;--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity))}@media (min-width:640px){body{margin-left:2rem;margin-right:2rem}}@media (min-width:768px){body{width:100%}@media (min-width:640px){body{max-width:640px}}@media (min-width:768px){body{max-width:768px}}@media (min-width:1024px){body{max-width:1024px}}@media (min-width:1280px){body{max-width:1280px}}@media (min-width:1536px){body{max-width:1536px}}body{margin-left:auto;margin-right:auto}}li,p{margin-top:.5rem;margin-bottom:.5rem}a{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity));-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted}a:hover{outline-style:dotted;outline-offset:4px}a[rel=external]:after{content:" \002197"}code{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity));-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted}h1{margin-top:2rem;margin-bottom:2rem;font-size:1.5rem;line-height:2rem;font-weight:700}h2{font-size:1.25rem;line-height:1.75rem;font-weight:700}footer,h2,header,main{margin-top:1rem;margin-bottom:1rem}@media (min-width:640px){footer,header,main{margin-top:2rem;margin-bottom:2rem}}footer>h1,header>h1,main>h1{margin-top:0;margin-bottom:0;font-size:2.25rem;line-height:2.5rem}header p:first-of-type{font-style:italic}header em.name,header p:first-of-type{font-size:1.125rem;line-height:1.75rem}header em.name{--tw-text-opacity:1;color:rgb(110 231 183/var(--tw-text-opacity))}@media (min-width:768px){main>section{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}@media (min-width:1024px){main>section{gap:4rem}}@media (min-width:1280px){main>section{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1536px){main>section{grid-template-columns:repeat(4,minmax(0,1fr))}}footer li{list-style-position:inside;list-style-type:disc}@media (min-width:640px){.sm\:tw-mx-8{margin-left:2rem;margin-right:2rem}}@media (min-width:768px){.md\:tw-container{width:100%}@media (min-width:640px){.md\:tw-container{max-width:640px}}@media (min-width:768px){.md\:tw-container{max-width:768px}}@media (min-width:1024px){.md\:tw-container{max-width:1024px}}@media (min-width:1280px){.md\:tw-container{max-width:1280px}}@media (min-width:1536px){.md\:tw-container{max-width:1536px}}.md\:tw-mx-auto{margin-left:auto;margin-right:auto}.md\:tw-grid{display:grid}.md\:tw-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:tw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:tw-gap-8{gap:2rem}}@media (min-width:1024px){.lg\:tw-gap-16{gap:4rem}}@media (min-width:1280px){.xl\:tw-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
2 1
\ No newline at end of file
2
+/*! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.tw-mx-4{margin-left:1rem;margin-right:1rem}.tw-my-8{margin-top:2rem;margin-bottom:2rem}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.tw-my-0{margin-top:0;margin-bottom:0}.tw-list-disc{list-style-type:disc}.tw-bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.tw-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.tw-text-2xl{font-size:1.5rem;line-height:2rem}.tw-text-xl{font-size:1.25rem;line-height:1.75rem}.tw-text-lg{font-size:1.125rem;line-height:1.75rem}.tw-text-emerald-500{--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity))}.tw-text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity))}.tw-text-indigo-300{--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity))}.tw-underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.tw-outline-dotted{outline-style:dotted}body{margin-left:1rem;margin-right:1rem;--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity))}@media (min-width:640px){body{margin-left:2rem;margin-right:2rem}}@media (min-width:768px){body{width:100%}@media (min-width:640px){body{max-width:640px}}@media (min-width:768px){body{max-width:768px}}@media (min-width:1024px){body{max-width:1024px}}@media (min-width:1280px){body{max-width:1280px}}@media (min-width:1536px){body{max-width:1536px}}body{margin-left:auto;margin-right:auto}}li,p{margin-top:.5rem;margin-bottom:.5rem}a{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity));-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted}a:hover{outline-style:dotted;outline-offset:4px}a[rel=external]:after{content:" \002197"}code{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity));-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted}h1{margin-top:2rem;margin-bottom:2rem;font-size:1.5rem;line-height:2rem;font-weight:700}h2{font-size:1.25rem;line-height:1.75rem;font-weight:700}footer,h2,header,main{margin-top:1rem;margin-bottom:1rem}@media (min-width:640px){footer,header,main{margin-top:2rem;margin-bottom:2rem}}footer>h1,header>h1,main>h1{margin-top:0;margin-bottom:0;font-size:2.25rem;line-height:2.5rem}header p:first-of-type{font-style:italic}header em.name,header p:first-of-type{font-size:1.125rem;line-height:1.75rem}header em.name{--tw-text-opacity:1;color:rgb(110 231 183/var(--tw-text-opacity))}@media (min-width:768px){main>section{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}@media (min-width:1024px){main>section{gap:4rem}}@media (min-width:1280px){main>section{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1536px){main>section{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:768px){footer>section{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}@media (min-width:1024px){footer>section{gap:4rem}}@media (min-width:1280px){footer>section{grid-template-columns:repeat(3,minmax(0,1fr))}}footer li{list-style-position:inside;list-style-type:disc}@media (min-width:640px){.sm\:tw-mx-8{margin-left:2rem;margin-right:2rem}}@media (min-width:768px){.md\:tw-container{width:100%}@media (min-width:640px){.md\:tw-container{max-width:640px}}@media (min-width:768px){.md\:tw-container{max-width:768px}}@media (min-width:1024px){.md\:tw-container{max-width:1024px}}@media (min-width:1280px){.md\:tw-container{max-width:1280px}}@media (min-width:1536px){.md\:tw-container{max-width:1536px}}.md\:tw-mx-auto{margin-left:auto;margin-right:auto}.md\:tw-grid{display:grid}.md\:tw-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:tw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:tw-gap-8{gap:2rem}}@media (min-width:1024px){.lg\:tw-gap-16{gap:4rem}}@media (min-width:1280px){.xl\:tw-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
3 3
\ No newline at end of file
... ...
@@ -72,33 +72,47 @@
72 72
 
73 73
 <footer>
74 74
   <h1>Contact information</h1>
75
+  <article>
75 76
     <h2>Basic information</h2>
76 77
     <ul>
77
-    <li>Primary email: start with <code>krzysztof</code>, then add <code>@</code> character and this domain's name.</li>
78
-    <li>Legacy email: start with <code>dreamer.pl</code>, then add <code>@</code> character and Gmail's domain name.
78
+      <li>
79
+        Primary email: start with <code>krzysztof</code>, then add <code>@</code> character and this domain's name.
80
+      </li>
81
+      <li>
82
+        Legacy email: start with <code>dreamer.pl</code>, then add <code>@</code> character and Gmail's domain name.
79 83
       </li>
80 84
       <li>If you know my phone number, you can also try SMS or Signal.</li>
81 85
     </ul>
86
+  </article>
87
+  <section>
88
+    <article>
82 89
       <h2>Programming</h2>
83 90
       <ul>
84 91
         <li><a href="https://gitlab.com/krzysztof-sikorski" rel="external">Gitlab</a></li>
85 92
         <li><a href="https://github.com/krzysztof-sikorski" rel="external">GitHub</a></li>
86 93
         <li><a href="https://launchpad.net/~krzysztof-sikorski" rel="external">Launchpad</a></li>
87 94
       </ul>
95
+    </article>
96
+    <article>
88 97
       <h2>Social media</h2>
89 98
       <ul>
90 99
         <li><a href="https://www.linkedin.com/in/krzysztof-andrzej-sikorski/" rel="external">LinkedIn</a></li>
91 100
         <li><a href="https://www.goldenline.pl/krzysztof-andrzej-sikorski/" rel="external">GoldenLine</a></li>
92 101
         <li><a href="https://www.facebook.com/rodekaru.dorameru/" rel="external">Facebook</a></li>
93 102
       </ul>
103
+    </article>
104
+    <article>
94 105
       <h2>Chat and gaming</h2>
95 106
       <ul>
96 107
         <li>Discord username: <code>That Crazy Old Badziew#1362</code></li>
97
-    <li><a href="https://discord.gg/zBVwzD3f8v" rel="external"><q>House of Badziew</q> personal Discord server</a></li>
108
+        <li><a href="https://discord.gg/zBVwzD3f8v"
109
+               rel="external"><q>House of Badziew</q> personal Discord server</a></li>
98 110
         <li><a href="https://steamcommunity.com/id/pomniejszybadziew" rel="external">Steam profile</a></li>
99 111
         <li><a href="https://www.nexusclash.com/memberlist.php?mode=viewprofile&u=108"
100 112
                rel="external">Nexus Clash forum profile</a></li>
101 113
       </ul>
114
+    </article>
115
+  </section>
102 116
 </footer>
103 117
 
104 118
 </body>
... ...
@@ -54,6 +54,10 @@ main > section {
54 54
   @apply md:tw-grid md:tw-gap-8 lg:tw-gap-16 md:tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 2xl:tw-grid-cols-4;
55 55
 }
56 56
 
57
+footer > section {
58
+  @apply md:tw-grid md:tw-gap-8 lg:tw-gap-16 md:tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3;
59
+}
60
+
57 61
 footer li {
58 62
   @apply tw-list-disc tw-list-inside;
59 63
 }
60 64