Responsive semantics
- Rewrite of the original page structure to be more inline with semantic HTML - CSS is now mobile-first
This commit is contained in:
Tressley Cahill
parent
a86180f92a
commit
5c91a399e0
@ -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');
|
||||
@import url('styles.css');
|
||||
|
||||
169
css/styles.css
169
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; }
|
||||
}
|
||||
|
||||
186
index.html
186
index.html
File diff suppressed because one or more lines are too long
@ -6,6 +6,4 @@ function dateTime () {
|
||||
setTimeout(dateTime, 1000)
|
||||
}
|
||||
|
||||
function traichu () {
|
||||
dateTime()
|
||||
}
|
||||
dateTime()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user