Refactored, redesigned Authmethods
This commit is contained in:
+31
-106
@@ -1,110 +1,35 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
|
||||
@font-face {
|
||||
font-family: "EB Garamond";
|
||||
src: url("static/assets/EBGaramond-0.016/ttf/EBGaramond12-Regular.ttf"), url("static/assets/EBGaramond-0.016/otf/EBGaramond12-Regular.otf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal; }
|
||||
|
||||
html {
|
||||
border: 1px solig gray;
|
||||
font-family: "DejaVu Serif"; }
|
||||
font-family: "EB Garamond";
|
||||
font-optical-sizing: auto; }
|
||||
|
||||
div.entry {
|
||||
border: 1px solid gray;
|
||||
padding: 10px 15px;
|
||||
margin: 0px; }
|
||||
div.entry div.entrymeta {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
cursor: pointer; }
|
||||
div.entry div.entrymeta span.time {
|
||||
color: gray; }
|
||||
div.entry div.entrymeta span.user {
|
||||
text-decoration: underline; }
|
||||
div.entry div.entrymeta img.userimage {
|
||||
width: 80px; }
|
||||
div.entry div.contents p {
|
||||
margin: 8pt 0pt; }
|
||||
div.entry img {
|
||||
max-width: 100%; }
|
||||
div.entry.comment {
|
||||
border: none;
|
||||
padding: 0px 15px;
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
gap: 5px; }
|
||||
div.entry.comment .left {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
div.entry.comment .left .spacer {
|
||||
background-color: black;
|
||||
height: 100%;
|
||||
width: 6%;
|
||||
margin: 0px 47%; }
|
||||
h1 {
|
||||
font-family: "cheltenhamclassic", serif; }
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 400px;
|
||||
max-width: 100%; }
|
||||
form textarea {
|
||||
resize: vertical;
|
||||
font-size: 1.0rem; }
|
||||
form.create {
|
||||
border: 1px solid gray;
|
||||
padding: 10px 15px;
|
||||
margin: 0px; }
|
||||
form hr {
|
||||
width: 100%; }
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button,
|
||||
select {
|
||||
padding: 4pt 6pt;
|
||||
margin: 3pt 0pt;
|
||||
border: 2px solid black;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px; }
|
||||
input:hover,
|
||||
textarea:hover,
|
||||
button:hover,
|
||||
select:hover {
|
||||
box-shadow: 1px 1px; }
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
button:focus,
|
||||
select:focus {
|
||||
box-shadow: 3px 3px black;
|
||||
outline: none; }
|
||||
|
||||
button {
|
||||
background-color: #ffabcd; }
|
||||
|
||||
#response div {
|
||||
padding: 4pt 6pt; }
|
||||
|
||||
#response .error {
|
||||
color: red; }
|
||||
|
||||
.loading {
|
||||
background-color: #fffa;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
transition: background-color 5s;
|
||||
transition-timing-function: ease-in; }
|
||||
|
||||
.post {
|
||||
#main-frame {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
border: 1px solid black;
|
||||
padding: 15px 15px;
|
||||
margin: 10px 0px; }
|
||||
.post img {
|
||||
max-width: 100%;
|
||||
max-height: 800px; }
|
||||
.post .meta {
|
||||
color: gray; }
|
||||
.post .content {
|
||||
margin: 10px 0px; }
|
||||
border-top: none;
|
||||
border-bottom: none; }
|
||||
|
||||
hr {
|
||||
border-top: 1px solid black;
|
||||
border-bottom: none;
|
||||
margin: 0px; }
|
||||
|
||||
.entry .meta {
|
||||
color: gray;
|
||||
margin: 2pt 4pt; }
|
||||
|
||||
.entry .content {
|
||||
margin: 10pt; }
|
||||
|
||||
.entry img {
|
||||
max-width: 100%; }
|
||||
|
||||
+215
-165
@@ -1,178 +1,228 @@
|
||||
// @font-face {
|
||||
// font-family: 'avenir';
|
||||
// src: url('/static/avenir-font/AvenirLTStd-Medium.otf');
|
||||
// font-weight: normal;
|
||||
// font-style: normal;
|
||||
// }
|
||||
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
|
||||
|
||||
@font-face {
|
||||
font-family: "EB Garamond";
|
||||
src:
|
||||
url("static/assets/EBGaramond-0.016/ttf/EBGaramond12-Regular.ttf"),
|
||||
url("static/assets/EBGaramond-0.016/otf/EBGaramond12-Regular.otf")
|
||||
format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
|
||||
// font-family: "avenir";
|
||||
// font-weight: 400;
|
||||
// font-style: normal;
|
||||
|
||||
// background-color: #e9e9ed;
|
||||
border: 1px solig gray;
|
||||
// border-radius: 5px;
|
||||
font-family: "DejaVu Serif";
|
||||
font-family: "EB Garamond";
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
div.entry {
|
||||
// background-color: green;
|
||||
border: 1px solid gray;
|
||||
padding: 10px 15px;
|
||||
margin: 0px;
|
||||
|
||||
div.entrymeta {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
span.time {
|
||||
// background-color: red;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
span.user {
|
||||
// background-color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img.userimage {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
div.contents {
|
||||
// background-color: yellow;
|
||||
|
||||
p {
|
||||
// background-color: orange;
|
||||
margin: 8pt 0pt;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&.comment {
|
||||
border: none;
|
||||
padding: 0px 15px;
|
||||
margin: 0px;
|
||||
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
|
||||
.left {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// background-color: green;
|
||||
|
||||
.spacer {
|
||||
background-color: black;
|
||||
height: 100%;
|
||||
width: 6%;
|
||||
margin: 0px 47%;
|
||||
}
|
||||
}
|
||||
// .right {
|
||||
// background-color: red;
|
||||
// }
|
||||
// .contents {
|
||||
// display: flex;
|
||||
// }
|
||||
}
|
||||
h1 {
|
||||
font-family: "cheltenhamclassic", serif;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
|
||||
textarea {
|
||||
// width: 100%;
|
||||
resize: vertical;
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
|
||||
&.create {
|
||||
border: 1px solid gray;
|
||||
padding: 10px 15px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button,
|
||||
select {
|
||||
padding: 4pt 6pt;
|
||||
margin: 3pt 0pt;
|
||||
border: 2px solid black;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 1px 1px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 3px 3px black;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #ffabcd;
|
||||
}
|
||||
|
||||
#response {
|
||||
div {
|
||||
padding: 4pt 6pt;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
// background-image: url('/static/spinner.gif');
|
||||
background-color: #fffa;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
transition: background-color 5s;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
.post {
|
||||
#main-frame {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
border: 1px solid black;
|
||||
padding: 15px 15px;
|
||||
margin: 10px 0px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 800px;
|
||||
}
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid black;
|
||||
border-bottom: none;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.entry {
|
||||
.meta {
|
||||
color: gray;
|
||||
margin: 2pt 4pt;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 10px 0px;
|
||||
margin: 10pt;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// // @font-face {
|
||||
// // font-family: 'avenir';
|
||||
// // src: url('/static/avenir-font/AvenirLTStd-Medium.otf');
|
||||
// // font-weight: normal;
|
||||
// // font-style: normal;
|
||||
// // }
|
||||
|
||||
// html {
|
||||
|
||||
// // font-family: "avenir";
|
||||
// // font-weight: 400;
|
||||
// // font-style: normal;
|
||||
|
||||
// // background-color: #e9e9ed;
|
||||
// border: 1px solig gray;
|
||||
// // border-radius: 5px;
|
||||
// font-family: "DejaVu Serif";
|
||||
// }
|
||||
|
||||
// div.entry {
|
||||
// // background-color: green;
|
||||
// border: 1px solid gray;
|
||||
// padding: 10px 15px;
|
||||
// margin: 0px;
|
||||
|
||||
// div.entrymeta {
|
||||
// display: flex;
|
||||
// justify-content: left;
|
||||
// align-items: center;
|
||||
// gap: 15px;
|
||||
// cursor: pointer;
|
||||
|
||||
// span.time {
|
||||
// // background-color: red;
|
||||
// color: gray;
|
||||
// }
|
||||
|
||||
// span.user {
|
||||
// // background-color: blue;
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
|
||||
// img.userimage {
|
||||
// width: 80px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// div.contents {
|
||||
// // background-color: yellow;
|
||||
|
||||
// p {
|
||||
// // background-color: orange;
|
||||
// margin: 8pt 0pt;
|
||||
// }
|
||||
// }
|
||||
|
||||
// img {
|
||||
// max-width: 100%;
|
||||
// }
|
||||
|
||||
// &.comment {
|
||||
// border: none;
|
||||
// padding: 0px 15px;
|
||||
// margin: 0px;
|
||||
|
||||
// display: flex;
|
||||
// gap: 5px;
|
||||
|
||||
// .left {
|
||||
// width: 70px;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// // background-color: green;
|
||||
|
||||
// .spacer {
|
||||
// background-color: black;
|
||||
// height: 100%;
|
||||
// width: 6%;
|
||||
// margin: 0px 47%;
|
||||
// }
|
||||
// }
|
||||
// // .right {
|
||||
// // background-color: red;
|
||||
// // }
|
||||
// // .contents {
|
||||
// // display: flex;
|
||||
// // }
|
||||
// }
|
||||
// }
|
||||
|
||||
// form {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// width: 400px;
|
||||
// max-width: 100%;
|
||||
|
||||
// textarea {
|
||||
// // width: 100%;
|
||||
// resize: vertical;
|
||||
// font-size: 1.0rem;
|
||||
// }
|
||||
|
||||
// &.create {
|
||||
// border: 1px solid gray;
|
||||
// padding: 10px 15px;
|
||||
// margin: 0px;
|
||||
// }
|
||||
|
||||
// hr {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// input,
|
||||
// textarea,
|
||||
// button,
|
||||
// select {
|
||||
// padding: 4pt 6pt;
|
||||
// margin: 3pt 0pt;
|
||||
// border: 2px solid black;
|
||||
// cursor: pointer;
|
||||
// box-shadow: 0px 0px;
|
||||
|
||||
// &:hover {
|
||||
// box-shadow: 1px 1px;
|
||||
// }
|
||||
|
||||
// &:focus {
|
||||
// box-shadow: 3px 3px black;
|
||||
// outline: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
// button {
|
||||
// background-color: #ffabcd;
|
||||
// }
|
||||
|
||||
// #response {
|
||||
// div {
|
||||
// padding: 4pt 6pt;
|
||||
// }
|
||||
|
||||
// .error {
|
||||
// color: red;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .loading {
|
||||
// // background-image: url('/static/spinner.gif');
|
||||
// background-color: #fffa;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: center;
|
||||
// align-content: center;
|
||||
// transition: background-color 5s;
|
||||
// transition-timing-function: ease-in;
|
||||
// }
|
||||
|
||||
// .post {
|
||||
// border: 1px solid black;
|
||||
// padding: 15px 15px;
|
||||
// margin: 10px 0px;
|
||||
// img {
|
||||
// max-width: 100%;
|
||||
// max-height: 800px;
|
||||
// }
|
||||
// .meta {
|
||||
// color: gray;
|
||||
// }
|
||||
// .content {
|
||||
// margin: 10px 0px;
|
||||
// }
|
||||
// }
|
||||
|
||||
Reference in New Issue
Block a user