Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styling Improvements #208

Merged
merged 18 commits into from
Jul 10, 2023
Merged

Styling Improvements #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
c3f50b5
Styling improvements
ChrisHinchey Jun 24, 2023
8d0c957
Additional styling changes
ChrisHinchey Jun 24, 2023
c173b97
Draft at table and modal styling
ChrisHinchey Jun 24, 2023
5fd0518
Dropshadow fixes
ChrisHinchey Jun 24, 2023
0f4f810
Fix alternating color for table in light mode
ChrisHinchey Jun 26, 2023
f2ca646
Improved styling for buttons
ChrisHinchey Jun 26, 2023
13f70b4
Increased table grouping font size
ChrisHinchey Jun 26, 2023
a8998ce
Fixed application page and documentation navigate
ChrisHinchey Jun 26, 2023
f290d63
Fixed framework page link styling
ChrisHinchey Jun 30, 2023
bb70bd1
Fix application page min height
ChrisHinchey Jul 1, 2023
8242c1d
Added border to guidance modal
ChrisHinchey Jul 6, 2023
07be5a0
Removed marked dependency
ChrisHinchey Jul 6, 2023
ed770ec
Changed some text size and coloring
ChrisHinchey Jul 10, 2023
68473b6
Changed Harden and Validate top content text size
ChrisHinchey Jul 10, 2023
fe8d2d4
Changed some text size and coloring
ChrisHinchey Jul 10, 2023
3fde1bf
Merge branch 'new-styling' of https://github.com/mitre/saf-site-front…
ChrisHinchey Jul 10, 2023
50c9606
Additional tables fixes
ChrisHinchey Jul 10, 2023
cce2c37
Merge branch 'main' into new-styling
ChrisHinchey Jul 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="bg-light-backdrop-primary dark:bg-dark-backdrop-primary overscroll-none">
<div class="bg-neutral-1 text-foreground overscroll-none">
<NuxtLayout>
<NuxtLoadingIndicator />
<!-- <NuxtLoadingBar :duration="1000" /> -->
Expand Down
94 changes: 92 additions & 2 deletions assets/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,102 @@
@tailwind components;
@tailwind utilities;

@layer base {
:root {
/* text #111921 */
--color-text-base: 17, 25, 33;
/* header #005B94 */
--color-text-header: 0, 91, 148;
/* subtext #707475 */
--color-text-muted: 112, 116, 117
/* --color-text-inverted: 79, 70, 229; */
/* highlighter #FFF601 */
--color-text-highlighter: 255, 246, 1;
/* primary #2563eb*/
--color-fill: 37, 99, 235;
/* dropshadow #000000*/
--color-dropshadow: 0, 0, 0;
/* blur #000000*/
--color-blur: 0, 0, 0;
/* accent #87deff*/
--color-accent: 135, 222, 255;
/* backdrop-primary #ffffff*/
--color-neutral-1: 255, 255, 255;
/* backdrop-secondary #f1f3f4*/
--color-neutral-2: 241, 243, 244;
/* backdrop-tertiary #d1d5db*/
--color-neutral-3: 209, 213, 219;
/* backdrop-quaternary #b8bec7*/
--color-neutral-4: 184, 190, 199;
/* btn-primary #2563eb*/
--color-button-accent: 37, 99, 235;
/* btn-primary-hover */
/* --color-button-accent-hover: 238, 242, 255; */
/* btn-primary-text #ffffff*/
--color-button-text: 255, 255, 255;
/* btn-disabled #9ca3af*/
--color-button-disabled: 156, 163, 175;
/* btn-disabled-text #000000*/
--color-button-disabled-text: 0, 0, 0;
/* nav-active #005b94*/
--color-nav-active: 0, 91, 148;
/* nav-hover #7E8284*/
--color-nav-hover: 126, 130, 132;
/* nav-inactive #111921*/
--color-nav-base: 17, 25, 33;
}

.dark {
/* text #ffffff */
--color-text-base: 255, 255, 255;
/* header #ffffff */
--color-text-header: 255, 255, 255;
/* subtext #a0a0a0 */
--color-text-muted: 160, 160, 160;
/* --color-text-inverted: 79, 70, 229; */
/* highlighter #FFF601 */
--color-text-highlighter: 255, 246, 1;
/* primary #2563eb*/
--color-fill: 37, 99, 235;
/* dropshadow #6b7280*/
--color-dropshadow: 107, 114, 128;
/* blur #000000*/
--color-blur: 0, 0, 0;
/* accent #87deff*/
--color-accent: 135, 222, 255;
/* backdrop-primary #121212*/
--color-neutral-1: 18, 18, 18;
/* backdrop-secondary #242424*/
--color-neutral-2: 36, 36, 36;
/* backdrop-tertiary #3b3b3b*/
--color-neutral-3: 59, 59, 59;
/* backdrop-quaternary #545454*/
--color-neutral-4: 84, 84, 84;
/* btn-primary #2563eb*/
--color-button-accent: 37, 99, 235;
/* btn-primary-hover */
/* --color-button-accent-hover: 238, 242, 255; */
/* btn-primary-text #ffffff*/
--color-button-text: 255, 255, 255;
/* btn-disabled #9ca3af*/
--color-button-disabled: 156, 163, 175;
/* btn-disabled-text #000000*/
--color-button-disabled-text: 0, 0, 0;
/* nav-active #0ea5e9*/
--color-nav-active: 14, 165, 233;
/* nav-hover #a0a0a0*/
--color-nav-hover: 160, 160, 160;
/* nav-inactive #ffffff*/
--color-nav-base: 255, 255, 255;
}
}

