Make CSS modular
This commit is contained in:
48
public/css/audio-player.css
Normal file
48
public/css/audio-player.css
Normal file
@@ -0,0 +1,48 @@
|
||||
.albumCover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.albumCover,
|
||||
.coverContainer {
|
||||
width: var(--space-4xl);
|
||||
height: var(--space-4xl);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.artist {
|
||||
font-size: var(--meta-font-size);
|
||||
margin-bottom: var(--space-s);
|
||||
}
|
||||
|
||||
.captionAndPlayer {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mplayer {
|
||||
background-color: var(--card-color);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
display: flex;
|
||||
gap: var(--space-s);
|
||||
margin: 0 0 var(--space-s) 0;
|
||||
padding: var(--space-m);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.player {
|
||||
align-self: flex-end;
|
||||
border-radius: var(--border-radius);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.songTitle {
|
||||
font-size: var(--step-1);
|
||||
font-variation-settings:
|
||||
"opsz" 50,
|
||||
"wght" 350,
|
||||
"SOFT" 20,
|
||||
"WONK" 1;
|
||||
}
|
||||
13
public/css/blogroll.css
Normal file
13
public/css/blogroll.css
Normal file
@@ -0,0 +1,13 @@
|
||||
.blogroll {
|
||||
display: inline;
|
||||
}
|
||||
.blogroll-category-group {
|
||||
margin-bottom: var(--space-l);
|
||||
margin-left: var(--space-m);
|
||||
h3 {
|
||||
display: inline;
|
||||
}
|
||||
p {
|
||||
margin: var(--space-2xs) auto;
|
||||
}
|
||||
}
|
||||
80
public/css/comments.css
Normal file
80
public/css/comments.css
Normal file
@@ -0,0 +1,80 @@
|
||||
.isso-comment-header {
|
||||
height: var(--space-2xl) !important;
|
||||
}
|
||||
|
||||
h4.isso-thread-heading {
|
||||
color: var(--text-color) !important;
|
||||
font-size: var(--step-2) !important;
|
||||
font-variation-settings:
|
||||
"opsz" 50,
|
||||
"wght" 350,
|
||||
"SOFT" 20,
|
||||
"WONK" 1 !important;
|
||||
line-height: calc(var(--step-2) * 0.25 + var(--step-2)) !important;
|
||||
margin-bottom: var(--space-m) !important;
|
||||
margin-top: var(--space-m) !important;
|
||||
padding-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
text-wrap: pretty !important;
|
||||
}
|
||||
|
||||
.isso-text > h1,
|
||||
.isso-text > h2 {
|
||||
padding: 0 0 0 0 !important;
|
||||
}
|
||||
|
||||
.isso-form-wrapper > .isso-auth-section > .isso-post-action > input {
|
||||
background-color: var(--contrast-color) !important;
|
||||
border: none !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
color: var(--background-color) !important;
|
||||
font-family: var(--font-family-ui) !important;
|
||||
font-size: var(--step--2) !important;
|
||||
font-variation-settings: var(--font-variation-ui) !important;
|
||||
height: var(--space-m-l) !important;
|
||||
letter-spacing: var(--ui-letter-spacing) !important;
|
||||
margin: var(--space-xs) 0 0 0 !important;
|
||||
padding: 0 var(--space-xs) !important;
|
||||
text-transform: uppercase !important;
|
||||
transition: var(--transition-normal) !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
p.isso-input-wrapper {
|
||||
display: block !important;
|
||||
max-width: 100% !important;
|
||||
& > label,
|
||||
& > input {
|
||||
font-family: var(--font-family-ui) !important;
|
||||
font-size: var(--step--2) !important;
|
||||
font-variation-settings: var(--font-variation-ui) !important;
|
||||
}
|
||||
& input {
|
||||
margin-block: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.isso-post-action {
|
||||
display: inline-block !important;
|
||||
float: inherit !important;
|
||||
margin: 0 var(--space-2xs) 0 0 !important;
|
||||
&::after {
|
||||
content: "" !important;
|
||||
}
|
||||
}
|
||||
|
||||
textarea.isso-textarea {
|
||||
background-color: var(--background-color) !important;
|
||||
border: var(--border-details) !important;
|
||||
border-color: var(--contrast-color) !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
color: var(--text-color) !important;
|
||||
font-family: var(--font-family) !important;
|
||||
font-size: var(--step-0) !important;
|
||||
font-variation-settings: var(--font-variation-default) !important;
|
||||
margin-block: 0 1lh !important;
|
||||
min-height: var(--space-l) !important;
|
||||
padding: 0 var(--space-3xs) !important;
|
||||
resize: vertical !important;
|
||||
width: 100%;
|
||||
}
|
||||
7
public/css/continue-discussion-on-mastodon.css
Normal file
7
public/css/continue-discussion-on-mastodon.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.continue-discussion {
|
||||
grid-column: var(--span-grid);
|
||||
}
|
||||
.continue-discussion button {
|
||||
margin-top: calc(var(--space-s) * -1);
|
||||
margin-bottom: var(--space-m);
|
||||
}
|
||||
16
public/css/dropcap.css
Normal file
16
public/css/dropcap.css
Normal file
@@ -0,0 +1,16 @@
|
||||
main > section > article.post > p:not(.nodropcap):first-of-type:first-letter {
|
||||
float: left;
|
||||
font-size: var(--step-5);
|
||||
padding: var(--space-2xs);
|
||||
color: var(--contrast-color);
|
||||
border: solid 2px var(--contrast-color);
|
||||
font-family: var(--font-family-headline);
|
||||
font-variation-settings:
|
||||
"opsz" 144,
|
||||
"wght" 500,
|
||||
"SOFT" 10,
|
||||
"WONK" 0;
|
||||
margin: 0.5rem 0.7rem 0 0;
|
||||
border-radius: 0.2em;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
20
public/css/fleuron.css
Normal file
20
public/css/fleuron.css
Normal file
@@ -0,0 +1,20 @@
|
||||
/* Add fleuron to last <p> in section */
|
||||
section > p:not(blockquote > p, p.isso-post-action):last-child:after {
|
||||
content: "\2766";
|
||||
display: inline;
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
|
||||
/* Add fleuron after <p> in article when footnotes are present */
|
||||
p:has(+ hr.footnotes-sep):after {
|
||||
content: "\2766";
|
||||
display: inline;
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
|
||||
/* Add fleuron after last <p> in article */
|
||||
article.post > p:not(blockquote > p):last-child:after {
|
||||
content: "\2766";
|
||||
display: inline;
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
16
public/css/gallery-images.css
Normal file
16
public/css/gallery-images.css
Normal file
@@ -0,0 +1,16 @@
|
||||
.gallery-images {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
row-gap: var(--space-xs-s);
|
||||
column-gap: var(--space-m-l);
|
||||
.gallery-image-container {
|
||||
width: var(--space-7xl-8xl);
|
||||
height: var(--space-7xl-8xl);
|
||||
.gallery-image {
|
||||
border-radius: var(--border-radius);
|
||||
width: var(--space-7xl-8xl);
|
||||
height: var(--space-7xl-8xl);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
39
public/css/guestbook.css
Normal file
39
public/css/guestbook.css
Normal file
@@ -0,0 +1,39 @@
|
||||
.guestbook-message blockquote {
|
||||
margin-bottom: var(--space-m);
|
||||
margin-top: var(--space-3xs);
|
||||
}
|
||||
.guestbook-message p {
|
||||
margin-block: 0 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.guestbook-message p b,
|
||||
.guestbook-message p small {
|
||||
font-family: var(--meta-font-family);
|
||||
font-size: var(--meta-font-size);
|
||||
font-variation-settings: var(--meta-font-variation-settings);
|
||||
}
|
||||
#guestbooks___challenge-answer-container br,
|
||||
.guestbooks___input-container br {
|
||||
display: none;
|
||||
}
|
||||
.guestbook-message-reply {
|
||||
border-left: var(--border-details);
|
||||
margin-left: var(--space-l);
|
||||
margin-top: calc(var(--space-s) * -1);
|
||||
opacity: 0.9;
|
||||
padding-left: var(--space-s);
|
||||
font-style: italic;
|
||||
& blockquote {
|
||||
margin-left: 0;
|
||||
}
|
||||
& blockquote::before {
|
||||
content: "";
|
||||
}
|
||||
& p::before {
|
||||
content: "Reply from ";
|
||||
font-family: var(--meta-font-family);
|
||||
font-size: var(--meta-font-size);
|
||||
font-variation-settings: var(--meta-font-variation-settings);
|
||||
}
|
||||
}
|
||||
32
public/css/metadata.css
Normal file
32
public/css/metadata.css
Normal file
@@ -0,0 +1,32 @@
|
||||
.post-metadata {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
padding: 0 0 var(--space-l) 0;
|
||||
}
|
||||
|
||||
.post-metadata-copy {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.post-metadata p,
|
||||
.post-metadata ul,
|
||||
.post-metadata ul li,
|
||||
time,
|
||||
.metadata {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
font-family: var(--meta-font-family);
|
||||
font-size: var(--meta-font-size);
|
||||
font-style: var(--meta-font-style);
|
||||
font-variation-settings: var(--meta-font-variation-settings);
|
||||
line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size));
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0em;
|
||||
}
|
||||
|
||||
.post-metadata {
|
||||
padding-left: 0.15rem;
|
||||
}
|
||||
61
public/css/microblog.css
Normal file
61
public/css/microblog.css
Normal file
@@ -0,0 +1,61 @@
|
||||
.microblog-comment {
|
||||
p {
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
padding: var(--space-s) 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.microblog-emoji {
|
||||
font-size: var(--step-6);
|
||||
margin-right: var(--space-s);
|
||||
}
|
||||
|
||||
.microblog-icon {
|
||||
filter: var(--logo-filter);
|
||||
height: var(--space-4xl);
|
||||
padding-right: var(--space-s);
|
||||
width: var(--space-2xl);
|
||||
}
|
||||
.microblog-list {
|
||||
.post-metadata {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.microblog-post {
|
||||
display: flex;
|
||||
.microblog-comment {
|
||||
p {
|
||||
padding-top: 0;
|
||||
padding-bottom: var(--space-2xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.microblog-status {
|
||||
&.card {
|
||||
align-items: center;
|
||||
padding: var(--space-s);
|
||||
}
|
||||
.microblog-status-copy {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.status-metadata {
|
||||
font-family: var(--meta-font-family);
|
||||
font-size: var(--meta-font-size);
|
||||
font-style: var(--meta-font-style);
|
||||
font-variation-settings: var(--meta-font-variation-settings);
|
||||
line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.postlist-item-container {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
gap: var(--space-s);
|
||||
}
|
||||
46
public/css/navigator.css
Normal file
46
public/css/navigator.css
Normal file
@@ -0,0 +1,46 @@
|
||||
.navigator {
|
||||
display: grid;
|
||||
gap: var(--space-2xs) var(--space-2xs);
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--space-6xl), 1fr));
|
||||
width: 100%;
|
||||
.navigatorItem {
|
||||
background-color: var(--background-color);
|
||||
border: 1.5px solid var(--color-gray-20);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
height: var(--space-3xl);
|
||||
text-align: center;
|
||||
a {
|
||||
height: 100%;
|
||||
padding: var(--space-s) var(--space-xs);
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
img {
|
||||
aspect-ratio: 1 / 1;
|
||||
filter: var(--logo-filter);
|
||||
width: var(--space-m);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--text-color);
|
||||
border: 1.25px solid var(--text-color);
|
||||
transition: var(--transition-normal);
|
||||
a {
|
||||
color: var(--background-color);
|
||||
transition: var(--transition-normal);
|
||||
img {
|
||||
filter: none;
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
img {
|
||||
filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
|
||||
saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
91
public/css/post-list.css
Normal file
91
public/css/post-list.css
Normal file
@@ -0,0 +1,91 @@
|
||||
/* Posts list */
|
||||
.postlist,
|
||||
.links-nextprev {
|
||||
container: postlist / inline-size;
|
||||
}
|
||||
.postlist-item {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
.postlist-item-container {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
gap: var(--space-s);
|
||||
}
|
||||
.post-image {
|
||||
width: var(--space-4xl);
|
||||
height: var(--space-4xl);
|
||||
object-fit: cover;
|
||||
object-position: 50% 50%;
|
||||
}
|
||||
.post-image-container {
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
height: var(--space-4xl);
|
||||
max-height: var(--space-4xl);
|
||||
overflow: hidden;
|
||||
width: var(--space-4xl);
|
||||
}
|
||||
|
||||
.postlist-date,
|
||||
.postlist-item:before {
|
||||
color: var(--color-gray-90);
|
||||
font-size: var(--meta-font-size);
|
||||
}
|
||||
.postlist-date {
|
||||
word-spacing: -0.5px;
|
||||
}
|
||||
.postlist-link {
|
||||
font-size: var(--step-5);
|
||||
padding-right: 0.5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.postlist-link p {
|
||||
background-color: var(--color-gray-90);
|
||||
border-radius: 100px;
|
||||
color: var(--background-color);
|
||||
font-family: var(--font-family-ui);
|
||||
font-size: var(--step--2);
|
||||
font-variation-settings: var(--font-variation-ui);
|
||||
letter-spacing: var(--ui-letter-spacing);
|
||||
margin-top: calc(var(--space-3xs) * -1);
|
||||
padding-left: var(--space-xs);
|
||||
padding-right: var(--space-xs);
|
||||
text-transform: uppercase;
|
||||
width: max-content;
|
||||
}
|
||||
.post-copy {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
|
||||
@container postlist (max-width: 500px) {
|
||||
.postlist-item {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
.post-image-container {
|
||||
margin-left: 0;
|
||||
min-height: var(--space-10xl);
|
||||
width: 100%;
|
||||
}
|
||||
.post-image-container img.post-image {
|
||||
width: 100cqw;
|
||||
height: var(--space-10xl);
|
||||
}
|
||||
.postlist-link {
|
||||
padding: 0;
|
||||
}
|
||||
.postlist-link h3 {
|
||||
padding-top: var(--space-m);
|
||||
}
|
||||
.postlist-link p {
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
.post-metadata {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
6
public/css/profile-pic.css
Normal file
6
public/css/profile-pic.css
Normal file
@@ -0,0 +1,6 @@
|
||||
.profilePic:not(.links-container > img.profilePic) {
|
||||
border-radius: 100%;
|
||||
height: var(--space-xl);
|
||||
margin-right: var(--space-s);
|
||||
width: var(--space-xl);
|
||||
}
|
||||
86
public/css/quiz.css
Normal file
86
public/css/quiz.css
Normal file
@@ -0,0 +1,86 @@
|
||||
.answerBox {
|
||||
margin-bottom: var(--space-3xs);
|
||||
& > label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.answersBox > input {
|
||||
display: block;
|
||||
}
|
||||
details:not(.toc) {
|
||||
background-color: var(--card-color);
|
||||
border: var(--border-details);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--text-color);
|
||||
margin-top: var(--space-s);
|
||||
padding: var(--space-xs);
|
||||
width: 100%;
|
||||
font-size: var(--step--2);
|
||||
font-variation-settings: var(--font-variation-ui);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--ui-letter-spacing);
|
||||
font-family: var(--font-family-ui);
|
||||
|
||||
::marker {
|
||||
content: "+ ";
|
||||
}
|
||||
&[open] p {
|
||||
font-size: var(--step--2);
|
||||
line-height: calc(var(--step--2) * 0.25 + var(--step--2));
|
||||
}
|
||||
&[open] summary::marker {
|
||||
content: "- ";
|
||||
}
|
||||
&[open] summary {
|
||||
border-bottom: var(--border-details);
|
||||
margin-bottom: var(--space-xs);
|
||||
padding-bottom: var(--space-xs);
|
||||
}
|
||||
summary {
|
||||
font-size: var(--step--2);
|
||||
font-variation-settings: var(--font-variation-ui);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--ui-letter-spacing);
|
||||
font-family: var(--font-family-ui);
|
||||
}
|
||||
}
|
||||
dialog {
|
||||
background-color: var(--card-color);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
width: var(--grid-max-width);
|
||||
h2 {
|
||||
padding-top: 0;
|
||||
}
|
||||
p {
|
||||
color: var(--text-color);
|
||||
}
|
||||
&::backdrop {
|
||||
background-color: var(--contrast-color);
|
||||
opacity: 0.5;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
padding-top: var(--space-s);
|
||||
}
|
||||
}
|
||||
input.answer {
|
||||
display: inline;
|
||||
}
|
||||
.questionBox {
|
||||
margin: var(--space-s) 0;
|
||||
figure {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
.quizQuestion {
|
||||
font-size: var(--step-2);
|
||||
font-variation-settings:
|
||||
"opsz" 50,
|
||||
"wght" 350,
|
||||
"SOFT" 20,
|
||||
"WONK" 1;
|
||||
line-height: calc(var(--step-2) * 0.25 + var(--step-2));
|
||||
}
|
||||
45
public/css/tags.css
Normal file
45
public/css/tags.css
Normal file
@@ -0,0 +1,45 @@
|
||||
a.post-tag {
|
||||
background-color: var(--color-gray-20);
|
||||
border-radius: 1rem;
|
||||
color: var(--text-color);
|
||||
font-family: var(--meta-font-family);
|
||||
font-variation-settings: "wght" 300;
|
||||
margin-top: var(--space-3xs);
|
||||
margin-right: var(--space-3xs);
|
||||
padding: 0 var(--space-3xs);
|
||||
text-decoration: none;
|
||||
}
|
||||
a.post-tag:before {
|
||||
content: "#";
|
||||
}
|
||||
a.post-tag:visited {
|
||||
color: var(--text-color);
|
||||
}
|
||||
a.post-tag:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
.tag-feed-icon {
|
||||
fill: var(--rss-orange);
|
||||
height: var(--space-m);
|
||||
transition: var(--transition-normal);
|
||||
width: var(--space-m);
|
||||
&.small {
|
||||
height: var(--space-s);
|
||||
width: var(--space-s);
|
||||
}
|
||||
}
|
||||
.taglist {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.taglist li a {
|
||||
display: inline-block;
|
||||
font-size: var(--step--1);
|
||||
margin: 0 var(--space-2xs) var(--space-2xs) 0;
|
||||
}
|
||||
|
||||
.postlist-item > .post-tag {
|
||||
align-self: center;
|
||||
}
|
||||
6
public/css/toc.css
Normal file
6
public/css/toc.css
Normal file
@@ -0,0 +1,6 @@
|
||||
.toc {
|
||||
& ol {
|
||||
margin-top: 0;
|
||||
padding-left: var(--space-m);
|
||||
}
|
||||
}
|
||||
108
public/css/weather.css
Normal file
108
public/css/weather.css
Normal file
@@ -0,0 +1,108 @@
|
||||
.fallingObject {
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-family: Arial;
|
||||
pointer-events: none;
|
||||
text-shadow: 0 0 1px #000;
|
||||
}
|
||||
@keyframes fallingObjects-fall {
|
||||
0% {
|
||||
top: -10%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes fallingObjects-shake {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(80px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
.fallingObject {
|
||||
position: fixed;
|
||||
top: -10%;
|
||||
z-index: 9999;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
animation-name: fallingObjects-fall, fallingObjects-shake;
|
||||
animation-duration: 10s, 3s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
animation-play-state: running, running;
|
||||
}
|
||||
.fallingObject:nth-of-type(0) {
|
||||
left: 1%;
|
||||
animation-delay: 0s, 0s;
|
||||
& > div {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(1) {
|
||||
left: 10%;
|
||||
animation-delay: 1s, 1s;
|
||||
& > div {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(2) {
|
||||
left: 20%;
|
||||
animation-delay: 6s, 0.5s;
|
||||
& > div {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(3) {
|
||||
left: 30%;
|
||||
animation-delay: 4s, 2s;
|
||||
& > div {
|
||||
transform: rotate(84deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(4) {
|
||||
left: 40%;
|
||||
animation-delay: 2s, 2s;
|
||||
& > div {
|
||||
transform: rotate(267deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(5) {
|
||||
left: 50%;
|
||||
animation-delay: 8s, 3s;
|
||||
& > div {
|
||||
transform: rotate(200deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(6) {
|
||||
left: 60%;
|
||||
animation-delay: 6s, 2s;
|
||||
& > div {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(7) {
|
||||
left: 70%;
|
||||
animation-delay: 2.5s, 1s;
|
||||
& > div {
|
||||
transform: rotate(78deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(8) {
|
||||
left: 80%;
|
||||
animation-delay: 1s, 0s;
|
||||
& > div {
|
||||
transform: rotate(3120deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(9) {
|
||||
left: 90%;
|
||||
animation-delay: 3s, 1.5s;
|
||||
& > div {
|
||||
transform: rotate(123deg);
|
||||
}
|
||||
}
|
||||
12
public/css/woo-mode.css
Normal file
12
public/css/woo-mode.css
Normal file
@@ -0,0 +1,12 @@
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
opacity: 0.35;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
Reference in New Issue
Block a user