added new layout and fonts
This commit is contained in:
parent
4d5e820b7c
commit
4e0017adc2
14 changed files with 409 additions and 41 deletions
|
|
@ -4,8 +4,10 @@
|
|||
/* Custom fonts */
|
||||
@import url(./fonts.css);
|
||||
|
||||
@import url(./margins.css);
|
||||
|
||||
:root {
|
||||
--font-family: "Lilita One", -apple-system, system-ui, sans-serif;
|
||||
--font-family: "Source Sans 3", -apple-system, system-ui, sans-serif;
|
||||
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono,
|
||||
Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
|
||||
|
|
@ -13,26 +15,9 @@
|
|||
}
|
||||
|
||||
:root {
|
||||
--background-color: #363d4a;
|
||||
--dark-background-color: hsl(219, 16%, 20%);
|
||||
--accent-color: #70bafa;
|
||||
|
||||
--accent-red: #ffaaaa;
|
||||
--accent-node3d: #ffaaaa;
|
||||
|
||||
--accent-green: #aaffaa;
|
||||
--accent-control: #aaffaa;
|
||||
|
||||
--accent-blue: #aaaaff;
|
||||
--accent-node2d: #aaaaff;
|
||||
|
||||
--accent-yellow: #ffffaa;
|
||||
|
||||
--aceent-purple: #c25bff;
|
||||
--accent-media: #c25bff;
|
||||
|
||||
--white: #eeeeee;
|
||||
--dark-white: #cccccc;
|
||||
--background-color: #121212;
|
||||
--background-color-dark: #080808;
|
||||
--accent-color: #daa520;
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -47,40 +32,45 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Crimson Pro";
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 1rem;
|
||||
background-color: var(--dark-background-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.recent-posts-container {
|
||||
margin: 12px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.highlight-card {
|
||||
max-width: 24rem;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
padding: 14px;
|
||||
width: 100%;
|
||||
justify-content: stretch;
|
||||
background-color: var(--dark-background-color);
|
||||
}
|
||||
|
||||
.highlight-card-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 10px;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.highlight-card img {
|
||||
border-radius: 16px;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
object-fit: cover;
|
||||
|
|
@ -89,7 +79,6 @@ h6 {
|
|||
}
|
||||
|
||||
.highlight-card a {
|
||||
color: unset;
|
||||
color: var(--white);
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
|
|
@ -102,16 +91,13 @@ h6 {
|
|||
cursor: pointer;
|
||||
background-color: var(--accent-color);
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.content-type.article {
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
.content-type.tip {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.content-type.recommendation {
|
||||
color: var(--accent-yellow);
|
||||
.content-type {
|
||||
font-family: "Crimson Pro";
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
padding: 2px 7px 5px 7px;
|
||||
background-color: var(--background-color-dark);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue