tylerperkins.xyz/static/css/styles.css

306 lines
5.4 KiB
CSS
Raw Normal View History

2023-07-15 22:44:31 +00:00
/* General Formatting*/
@font-face {
font-family: 'Hermit';
2023-09-12 03:20:14 +00:00
src: url('https://www.clortox.com/fonts/Hermit-Regular.woff') format('woff');
url('https://www.clortox.com/fonts/Hermit-Regular.woff2') format('woff2');
2023-07-15 22:44:31 +00:00
font-weight: normal;
font-style: normal;
font-display: swap;
}
2023-07-19 02:44:03 +00:00
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: white }
}
2023-07-15 22:44:31 +00:00
body {
overflow-x: hidden;
margin: 0;
height: 100%;
padding-bottom: 0px;
2023-07-18 03:17:11 +00:00
background-color: rgba(11,11,12,1);
2023-07-15 22:44:31 +00:00
}
2023-09-05 23:36:06 +00:00
h1, h2, h3 {
2023-07-15 22:44:31 +00:00
font-family: 'Hermit', Helvetica, Arial, sans-serif;
font-size: 56px;
line-height: 80px;
text-shadow: 1px 1px 1px grey;
color: white;
}
2023-09-05 23:36:06 +00:00
h4 {
font-family: 'Hermit', Helvetica, Arial, sans-serif;
font-size: 40px;
line-height: 60px;
text-shadow: 1px 1px 1px grey;
color: white;
}
2023-07-15 22:44:31 +00:00
p, a, li, tr, td, span, noscript, figcaption {
font-family: 'Hermit', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 25px;
color: white;
}
2023-10-20 13:34:25 +00:00
code {
font-family: 'Hermit', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 25px;
color: white;
}
2023-07-15 22:44:31 +00:00
html {
scroll-behavior: smooth;
2023-07-16 00:59:44 +00:00
overflow-x: hidden;
2023-07-15 22:44:31 +00:00
width: 100vw;
-ms-overflow-style: none;
scrollbar-width: none;
}
2023-07-16 00:59:44 +00:00
::-webkit-scrollbar {
display: none;
}
2023-06-28 01:35:17 +00:00
.centered {
width: 100vw;
max-width: 100%;
height: 100vh;
}
.top-fade {
2023-07-19 02:44:03 +00:00
background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 30%, rgba(0,0,0,0.0001) 100%)
2023-06-28 01:35:17 +00:00
}
.dashed-bottom {
2023-09-05 23:36:06 +00:00
border-bottom: 5px solid rgba(11,11,12,1);
2023-07-16 00:59:44 +00:00
}
2023-07-15 22:44:31 +00:00
.intro-content {
text-align: center;
2023-07-18 03:17:11 +00:00
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
2023-07-19 02:44:03 +00:00
}
.typewriter {
animation: blink-caret .75s step-end infinite;
border-right: .15em solid white;
display: inline;
}
2023-07-16 00:59:44 +00:00
2023-07-19 02:44:03 +00:00
.homepage-card {
2023-09-05 23:36:06 +00:00
height: calc(70vh - 6vh);
2023-07-19 02:44:03 +00:00
width: calc(100vw - 6vw);
padding: 1vh 1vw;
padding-top: 2vh;
background-color: rgba(11,11,12,0.4);
corner-radius: 10px;
margin: 2vh 2vw;
2023-09-05 23:36:06 +00:00
display: flex;
flex-direction: column;
2023-07-20 02:14:23 +00:00
overflow-y: hidden;
2023-07-19 02:44:03 +00:00
}
.about-grid {
display: grid;
grid-template-columns: 65% 1fr;
2023-07-20 02:14:23 +00:00
grid-template-rows: 1fr max-content;
2023-09-05 23:36:06 +00:00
flex-grow: 1;
2023-07-20 02:14:23 +00:00
width: 100%;
2023-09-05 23:36:06 +00:00
max-height: calc(100% - 100px);
overflow-y: hidden;
2023-07-20 02:14:23 +00:00
}
.card-title {
display: inline-block;
margin: 10px;
margin-right: auto;
padding-right: 10px;
}
2023-07-19 02:44:03 +00:00
2023-07-29 02:45:54 +00:00
.about-description {
margin: 5px;
}
2023-07-20 02:14:23 +00:00
.about-description p {
word-wrap: break-word;
white-space: pre-wrap;
2023-07-19 02:44:03 +00:00
}
2023-07-31 00:38:55 +00:00
.terminal-text {
word-wrap: break-word;
margin-top: 0.2em;
margin-bottom: 0.2em;
}
.mini-terminal {
2023-07-19 02:44:03 +00:00
background-color: black;
2023-09-05 23:36:06 +00:00
height: calc(100% - 20px);
max-height: calc(100% - 20px);
2023-07-19 02:44:03 +00:00
padding: 10px;
2023-07-18 03:17:11 +00:00
}
2023-07-16 00:59:44 +00:00
2023-09-05 23:36:06 +00:00
.terminal-contents {
overflow-y: scroll;
}
2023-07-16 00:59:44 +00:00
.page-header {
text-align: center;
padding: 50px;
background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 40%, rgba(0,0,0,0) 100%)
}
.post-list-title {
text-align: left;
font-size: 40px;
margin: 0px;
}
.post-list-image-container {
position: relative;
width: 20%;
padding-bottom: 20%;
overflow: hidden;
float: right;
margin-left: auto;
}
.post-list-body-container {
width: 80%;
float: left;
padding: 0px 20px;
}
.full-width {
width: 100% !important;
}
.post-list-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
2023-09-20 00:11:17 +00:00
.link-block {
display: inline-flex;
align-items: center;
}
2023-09-12 02:45:24 +00:00
article > a {
2023-07-16 00:59:44 +00:00
text-decoration: none;
display: flex;
padding: 50px;
height: 30vh;
padding-bottom: 25px;
overflow: hidden;
2023-09-05 23:36:06 +00:00
background: linear-gradient(rgba(11,11,12,0) 0%, rgba(11,11,12,0.6) 5%, rgba(0,0,0,0) 100%);
transition: background 200ms linear;
2023-07-18 03:17:11 +00:00
}
2023-09-12 02:45:24 +00:00
article > a:hover {
2023-09-05 23:36:06 +00:00
background: black;
2023-09-20 00:11:17 +00:00
transition: background 200ms linear;
2023-07-16 00:59:44 +00:00
}
.post {
2023-09-20 00:11:17 +00:00
margin-right: 7vw;
margin-left: 7vw;
2023-09-12 02:45:24 +00:00
margin-top: 3vh;
margin-bottom: 1vh;
2023-09-20 00:11:17 +00:00
padding: 3vh 3vw;
background-color: rgba(11,11,12,0.4);
border-radius: 5px;
2023-07-16 00:59:44 +00:00
}
img {
max-width: 100%;
height: auto;
}
figure {
border: 2px dashed #e6e6e6;
padding: 2vw;
margin: auto;
max-width: 70%;
margin-bottom: 20px;
background: rgba(22, 22, 22, 0.9);
}
.figure-left {
float: left;
margin-right: 10px;
max-width: 55%;
}
.figure-right {
float: right;
margin-left: 10px;
max-width: 55%;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
@media only screen and (max-width: 768px) {
.post-list-image-container {
display: none;
}
.post-list-title{
text-align: center;
}
.post-list-body-container {
width: 100%;
float: none;
padding: 0px;
}
article a {
padding: 0px;
height: 100%;
2023-09-05 23:36:06 +00:00
max-height: 75vh;
margin-bottom: 1vh;
2023-07-16 00:59:44 +00:00
flex-direction: column;
text-align: center;
}
figure {
border: 2px dashed #e6e6e6;
padding: 2vw;
margin: auto;
max-width: 100%;
background: rgba(22, 22, 22, 0.9);
margin-bottom: 20px;
}
2023-09-05 23:36:06 +00:00
.about-grid {
display: grid;
grid-template-rows: 60% 40%;
grid-template-columns: 100%;
height: 100%;
width: 100%;
}
.about-description {
margin: 5px;
overflow-y: scroll;
}
2023-07-16 00:59:44 +00:00
}