CC overhaul
This commit is contained in:
sairaj mote
GitHub
parent
22fbedcae7
commit
c9eaaf8f57
5849
components.js
5849
components.js
File diff suppressed because it is too large
Load Diff
1803
css/main.css
1803
css/main.css
File diff suppressed because it is too large
Load Diff
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
1882
css/main.scss
1882
css/main.scss
File diff suppressed because it is too large
Load Diff
19461
index.html
19461
index.html
File diff suppressed because one or more lines are too long
13
package-lock.json
generated
Normal file
13
package-lock.json
generated
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "p2p-content-collaboration",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"tiny-editor": {
|
||||
"version": "0.2.5",
|
||||
"resolved": "https://registry.npmjs.org/tiny-editor/-/tiny-editor-0.2.5.tgz",
|
||||
"integrity": "sha512-K4luWQbam/TrgjLst+Ztb7uPltXHwtFm+Oi1hs3xM6biI7N1X8HfyDtmROOEbyJM8+mMP5/FjsMnc96zJZoZCg=="
|
||||
}
|
||||
}
|
||||
}
|
||||
22
package.json
Normal file
22
package.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "p2p-content-collaboration",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "components.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/ranchimall/p2p-content-collaboration.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/ranchimall/p2p-content-collaboration/issues"
|
||||
},
|
||||
"homepage": "https://github.com/ranchimall/p2p-content-collaboration#readme",
|
||||
"dependencies": {
|
||||
"tiny-editor": "^0.2.5"
|
||||
}
|
||||
}
|
||||
3
purify.min.js
vendored
Normal file
3
purify.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
443
template/css/main.css
Normal file
443
template/css/main.css
Normal file
@ -0,0 +1,443 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 1.2rem);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: var(--foreground-color);
|
||||
}
|
||||
|
||||
body,
|
||||
body * {
|
||||
--accent-color: rgb(0, 156, 78);
|
||||
--text-color: 36, 36, 36;
|
||||
--background-color: 248, 248, 248;
|
||||
--foreground-color: rgb(255, 255, 255);
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--like-color: #e91e63;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
body[data-theme=dark],
|
||||
body[data-theme=dark] * {
|
||||
--accent-color: rgb(14, 230, 122);
|
||||
--text-color: 230, 230, 230;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--background-color: 10, 10, 10;
|
||||
--foreground-color: rgb(24, 24, 24);
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
}
|
||||
|
||||
body[data-theme=dark] sm-popup::part(popup) {
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
max-width: 70ch;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
p * {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.flow-column {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.gap-0-5 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-1-5 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.justify-self-center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.justify-self-start {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.justify-self-end {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.button {
|
||||
white-space: nowrap;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.button--primary {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
button:active,
|
||||
.button:active,
|
||||
sm-button:not([disabled]):active,
|
||||
.interact:active {
|
||||
-webkit-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.popup__header {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0 1.5rem 0 0.5rem;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
.popup__header__close {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#sign_in,
|
||||
#sign_up {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
#sign_in sm-form,
|
||||
#sign_up sm-form {
|
||||
margin: 2rem 0;
|
||||
--gap: 1rem;
|
||||
}
|
||||
#sign_in header,
|
||||
#sign_up header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
#sign_up sm-copy {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#sign_up h5 {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.04);
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: khaki;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#main_header {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 1rem;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
background-color: var(--foreground-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: grid;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 0.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.logo h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.main-logo {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
padding-bottom: 3rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
article::after {
|
||||
justify-self: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
width: 4rem;
|
||||
height: 0.3rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
article p {
|
||||
font-family: "noto serif", serif;
|
||||
line-height: 1.8;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.page-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1rem minmax(0, 1fr) 1rem;
|
||||
}
|
||||
|
||||
.page-layout > * {
|
||||
grid-column: 2/3;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
margin-bottom: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
time {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3:not(:first-of-type) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.quote-template {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.2rem;
|
||||
border: solid thin rgba(var(--text-color), 0.3);
|
||||
-webkit-box-shadow: 0.3rem 0.5rem 0 0.1rem rgba(var(--text-color), 0.8);
|
||||
box-shadow: 0.3rem 0.5rem 0 0.1rem rgba(var(--text-color), 0.8);
|
||||
overflow: hidden;
|
||||
justify-self: center;
|
||||
padding-left: 1.3rem;
|
||||
}
|
||||
|
||||
.quote-template figcaption {
|
||||
margin-top: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: 0.8rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.upvote {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
position: relative;
|
||||
padding: 0.8rem;
|
||||
border-radius: 2rem;
|
||||
background-color: var(--foreground-color);
|
||||
-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
border: solid rgba(var(--text-color), 0.2) thin;
|
||||
}
|
||||
.upvote > * {
|
||||
pointer-events: none;
|
||||
}
|
||||
.upvote:active {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
.upvote:active .icon {
|
||||
-webkit-transform: scale(0.7);
|
||||
transform: scale(0.7);
|
||||
}
|
||||
.upvote.liked {
|
||||
background-color: var(--like-color);
|
||||
color: white;
|
||||
}
|
||||
.upvote.liked .icon {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.expanding-heart,
|
||||
.ring {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
|
||||
.ring {
|
||||
border: 0.1rem solid var(--like-color);
|
||||
border-radius: 50%;
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.upvote .icon {
|
||||
grid-area: 1/1;
|
||||
fill: var(--like-color);
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
-webkit-transition: -webkit-transform 0.2s;
|
||||
transition: -webkit-transform 0.2s;
|
||||
transition: transform 0.2s;
|
||||
transition: transform 0.2s, -webkit-transform 0.2s;
|
||||
}
|
||||
|
||||
.temp-count,
|
||||
#like_count {
|
||||
grid-area: 1/2;
|
||||
}
|
||||
.temp-count:not(:empty),
|
||||
#like_count:not(:empty) {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 3rem 1.5rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 40rem) {
|
||||
sm-popup {
|
||||
--width: 24rem;
|
||||
}
|
||||
|
||||
.popup__header {
|
||||
padding: 1rem 1.5rem 0 1rem;
|
||||
}
|
||||
|
||||
.page-layout {
|
||||
grid-template-columns: 1fr 60ch 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
}
|
||||
.hide-completely {
|
||||
display: none;
|
||||
}
|
||||
1
template/css/main.min.css
vendored
Normal file
1
template/css/main.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
396
template/css/main.scss
Normal file
396
template/css/main.scss
Normal file
@ -0,0 +1,396 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 1.2rem);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: var(--foreground-color);
|
||||
}
|
||||
|
||||
body,
|
||||
body * {
|
||||
--accent-color: rgb(0, 156, 78);
|
||||
--text-color: 36, 36, 36;
|
||||
--background-color: 248, 248, 248;
|
||||
--foreground-color: rgb(255, 255, 255);
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--like-color: #e91e63;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
body[data-theme="dark"],
|
||||
body[data-theme="dark"] * {
|
||||
--accent-color: rgb(14, 230, 122);
|
||||
--text-color: 230, 230, 230;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--background-color: 10, 10, 10;
|
||||
--foreground-color: rgb(24, 24, 24);
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
}
|
||||
|
||||
body[data-theme="dark"] sm-popup::part(popup) {
|
||||
background-color: var(--foreground-color);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
max-width: 70ch;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
p * {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.direction-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.flow-column {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.gap-0-5 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-1-5 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 3rem;
|
||||
}
|
||||
.justify-self-center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.justify-self-start {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.justify-self-end {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.button {
|
||||
white-space: nowrap;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
justify-content: center;
|
||||
&--primary {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
button:active,
|
||||
.button:active,
|
||||
sm-button:not([disabled]):active,
|
||||
.interact:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.popup__header {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0 1.5rem 0 0.5rem;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
.popup__header__close {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#sign_in,
|
||||
#sign_up {
|
||||
align-items: center;
|
||||
sm-form {
|
||||
margin: 2rem 0;
|
||||
--gap: 1rem;
|
||||
}
|
||||
header {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
}
|
||||
#sign_up {
|
||||
sm-copy {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
h5 {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
}
|
||||
.card {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.04);
|
||||
}
|
||||
.warning {
|
||||
background-color: khaki;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#main_header {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
background-color: var(--foreground-color);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 0.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.logo h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.main-logo {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
padding-bottom: 3rem;
|
||||
gap: 1rem;
|
||||
&::after {
|
||||
justify-self: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
width: 4rem;
|
||||
height: 0.3rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
p {
|
||||
font-family: "noto serif", serif;
|
||||
line-height: 1.8;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1rem minmax(0, 1fr) 1rem;
|
||||
}
|
||||
|
||||
.page-layout > * {
|
||||
grid-column: 2/3;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
margin-bottom: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
time {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3:not(:first-of-type) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.quote-template {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
border-radius: 0.2rem;
|
||||
border: solid thin rgba(var(--text-color), 0.3);
|
||||
box-shadow: 0.3rem 0.5rem 0 0.1rem rgba(var(--text-color), 0.8);
|
||||
overflow: hidden;
|
||||
justify-self: center;
|
||||
padding-left: 1.3rem;
|
||||
}
|
||||
|
||||
.quote-template figcaption {
|
||||
margin-top: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
font-size: 0.8rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.upvote {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
position: relative;
|
||||
padding: 0.8rem;
|
||||
border-radius: 2rem;
|
||||
background-color: var(--foreground-color);
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
border: solid rgba(var(--text-color), 0.2) thin;
|
||||
& > * {
|
||||
pointer-events: none;
|
||||
}
|
||||
&:active {
|
||||
transform: none;
|
||||
.icon {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
}
|
||||
&.liked {
|
||||
background-color: var(--like-color);
|
||||
color: white;
|
||||
.icon {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.expanding-heart,
|
||||
.ring {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
.ring {
|
||||
border: 0.1rem solid var(--like-color);
|
||||
border-radius: 50%;
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
justify-self: center;
|
||||
}
|
||||
.upvote .icon {
|
||||
grid-area: 1/1;
|
||||
fill: var(--like-color);
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.temp-count,
|
||||
#like_count {
|
||||
grid-area: 1/2;
|
||||
&:not(:empty) {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 3rem 1.5rem;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 40rem) {
|
||||
sm-popup {
|
||||
--width: 24rem;
|
||||
}
|
||||
.popup__header {
|
||||
padding: 1rem 1.5rem 0 1rem;
|
||||
}
|
||||
.page-layout {
|
||||
grid-template-columns: 1fr 60ch 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
|
||||
&:hover {
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// highest priority styles
|
||||
.hide-completely {
|
||||
display: none;
|
||||
}
|
||||
11445
template/index.html
Normal file
11445
template/index.html
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user