@charset "UTF-8";
-$text-color: #222;
-$link-color: #0000ee;
-$visited-link-color: #551a8b;
+html {
+ --body-background: white;
+ --header-background: #3c113e;
+ --header-color: white;
+ --text-background: white;
+ --text-color: #222;
+ --light-text-color: lighten(#222, 20%);
+ --lighter-text-color: lighten(#222, 30%);
+ --link-color: #0000ee;
+ --visited-link-color: #551a8b;
+ --gray: gray;
+ --note-background: #fbf7c1;
+ --blockquote-background: #eeeefd;
+}
+
+@media (prefers-color-scheme: dark) {
+ html {
+ --body-background: #113;
+ --header-background: black;
+ --text-background: #113;
+ --text-color: #eef;
+ --light-text-color: lighten(#eef, 20%);
+ --lighter-text-color: lighten(#eef2, 30%);
+ --link-color: #aaf;
+ --visited-link-color: #b767ff;
+ --gray: gray;
+ --note-background: #867f11;
+ --blockquote-background: #223;
+ }
+}
@import "opensans";
body {
font-family: "Open Sans", sans-serif;
- background: white;
- color: $text-color;
+ background: var(--body-background);
+ color: var(--text-color);
font-size: 100%;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ @media screen and (max-width: 50em) {
+ flex-direction: column;
+ }
}
a {
- color: $link-color;
+ color: var(--link-color);
text-decoration: none;
- border-bottom: 0.1em dotted $link-color;
+ border-bottom: 0.1em dotted var(--link-color);
&:visited {
- color: $visited-link-color;
- border-color: $visited-link-color;
+ color: var(--visited-link-color);
+ border-color: var(--visited-link-color);
}
&:hover {
border-bottom-style: solid;
}
header {
+ background: var(--header-background);
+ color: var(--header-color);
display: inline-block;
- h1 {
+ .header-title {
+ font-size: 2em;
font-weight: normal;
text-transform: uppercase;
- margin: 1em 0 0 1em;
+ margin: 4rem 1rem 2rem 1rem;
padding: 0 0.5em;
- color: lighten($text-color, 20%);
- background: #fafaff;
display: inline-block;
- a {
- border: none;
+ transform: rotate(-2deg);
+ }
+ a {
+ color: inherit;
+ border-color: var(--header-color);
+ &:visited {
+ color: inherit;
+ border-color: inherit;
}
}
- transform: rotate(-2deg);
position: relative;
z-index: 2;
+ max-width: 20em;
+ min-height: 100vh;
+ p.contact {
+ margin: 1rem 2rem;
+ }
+ nav {
+ font-weight: bold;
+ ul {
+ margin: 1rem 2rem;
+ padding: 0;
+ list-style: none;
+ li {
+ margin: 0;
+ padding: 0;
+ }
+ }
+ span {
+ display: block;
+ font-size: 90%;
+ font-weight: normal;
+ }
+ }
+ .about {
+ margin-top: 1em;
+ }
+ @media screen and (max-width: 50em) {
+ .header-title {
+ margin-top: 1em;
+ }
+ max-width: inherit;
+ min-height: inherit;
+ nav {
+ ul {
+ margin-top: 0;
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ gap: 1em;
+ }
+ span {
+ display: none;
+ }
+ }
+ .about {
+ margin-top: 0;
+ }
+ }
}
div.actions {
position: absolute;
- top: 1rem;
+ top: 0.5rem;
right: 1rem;
+ z-index: 100;
a {
- margin-left: 1rem;
+ background: white;
+ padding: 2px;
+ border: 1px solid black;
+ border-radius: 3px;
+ color: black;
+ margin-right: 1rem;
}
}
-main {
+main, footer {
margin: 0 4em;
padding: 1em;
- background: #fafaff;
max-width: 70em;
+ @media screen and (max-width: 50em) {
+ margin: 0;
+ }
+}
+
+main {
+ position: relative;
+ background: var(--text-background);
min-height: 70vh;
- clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
+ flex: 1;
}
-.home {
- nav a {
- text-transform: uppercase;
- display: inline-block;
- text-decoration: none;
- font-size: 500%;
- font-weight: bold;
- padding-top: 0.5em;
- line-height: 50%;
- width: 100%;
- span {
- font-size: 30%;
- }
- margin-bottom: 1rem;
- &.divers {
- width: 49%;
- }
- &.vrac {
- width: 49%;
- text-align: right;
- float: right;
+article {
+ margin-top: 2em;
+ max-width: 50em;
+ h1 {
+ margin: 0;
+ font-size: 400%;
+ @media screen and (max-width: 50em) {
+ font-size: 200%;
}
+ font-weight: bold;
+ text-transform: uppercase;
}
- .latest {
- margin-top: 2em;
- h2 {
- margin: 0;
- font-size: 400%;
- font-weight: bold;
- text-transform: uppercase;
- }
- .meta {
- padding-top: 0.5rem;
- padding-left: 0.5rem;
- color: lighten($text-color, 40%);
- }
+ .meta {
+ padding-top: 0.5rem;
+ padding-left: 0.5rem;
+ color: var(--lighter-text-color);
}
-}
-
-.post {
- max-width: 50em;
div.figure {
text-align: center;
margin: 1em 0;
img {
- border: 1px solid gray;
+ border: 1px solid var(--gray);
padding: 3px;
+ max-width: 90%;
+ max-height: 70vh;
}
.caption {
margin-top: 0;
font-style: italic;
}
}
- div.meta {
- margin-top: 3em;
- color: lighten($text-color, 40%);
+ p {
+ line-height: 160%;
+ }
+ code,
+ pre.screen {
+ background: #111;
+ color: white;
+ padding: 2px;
+ overflow: auto;
+ }
+ div.note {
+ background: var(--note-background);
+ padding: 0.2em 0.5em 0.2em 2em;
+ p {
+ margin: 0.5em 0;
+ }
+ }
+ blockquote {
+ background: var(--blockquote-background);
+ padding: 0.1em 1em;
+ clip-path: polygon(0px 0px, 94.27% 2px, 99.63% 2.65%, 98.39% 97.48%, 10% 100%, 0% 100%, 0px 0px);
}
}
.post-list {
+ margin-top: 2em;
+ h1 {
+ margin: 0;
+ font-size: 400%;
+ @media screen and (max-width: 50em) {
+ font-size: 200%;
+ }
+ font-weight: bold;
+ text-transform: uppercase;
+ }
ul, li {
margin: 0;
padding: 0;
font-size: 60%;
}
}
+}
+
+.older.post-list {
+ margin: 5em 0 2em 0;
+ padding: 1em 0;
+ border-top: 0.1em dotted var(--link-color);
+ border-bottom: 0.1em dotted var(--link-color);
+ line-height: 200%;
+ li {
+ display: inline;
+ a {
+ padding-top: 0;
+ display: inline;
+ font-size: 120%;
+ }
+ }
+}
+
+footer {
+ p {
+ text-align: right;
+ font-size: 100%;
+ }
+}
+
+div[contenteditable=true]:focus-within {
+ outline: 1px solid var(--gray);
+ outline-offset: 3px;
+}
+
+.inline-style-popup,
+.block-style-popup {
+ background: white;
+ box-shadow: 0 0 5px #666;
+ input {
+ display: none;
+ padding: 3px;
+ border: 1px inset #ccc;
+ background: white;
+ width: 0px;
+ transition: width ease 2s;
+ &.shown {
+ display: inline-block;
+ width: 400px;
+ }
+ }
+ button {
+ padding: 0 0.5em;
+ height: 2em;
+ text-align: center;
+ background: #eee;
+ border: 0px;
+ &:hover {
+ background: #ccc;
+ }
+ &[data-action=createLink] {
+ color: blue;
+ text-decoration: underline;
+ }
+ &.on {
+ background: #444;
+ color: white;
+ }
+ }
+ &.inline-style-popup button {
+ width: 2em;
+ padding: 0;
+ }
+ &.block-style-popup {
+ &.selected button {
+ display: none;
+ &.on {
+ display: block;
+ }
+ }
+ }
+}
+
+#quickedit {
+ position: sticky;
+ bottom: 10px;
+ display: flex;
+ justify-content: flex-end;
+ label {
+ display: inline-block;
+ margin-left: 6px;
+ cursor: pointer;
+ }
+ input {
+ display: none;
+ }
+
+ button,
+ span {
+ display: inline-block;
+ font-weight: normal;
+ background: white;
+ border: 1px solid #386ede;
+ box-shadow: 0 0 0 5px white;
+ padding: 1ex;
+ border-radius: 3px;
+ color: #386ede;
+ font-size: inherit;
+ letter-spacing: inherit;
+ line-height: inherit;
+ }
+ button:hover {
+ &:hover {
+ color: white;
+ background: #386ede;
+ }
+ }
+ button.error {
+ background: red;
+ color: white;
+ &:hover {
+ background: darken(red, 10%);
+ }
+ }
+
+ input:checked + span {
+ background: #386ede;
+ color: white;
+ }
+}
+
+main.post {
+ [contenteditable=true] div.figure {
+ cursor: pointer;
+ }
+ div.figure {
+ text-align: center;
+ line-height: initial;
+ span.empty::before {
+ min-height: 50px;
+ margin: 0 auto;
+ display: block;
+ width: 90%;
+ background: #eee;
+ padding: 1rem;
+ font-size: 200px;
+ content: "(image)";
+ color: #aaa;
+ }
+ }
+}
+
+.wiki-anchor-auto {
+ display: none;
+}
+#image-upload, #document-upload {
+ display: none;
}
projects / chloro.git / blobdiff