HTML + CSS + overhaul performance (#2)

* Inputs should have a label for accessibility. * Added missing standard head html elements * Spaced things a little bit * Added meta-description * Added og and twitter tags for embeds. * Added canonical url * Added missing favicons links and theme color * Added .ico version of favicon for compatibility purposes * Navigation elements should be in nav to allow screen readers to identify them * You should have only one h1 tag in your page. * Added reset file * Removed padding and margin from html (will redo later) * Removed all margins 0 (reset already has them) or arbitrary margins * Global styling should be on body, not html * Added the 62.5% rule to ease REM handling * CHANGE TIME! Creating a new CSS file because it's easier lol * Created fonts css file * Created config css file * Moved old base.css and old style.css to new folder * Renamed index.css to style.css * Moved reset to css folder * Added composition file for all our maco level positionning * Added role list to remove style, added navigation in nav in partial * Added header positionning * Splitted space between header and main with viewport height * Replace a class by article for accessibility and styling * Finished positionning elements on the home * bringing back some base styles from previous base file * Added title fonts back * Added utility class to simulate h2 style on header link * Added font swap to avoid invisible text when fonts are loading * Removed border from home-link * Created an utility class for italic text and added it to subtitle * Moved the header link style to blocks, as it's too specific to be utility * Changed class name in template * Added flow class utility to space elements between themselves * Put line-height to 1 on titltes to ease spacing between elements * Added input style from previous css and converted values to new REM * Forgot to add new class name to header partial * Fixed fonts urls * Imported blocks file in main file * Added form centering * Added button style * Added flex grow utility for the search input * Turned the whole header into a Block element instead of using config * Adjusted header padding to match existing design * Turned header into a fixed element, main takes 100vh * Removed grid centering from main since it's not used in other pages, now an utility class * Revert "Removed grid centering from main since it's not used in other pages, now an utility class" This reverts commit 4da18c1. * Moved grid centering from composition to utilities since it's specific to the home * Added top 0 to stick to top * Created an utility margin class for main * Wrappred content into an article, added margin-top-main class * Added grid item center utility class to index * Added utility classe for article max-width * Added back hyphens for paragraphs * Added padding to main * Added flow and width63 classes to article * Added width63 to article on about page * Moved button from config to block as it's not a default style * Added label to search and redid styles * Added the name of the webring inside the label * Replace background image by inline svg in the button * Fixed margin on button * Added an aria label and title since the button has no text * ADjusted the size of the inline svg to avoid a flash of giant svg during loading * Removed unused style on form * Added a title element for accessibility * Created utility class two columns for search results * Removed padding from ul list by default * Move search in main, put results into list, added flow and two cols * Typo * Added flow2 spacing utility class * Added entries styles to blocks * Updated style of entries * Reduced main top margin * Added width126 class to contain entries, updated template * Added visually hidden class * Added same template as search for webring partial * Added missing article * Added translateY50% utility class * Added translateY to uncenter search box on index * Added break inside management to avoid text splitted between cols * Totally removed position fixed header, it was a wrong idea. Adjusted main instead. * Fixed input and button responsive design * Reduced transparency for accessibility reasons * Added a title for accessibility reasons * Added all code except reset inside main style file * Added reset directly in head * Fixed fonts urls * Deleted useless files * Converted fonts to woff2, went from 1.7mo to 400ko. * Moved fonts loading to the end of the file to avoid rendering issues
cblgh · May 13, 2021 · 8a5fba9 · 8a5fba9
1 parent 72adc9f
commit 8a5fba9
Show file tree

Hide file tree

Showing 15 changed files with 456 additions and 184 deletions.
diff --git a/html/about.html b/html/about.html
@@ -1,21 +1,24 @@
 {{ template "head" . }}
 {{ template "nav" . }}
 <main id="about">
-    <p>
-        <span class="lieu">Lieu</span>—an alternative search engine. Created in response to the environs of
-        apathy concerning the use of hypertext search and discovery. In <span class="lieu">Lieu</span>, the
-        internet is not what is made searchable, but instead one's own neighbourhood. Put differently,
-        <span class="lieu">Lieu</span> is a neighbourhood search engine, a way for personal webrings to increase
-        serendipitous connexions.
-    </p>
-    <p>
-        This instance indexes <a href="{{ .Data.RingLink }}">{{ .Data.WebringName }}</a>—{{ .Data.DomainCount }} domains,
-        {{ .Data.PageCount }} pages, {{ .Data.TermCount }} search terms.
-        Some domains of the webring have been filtered out for a better search experience,
-        see <a href="{{ .Data.FilteredLink }}">the filtered list</a>.
-        Visit a <a href="/random">random page</a>.
-    </p>
-    <p><span class="lieu">Lieu</span> was created by <a href="https://cblgh.org/support.html">cblgh</a> at the onset of 2021.</p>
-    <p>For Lieu's AGPL licensed source code, <a href="https://github.com/cblgh/lieu">the repository</a>.</p>
+    <article class="flow width-63ch">
+        <h1>About</h1>
+        <p>
+            <span class="lieu">Lieu</span>—an alternative search engine. Created in response to the environs of
+            apathy concerning the use of hypertext search and discovery. In <span class="lieu">Lieu</span>, the
+            internet is not what is made searchable, but instead one's own neighbourhood. Put differently,
+            <span class="lieu">Lieu</span> is a neighbourhood search engine, a way for personal webrings to increase
+            serendipitous connexions.
+        </p>
+        <p>
+            This instance indexes <a href="{{ .Data.RingLink }}">{{ .Data.WebringName }}</a>—{{ .Data.DomainCount }} domains,
+            {{ .Data.PageCount }} pages, {{ .Data.TermCount }} search terms.
+            Some domains of the webring have been filtered out for a better search experience,
+            see <a href="{{ .Data.FilteredLink }}">the filtered list</a>.
+            Visit a <a href="/random">random page</a>.
+        </p>
+        <p><span class="lieu">Lieu</span> was created by <a href="https://cblgh.org/support.html">cblgh</a> at the onset of 2021.</p>
+        <p>For Lieu's AGPL licensed source code, <a href="https://github.com/cblgh/lieu">the repository</a>.</p>
+    </article>
 </main>
 {{ template "footer" . }}
diff --git a/html/assets/NotoSerif-Bold.woff2 b/html/assets/NotoSerif-Bold.woff2
diff --git a/html/assets/NotoSerif-Italic.woff2 b/html/assets/NotoSerif-Italic.woff2
diff --git a/html/assets/NotoSerif.woff2 b/html/assets/NotoSerif.woff2
diff --git a/html/assets/favicon.ico b/html/assets/favicon.ico
diff --git a/html/assets/inter-ui-web/inter-ui.css b/html/assets/inter-ui-web/inter-ui.css
@@ -1,13 +1,15 @@
 @font-face {
   font-family: 'Inter UI';
-  font-style:  normal;
+  font-style: normal;
   src: url("Inter-UI-Regular.woff2") format("woff2"),
-       url("Inter-UI-Regular.woff") format("woff");
+    url("Inter-UI-Regular.woff") format("woff");
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Inter UI';
-  font-style:  italic;
+  font-style: italic;
   src: url("Inter-UI-Italic.woff2") format("woff2"),
-       url("Inter-UI-Italic.woff") format("woff");
-}
+    url("Inter-UI-Italic.woff") format("woff");
+  font-display: swap;
+}
diff --git a/html/assets/base.css → html/assets/old_css/base.css b/html/assets/base.css → html/assets/old_css/base.css
@@ -1,66 +1,31 @@
-@import url('inter-ui-web/inter-ui.css');
-
-@font-face {
-  font-family: "Noto Serif";
-  src: url("NotoSerif-Bold.ttf");
-}
-
-@font-face {
-  font-family: "Noto Serif";
-  font-weight: 400;
-  src: url("NotoSerif-Regular.ttf");
-}
-
-@font-face {
-  font-family: "Noto Serif";
-  font-weight: 400;
-  font-style: italic;
-  src: url("NotoSerif-Italic.ttf");
-}
-
-:root {
-    --primary: #fefefe;
-    --secondary: #000;
-    /* alt colorscheme: 1 */
-    /* --primary: red; */
-    /* --secondary: #fefefe; */
-    /* alt colorscheme: 2 */
-    /* --primary: #F35363; */
-    /* --secondary: black; */
-}
-
 li {
     list-style-type: circle;
 }
 
 ul {
-    margin: 0;
     padding-left: 1rem;
 }
 
