288 lines
6.6 KiB
CSS
288 lines
6.6 KiB
CSS
@charset "UTF-8";
|
||
|
||
html {
|
||
padding: 0;
|
||
margin: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
background: var(--accent-color);
|
||
}
|
||
|
||
body {
|
||
margin: 0 1.5%;
|
||
|
||
background: var(--background-color);
|
||
|
||
min-height: calc(100% - 40px);
|
||
|
||
/*The height of the footer at the bottom*/
|
||
padding: 0 0 40px;
|
||
|
||
font-size: 16px;
|
||
color: var(--text-color);
|
||
font-family: Helvetica, Arial, sans-serif;
|
||
|
||
-webkit-text-size-adjust: 100%;
|
||
}
|
||
|
||
.main-wrap {
|
||
max-width: 36em;
|
||
margin: 20px 30px;
|
||
}
|
||
|
||
.thought {
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.thought.highlighted .main, .thought.highlighted .extended {
|
||
margin-left: 25px;
|
||
}
|
||
|
||
/* Standard button styles, most prominently used on the show-more buttons */
|
||
button, input[type="button"], input[type="submit"], .button {
|
||
background: none;
|
||
border: none;
|
||
border-radius: 0;
|
||
cursor: pointer;
|
||
color: var(--accent-color);
|
||
margin: 3px 6px;
|
||
padding: 0;
|
||
border-bottom: 1px solid transparent;
|
||
outline: none;
|
||
font-size: 13px;
|
||
}
|
||
form input[type="submit"] {
|
||
font-size: 15px;
|
||
}
|
||
button:hover, button:focus,
|
||
input[type="button"]:hover, input[type="button"]:focus,
|
||
input[type="submit"]:hover, input[type="submit"]:focus,
|
||
.button:hover, .button:focus {
|
||
/* border-bottom-color: var(--accent-color); */
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Textbox/textarea styles */
|
||
textarea, input[type="text"], input[type="search"], input[type="password"] {
|
||
padding: 0 2px;
|
||
outline: none;
|
||
resize: none;
|
||
background: none;
|
||
border: none;
|
||
font-size: inherit;
|
||
color: inherit;
|
||
font-family: inherit;
|
||
border-bottom: 1px solid var(--accent-color);
|
||
border-radius: 0;
|
||
overflow-x: hidden;
|
||
display: inline-block;
|
||
line-height: 1.5;
|
||
}
|
||
textarea::placeholder, input[type="text"]::placeholder {
|
||
color: var(--text-color);
|
||
opacity: 50%;
|
||
}
|
||
textarea {
|
||
display: block;
|
||
}
|
||
|
||
form {
|
||
margin-bottom: 4em;
|
||
}
|
||
|
||
.text, .thought-end {
|
||
max-width: 100%;
|
||
line-height: 1.5em;
|
||
}
|
||
|
||
.thought .text {
|
||
white-space: pre-wrap;
|
||
font-family: inherit;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.main-text, .main-text p:last-child {
|
||
display: inline; /*inline so that the Show More is on the same line*/
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: var(--accent-color);
|
||
}
|
||
.text p {
|
||
padding: 0;
|
||
margin: 0;
|
||
overflow-wrap: break-word;
|
||
}
|
||
.text > :not(:last-child) {
|
||
margin-bottom: 1em;
|
||
}
|
||
/*Inline code*/
|
||
.text p > code {
|
||
border-radius: 3px;
|
||
padding: 1px 5px;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
}
|
||
/*Code blocks*/
|
||
.text pre {
|
||
margin: 0;
|
||
overflow-x: auto;
|
||
display: block;
|
||
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border-radius: 3px;
|
||
padding: 3px 7px;
|
||
}
|
||
.text pre > code {
|
||
/* block forces the text to the whole width, but since inline-block is buggy in Safari, this is our best option */
|
||
display: block;
|
||
}
|
||
/* Emphasis blocks on the About page */
|
||
em.text, .text.quote, .text em {
|
||
color: var(--accent-color);
|
||
}
|
||
h1 {
|
||
text-decoration: underline;
|
||
text-decoration-color: var(--accent-color);
|
||
}
|
||
|
||
.extended-media {
|
||
max-width: calc(100% - 20px);
|
||
max-height: 500px;
|
||
margin: 10px;
|
||
display: block;
|
||
}
|
||
|
||
.extended-text {
|
||
margin-top: 1em;
|
||
display: block; /*Needs to be inline-block or block, so that margin on it works*/
|
||
}
|
||
|
||
.thought .main {
|
||
min-height: 1em;
|
||
}
|
||
|
||
.thought-end {
|
||
overflow: auto;
|
||
font-size: 14px;
|
||
color: var(--accent-color);
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.thought hr {
|
||
margin: 0;
|
||
border-style: none;
|
||
border-bottom: 1px var(--accent-color) solid;
|
||
}
|
||
|
||
.timestamp, .permalink {
|
||
float: right;
|
||
}
|
||
|
||
.permalink {
|
||
margin-left: 6px;
|
||
color: var(--text-color);
|
||
}
|
||
.permalink .button, .permalink .button:visited {
|
||
color: var(--accent-color);
|
||
margin-left: 2px;
|
||
font-size: 14px;
|
||
}
|
||
.permalink .button:hover {
|
||
text-decoration: underline;
|
||
}
|
||
.permalink::before {
|
||
content: "•";
|
||
}
|
||
.edit-link .button {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.transcript {
|
||
white-space: pre-wrap;
|
||
font-family: inherit;
|
||
overflow-wrap: break-word;
|
||
padding-left: 5px;
|
||
line-height: 1.5;
|
||
}
|
||
.transcript, .transcript-button {
|
||
font-size: 14px;
|
||
}
|
||
.transcript-label {
|
||
color: var(--accent-color);
|
||
font-size: 16px;
|
||
padding-bottom: 0.5em;
|
||
padding-left: 3px;
|
||
}
|
||
|
||
/* Navbar styles */
|
||
#main-nav {
|
||
padding: 4% 30px 15px;
|
||
font-size: 3rem !important;
|
||
font-weight: normal;
|
||
margin: 0;
|
||
overflow: auto;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
#main-nav .text {
|
||
color: var(--text-color);
|
||
|
||
font-family: Georgia, Libre Baskerville, serif;
|
||
}
|
||
|
||
#main-nav h1 {
|
||
/* Disable browser styles for h1 */
|
||
font-size: inherit;
|
||
font-weight: inherit;
|
||
display: inline;
|
||
}
|
||
|
||
.history-nav {
|
||
margin-top: 30px;
|
||
margin-bottom: 40px;
|
||
margin-left: 20px;
|
||
}
|
||
.history-nav ul {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.history-nav li {
|
||
line-height: 1.3;
|
||
}
|
||
.history-nav li::before {
|
||
content: "➤";
|
||
}
|
||
.history-nav li > * {
|
||
margin-left: 10px;
|
||
}
|
||
.history-nav .current-page {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.history-nav a, .history-nav a:visited {
|
||
color: var(--accent-color);
|
||
}
|
||
.history-nav a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Super Thoughts */
|
||
#super-thoughts {
|
||
position: fixed;
|
||
}
|
||
#super-thoughts::before {
|
||
content: "Welcome to Super Thoughts! The way that the web as a platform exists today is such that I, as the creator of this website that you have opened, have complete control over all of the pixels that your web browser gives me. For a phone, that’s a small number of pixels, and I can fit my Thoughts in there nicely. But this device is significantly bigger. Too big, in my opinion. I don’t need or want this many pixels. But there is no way to abdicate responsibility. I have to give you 100% of a website, whether I want to or not. I can’t leave this space blank. I can fill it in with white or the background color, but there has to be something here, and I have to be the one to put it here. It’s a blessing too, I suppose. If I didn’t have complete control, I would want it. I used to strive to maintain complete control over my own life. It’s hard for me to recognize that that’s not how real-life works. When I have a small area, like this website, that this is truly mine, it seems like a shame to leave areas of it empty and unused. But the main reason I’m typing this, and that you’re seeing it, is aestetic. The webpage would look... off balance with nothing here. This text is a counter weight, it stops the website from falling over. Thank you for your understanding. —Matthias";
|
||
position: fixed;
|
||
transform: rotate(-90deg);
|
||
height: calc(100vh - 80px);
|
||
width: calc(100vh - 80px);
|
||
top: 40px;
|
||
left: 1440px;
|
||
color: var(--text-color);
|
||
line-height: 1.5;
|
||
}
|