superselect/natalie-webbed-site
1
0
Fork 0
forked from nat/webbed-site
Code Pull Requests Activity

You said you would merge it, I'm holding you to this, just fix it after the merge, I don't care

Browse Source
This commit is contained in:
Albert Briscoe 2024-08-24 00:02:52 -07:00
parent 3d8ff34e5a
commit 056ca5605a
1 changed files with 0 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

394
style.css
View File

@ -1,394 +0,0 @@
@font-face {
font-family: 'MapleMono';
src: url('/font/MapleMono.ttf') format('truetype');
}
@font-face {
font-family: 'MapleMonoItalic';
src: url('/font/MapleMonoItalic.ttf') format('truetype');
}
@media (max-width: 1400px) {
body {
margin: 0%;
width: 100%
}
}
@media (min-width: 1400px) {
body {
margin: 0 20%;
width: 60%;
}
}
* {
font-family: 'MapleMono';
font-size: 16.5px;
text-wrap: wrap;
}
:root {
--bg: #F2F4F8;
--alt-bg: #dde1e6;
--fg: #161616;
--hl: #33b1ff;
--link: #0f62fe;
--visited-link: #673ab7;
--highlight: #0f62fe;
--gray: #525252;
background: var(--bg);
background-image: radial-gradient(var(--gray) 2px, var(--alt-bg) 2px);
background-size: 1vw 1vh;
display: flex;
justify-content: center;
align-items: center;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #161616;
--alt-bg: #262626;
--fg: #f2f4f8;
--hl: #0f62fe;
--link: #33b1ff;
--visited-link: #be95ff;
--highlight: #33b1ff;
--gray: #202020;
}
}
body {
text-wrap: wrap;
max-width: 100%;
min-height: 100vh;
background-color: var(--bg);
color: var(--fg);
overflow: auto;
word-wrap: break-word;
overflow-wrap: break-word;
display: flex;
flex-direction: column;
}
h1 {
font-size: 33px;
font-weight: normal;
}
h2 {
font-size: 22px;
font-family: 'MapleMonoItalic';
font-weight: normal;
}
h3 {
font-size: 18px;
font-weight: bold;
}
img {
max-width: 100%;
height: auto;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
header {
padding-top: 10px;
position: -webkit-sticky;
position: sticky;
background-color: var(--bg);
top: 0;
width: 100%;
z-index: 100000;
display: flex;
align-items: flex-start;
overflow: clip;
> nav {
border-bottom: 1px solid var(--fg);
width: 100%;
> ul {
margin: 0;
padding: 0;
display: flex;
align-items: baseline;
justify-content: flex-start;
list-style-type: none;
> li {
padding: 10px;
> h1 {
display: inline
}
}
}
}
}
footer {
background-color: var(--alt-bg);
border-bottom: none;
margin: 15px;
padding: 5px;
margin-bottom: 0;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
> a > img {
align-self: end;
}
}
section {
display: flex;
flex-direction: column;
justify-content: center;
background: var(--alt-bg);
box-shadow: 10px 10px var(--gray);
margin: 15px 30px;
padding: 20px;
> details[open] > summary {
padding-bottom: 5px;
}
> p {
margin: 5px 0;
}
> h1, h2, h3 {
margin: 10px 0;
}
&.ignore-section {
background: var(--bg);
box-shadow: none;
margin: 0;
padding: 5px 10px;
}
}
form {
background: var(--alt-bg);
display: flex;
flex-direction: column;
width: 50%;
padding: 20px;
margin: 15px 0;
box-shadow: 10px 10px var(--gray);
> button {
margin: 10px;
padding: 10px;
border: none;
color: var(--fg);
background: var(--bg);
&:hover {
background: var(--hl);
}
}
> input {
color: var(--fg);
margin: 10px;
border: none;
background: var(--bg);
&:focus {
outline: none;
}
}
}
figure {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 125%;
background: var(--bg);
margin: 0;
margin-bottom: 15px;
> a {
padding: 10px;
padding-bottom: 0;
> img {
height: auto;
width: 100%;
}
}
> figcaption {
display: flex;
justify-content: center;
text-align: center;
padding: 5px;
margin: 0;
}
}
table {
width: auto;
border-collapse: collapse;
}
th, td {
padding-left: 10px;
padding-right: 10px;
text-align: left;
}
th:first-child, td:first-child {
width: 20%;
}
th:last-child, td:last-child {
width: 20%;
}
iframe {
border: none;
padding: 0;
margin: 0;
width: 100%;
overflow: hidden;
}
summary {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
code, pre {
background: var(--bg);
margin: 10px;
padding: 5px;
overflow: clip;
}
xmp {
margin: 20px;
}
a {
color: var(--link);
}
a:visited {
color: var(--visited-link);
}
.post {
background: var(--alt-bg);
box-shadow: 10px 10px var(--gray);
margin: 30px;
padding: 20px;
}
.italic {
font-family: 'MapleMonoItalic' !important;
}
.captioned-image {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 100%;
background: var(--bg);
margin-bottom: 15px;
margin-right: 10px;
> img {
height: auto;
padding: 10px;
}
> p {
display: flex;
justify-content: center;
text-align: center;
padding: 5px;
margin: 0;
}
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
::selection {
background: var(--highlight)
}
image-column-container {
min-width: 100%;
display: flex;
flex-direction: row;
}
image-container {
display: flex;
margin-right: 5px;
flex: 1;
width: 33%;
height: auto;
}
flex-column {
width: 100%;
display: flex;
flex-direction: column;
> captioned-image {
max-width: 100%;
}
}
image-column img {
width: 100%;
height: auto;
}
text-column {
max-width: 66%
}
flex-grid {
display: flex;
flex-wrap: wrap;
}
flex-grid-item {
flex: 1 0 200px;
margin: 5px;
overflow: hidden;
position: relative;
}
flex-grid-item > img {
max-width: 110%;
height: auto;
display: block;
}
@media (max-width: 700px) {
image-container {display: inline-block; min-width: 100% !important}
div.captioned-image {min-width: 100%; margin-right: 0;}
text-column {display: inline-block; max-width: 100%;}
image-column-container {flex-direction: column;}
header > nav > ul > li > h1 { display: none};
}