Spaces:
Sleeping
Sleeping
* { | |
margin: 0; | |
padding: 0; | |
} | |
html { transition: background-color .3s ease; } | |
body { | |
font: 16px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", | |
"Microsoft YaHei", Helvetica, Arial, sans-serif, | |
"Apple Color Emoji", "Segoe UI Emoji"; | |
text-align: center; | |
} | |
p { margin: 20px 0; } | |
ul, ol { list-style: none; } | |
/* Fonts | |
/* ================================================= */ | |
@font-face { | |
font-family: 'icomoon'; | |
src: | |
url('../fonts/icomoon.ttf?mrs7x8') format('truetype'), | |
url('../fonts/icomoon.woff?mrs7x8') format('woff'), | |
url('../fonts/icomoon.svg?mrs7x8#icomoon') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
[class^="icon-"], [class*=" icon-"] { | |
/* use !important to prevent issues with browser extensions that change fonts */ | |
font-family: 'icomoon' ; | |
speak: none; | |
font-style: normal; | |
font-weight: normal; | |
font-variant: normal; | |
text-transform: none; | |
line-height: 1; | |
/* Better Font Rendering =========== */ | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.icon-map-pin:before { | |
content: "\e902"; | |
} | |
.icon-moon:before { | |
content: "\e900"; | |
} | |
.icon-sun:before { | |
content: "\e901"; | |
} | |
.icon-quotes-left:before { | |
content: "\e977"; | |
} | |
.icon-quotes-right:before { | |
content: "\e978"; | |
} | |
/* Animation | |
/* ================================================= */ | |
.animate-slide-in-down, | |
.animate-slide-in-up { | |
position: relative; | |
opacity: 0; | |
} | |
.animate-slide-in-down { top: -10px; } | |
.animate-slide-in-up { bottom: -10px; } | |
.no-js .animate-slide-in-down, | |
.no-js .animate-slide-in-up { opacity: 1; } | |
.no-js .animate-slide-in-down { top: 0; } | |
.no-js .animate-slide-in-up { bottom: 0; } | |
.animate-slide-in-left { left: -100%; } | |
.no-js .animate-slide-in-left { left: 0; } | |
.animate-slide-in-right { right: -100%; } | |
.no-js .animate-slide-in-right { right: 0; } | |
/* Headline | |
/* ================================================= */ | |
.vi { | |
margin: 100px auto 0; | |
max-width: 780px; | |
} | |
@media (max-width: 767px) { | |
.vi { margin-top: 50px; } | |
} | |
/* Quote | |
/* ================================================= */ | |
.quote { | |
position: relative; | |
overflow: hidden; | |
margin: 40px 20px; | |
} | |
.quote-line { | |
display: block; | |
position: relative; | |
height: 1px; | |
transition: all .3s ease; | |
} | |
.quote cite::before { | |
content: "-"; | |
padding: 0 5px; | |
} | |
.quote-icon { position: absolute; } | |
.quote-icon.animate-slide-in-down, | |
.quote-icon.animate-slide-in-up { opacity: 0; } | |
.no-js .quote-icon.animate-slide-in-down, | |
.no-js .quote-icon.animate-slide-in-up { opacity: 1; } | |
.quote-icon-start { left: 0; } | |
.quote-icon-start.animate-slide-in-down { top: -10px; } | |
.no-js .quote-icon-start.animate-slide-in-down { top: 0; } | |
.quote-icon-end { right: 0; } | |
.quote-icon-end.animate-slide-in-up { bottom: -10px; } | |
.no-js .quote-icon-end.animate-slide-in-up { bottom: 0; } | |
.quote-content { margin: 30px auto 0; } | |
.quote-author { margin: 10px auto 30px; } | |
/* Links | |
/* ================================================= */ | |
.links { | |
margin-top: 40px; | |
font-size: 14px; | |
} | |
.links a { | |
display: inline-block; | |
position: relative; | |
margin-left: 10px; | |
text-decoration: none; | |
border-bottom: 1px dotted; | |
transition: border .3s ease, color .3s ease; | |
} | |
.links a:hover { border-bottom: 1px solid; } | |
.links a:active { top: 1px ; } | |
.links a:first-child { margin-left: 0; } | |
/* Location | |
/* ================================================= */ | |
.location { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
margin-top: 40px; | |
} | |
.location-icon { font-size: 14px; } | |
.location-text { | |
margin-left: 6px; | |
font-size: 13px; | |
} | |
.relocating { | |
opacity: 0; | |
font-size: 13px; | |
transition: all .3s ease; | |
} | |
/* LIGHT MODE | |
/* ================================================= */ | |
html { background-color: white; } | |
body { color: #333; } | |
::selection { background: #222; color: white; } | |
h1 { color: #222; } | |
.quote { color: #666; } | |
.quote-icon { color: #ccc; } | |
.quote-line { background: #eee; } | |
a { color: #333; } | |
.links a { border-bottom-color: #999; } | |
.links a:hover { border-bottom-color: #333; } | |
.location { color: #666; } | |
.relocating { color: #ccc; } | |
/* DARK MODE | |
/* ================================================= */ | |
@media (prefers-color-scheme: dark) { | |
html { background: #121621; } | |
body { color: #6C7486; } | |
::selection { background: #222; color: #99A3BA; } | |
h1 { color: #E4ECFA; } | |
.quote { color: #6C7486; } | |
.quote-icon { color: #3F4656; } | |
.quote-line { background: #242836; } | |
a { color: #99A3BA; } | |
.links a { border-bottom-color: #6C7486; } | |
.links a:hover { color: #E4ECFA; border-bottom-color: #99A3BA; } | |
.location { color: #6C7486; } | |
} | |