Merge pull request #1 from Tressley/semantic

Responsive semantics

css/main.css

@@ -1,4 +1,4 @@
-/* Josh Comeau's Custom CSS Reset - https://www.joshwcomeau.com/css/custom-css-reset/ */
+/* Based on Josh Comeau's Custom CSS Reset - https://www.joshwcomeau.com/css/custom-css-reset/ */
 @import url('reset.css');
 /* Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');

css/styles.css

@@ -6,90 +6,78 @@ body {
 }
 
 main {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
     align-items: center;
-    -webkit-animation: fade 0.75s ease-in;
-        animation: fade 0.75s ease-in;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-    -ms-flex-direction: column;
     flex-direction: column;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
     justify-content: center;
     min-height: 100vh;
-    padding: var(--space-l);
+}
+
+#traichu {
+    animation: fade 0.25s ease-in;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--space-m);
     row-gap: var(--space-l);
+    width: 20rem;
 }
 
 header {
-    -webkit-animation: flicker 2s linear infinite both;
     animation: flicker 2s linear infinite both;
+    display: flex;
+    justify-content: center;
 }
 
-header svg { width: 8rem; }
+header svg { width: 6rem; }
 
-#dock {
-    display: -webkit-box;
-    display: -ms-flexbox;
+#dock ul {
     display: flex;
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-    -ms-flex-direction: row;
     flex-direction: row;
-    -ms-flex-pack: distribute;
-        justify-content: space-around;
+    flex-wrap: wrap;
+    justify-content: center;
     list-style-type: none;
-    min-width: 40rem;
+    column-gap: var(--space-m);
+    row-gap: var(--space-m);
     padding: 0;
 }
 
-#dock li a {
+#dock a {
     display: block;
     fill: var(--primary-link-color);
     min-width: 1.5rem;
-    -webkit-transition: fill 0.25s ease-in-out, margin-top 0.125s cubic-bezier(0.455, 0.030, 0.515, 0.955);
-    -o-transition: fill 0.25s ease-in-out, margin-top 0.125s cubic-bezier(0.455, 0.030, 0.515, 0.955);
     transition: fill 0.25s ease-in-out, margin-top 0.125s cubic-bezier(0.455, 0.030, 0.515, 0.955);
 }
 
 #dock a:focus,
 #dock a:hover {
-    -webkit-animation: slime 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
     animation: slime 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
     fill: var(--primary-link-hover-color);
     margin-top: -0.25rem;
     outline: none;
 }
 
-#dock li:nth-child(1) a:focus,
-#dock li:nth-child(1) a:hover { fill: hsl(5, 81%, 56%); } /* Gmail */
-#dock li:nth-child(2) a:focus,
-#dock li:nth-child(2) a:hover { fill: hsl(217, 89%, 61%); } /* Google Calendar */
-#dock li:nth-child(3) a:focus,
-#dock li:nth-child(3) a:hover { fill: hsl(44, 100%, 50%); } /* Google Keep */
-#dock li:nth-child(4) a:focus,
-#dock li:nth-child(4) a:hover { fill: var(--primary-link-hover-color); } /* Notion */
-#dock li:nth-child(5) a:focus,
-#dock li:nth-child(5) a:hover { fill: hsl(102, 53%, 52%); } /* Github */
-#dock li:nth-child(6) a:focus,
-#dock li:nth-child(6) a:hover { fill: hsl(14, 89%, 53%); } /* Figma */
+#dock ul li:nth-child(1) a:focus,
+#dock ul li:nth-child(1) a:hover { fill: hsl(5, 81%, 56%); } /* Gmail */
+#dock ul li:nth-child(2) a:focus,
+#dock ul li:nth-child(2) a:hover { fill: hsl(217, 89%, 61%); } /* Google Calendar */
+#dock ul li:nth-child(3) a:focus,
+#dock ul li:nth-child(3) a:hover { fill: hsl(44, 100%, 50%); } /* Google Keep */
+#dock ul li:nth-child(4) a:focus,
+#dock ul li:nth-child(4) a:hover { fill: var(--primary-link-hover-color); } /* Notion */
+#dock ul li:nth-child(5) a:focus,
+#dock ul li:nth-child(5) a:hover { fill: hsl(102, 53%, 52%); } /* Github */
+#dock ul li:nth-child(6) a:focus,
+#dock ul li:nth-child(6) a:hover { fill: hsl(14, 89%, 53%); } /* Figma */
 
 #search {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-        align-items: center;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-    -ms-flex-direction: column;
-        flex-direction: column;
+    justify-content: center;
+}
+
+#search form {
+    flex-grow: 1;
+    width: 100%;
 }
 
 #search input {
@@ -103,7 +91,7 @@ header svg { width: 8rem; }
     line-height: 1.5;
     outline: 0.25rem solid transparent;
     padding: var(--space-m);
-    width: 40rem;
+    width: 100%;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -139,67 +127,56 @@ header svg { width: 8rem; }
 #search input:active,
 #search input:focus { border-color: transparent; }
 
-#search input::-webkit-input-placeholder { text-align: center; }
-#search input::-moz-placeholder { text-align: center; }
-#search input:-ms-input-placeholder { text-align: center; }
-#search input::-ms-input-placeholder { text-align: center; }
-#search input::placeholder { text-align: center; }
-
 #bookmarks {
-        display: -webkit-box;
-        display: -ms-flexbox;
+    align-items: flex-start;
     display: flex;
-        -webkit-box-direction: normal;
-        -webkit-box-orient: horizontal;
-        -ms-flex-direction: row;
-            flex-direction: row;
-        -ms-flex-pack: distribute;
+    flex-direction: column;
     justify-content: space-around;
-        width: 40rem;
 }
 
 #bookmarks ul {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
     flex-direction: column;
-    list-style: none;
+    justify-content: space-around;
+    list-style-type: none;
     margin: 0;
     padding: 0;
 }
 
 #bookmarks li {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
     align-items: center;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: row;
     flex-direction: row;
     line-height: 1;
     margin-bottom: var(--space-m);
 }
 
-#bookmarks li:last-child { margin-bottom: 0; }
-
-#bookmarks li .favicon {
-    width: 1rem;
+.favicon {
     margin-right: var(--space-s);
+    min-width: 1rem;
 }
 
 #bookmarks a {
     color: var(--primary-link-color);
     text-decoration: none;
-    -webkit-transition: color 0.25s ease-in-out;
-        -o-transition: color 0.25s ease-in-out;
     transition: color 0.25s ease-in-out;
 }
 
-#bookmarks a:focus,
 #bookmarks a:hover { color: var(--primary-link-hover-color); }
+
+@media screen and (min-width: 48em) {
+    #traichu {
+        padding: var(--space-m);
+        width: 40rem;
+    }
+
+    header svg { width: 8rem; }
+
+    #dock ul {
+        column-gap: 0;
+        justify-content: space-around;
+        padding: 0;
+    }
+
+    #bookmarks { flex-direction: row; }
+}

js/main.js

@@ -6,6 +6,4 @@ function dateTime () {
   setTimeout(dateTime, 1000)
 }
 
-function traichu () {
 dateTime()
-}