html {
scroll-padding-top: 90px;
}

h1,
/* h1,
h2,
h3 {
font-family: 'Roboto Slab';
}
} */
52 changes: 27 additions & 25 deletions components/ApplicationPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,33 @@
<template>
<div class="relative min-h-screen h-full pt-4 px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-7xl text-center">
<img :src="`${productIcon}`" class="w-14 md:w-20 aspect-square mx-auto my-2" aria-hidden="true"
alt="Alt text here" />
<h2 class="text-3xl font-bold tracking-tight text-light-header dark:text-dark-header sm:text-4xl">{{
title }}</h2>
<h3 class="mt-6 mx-auto leading-8 text-center text-light-text dark:text-dark-text">{{ grabber }}</h3>
<div class="prose dark:prose-invert max-w-none mt-8 mx-auto leading-8 text-left text-light-text dark:text-dark-text"
v-html="description">
</div>
<div class="min-h-[calc(100vh-252px)]">
<div class="relative h-full pt-4 px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-7xl text-center">
<img :src="`${productIcon}`" class="w-14 md:w-20 aspect-square mx-auto my-2" aria-hidden="true"
alt="Alt text here" />
<h2 class="text-4xl font-bold tracking-tight text-header sm:text-4xl">{{
title }}</h2>
<h3 class="mt-6 mx-auto leading-8 text-center text-base ">{{ grabber }}</h3>
<div class="prose dark:prose-invert max-w-none mt-8 mx-auto leading-8 text-left text-base "
v-html="description">
</div>

