Reorganize styles.css a bit, moving common / utility / layout styles to top of file
This commit is contained in:
Alessio
parent
697c58e439
commit
aeb2782356
@ -31,23 +31,35 @@ const QColor COLOR_SPACE_PURPLE_OUTLINE = QColor(100, 82, 252);
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
*
|
||||
* Base styles
|
||||
* -----------
|
||||
*
|
||||
* Page global / default styles. Should only use tag selectors or attribute selectors. No ID or
|
||||
* class selectors; those are purpose-specific, i.e., non-default.
|
||||
*
|
||||
***************************************************************************************************/
|
||||
|
||||
html {
|
||||
/* Force scrollbar, even when it fits on 1 page. Prevents viewport from resizing -> flickering / stuff moving btw page loads */
|
||||
/*
|
||||
* Force scrollbar, even when it fits on 1 page. Prevents viewport from resizing -> flickering
|
||||
* and stuff moving between page loads
|
||||
*/
|
||||
overflow-y: scroll;
|
||||
}
|
||||
body {
|
||||
margin: 0 30%;
|
||||
min-height: 100vh;
|
||||
|
||||
border-color: var(--color-twitter-off-white-dark);
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
border-width: 1px;
|
||||
min-height: 100vh;
|
||||
|
||||
font-family: "Titillium Web";
|
||||
}
|
||||
main {
|
||||
padding-top: 4em;
|
||||
}
|
||||
input, select {
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
@ -55,11 +67,117 @@ input, select {
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: var(--color-twitter-blue-light);
|
||||
width: 10em;
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
h1 {
|
||||
margin: 0.5em 0;
|
||||
text-align: center;
|
||||
}
|
||||
h3 {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
*
|
||||
* Utility styles
|
||||
* --------------
|
||||
*
|
||||
* Generic or reusable styles. Should use only class selectors. Should *not* actually be modules
|
||||
* (anything application specific).
|
||||
*
|
||||
***************************************************************************************************/
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.row--spread {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* A list of items separated by interpuncts */
|
||||
.inline-dotted-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
.inline-dotted-list > * {
|
||||
display: inline;
|
||||
}
|
||||
.inline-dotted-list > *:after {
|
||||
content: " ⋅";
|
||||
}
|
||||
.inline-dotted-list > *:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.rounded-gray-outline {
|
||||
outline-color: lightgray;
|
||||
outline-style: solid;
|
||||
outline-width: 1px;
|
||||
overflow: hidden;
|
||||
border-radius: 1.5em;
|
||||
}
|
||||
|
||||
/***************************************************************************************************
|
||||
*
|
||||
* Layout styles
|
||||
* -------------
|
||||
*
|
||||
* Major page elements. Can use semantic HTML tag names and IDs. Class selectors are for modules.
|
||||
*
|
||||
***************************************************************************************************/
|
||||
|
||||
header {
|
||||
/* Sticky to top of page */
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
|
||||
/* Match layout width of `body` */
|
||||
left: 30%;
|
||||
right: 30%;
|
||||
|
||||
height: 4em;
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid var(--color-outline-gray);
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
main {
|
||||
/* Space taken up by the header search bar */
|
||||
padding-top: 4em;
|
||||
}
|
||||
|
||||
#nav-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
transform: translate(-100%, 0);
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
*
|
||||
* Module styles
|
||||
* -------------
|
||||
*
|
||||
* Normal page elements. Should only use classes; no IDs or tag names.
|
||||
*
|
||||
*******************************************************************************/
|
||||
|
||||
.server-error-msg {
|
||||
position: fixed;
|
||||
@ -83,24 +201,11 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.inline-dotted-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
ul.inline-dotted-list li {
|
||||
display: inline;
|
||||
}
|
||||
ul.inline-dotted-list li:after {
|
||||
content: " ⋅";
|
||||
}
|
||||
ul.inline-dotted-list li:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.tweet {
|
||||
padding: 0 1.5em;
|
||||
position: relative;
|
||||
z-index: 0; /* Dunno why, but without it, hovering a tweet with a Poll hides the poll fill bars */
|
||||
overflow: hidden; /* Otherwise HTMX spinner sticks over the rounded edges in a quoted tweet */
|
||||
}
|
||||
:not(#focused-tweet) > .tweet:hover:not(:has(.tweet:hover)) {
|
||||
background-color: var(--color-twitter-off-white);
|
||||
@ -168,25 +273,10 @@ dialog::backdrop {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.rounded-gray-outline {
|
||||
outline-color: lightgray;
|
||||
outline-style: solid;
|
||||
outline-width: 1px;
|
||||
}
|
||||
.rounded-gray-outline, .rounded-gray-outline > .tweet {
|
||||
border-radius: 1.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-banner-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.unstyled-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.author-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -241,7 +331,6 @@ dialog::backdrop {
|
||||
color: var(--color-twitter-text-gray);
|
||||
}
|
||||
a.entity {
|
||||
text-decoration: none;
|
||||
color: var(--color-twitter-blue);
|
||||
}
|
||||
|
||||
@ -281,9 +370,6 @@ img.embedded-link-preview {
|
||||
font-size: 0.8em;
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.embedded-link-domain-container {
|
||||
margin-top: 0.2em
|
||||
}
|
||||
@ -356,15 +442,6 @@ img.svg-icon.pinned-tweet__pin-icon {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.row.spread {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.vertical-reply-line-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
@ -421,13 +498,6 @@ p.posted-at {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid var(--color-twitter-off-white-dark);
|
||||
}
|
||||
.nav-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
transform: translate(-100%, 0);
|
||||
font-size: 1.4em;
|
||||
}
|
||||
ul.quick-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -511,22 +581,6 @@ ul.quick-links {
|
||||
background-color: var(--color-twitter-blue-extra-light);
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 4em;
|
||||
padding: 0.5em 1em;
|
||||
gap: 1em;
|
||||
border: 1px solid var(--color-outline-gray);
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
width: 40%;
|
||||
left: 30%;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
flex-grow: 0;
|
||||
border-radius: 50%;
|
||||
@ -553,7 +607,8 @@ svg {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.top-bar form {
|
||||
.search-form {
|
||||
margin-left: 1em;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
@ -587,14 +642,7 @@ svg {
|
||||
.submit-container {
|
||||
text-align: right;
|
||||
}
|
||||
input[type="submit"] {
|
||||
background-color: var(--color-twitter-blue-light);
|
||||
width: 10em;
|
||||
padding: 1em;
|
||||
border-radius: 1em;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.change-session-form select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
@ -21,21 +21,20 @@
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<header class="row search-bar">
|
||||
<a onclick="window.history.back()" class="back-button quick-link">
|
||||
<img class="svg-icon" src="/static/icons/back.svg" width="24" height="24"/>
|
||||
</a>
|
||||
<form hx-get="/search" hx-push-url="true" hx-target="body" hx-swap="inner-html show:window:top">
|
||||
<form class="search-form" hx-get="/search" hx-push-url="true" hx-target="body" hx-swap="inner-html show:window:top">
|
||||
<input id="search-bar"
|
||||
name="q"
|
||||
placeholder="Search" type="text"
|
||||
{{with (search_text)}} value="{{.}}" {{end}}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
{{template "nav-sidebar"}}
|
||||
<main>
|
||||
{{template "main" .}}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{{define "nav-sidebar"}}
|
||||
<div class="nav-sidebar">
|
||||
<nav id="nav-sidebar">
|
||||
<div id="logged-in-user-info">
|
||||
<div class="quick-link" hx-get="/login" hx-trigger="click" hx-target="body" hx-push-url="true">
|
||||
{{template "author-info" active_user}}
|
||||
@ -72,5 +72,5 @@
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
{{end}}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<div class="users-list-previews">
|
||||
{{range .}}
|
||||
{{$max_display_users := 10}}
|
||||
<div class="users-list-preview row spread">
|
||||
<div class="users-list-preview row row--spread">
|
||||
<div class="list-info-container" hx-get="/lists/{{.ID}}" hx-trigger="click" hx-target="body" hx-push-url="true">
|
||||
<span class="list-name">{{.Name}}</span>
|
||||
<span class="num-users">({{(len .Users)}})</span>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
{{define "main"}}
|
||||
<div class="login">
|
||||
<form hx-post="/change-session" hx-target=".nav-sidebar" hx-swap="outerHTML" hx-ext="json-enc">
|
||||
<form hx-post="/change-session" hx-target="#nav-sidebar" hx-swap="outerHTML" hx-ext="json-enc">
|
||||
<label for="select-account">Choose account:</label>
|
||||
<select name="account" id="select-account">
|
||||
{{range .ExistingSessions}}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
{{define "main"}}
|
||||
<div class="search-header">
|
||||
<div class="row spread">
|
||||
<div class="row row--spread">
|
||||
<div class="dummy"></div> {{/* Extra div to take up a slot in the `row` */}}
|
||||
<h1>Search results: {{.SearchText}}</h1>
|
||||
<div class="user-feed-buttons-container">
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
{{range .UserIDs}}
|
||||
{{$user := (user .)}}
|
||||
<div class="user">
|
||||
<div class="row spread">
|
||||
<div class="row row--spread">
|
||||
{{template "author-info" $user}}
|
||||
{{if $.button_text}}
|
||||
<a class="unstyled-link quick-link danger" href="{{$.button_url}}?user_handle={{$user.Handle}}"onclick="return confirm('{{$.button_text}} this user? Are you sure?')">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user