Latest changes
This commit is contained in:
sairaj mote
parent
1421dcd856
commit
315ad0319d
2
.gitattributes
vendored
Normal file
2
.gitattributes
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
3960
components.js
3960
components.js
File diff suppressed because it is too large
Load Diff
BIN
corona.jpg
Normal file
BIN
corona.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
460
css/main.css
Normal file
460
css/main.css
Normal file
@ -0,0 +1,460 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(16px, 1.2vmax, 40px);
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #2e66ce;
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 85, 85, 85;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: rgba(var(--foreground-color), 1);
|
||||
--dark-shade: #f4f4f4;
|
||||
--error-color: #E53935;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
--accent-color: #7eabff;
|
||||
--text-color: 220, 220, 220;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 26, 26, 26;
|
||||
--background-color: #111;
|
||||
--dark-shade: #222;
|
||||
--hue: 255;
|
||||
--saturation: 39%;
|
||||
--lightness: 70%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.dark-text {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
max-width: 60ch;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.bottom-padding {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.top-padding {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.bottom-margin {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.top-margin {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: auto auto;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.justify-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.light-text {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hide-completely {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.breakable {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.separator {
|
||||
padding: 0.1rem;
|
||||
}
|
||||
|
||||
.no-transformations {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
stroke: rgba(var(--text-color), 1);
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
span.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.interact {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#homepage, #settings_page {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5rem 1fr 1.5rem;
|
||||
}
|
||||
#homepage > *, #settings_page > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
#homepage main, #settings_page main {
|
||||
gap: 2rem;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
#homepage_header {
|
||||
position: relative;
|
||||
gap: 1.5rem;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#homepage_header h3 {
|
||||
font-family: "Playfair display", serif;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#user_icon, .close {
|
||||
cursor: pointer;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
height: 2.6rem;
|
||||
width: 2.6rem;
|
||||
padding: 0.7rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#right_drawer {
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
padding: 1.5rem;
|
||||
z-index: 10;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
#right_drawer section {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
#right_drawer section:first-of-type {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
#right_drawer section:not(:last-of-type) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#right_drawer section sm-switch {
|
||||
grid-column: 2/3;
|
||||
grid-row: 1/3;
|
||||
}
|
||||
#right_drawer section h4,
|
||||
#right_drawer section p {
|
||||
grid-column: 1/2;
|
||||
}
|
||||
|
||||
.close {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
padding: 0.6rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 1;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
#trending header h4 {
|
||||
padding: 0 0.6rem;
|
||||
color: var(--error-color);
|
||||
border-left: solid 0.2em var(--error-color);
|
||||
}
|
||||
|
||||
#trending_articles_container, #latest_articles_container {
|
||||
gap: 2rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
gap: 0 1rem;
|
||||
cursor: pointer;
|
||||
align-self: flex-start;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.article-card .article-details {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.article-card .article-heading {
|
||||
font-size: 1.3em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
.article-card .article-preview {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.article-card h5:last-of-type {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
#greetings_section {
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
#greetings_section sm-input {
|
||||
margin-top: 1rem;
|
||||
width: min(100%, 24rem);
|
||||
}
|
||||
#greetings_section sm-input .icon {
|
||||
stroke: rgba(var(--text-color), 0.6);
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
#greeting_illustration svg {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.article {
|
||||
display: grid;
|
||||
grid-template-columns: 1.5rem 1fr 1.5rem;
|
||||
}
|
||||
.article > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
width: 100%;
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
.article-details {
|
||||
font-weight: 400;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.article-heading {
|
||||
font-size: 1.5em;
|
||||
font-family: "Lora", serif;
|
||||
margin-bottom: 0.8rem;
|
||||
font-weight: 700;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-preview {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.para-heading {
|
||||
font-family: "Lora", serif;
|
||||
margin-bottom: 0.5em;
|
||||
font-weight: 600;
|
||||
font-size: 1.3em;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.article-para {
|
||||
line-height: 1.8;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.article-para:not(:first-of-type) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.para-heading + .article-para {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.article-para + .para-heading {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.article-image {
|
||||
object-position: top;
|
||||
object-fit: cover;
|
||||
border-radius: 1rem;
|
||||
height: 16rem;
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 0.4rem 1rem rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
#latest_articles h4 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#latest_articles h4::after {
|
||||
content: "";
|
||||
height: 0.2rem;
|
||||
background: rgba(var(--text-color), 0.9);
|
||||
width: min(4rem, 100%);
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
#article_page {
|
||||
padding-bottom: 10rem;
|
||||
}
|
||||
#article_page .article-heading {
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.article-para, .article-preview {
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
.hide-on-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.article {
|
||||
grid-template-columns: 1fr min(65ch, 100%) 1fr;
|
||||
}
|
||||
|
||||
.article-heading {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.para-heading {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.article-para, .article-preview {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
#right_drawer_container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#right_drawer {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
width: 24rem;
|
||||
max-height: 80vh;
|
||||
bottom: auto;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.5rem 1rem #00000016;
|
||||
border: rgba(var(--text-color), 0.1) solid 1px;
|
||||
transform: translate(0, -1.5rem);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1280px) {
|
||||
#homepage, #settings_page {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
#homepage main, #settings_page main {
|
||||
gap: 4rem;
|
||||
}
|
||||
}
|
||||
1
css/main.min.css
vendored
Normal file
1
css/main.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
426
css/main.scss
Normal file
426
css/main.scss
Normal file
@ -0,0 +1,426 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
:root{
|
||||
font-size: clamp(16px, 1.2vmax, 40px);
|
||||
}
|
||||
body {
|
||||
--accent-color: #2e66ce;
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 85, 85, 85;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: rgba(var(--foreground-color), 1);
|
||||
--dark-shade: #f4f4f4;
|
||||
--error-color: #E53935;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-size: cover;
|
||||
}
|
||||
body[data-theme="dark"]{
|
||||
--accent-color: #7eabff;
|
||||
--text-color: 220, 220, 220;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 26, 26, 26;
|
||||
--background-color: #111;
|
||||
--dark-shade: #222;
|
||||
--hue: 255;
|
||||
--saturation: 39%;
|
||||
--lightness: 70%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.dark-text {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
max-width: 60ch;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
strong{
|
||||
font-weight: 500;
|
||||
}
|
||||
::-moz-focus-inner {
|
||||
border: none;
|
||||
}
|
||||
.bottom-padding {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.top-padding {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.bottom-margin {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.top-margin {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: auto auto;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.justify-right{
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.light-text {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hide-completely {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.breakable {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.separator {
|
||||
padding: .1rem;
|
||||
}
|
||||
|
||||
.no-transformations {
|
||||
transform: none !important;
|
||||
}
|
||||
.capitalize{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.icon{
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
stroke: rgba(var(--text-color), 1);
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
overflow: visible;
|
||||
}
|
||||
span.ripple{
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
pointer-events: none;
|
||||
}
|
||||
.interact{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
#homepage, #settings_page{
|
||||
display: grid;
|
||||
grid-template-columns: 1.5rem 1fr 1.5rem;
|
||||
& > *{
|
||||
grid-column: 2;
|
||||
}
|
||||
main{
|
||||
gap: 2rem;
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
#homepage_header{
|
||||
position: relative;
|
||||
gap: 1.5rem;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1.5rem;
|
||||
h3{
|
||||
font-family: 'Playfair display', serif;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
#user_icon, .close{
|
||||
cursor: pointer;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
height: 2.6rem;
|
||||
width: 2.6rem;
|
||||
padding: 0.7rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#right_drawer{
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
padding: 1.5rem;
|
||||
z-index: 10;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
transform: translate(100%, 0);
|
||||
section{
|
||||
display: grid;
|
||||
gap: .3rem;
|
||||
grid-template-columns: 1fr auto;
|
||||
&:first-of-type{
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
&:not(:last-of-type){
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
sm-switch{
|
||||
grid-column: 2/3;
|
||||
grid-row: 1/3;
|
||||
}
|
||||
h4,
|
||||
p{
|
||||
grid-column: 1/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.close{
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
padding: 0.6rem;
|
||||
}
|
||||
.header{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 1;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#trending{
|
||||
header h4{
|
||||
padding: 0 0.6rem;
|
||||
color: var(--error-color);
|
||||
border-left: solid 0.2em var(--error-color);
|
||||
}
|
||||
}
|
||||
#trending_articles_container, #latest_articles_container{
|
||||
gap: 2rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.article-card{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
gap: 0 1rem;
|
||||
cursor: pointer;
|
||||
align-self: flex-start;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
.article-details{
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.article-heading{
|
||||
font-size: 1.3em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
.article-preview{
|
||||
line-height: 1.5;
|
||||
}
|
||||
h5:last-of-type{
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
#greetings_section{
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 3rem;
|
||||
sm-input{
|
||||
margin-top: 1rem;
|
||||
width: min(100%, 24rem);
|
||||
.icon{
|
||||
stroke: rgba(var(--text-color), 0.6);
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#greeting_illustration svg{
|
||||
width: 5rem;
|
||||
}
|
||||
.article{
|
||||
display: grid;
|
||||
grid-template-columns: 1.5rem 1fr 1.5rem;
|
||||
& > *{
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
.full-bleed{
|
||||
width: 100%;
|
||||
grid-column: 1/4;
|
||||
}
|
||||
.article-details{
|
||||
font-weight: 400;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.article-heading{
|
||||
font-size: 1.5em;
|
||||
font-family: 'Lora', serif;
|
||||
margin-bottom: 0.8rem;
|
||||
font-weight: 700;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.article-preview{
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.para-heading{
|
||||
font-family: 'Lora', serif;
|
||||
margin-bottom: 0.5em;
|
||||
font-weight: 600;
|
||||
font-size: 1.3em;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.article-para{
|
||||
line-height: 1.8;
|
||||
font-size: 1.1em;
|
||||
&:not(:first-of-type){
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
.para-heading + .article-para{
|
||||
margin-top: 0;
|
||||
}
|
||||
.article-para + .para-heading{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.article-image{
|
||||
object-position: top;
|
||||
object-fit: cover;
|
||||
border-radius: 1rem;
|
||||
height: 16rem;
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 0.4rem 1rem rgba(var(--text-color), 0.2);
|
||||
}
|
||||
#latest_articles{
|
||||
h4{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
&::after{
|
||||
content: '';
|
||||
height: 0.2rem;
|
||||
background: rgba(var(--text-color), 0.9);
|
||||
width: min(4rem, 100%);
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#article_page{
|
||||
padding-bottom: 10rem;
|
||||
.article-heading{
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
}
|
||||
.article-para, .article-preview{
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
#settings_page{
|
||||
|
||||
}
|
||||
@media screen and (min-width: 800px){
|
||||
.hide-on-desktop{
|
||||
display: none;
|
||||
}
|
||||
.article{
|
||||
grid-template-columns: 1fr min(65ch, 100%) 1fr;
|
||||
}
|
||||
.article-heading{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.para-heading{
|
||||
font-size: 1.3em;
|
||||
}
|
||||
.article-para, .article-preview{
|
||||
font-size: 1.15em;
|
||||
}
|
||||
#right_drawer_container{
|
||||
position: relative;
|
||||
}
|
||||
#right_drawer{
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
width: 24rem;
|
||||
max-height: 80vh;
|
||||
bottom: auto;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.5rem 1rem #00000016;
|
||||
border: rgba(var(--text-color), 0.1) solid 1px;
|
||||
transform: translate(0, -1.5rem);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1280px){
|
||||
#homepage, #settings_page{
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
main{
|
||||
gap: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
2352
illustrations.ai
Normal file
2352
illustrations.ai
Normal file
File diff suppressed because one or more lines are too long
10892
index.html
10892
index.html
File diff suppressed because one or more lines are too long
19
loader.svg
Normal file
19
loader.svg
Normal file
@ -0,0 +1,19 @@
|
||||
<svg width="128" height="256" viewBox="0 0 128 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="128" height="256" fill="white"/>
|
||||
<rect x="41" y="10" width="39" height="8" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="41" y="21" width="79" height="13" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="41" y="39" width="79" height="20" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="8" y="10" width="27" height="27" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="41" y="72" width="39" height="8" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="41" y="83" width="79" height="13" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="41" y="101" width="79" height="20" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="8" y="72" width="27" height="27" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="41" y="134" width="39" height="8" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="41" y="145" width="79" height="13" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="41" y="163" width="79" height="20" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="8" y="134" width="27" height="27" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="41" y="196" width="39" height="8" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="41" y="207" width="79" height="13" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="41" y="225" width="79" height="20" rx="2" fill="#DEDEDE"/>
|
||||
<rect x="8" y="196" width="27" height="27" rx="2" fill="#DEDEDE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
11
logo.svg
Normal file
11
logo.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="128" height="128" fill="white"/>
|
||||
<rect width="128" height="128" fill="black"/>
|
||||
<path d="M55.4923 70L44.2958 54.2795C50.5234 52.1179 54.6311 46.8777 54.6311 40.1965C54.6311 31.2882 47.3433 25 37.4718 25H17V70H26.739V55.393H33.9605L44.362 70H55.4923ZM26.739 33.8428H36.4118C41.2482 33.8428 44.5608 36.3319 44.5608 40.1965C44.5608 44.0611 41.2482 46.5502 36.4118 46.5502H26.739V33.8428Z" fill="white"/>
|
||||
<path d="M62.2987 70H72.0377V41.9651L86.1493 67.3799L100.195 41.9651V70H110V25H100.195L86.1493 50.4148L72.0377 25H62.2987V70Z" fill="white"/>
|
||||
<path d="M23.713 102.629H28.3556V85.4866H35.0685V81.3713H17V85.4866H23.713V102.629Z" fill="white"/>
|
||||
<path d="M38.2265 102.629H42.8691V81.3713H38.2265V102.629Z" fill="white"/>
|
||||
<path d="M47.3583 102.629H51.9695V89.3854L58.6511 101.391L65.3013 89.3854V102.629H69.9439V81.3713H65.3013L58.6511 93.3769L51.9695 81.3713H47.3583V102.629Z" fill="white"/>
|
||||
<path d="M90.967 85.4866V81.3713H74.3728V102.629H90.967V98.5134H79.0154V93.8411H89.8377V89.7257H79.0154V85.4866H90.967Z" fill="white"/>
|
||||
<path d="M102.624 103C107.894 103 111 100.308 111 96.2546C111 92.3249 107.926 90.9634 103.283 89.9423C99.9581 89.1997 98.672 88.7046 98.672 87.1575C98.672 85.8889 99.864 84.8678 101.84 84.8678C103.911 84.8678 106.075 85.7032 107.989 87.2194L110.404 83.9395C108.208 82.083 105.479 81 101.966 81C97.2604 81 93.998 83.692 93.998 87.6217C93.998 91.737 97.229 93.0056 101.778 94.0267C105.071 94.7693 106.326 95.2335 106.326 96.7496C106.326 98.0802 105.134 99.1322 102.813 99.1322C100.084 99.1322 97.7623 98.0802 95.7233 96.3474L93.057 99.4726C95.5665 101.762 98.8916 103 102.624 103Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
20
morning.svg
Normal file
20
morning.svg
Normal file
@ -0,0 +1,20 @@
|
||||
<svg width="93" height="93" viewBox="0 0 93 93" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d)">
|
||||
<path d="M46.3 80.6C67.4525 80.6 84.6 63.4525 84.6 42.3C84.6 21.1475 67.4525 4 46.3 4C25.1475 4 8 21.1475 8 42.3C8 63.4525 25.1475 80.6 46.3 80.6Z" fill="url(#paint0_linear)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="0" y="0" width="92.6" height="92.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.603922 0 0 0 0 0.121569 0 0 0 0.32 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear" x1="46.3" y1="3.988" x2="46.3" y2="80.612" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFD95B"/>
|
||||
<stop offset="1" stop-color="#FF9419"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
38
night.svg
Normal file
38
night.svg
Normal file
@ -0,0 +1,38 @@
|
||||
<svg width="99" height="99" viewBox="0 0 99 99" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d)">
|
||||
<path d="M73.7 62.2C55.8 62.2 41.3 47.7 41.3 29.8C41.3 22.5 43.7 15.8 47.7 10.4C27.9 11.5 12.2 28 12.2 48C12.2 68.8 29.1 85.7 49.9 85.7C66.6 85.7 80.7 74.9 85.7 59.9C82 61.4 77.9 62.2 73.7 62.2Z" fill="url(#paint0_linear)"/>
|
||||
</g>
|
||||
<path d="M3.79999 7.6C5.89867 7.6 7.59999 5.89868 7.59999 3.8C7.59999 1.70132 5.89867 0 3.79999 0C1.70131 0 0 1.70132 0 3.8C0 5.89868 1.70131 7.6 3.79999 7.6Z" fill="url(#paint1_linear)"/>
|
||||
<path d="M96.8 95.7C97.8493 95.7 98.7 94.8493 98.7 93.8C98.7 92.7507 97.8493 91.9 96.8 91.9C95.7506 91.9 94.9 92.7507 94.9 93.8C94.9 94.8493 95.7506 95.7 96.8 95.7Z" fill="url(#paint2_linear)"/>
|
||||
<path d="M86.7 23.4C87.5837 23.4 88.3 22.6837 88.3 21.8C88.3 20.9163 87.5837 20.2 86.7 20.2C85.8163 20.2 85.1 20.9163 85.1 21.8C85.1 22.6837 85.8163 23.4 86.7 23.4Z" fill="url(#paint3_linear)"/>
|
||||
<path d="M12.4 81.1C13.3941 81.1 14.2 80.2941 14.2 79.3C14.2 78.3059 13.3941 77.5 12.4 77.5C11.4059 77.5 10.6 78.3059 10.6 79.3C10.6 80.2941 11.4059 81.1 12.4 81.1Z" fill="#4253B7"/>
|
||||
<path d="M19.4 99C20.8359 99 22 97.8359 22 96.4C22 94.9641 20.8359 93.8 19.4 93.8C17.9641 93.8 16.8 94.9641 16.8 96.4C16.8 97.8359 17.9641 99 19.4 99Z" fill="#4253B7"/>
|
||||
<path d="M90.7 2.1C91.2523 2.1 91.7 1.65228 91.7 1.1C91.7 0.547714 91.2523 0.0999985 90.7 0.0999985C90.1477 0.0999985 89.7 0.547714 89.7 1.1C89.7 1.65228 90.1477 2.1 90.7 2.1Z" fill="#4253B7"/>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="3.2" y="5.4" width="91.5" height="93.3" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="4.5"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.121569 0 0 0 0 0.0431373 0 0 0 0 0.219608 0 0 0 0.24 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear" x1="18.049" y1="79.8901" x2="70.0209" y2="27.889" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0E0319"/>
|
||||
<stop offset="1" stop-color="#6D30C6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="0.558399" y1="7.1335" x2="6.8166" y2="0.871708" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0E0319"/>
|
||||
<stop offset="1" stop-color="#6D30C6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="95.1481" y1="95.4429" x2="98.3268" y2="92.2623" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0E0319"/>
|
||||
<stop offset="1" stop-color="#6D30C6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="85.3272" y1="23.2212" x2="87.9825" y2="20.5644" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0E0319"/>
|
||||
<stop offset="1" stop-color="#6D30C6"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
36
noon.svg
Normal file
36
noon.svg
Normal file
@ -0,0 +1,36 @@
|
||||
<svg width="112" height="93" viewBox="0 0 112 93" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d)">
|
||||
<path d="M65.5 80.6C86.6525 80.6 103.8 63.4525 103.8 42.3C103.8 21.1475 86.6525 4 65.5 4C44.3475 4 27.2 21.1475 27.2 42.3C27.2 63.4525 44.3475 80.6 65.5 80.6Z" fill="url(#paint0_linear)"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d)">
|
||||
<path d="M61.2 63C61.2 54.2 54.1 47.1 45.3 47.1C44.7 47.1 44.1 47.1 43.4 47.2C39.7 41.7 33.5 38.1 26.4 38.1C15.1 38.1 6 47.2 6 58.5C6 69.8 15.1 78.9 26.4 78.9H45.7C54.3 78.6 61.2 71.6 61.2 63Z" fill="url(#paint1_linear)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="19.2" y="0" width="92.6" height="92.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.933333 0 0 0 0 0.141177 0 0 0 0 0.137255 0 0 0 0.32 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d" x="0" y="36.1" width="67.2" height="52.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear" x1="65.52" y1="3.988" x2="65.52" y2="80.612" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F7931E"/>
|
||||
<stop offset="1" stop-color="#ED1C24"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="17.1779" y1="76.823" x2="46.1452" y2="46.9915" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E6E6E6"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in New Issue
Block a user