</div>
</div>
</div>
<div class="sm:flex sm:items-center mb-10 mx-auto">
<div class="sm:flex-auto">
<div class="mt-16 space-y-16">
<div v-for="(feature, featureIdx) in features" :key="feature.name"
:class="[featureIdx % 2 === 0 ? '' : 'bg-light-backdrop-secondary dark:bg-dark-backdrop-secondary', 'flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8 p-4']">
<div
:class="[featureIdx % 2 === 0 ? 'lg:col-start-1 lg:ml-10' : 'lg:col-start-8 xl:col-start-9 lg:mr-10', 'mt-6 lg:mt-0 lg:row-start-1 lg:col-span-5 xl:col-span-4 ']">
<h3 class="text-2xl font-bold text-light-text dark:text-dark-text">{{ feature.name }}</h3>
<p class="mt-2 text-lg text-light-text dark:text-dark-text">{{ feature.description }}</p>
</div>
<div
:class="[featureIdx % 2 === 0 ? 'lg:col-start-6 xl:col-start-5 lg:mr-10' : 'lg:col-start-1 lg:ml-10', 'flex-auto lg:row-start-1 lg:col-span-7 xl:col-span-8 ']">
<div class="aspect-w-5 aspect-h-2 overflow-hidden rounded-lg drop-shadow-2xl">
<img :src="feature.imageSrc" :alt="feature.imageAlt" class="object-cover object-center" />
<div class="sm:flex sm:items-center mb-10 mx-auto">
<div class="sm:flex-auto">
<div class="mt-16 space-y-16">
<div v-for="(feature, featureIdx) in features" :key="feature.name"
:class="[featureIdx % 2 === 0 ? '' : 'bg-neutral-2 ', 'flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8 p-4']">
<div
:class="[featureIdx % 2 === 0 ? 'lg:col-start-1 lg:ml-10' : 'lg:col-start-8 xl:col-start-9 lg:mr-10', 'mt-6 lg:mt-0 lg:row-start-1 lg:col-span-5 xl:col-span-4 ']">
<h3 class="text-2xl font-bold text-base ">{{ feature.name }}</h3>
<p class="mt-2 text-lg text-base ">{{ feature.description }}</p>
</div>
<div
:class="[featureIdx % 2 === 0 ? 'lg:col-start-6 xl:col-start-5 lg:mr-10' : 'lg:col-start-1 lg:ml-10', 'flex-auto lg:row-start-1 lg:col-span-7 xl:col-span-8 ']">
<div class="aspect-w-5 aspect-h-2 overflow-hidden rounded-lg drop-shadow-2xl">
<img :src="feature.imageSrc" :alt="feature.imageAlt" class="object-cover object-center" />
</div>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions components/Footer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<footer class="bg-light-backdrop-primary dark:bg-dark-backdrop-primary">
<div class="border-b-2 border-light-border-primary dark:border-dark-border-primary max-w-full mx-auto px-4 sm:px-1" />
<footer class="bg-neutral-1 ">
<div class="border-b-2 border-accent max-w-full mx-auto px-4 sm:px-1" />
<div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between justify-right lg:px-5">
<div class="flex justify-center space-x-6 md:order-2">
<a href="https://github.com/" aria-label="GitHub Link">
Expand All @@ -17,10 +17,10 @@
</a>
</div>
<div class="mt-8 mr-4 md:mt-0 md:order-1">
<p class="block text-center text-light-text dark:text-dark-text">Copyright © {{ copyrightYear }}, The MITRE
<p class="block text-center text-base ">Copyright © {{ copyrightYear }}, The MITRE
Corporation. All rights
reserved. </p>
<p class="block text-center text-base text-light-text dark:text-dark-text">MITRE is a registered trademark of The
<p class="block text-center text-base">MITRE is a registered trademark of The
MITRE Corporation.
Material on this site may be copied and distributed with permission only.</p>
</div>
Expand Down
6 changes: 3 additions & 3 deletions components/FrameworkPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
<div class="mx-auto max-w-7xl text-center">
<img :src="`${productIcon}`" class="w-14 md:w-20 aspect-square mx-auto my-2" aria-hidden="true"
alt="Alt text here" />
<h2 class="text-3xl font-bold tracking-tight text-light-header dark:text-dark-header sm:text-4xl">{{
<h2 class="text-4xl font-bold tracking-tight text-header sm:text-4xl">{{
title }}</h2>
<h3 class="mt-6 mx-auto leading-8 text-center text-light-text dark:text-dark-text">{{ grabber }}</h3>
<div class="mt-8 mx-auto leading-8 text-left text-light-text dark:text-dark-text" v-html="description">
<h3 class="mt-6 mx-auto leading-8 text-center text-base">{{ grabber }}</h3>
<div class="prose dark:prose-invert max-w-none mt-8 mx-auto leading-8 text-left text-base" v-html="description">
</div>

</div>
Expand Down
50 changes: 24 additions & 26 deletions components/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
<template>
<div class="sticky top-0 z-50 w-full ">
<Popover
class="bg-light-backdrop-primary dark:bg-dark-backdrop-primary border-b-2 border-light-border-primary dark:border-dark-border-primary">
<Popover class="bg-neutral-1 border-b-2 border-accent ">
<div class="max-w-8xl mx-auto px-4 sm:px-1">
<div class="flex justify-between items-center py-3 pl-0 sm:pl-3 md:pl-3 md:justify-start md:space-x-10">
<div class="flex justify-left md:flex-1 lg:w-0 lg:flex-1 min-w-max">
<NuxtLink to="/" class="flex">
<img src="@/assets/safLogo.svg" class="w-12 md:w-14" aria-hidden="true" alt="SAF© Logo" />
<h1
class="text-2xl tracking-tighter p-2 font-extrabold whitespace-nowrap text-light-text dark:text-dark-text md:text-3xl xl:text-4xl">
class="text-2xl tracking-tighter p-2 font-extrabold whitespace-nowrap text-header md:text-3xl xl:text-4xl">
<span class="block xl:inline font-mitre font-extrabold">MITRE SAF<span class="text-xs">©</span></span>
</h1>
</NuxtLink>
Expand All @@ -17,17 +16,17 @@
<div class="-mr-2 -my-2 flex sm:pr-3 lg:hidden">
<!-- TODO: Mobile Site Search-->
<PopoverButton
class="rounded-md p-2 inline-flex items-center justify-center text-nav-light-inactive hover:bg-nav-light-active focus:outline-none focus:ring-2 focus:ring-inset focus:ring-light-border-primary">
<span class="sr-only text-white">Open menu</span>
<DotsVerticalIcon class="h-6 w-6 text-light-text dark:text-dark-text" aria-hidden="true" />
class="rounded-md p-2 inline-flex items-center justify-center text-nav-base hover:bg-nav-active focus:outline-none focus:ring-2 focus:ring-inset focus:ring-accent">
<span class="sr-only">Open menu</span>
<DotsVerticalIcon class="h-6 w-6 text-base " aria-hidden="true" />
</PopoverButton>
</div>

<PopoverGroup as="nav" class="hidden lg:flex space-x-5 xl:space-x-10">
<NuxtLink to="/getting-started" :class="['text-base font-semibold font-mitre hover:text-nav-light-hover dark:hover:text-nav-dark-hover',
<NuxtLink to="/getting-started" :class="['text-base font-semibold font-mitre hover:text-nav-hover ',
'/getting-started' == route.fullPath
? 'text-nav-light-active dark:text-nav-dark-active'
: 'text-nav-light-inactive dark:text-nav-dark-inactive'
? 'text-nav-active '
: 'text-nav-base '
]">
Getting Started
</NuxtLink>
Expand All @@ -38,10 +37,10 @@

<NavDropdown label="Libraries" :items="libraries" />

<NuxtLink v-for="item in navigation" :key="item.name" :to="item.href" :class="['text-base font-semibold font-mitre hover:text-nav-light-hover dark:hover:text-nav-dark-hover',
<NuxtLink v-for="item in navigation" :key="item.name" :to="item.href" :class="['text-base font-semibold font-mitre hover:text-nav-hover ',
item.href == route.fullPath
? 'text-nav-light-active dark:text-nav-dark-active'
: 'text-nav-light-inactive dark:text-nav-dark-inactive'
? 'text-nav-active '
: 'text-nav-base '
]">
{{ item.name }}
</NuxtLink>
Expand All @@ -53,8 +52,7 @@
<div class="hidden xl:flex items-center justify-end flex-1 md:w-0">
<!-- TODO: Site search-->
</div>
<div
class="text-light-text dark:text-dark-text hover:bg-light-backdrop-secondary dark:hover:bg-dark-backdrop-secondary rounded-lg text-sm p-2.5">
<div class="text-base hover:bg-neutral-2 rounded-lg text-sm p-2.5">
<div class="relative flex items-center ">
<SunIcon :class="selected == 'Light' ? 'h-6 w-6' : 'hidden'" />
<MoonIcon :class="selected == 'Dark' ? 'h-6 w-6' : 'hidden'" />
Expand All @@ -63,7 +61,7 @@
<span>SAF Theme Selector</span>
</label>
<select id="theme-selector" name="SAF Theme Selector"
class="absolute appearance-none pr-3 w-full h-fit opacity-0 bg-light-backdrop-primary dark:bg-dark-backdrop-primary text-light-text dark:text-dark-text"
class="absolute appearance-none pr-3 w-full h-fit opacity-0 bg-neutral-1 text-base "
@change="switchSelect($event)">
<option :selected="selected == 'Light'">Light</option>
<option :selected="selected == 'Dark'">Dark</option>
Expand All @@ -80,57 +78,57 @@
enter-to-class="opacity-100 scale-100" leave-active-class="duration-100 ease-in"
leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
<div class="fixed z-50 top-4 right-4 w-full max-w-xs px-6">
<PopoverOverlay class="fixed z-auto inset-0 bg-light-blur/20 backdrop-blur-sm dark:bg-dark-blur/80" />
<PopoverOverlay class="fixed z-auto inset-0 bg-blur/20 backdrop-blur-sm " />
<PopoverPanel focus class="fixed w-full max-w-xs px-6">
<div
class="rounded-lg shadow-lg ring-1 ring-light-dropshadow dark:ring-dark-dropshadow ring-opacity-5 bg-light-backdrop-primary dark:bg-dark-backdrop-primary divide-y-2 divide-light-border-primary">
class="rounded-lg shadow-lg ring-1 ring-dropshadow ring-opacity-5 bg-neutral-1 divide-y-2 divide-accent">
<div class="pt-2 pb-4 px-5 overflow-y-scroll h-[calc(100vh-110px)]">
<div class="flex items-center justify-between ">
<div class="-mr-2">
<PopoverButton
class="rounded-md my-2 inline-flex items-center justify-center text-nav-light-inactive focus:outline-none focus:ring-2 focus:ring-inset focus:ring-light-border-primary">
class="rounded-md my-2 inline-flex items-center justify-center text-nav-base focus:outline-none focus:ring-2 focus:ring-inset focus:ring-accent">
<span class="sr-only">Close menu</span>
<XIcon class="h-6 w-6 text-light-text dark:text-dark-text" aria-hidden="true" />
<XIcon class="h-6 w-6 text-base " aria-hidden="true" />
</PopoverButton>
</div>
</div>
<div class="my-3">
<nav class="grid gap-y-8 py-2">
<h1 class="font-bold text-light-text dark:text-dark-text">Framework</h1>
<h1 class="font-bold text-base ">Framework</h1>
<NavMobileLinks :items="framework" />

