Adding lazy-load version of feed component to load data using AJAX after page content has been rendered.

This commit is contained in:
Jason Williams
2020-10-23 22:54:30 +00:00
parent 2a8454d197
commit af4f1366a0
71 changed files with 1753 additions and 88 deletions

View File

@@ -1,23 +1,7 @@
h1.master {
margin: 0;
font-family: var(--title-font);
font-size: 3.5rem;
word-spacing: -0.15em;
}
h2 {
font-size: 1.5rem;
}
h1 + h2, h2:first-child {
margin-top: 0;
}
h3 {
font-size: 1rem;
color: var(--dark-alt-accent-color);
}
section h1:first-child {
margin-top: 0;
}
@@ -26,14 +10,6 @@ section + section {
margin-top: 3rem;
}
.main {
font-size: 1.2rem;
}
.card {
margin-bottom: 2rem;
}
.card ul {
margin: 0;
padding-left: 1rem;

View File

@@ -1,7 +1,7 @@
/* Variables */
:root {
--main-bg-color: #E7D9D1; /*#F0E4D1; #E8D5B5; #e7d9d1;*/
--main-accent-color: #302b44;
--main-bg-color: #F2EDEA;
--main-accent-color: #302B44;
--light-accent-color: #686283;
--xlight-accent-color: #88839C;
--xxlight-accent-color: #FFFFFF;
@@ -87,6 +87,22 @@ footer {
}
/* Standard element styles */
h1.master {
margin: 0;
font-family: var(--title-font);
font-size: 3.5rem;
word-spacing: -0.15em;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1rem;
color: var(--dark-alt-accent-color);
}
a {
color: var(--alt-accent-color);
text-decoration: underline;
@@ -98,6 +114,10 @@ a.icon-link {
color: var(--accent-color);
}
a.btn {
text-decoration: none;
}
a:hover {
color: var(--dark-alt-accent-color);
text-decoration: none;
@@ -142,6 +162,18 @@ html::-webkit-scrollbar-thumb {
color: var(--xxlight-accent-color);
}
.main, .card p.main, .card ul.main {
font-size: 1.2rem;
}
.col-container {
margin: 0 -15px;
}
.card {
margin-bottom: 2rem;
}
.social-icons {
font-size: 0;
}
@@ -177,6 +209,57 @@ html::-webkit-scrollbar-thumb {
font-size: 0.9rem;
}
.card .feedcard-footer p, .card .feedcard-footer a {
margin-bottom: 0;
font-size: 0.75rem;
color: rgba(0, 0, 0, 0.5);
text-decoration: none;
}
.card .feedcard-footer img {
height: 0.75rem;
}
.card .feedcard-footer .feedcard-itemtype {
width: 33%;
text-align: right;
}
.card .feedcard-footer .feedcard-attribution {
width: 67%;
}
.altaccent {
color: var(--alt-accent-color);
}
}
/* Tag cloud styles */
div.jqcloud {
font-size: 0.5rem;
line-height: normal;
}
div.jqcloud a {
color: inherit;
font-size: inherit;
text-decoration: none
}
div.jqcloud a:hover {
color: var(--dark-alt-accent-color);
}
div.jqcloud span.w10 {font-size:550%; color: rgba(176, 92, 113, 1);}
div.jqcloud span.w9 {font-size:500%; color: rgba(176, 92, 113, 0.95);}
div.jqcloud span.w8 {font-size:450%; color: rgba(176, 92, 113, 0.9);}
div.jqcloud span.w7 {font-size:400%; color: rgba(176, 92, 113, 0.85);}
div.jqcloud span.w6 {font-size:350%; color: rgba(176, 92, 113, 0.8);}
div.jqcloud span.w5 {font-size:300%; color: rgba(176, 92, 113, 0.75);}
div.jqcloud span.w4 {font-size:250%; color: rgba(176, 92, 113, 0.7);}
div.jqcloud span.w3 {font-size:200%; color: rgba(176, 92, 113, 0.65);}
div.jqcloud span.w2 {font-size:150%; color: rgba(176, 92, 113, 0.6);}
div.jqcloud span.w1 {font-size:100%; color: rgba(176, 92, 113, 0.55);}
div.jqcloud{overflow:hidden;position:relative}
div.jqcloud span{padding:0}