hc/startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from Tressley/semantic

Browse Source 
Responsive semantics
This commit is contained in:
Tressley Cahill 2022-10-23 19:32:24 -04:00 committed by GitHub
commit 4dcfa06f90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 170 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/main.css
View File

@ -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'); @import url('reset.css');
/* Google Fonts */ /* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');

169
css/styles.css
View File

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

186
index.html
View File

File diff suppressed because one or more lines are too long

4
js/main.js
View File

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