<hr class="drop-shadow" />

<h1 class="font-bold text-light-text dark:text-dark-text">Applications</h1>
<h1 class="font-bold text-base ">Applications</h1>
<NavMobileLinks :items="applications" />

<hr class="drop-shadow" />

<h1 class="font-bold text-light-text dark:text-dark-text">Libraries</h1>
<h1 class="font-bold text-base ">Libraries</h1>
<NavMobileLinks :items="libraries" />

<hr class="drop-shadow" />

<h1 class="font-bold text-light-text dark:text-dark-text">Resources</h1>
<h1 class="font-bold text-base ">Resources</h1>
<NavMobileLinks :items="navigation" />
<NavMobileLinks :items="resources" />
</nav>
</div>
</div>
<div class="flex items-center justify-between py-6 px-3">
<div
class="relative flex items-center ring-1 ring-slate-900/10 rounded-lg shadow-sm p-2 text-slate-700 font-semibold dark:bg-slate-600 dark:ring-0 dark:highlight-white/5 dark:text-slate-200">
class="relative flex items-center rounded-lg shadow-sm p-2 text-button-text bg-button-accent font-semibold">
<SunIcon :class="selected == 'Light' ? 'h-6 w-6' : 'hidden'" />
<MoonIcon :class="selected == 'Dark' ? 'h-6 w-6' : 'hidden'" />
<DesktopComputerIcon :class="selected == 'System' ? 'h-6 w-6' : 'hidden'" />
<div class="ml-2">{{ selected }}</div>
<ChevronDownIcon class="w-5 h-6 text-slate-400" />
<ChevronDownIcon class="w-5 h-6" />
<label for="mobile-theme-selector" class="sr-only">
<span>SAF Theme Selector</span>
</label>
<span class="sr-only">SAF Theme Selector</span>
<select name="Mobile Theme Selector"
class="absolute appearance-none inset-0 w-full h-full opacity-0 dark:bg-slate-600 dark:text-white"
class="absolute appearance-none inset-0 w-full h-full opacity-0 bg-button-accent text-button-text"
@change="switchSelect($event)">
<option :selected="selected == 'Light'">Light</option>
<option :selected="selected == 'Dark'">Dark</option>
Expand Down
Loading
Loading