Add feed button
This commit is contained in:
parent
df46571240
commit
ee06791ef7
@ -23,6 +23,23 @@ body.with-sidebar {
|
|||||||
.sidebar h2 {
|
.sidebar h2 {
|
||||||
color: var(--primary-red);
|
color: var(--primary-red);
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-add-feed {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-muted);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.25rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-add-feed:hover {
|
||||||
|
color: var(--primary-red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar ul {
|
.sidebar ul {
|
||||||
@ -131,8 +148,8 @@ body.with-sidebar {
|
|||||||
background-color: #333;
|
background-color: #333;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
display: flex;
|
display: grid;
|
||||||
justify-content: space-between;
|
grid-template-columns: 1fr auto 1fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -146,9 +163,8 @@ body.with-sidebar {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--primary-red);
|
color: var(--primary-red);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
position: absolute;
|
text-align: center;
|
||||||
left: 50%;
|
grid-column: 2;
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.feed-title-separator {
|
.feed-title-separator {
|
||||||
@ -582,6 +598,8 @@ button:disabled {
|
|||||||
/* User menu styles */
|
/* User menu styles */
|
||||||
.user-menu {
|
.user-menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
grid-column: 3;
|
||||||
|
justify-self: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-menu-button {
|
.user-menu-button {
|
||||||
|
@ -9,9 +9,6 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="with-sidebar">
|
<body class="with-sidebar">
|
||||||
<header class="top-bar">
|
<header class="top-bar">
|
||||||
<nav class="top-bar-buttons">
|
|
||||||
<button class="add-feed-button" id="addFeedButton">Add Feed</button>
|
|
||||||
</nav>
|
|
||||||
<h1 class="top-bar-title">RSS Reader</h1>
|
<h1 class="top-bar-title">RSS Reader</h1>
|
||||||
<div class="user-menu">
|
<div class="user-menu">
|
||||||
<button class="user-menu-button" id="userMenuButton">
|
<button class="user-menu-button" id="userMenuButton">
|
||||||
@ -51,7 +48,12 @@
|
|||||||
</dialog>
|
</dialog>
|
||||||
|
|
||||||
<aside class="sidebar">
|
<aside class="sidebar">
|
||||||
<h2>Feeds</h2>
|
<h2>
|
||||||
|
Feeds
|
||||||
|
<button class="sidebar-add-feed" id="addFeedButton" title="Add Feed">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
<nav id="feedList">
|
<nav id="feedList">
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
|
Loading…
Reference in New Issue
Block a user