kopia lustrzana https://github.com/cloudflare/wildebeest
delete theme.scss file and apply related refactoring/improvements
Dario Piotrowicz
rodzic
fb14050e67
commit
362304ffe4
|
|
@ -1,15 +1,14 @@
|
|||
@use '../theme.scss' as theme;
|
||||
|
||||
.status-content {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: theme.$indigo400;
|
||||
color: #8c8dff;
|
||||
}
|
||||
a.mention {
|
||||
color: theme.$slate200;
|
||||
color: #dbeafe;
|
||||
}
|
||||
a.hashtag {
|
||||
color: theme.$slate200;
|
||||
color: #dbeafe;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,6 +39,6 @@
|
|||
}
|
||||
|
||||
.status-link {
|
||||
color: theme.$slate200;
|
||||
color: #dbeafe;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export default component$((props: Props) => {
|
|||
<div class="p-4 border-t border-slate-600 pointer" onClick$={handleContentClick}>
|
||||
<div class="flex justify-between">
|
||||
<div class="flex">
|
||||
<img class="avatar" src={status.account.avatar} />
|
||||
<img class="avatar rounded" src={status.account.avatar} />
|
||||
<div class="flex-col ml-3">
|
||||
<div class="p-1">
|
||||
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
@use '../../theme.scss' as theme;
|
||||
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
// compensates for the 10px set w/ sticky on the main app columns
|
||||
padding-top: 10px;
|
||||
background: theme.$backgroundBaseColor;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ export default component$(() => {
|
|||
useStylesScoped$(styles)
|
||||
|
||||
return (
|
||||
<header>
|
||||
<header class="bg-slate-900">
|
||||
<Slot />
|
||||
</header>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default component$(() => {
|
|||
<script src="https://kit.fontawesome.com/e3d907997f.js" crossorigin="anonymous"></script>
|
||||
<RouterHead />
|
||||
</head>
|
||||
<body lang="en">
|
||||
<body lang="en" class="bg-slate-900 text-white">
|
||||
<RouterOutlet />
|
||||
<ServiceWorkerRegister />
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
@use '../../theme.scss';
|
||||
|
||||
.search {
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
font-family: inherit;
|
||||
background: theme.$slate800;
|
||||
color: theme.$slate400;
|
||||
border-radius: theme.$radius-medium;
|
||||
margin: 0;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
|
@ -1,13 +1,9 @@
|
|||
import { component$, useStylesScoped$ } from '@builder.io/qwik'
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import InstanceDetails from './InstanceDetails'
|
||||
import styles from './LeftColumn.scss?inline'
|
||||
|
||||
export const LeftColumn = component$(() => {
|
||||
useStylesScoped$(styles)
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <input class="search" type="text" placeholder="search" /> */}
|
||||
<InstanceDetails />
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
@use '../../../theme.scss' as theme;
|
||||
|
||||
.back-button {
|
||||
background: transparent;
|
||||
color: theme.$indigo400;
|
||||
}
|
||||
|
||||
.back-button-text {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import { component$, useStyles$ } from '@builder.io/qwik'
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { MastodonStatus, StatusContext } from '~/types'
|
||||
import styles from './index.scss?inline'
|
||||
import Status from '~/components/Status'
|
||||
import { formatDateTime } from '~/utils/dateTime'
|
||||
import { formatRoundedNumber } from '~/utils/numbers'
|
||||
|
|
@ -19,8 +18,6 @@ export const statusLoader = loader$<
|
|||
})
|
||||
|
||||
export default component$(() => {
|
||||
useStyles$(styles)
|
||||
|
||||
const { status, context } = statusLoader.use().value
|
||||
const mediaAttachment = (status.media_attachments && status.media_attachments[0]) || null
|
||||
|
||||
|
|
@ -28,9 +25,9 @@ export default component$(() => {
|
|||
<>
|
||||
<StickyHeader>
|
||||
<div class="flex justify-between items-center rounded-t header bg-slate-700">
|
||||
<Link class="text-semi back-button p-4" href="/explore">
|
||||
<Link class="text-semi no-underline text-indigo-400 bg-transparent p-4" href="/explore">
|
||||
<i class="fa fa-chevron-left mr-2" />
|
||||
<span class="back-button-text">Back</span>
|
||||
<span class="hover:underline">Back</span>
|
||||
</Link>
|
||||
<i class="fa fa-eye mr-4 text-slate-400" />
|
||||
</div>
|
||||
|
|
@ -38,7 +35,7 @@ export default component$(() => {
|
|||
<div class="bg-slate-700 p-4">
|
||||
{/* Account Card */}
|
||||
<div class="flex">
|
||||
<img class="avatar" src={status.account.avatar} />
|
||||
<img class="avatar rounded" src={status.account.avatar} />
|
||||
<div class="flex flex-col">
|
||||
<div class="p-1">
|
||||
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@use '../../theme.scss' as theme;
|
||||
|
||||
.explore-wrapper {
|
||||
display: flex;
|
||||
|
|
@ -12,7 +11,7 @@
|
|||
}
|
||||
|
||||
.active {
|
||||
color: theme.$slate200;
|
||||
color: #dbeafe;
|
||||
position: relative;
|
||||
|
||||
&::before,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,3 @@
|
|||
@use '../../../theme.scss' as theme;
|
||||
|
||||
.link-wrapper {
|
||||
&:hover {
|
||||
background-color: theme.$slate700;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 120px;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default component$(() => {
|
|||
<>
|
||||
{links.map((link) => (
|
||||
<a href={link.url} class="no-decoration" target="_blank">
|
||||
<div class="p-4 flex justify-between border-b border-slate-600 link-wrapper">
|
||||
<div class="p-4 flex justify-between border-b border-slate-600 hover:bg-slate-700">
|
||||
<div class="mr-6">
|
||||
<div class="my-2 text-sm text-slate-400">{link.provider_name}</div>
|
||||
<div class="mb-2 text-lg text-bold leading-normal">{link.title}</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@use '../theme.scss' as theme;
|
||||
|
||||
.main-wrapper {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
@use './theme.scss' as theme;
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
background-color: theme.$backgroundBaseColor;
|
||||
color: theme.$fontBaseColor;
|
||||
font-family: ui-sans-serif, sans-serif, ui-sans-serif;
|
||||
line-height: 1.25rem;
|
||||
text-rendering: optimizelegibility;
|
||||
|
|
@ -22,23 +19,11 @@ button {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
* {
|
||||
// border defaults
|
||||
border: 0 solid theme.$slate100;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: theme.$radius-medium;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: theme.$radius-medium;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
|
||||
$radius-medium: 0.25rem;
|
||||
|
||||
$slate100: #eff6ff;
|
||||
$slate200: #dbeafe;
|
||||
$slate400: #9baec8;
|
||||
$slate700: #313543;
|
||||
$slate800: #282c37;
|
||||
$slate900: #1f232b;
|
||||
|
||||
$indigo400: #8c8dff;
|
||||
|
||||
// $backgroundBaseColor: $slate900;
|
||||
$backgroundBaseColor: #191b22;
|
||||
$fontBaseColor: #fff;
|
||||
Ładowanie…
Reference in New Issue