+/* Font-size 62.5% allows using rems as pixels. For ex: 1.6rem = 16px. Way es */
 html {
-    font-family: "Inter UI", sans-serif;
-    background: var(--secondary);
-    color: var(--primary);
-    padding-bottom: 2rem;
-    padding-left: 2rem;
-    padding-right: 2rem;
-    margin-top: 2rem;
+    font-size: 62.5%;
 }
 
 body {
-    margin: 0;
+    font-family: "Inter UI", sans-serif;
+    background: var(--secondary);
+    color: var(--primary);
+    font-size: 1.6rem;
 }
 
 h1 {
     font-family: "Noto Serif";
     font-weight: 400;
     font-size: 3rem;
-    margin-bottom: 1rem;
-    margin-top: 0;
 }
 
-h1 > a, h1 > a:hover {
+h1>a,
+h1>a:hover {
     border-bottom: none;
 }
 
@@ -78,20 +43,19 @@ a:hover {
 
 p {
     hyphens: auto;
-    margin-bottom: 1.5rem;
+    /* margin-bottom: 1.5rem; */
 }
 
 .entry {
     -webkit-column-break-inside: avoid;
-    -moz-column-break-inside:avoid;
-    -moz-page-break-inside:avoid;
+    -moz-column-break-inside: avoid;
+    -moz-page-break-inside: avoid;
     page-break-inside: avoid;
     break-inside: avoid-column;
 }
 
 .search-container {
     display: grid;
-    margin-bottom: 2rem;
     height: 2.5rem;
     align-items: center;
     grid-template-columns: 16rem 3rem;
@@ -111,7 +75,7 @@ p {
 
 .search-button {
     background-image: url("logo.svg");
-	cursor: pointer;
+    cursor: pointer;
     border: 0;
     transition: opacity 150ms;
     height: 2rem;
@@ -132,26 +96,27 @@ p {
     font-style: normal;
 }
 
-@media 
-only screen 
-and (min-device-width : 320px) 
-and (max-device-width : 720px)
-{ 
+.lieu-link {
+    font-size: 3rem;
+    font-family: "Noto Serif";
+    font-weight: 400;
+    text-decoration: none;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 720px) {
     html {
         padding-left: 0.75rem;
         padding-right: 0.75rem;
         font-size: 30pt;
         max-width: 100vw !important;
     }
+
     #results {
         display: grid;
     }
 }
 
-@media 
-only screen
-and (min-device-width : 320px) 
-and (max-device-width : 374px) {
+@media only screen and (min-device-width : 320px) and (max-device-width : 374px) {
     html {
         font-size: 40pt;
     }
@@ -163,4 +128,4 @@ and (max-device-width : 374px) {
     --primary: #000;
     --secondary: #fefefe;
 }
-*/
+*/
diff --git a/html/assets/old_css/style.css b/html/assets/old_css/style.css
@@ -0,0 +1,107 @@
+@import url("reset.css");
+@import url("base.css");
+
+h1 {
+    font-size: 3rem;
+    margin-bottom: 0rem;
+}
+
+h2 {
+    font-family: "Noto Serif";
+    font-weight: 400;
+    font-size: 1.5rem;
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+.lieu-container h2 {
+    font-style: italic;
+}
+
+header {
+    clear: both;
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: max-content max-content 1fr;
+    grid-column-gap: 1rem;
+    align-items: start;
+}
+
+header h2 a,
+header h2 a:hover {
+    border-bottom: none;
+}
+
+header ul {
+    justify-self: end;
+    margin-top: 0.5rem;
+    grid-column-start: 3;
+}
+
+header ul li {
+    margin-left: 1.5rem;
+    display: inline-block;
+}
+
+header ul li:first-of-type {
+    margin-left: 0;
+}
+
+main {
+    display: grid;
+    justify-items: left;
+    align-items: left;
+    margin-top: 1rem;
+}
+
+main#results {
+    display: block;
+    margin-top: 4rem;
+    columns: 2;
+    max-width: 1200px;
+}
+
+main#about {
+    max-width: 600px;
+}
+
+.lieu {
+    font-family: "Noto Serif";
+    font-weight: 400;
+}
+
+.search-container {
+    grid-template-columns: 19rem 3rem;
+}
+
+.lieu-container {
+    display: grid;
+    justify-items: center;
+    align-items: center;
+    margin-top: 5rem;
+    width: 100%;
+}
+
+.entry {
+    -webkit-column-break-inside: avoid;
+    -moz-column-break-inside: avoid;
+    -moz-page-break-inside: avoid;
+    page-break-inside: avoid;
+    break-inside: avoid-column;
+    margin-bottom: 1rem;
+}
+
+.entry p {
+    color: var(--primary);
+    opacity: 0.45;
+}
+
+.link {
+    font-style: italic;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 720px) {
+    main {
+        columns: 1 !important;
+    }
+}