Redo website styling
This commit is contained in:
+217
-86
@@ -1,95 +1,239 @@
|
||||
@font-face {
|
||||
font-family: "DM Sans";
|
||||
src: url("/css/fonts/DM_Sans/DMSans-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DM Sans";
|
||||
src: url("/css/fonts/DM_Sans/DMSans-Italic.ttf");
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DM Mono";
|
||||
src: url("/css/fonts/DM_Mono/DMMono-Regular.ttf");
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #152528;
|
||||
--dark-bg: #0f1c1e;
|
||||
--txt: #e6eaea;
|
||||
--header-txt: #e85c51;
|
||||
--sec-header-txt: #ff8349;
|
||||
--link-txt: #5a93aa;
|
||||
--black: #14110F;
|
||||
--white: #D5DCF9;
|
||||
|
||||
--green-bg: #AABD8C;
|
||||
--beige-bg: #E9E3B4;
|
||||
--orange-bg: #F39B6D;
|
||||
--gray-bg: #788896;
|
||||
|
||||
--beige-fg: #654236;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--orange-bg);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--txt);
|
||||
font-family: 'Consolas', 'Courier', monospace;
|
||||
font-size: 130%
|
||||
background-color: var(--beige-bg);
|
||||
font-family: "DM Sans", "Helvetica", "Arial", sans-serif;
|
||||
margin: 0 auto;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
header {
|
||||
min-height: 52pt;
|
||||
nav {
|
||||
padding: 2rem;
|
||||
width: calc(100% - 4rem);
|
||||
height: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 95vw;
|
||||
justify-content: space-between;
|
||||
background: var(--gray-bg);
|
||||
}
|
||||
|
||||
.landing nav {
|
||||
position: fixed;
|
||||
background: none;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
white-space: nowrap;
|
||||
margin: 0 .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 465px) {
|
||||
nav li {
|
||||
padding: .5rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
white-space: nowrap;
|
||||
font-size: 1.75rem;
|
||||
margin: 0 1.75rem;
|
||||
overflow: hidden;
|
||||
transition: opacity calc(.8s * 1.5);
|
||||
}
|
||||
|
||||
.header-logo:hover + .header-text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Don't display header text to avoid nav collapsing */
|
||||
@media (max-width: 740px) {
|
||||
.header-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration-color: rgba(0,0,0,0);
|
||||
color: var(--black);
|
||||
transition: .4s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--black);
|
||||
}
|
||||
|
||||
.landing nav .header-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body:not(.landing) main {
|
||||
min-height: calc(100vh - 11rem);
|
||||
max-width: 60vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header a {
|
||||
display: inline-block;
|
||||
padding: 4pt 12pt;
|
||||
.landing-grid {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
|
||||
header img {
|
||||
height: 24pt;
|
||||
|
||||
.tl {
|
||||
background: var(--beige-bg);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
.tr {
|
||||
background: var(--green-bg);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 3rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.bl {
|
||||
background: var(--orange-bg);
|
||||
padding: .5rem;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.br {
|
||||
background: var(--gray-bg);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@keyframes floatChev {
|
||||
0% { transform: translate(-23px, -5px); }
|
||||
50% { transform: translate(-23px, 5px); }
|
||||
100% { transform: translate(-23px, -5px); }
|
||||
}
|
||||
|
||||
.br span {
|
||||
font-size: 46px;
|
||||
animation: floatChev 3s ease-in-out infinite;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.landing-lower {
|
||||
width: 100%;
|
||||
min-height: 56vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.ll {
|
||||
background: var(--green-bg);
|
||||
text-align: justify;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 790px) {
|
||||
.ll {
|
||||
padding-left: 20vw;
|
||||
}
|
||||
}
|
||||
|
||||
.ll h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.landing h2 {
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
padding-bottom: 24pt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: min(800px, 80vw);
|
||||
margin: 0 auto;
|
||||
padding-bottom: 24pt;
|
||||
}
|
||||
|
||||
.cowsay-wrapper {
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cowsay {
|
||||
font-family: monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
max-width: fit-content;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom:48pt;
|
||||
}
|
||||
|
||||
.portrait {
|
||||
max-width: min(220px, 60vw);
|
||||
.lr {
|
||||
background: var(--beige-bg);
|
||||
padding-left: 2rem;
|
||||
padding-right: 10vw;
|
||||
}
|
||||
|
||||
.skills {
|
||||
float: left !important;
|
||||
width: 100%;
|
||||
margin-bottom: 24pt;
|
||||
width: 50%;
|
||||
height: 17rem;
|
||||
}
|
||||
|
||||
/* float right when on desktop */
|
||||
@media (min-width: 500px) {
|
||||
.portrait {
|
||||
float: right;
|
||||
height: 300px;
|
||||
margin-left: 2rem;
|
||||
|
||||
|
||||
@media (max-width: 580px) {
|
||||
.landing-grid {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.landing {
|
||||
min-height: calc(100vh/4);
|
||||
}
|
||||
|
||||
.br {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.br span {
|
||||
transform: translate(0, -2rem) !important;
|
||||
}
|
||||
|
||||
.landing-lower {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ll {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.skills {
|
||||
width: 50%;
|
||||
height: 14rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.author {
|
||||
float: left;
|
||||
max-width: 400px;
|
||||
@@ -103,41 +247,28 @@ main {
|
||||
}
|
||||
|
||||
.code {
|
||||
background: var(--dark-bg);
|
||||
background: var(--green-bg);
|
||||
font-family: "DM Mono", monospace;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "DM Mono", monospace;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.cmd::before {
|
||||
content: '$ ';
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--header-txt);
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
color: var(--sec-header-txt);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 16pt;
|
||||
display: block;
|
||||
text-align: justify;
|
||||
line-height: 1.25;
|
||||
background: var(--green-bg);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-txt);
|
||||
text-decoration-color: rgba(0,0,0,0);
|
||||
transition: text-decoration .3s;
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
text-decoration-color: var(--link-txt);
|
||||
color: var(--beige-fg);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user