diff --git a/index.html b/index.html index 7dffe96..6bce4b9 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + @@ -13,7 +14,7 @@
- + @@ -64,12 +65,14 @@ Kontakt - CreativeCommons - Webring - SourceCode - Mastodon + + CreativeCommons + Webring + SourceCode + Mastodon + Decentrala © 2023 diff --git a/scripts/main.js b/scripts/main.js index c83be5d..b58fc74 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -90,6 +90,6 @@ main.addEventListener("click", (event) => { } }); -DEBUG; +// DEBUG; console.log(window.innerWidth); console.log(window.innerHeight); diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 0000000..2ba683f --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,149 @@ +/* Copyright (c) 2023 Luka Ivanovic */ +/* https://github.com/luka-hash/css-reset */ +/* This code is licensed under MIT licence */ + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html, +body { + width: 100%; + height: 100%; +} + +a, +article, +audio, +blockquote, +body, +canvas, +caption, +code, +dd, +del, +details, +div, +dl, +dt, +em, +fieldset, +figcaption, +figure, +footer, +form, +h1, +h2, +h3, +h4, +h5, +h6, +header, +hgroup, +html, +iframe, +img, +ins, +kbd, +label, +legend, +li, +mark, +menu, +nav, +ol, +output, +p, +pre, +s, +section, +small, +span, +strong, +sub, +summary, +sup, +table, +tbody, +td, +tfoot, +th, +thead, +time, +tr, +ul, +video { + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} + +ol, +ul { + list-style: none; +} + +blockquote { + quotes: none; +} + +blockquote::before, +blockquote::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +input, +button, +textarea, +select { + font: inherit; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; + hyphens: auto; +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 53924b8..658141a 100644 --- a/styles/style.css +++ b/styles/style.css @@ -34,10 +34,12 @@ body { body { display: grid; - grid-template-columns: 1fr; - grid-template-rows: 5rem 1fr 5rem; - grid-column-gap: 0px; - grid-row-gap: 0px; + grid-template: + "header" 10vh + "main" 1fr + "footer" 10vh + / 1fr; + gap: 0; font-family: 'Iosevka'; } @@ -50,17 +52,17 @@ footer { } header { - grid-area: 1 / 1 / 2 / 2; + grid-area: "header"; border-bottom: 2px solid var(--border); } footer { - grid-area: 3 / 1 / 4 / 2; + grid-area: "footer"; border-top: 2px solid var(--border); } #main { - grid-area: 2 / 1 / 3 / 2; + grid-area: "main"; padding: 3rem 3rem 3rem 3rem; font-size: 1.3rem; line-height: 2rem; @@ -85,7 +87,7 @@ a:focus { text-decoration: line-through var(--text); } -.logo { +#logo { font-size: 3rem; font-weight: bold; } @@ -98,7 +100,7 @@ a:focus { #mesh { position: absolute; - bottom: 5rem; + bottom: 10vh; right: 0; user-select: none; pointer-events: none; @@ -121,6 +123,20 @@ screen and (max-width: 1500px) { } } +.links { + display: flex; +} + +@media screen and (max-width: 540px) { + #logo { + font-size: 2.2rem; + } + + .links { + display: none; + } +} + #sections-button { display: none; } @@ -133,8 +149,8 @@ screen and (max-width: 1500px) { border: 2px solid var(--border); background-color: var(--bg); position: absolute; - bottom: calc(5rem - 2px); - left: 0; + bottom: calc(10vh - 2px); + left: calc(0px - 2px); align-items: center; padding: 2rem 3rem; display: none;