diff --git a/css/main.css b/css/main.css
index 8bae4e6..dea75a8 100644
--- a/css/main.css
+++ b/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');
@@ -7,4 +7,4 @@
/* Animations */
@import url('animations.css');
/* Main Styles */
-@import url('styles.css');
\ No newline at end of file
+@import url('styles.css');
diff --git a/css/styles.css b/css/styles.css
index 1751c72..a5b68fc 100644
--- a/css/styles.css
+++ b/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;
+ align-items: center;
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;
+ flex-direction: column;
+ 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;
+ 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-direction: row;
+ 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);
+ 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;
+ 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;
- 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;
- width: 40rem;
+ align-items: flex-start;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
}
#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;
+ flex-direction: column;
+ 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;
+ align-items: center;
display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- 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;
+ 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; }
+}
diff --git a/index.html b/index.html
index c51ba77..1a7d76a 100644
--- a/index.html
+++ b/index.html
@@ -17,99 +17,101 @@
_traichu
-
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/js/main.js b/js/main.js
index 2e7ec64..6438bd0 100644
--- a/js/main.js
+++ b/js/main.js
@@ -6,6 +6,4 @@ function dateTime () {
setTimeout(dateTime, 1000)
}
-function traichu () {
- dateTime()
-}
+dateTime()