Skip to content

Commit

Permalink
ref(changelog): Clean up some styling (#10848)
Browse files Browse the repository at this point in the history
  • Loading branch information
lforst authored Jul 25, 2024
1 parent ab11e5c commit 1f5fd9f
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 147 deletions.
Empty file.
3 changes: 0 additions & 3 deletions apps/changelog/src/app/(changelog)/layout.module.css

This file was deleted.

2 changes: 1 addition & 1 deletion apps/changelog/src/app/(changelog)/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function ChangelogLayout({children}: {children: ReactNode}) {
return (
<Fragment>
<NextTopLoader color="#8d5494" />
<div className={styles.changelogContent}>
<div className="font-sans">
<Navbar />
<div className="bg-gray-100">{children}</div>
<div className="w-full mx-auto h-16 relative bg-darkPurple">
Expand Down
121 changes: 8 additions & 113 deletions apps/changelog/src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,19 @@
@tailwind components;
@tailwind utilities;

.radix-themes {
--cursor-button: pointer;
--iris-9: var(--accent-purple);
--iris-a9: var(--accent-purple);
--shadow-6: 0px 4px 16px 0px rgba(31, 22, 51, 0.1);
}

.fancy-border {
transition-property: box-shadow, border-color;
transition-duration: 0.25s;
transition-timing-function: ease-out;
}

&:hover {
box-shadow:
0 2px 0 rgba(54, 45, 89, 0.15),
-0.1875rem -0.1875rem 0 0.1875rem #f2b712,
0 0 0 0.375rem #e1567c;
text-decoration: none;
cursor: pointer;
}
.fancy-border:hover {
box-shadow:
0 2px 0 rgba(54, 45, 89, 0.15),
-0.1875rem -0.1875rem 0 0.1875rem #f2b712,
0 0 0 0.375rem #e1567c;
text-decoration: none;
cursor: pointer;
}

.hero-top-left-down-slope {
Expand All @@ -38,105 +31,7 @@
clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}

.icon {
margin-left: 0.25em;

svg {
display: inline;
width: 14px;
height: 14px;
}
}

.icon-external-link {
margin-left: 0;

svg {
margin-left: 0.15em;
}
}

:root {
/* Oranges */
--flame0: #df5128;
--flame1: #e55e32;
--flame2: #ea6b3c;
--flame3: #ef7846;
--flame4: #f4834f;
--flame5: #f79a4f;
--flame6: #faaf4e;
--flame7: #edcf9e;
--flame8: #ffefae;

/* A range of desaturated purples */
--desatPurple0: #0f0a1f;
--desatPurple1: #231c3d;
--desatPurple2: #362d59;
--desatPurple3: #473a67;
--desatPurple4: #584774;
--desatPurple5: #64517d;
--desatPurple6: #79628c;
--desatPurple7: #846e95;
--desatPurple8: #9481a4;
--desatPurple9: #a796b4;
--desatPurple10: #bbadc6;
--desatPurple11: #c3b6ce;
--desatPurple12: #d2c7da;
--desatPurple13: #e2d9e9;
--desatPurple14: #efe8f4;
--desatPurple15: #faf8ff;

/* saturated purples */
--brandPink: #e1557c;
--brandLink: var(--brandPink);
--darkPink: #c83852;
--codeColor: #9c5f99;
--brandDecoration: var(--desatPurple4);
/* accents */
--accent-purple: #6a5fc1;
--accent-md-violet: '#584774';
--accent-purple-light: #e1dff3;
--accent-yellow: #fedb4b;
--gray: #c7c5cc;
--dark-purple: #1f1633;
/* misc */
--jewel0: #69c289;
/* Sentry green */
--jewel1: #007a78;
/* Darkened Sentry green */
--lightBlue: #48a5db;
/* Sentry blue */

/*
Color variables
*/
--white: #ffffff;
--lightText: #9093c1;
--highlightPurple: var(--brandLink);
--lightPurple: var(--desatPurple11);
--lightestPurple: var(--desatPurple12);
--mediumPurple: var(--desatPurple6);
--darkestPurple: var(--desatPurple0);
--darkPurple: var(--desatPurple2);
--boldRed: var(--flame0);
--textDecorationPurple: var(--brandDecoration);
--lightestPurpleBackground: rgba(210, 199, 218, 0.2);
--successGreen: var(--jewel0);

--transition-time: 0.125s;

--headerHeight: 4rem;

--light-text: var(--lightText);
--lightest-purple-background: var(--lightestPurpleBackground);

--paragraph-margin-bottom: 1rem;
--border-color: #dee2e6;
--font-family-monospace: 'Roboto Mono', SFMono-Regular, Consolas, Liberation Mono, Menlo,
Courier, monospace;

--fade-in-animation: fadeIn;

/* https://storybook.sentry.dev/?path=/story/core-colors--page */
--gray-500: #2b2233;
--gray-400: #3e3446;
Expand Down
68 changes: 38 additions & 30 deletions apps/changelog/tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,60 +1,68 @@
const defaultTheme = require("tailwindcss/defaultTheme");
const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
animation: {
"fade-in": "fadeIn 0.35s ease-in-out",
"fade-in-left": "fadeInLeft 0.55s ease-in-out",
"fade-in-right": "fadeInRight 0.55s ease-in-out",
'fade-in': 'fadeIn 0.35s ease-in-out',
'fade-in-left': 'fadeInLeft 0.55s ease-in-out',
'fade-in-right': 'fadeInRight 0.55s ease-in-out',
},
boxShadow: {
DEFAULT: "var(--shadow-6)",
DEFAULT: 'var(--shadow-6)',
},
keyframes: () => ({
fadeIn: {
"0%": { opacity: 0 },
"100%": { opacity: 1 },
'0%': {opacity: 0},
'100%': {opacity: 1},
},
fadeInLeft: {
"0%": { opacity: 0, transform: "translateX(-20px)" },
"100%": { opacity: 1, transform: "translateX(0)" },
'0%': {opacity: 0, transform: 'translateX(-20px)'},
'100%': {opacity: 1, transform: 'translateX(0)'},
},
fadeInRight: {
"0%": { opacity: 0, transform: "translateX(20px)" },
"100%": { opacity: 1, transform: "translateX(0)" },
'0%': {opacity: 0, transform: 'translateX(20px)'},
'100%': {opacity: 1, transform: 'translateX(0)'},
},
}),
fontFamily: {
sans: [
"var(--font-rubik)",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Helvetica",
"Arial",
'var(--font-rubik)',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Helvetica',
'Arial',
...defaultTheme.fontFamily.sans,
],
mono: "var(--font-family-monospace)",
mono: [
'Roboto Mono',
'SFMono-Regular',
'Consolas',
'Liberation Mono',
'Menlo',
'Courier',
'monospace',
],
},
colors: {
primary: "#362d59",
pruple: "#8d5494",
darkPurple: "#1F1633",
"accent-purple": "#6A5FC1",
"accent-md-violet": "#584774",
red: "#e1567c",
gold: "#F1B71C",
primary: '#362d59',
pruple: '#8d5494',
darkPurple: '#1F1633',
'accent-purple': '#6A5FC1',
'accent-md-violet': '#584774',
red: '#e1567c',
gold: '#F1B71C',
},
},
},
plugins: [
require("@tailwindcss/typography"),
require("@tailwindcss/forms")({
strategy: "class",
require('@tailwindcss/typography'),
require('@tailwindcss/forms')({
strategy: 'class',
}),
],
blocklist: ["collapse"],
blocklist: ['collapse'],
};

0 comments on commit 1f5fd9f

Please sign in to comment.