+
+
{children}
);
diff --git a/apps/pwrcode-frontend/app/computer_science/normalize.css b/apps/pwrcode-frontend/app/computer_science/normalize.css
new file mode 100644
index 0000000..e1348b6
--- /dev/null
+++ b/apps/pwrcode-frontend/app/computer_science/normalize.css
@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+ /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+ /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/apps/pwrcode-frontend/app/computer_science/page.scss b/apps/pwrcode-frontend/app/computer_science/page.scss
new file mode 100644
index 0000000..f2e9a32
--- /dev/null
+++ b/apps/pwrcode-frontend/app/computer_science/page.scss
@@ -0,0 +1,63 @@
+$mdx-box-gap: 10px;
+
+.MDX_ROOT {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ color: black;
+ background: white;
+ align-items: stretch;
+ justify-content: stretch;
+}
+
+.MDX_BOX {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: $mdx-box-gap;
+ padding: $mdx-box-gap;
+ flex: 1;
+ transform: rotate(0turn);
+ cursor: pointer;
+}
+
+.MDX_BOX_MATH,
+.MDX_BOX_ALGO,
+.MDX_BOX_ARCH,
+.MDX_BOX_DATABASE,
+.MDX_BOX_LANG,
+.MDX_BOX_NOTES {
+ & a {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ }
+ & img {
+ width: 10vmax;
+ height: 10vmax;
+ object-fit: cover;
+ }
+
+ border: 1px solid black;
+ background: #6d6db6;
+ border-radius: 10px;
+ box-shadow: 5px 5px 10px #6d6db6;
+
+ &:hover {
+ border: 1px solid blue;
+ filter: invert(1);
+ }
+}
+
+.MDX_BOX_TEXT {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ align-items: center;
+ justify-content: space-evenly;
+ font-family: 'Ubuntu';
+}
diff --git a/apps/pwrcode-frontend/app/design/atoms/Form/Form.tsx b/apps/pwrcode-frontend/app/design/atoms/Form/Form.tsx
index b17c29e..5c01aa0 100755
--- a/apps/pwrcode-frontend/app/design/atoms/Form/Form.tsx
+++ b/apps/pwrcode-frontend/app/design/atoms/Form/Form.tsx
@@ -23,6 +23,7 @@ export function SearchForm(props: FormProps) {
return (
{
setKeyword({ keyword: e.target.value });
}}
diff --git a/apps/pwrcode-frontend/app/design/molecules/Box/Box.stories.tsx b/apps/pwrcode-frontend/app/design/molecules/Box/Box.stories.tsx
index 6e576a9..6786d90 100755
--- a/apps/pwrcode-frontend/app/design/molecules/Box/Box.stories.tsx
+++ b/apps/pwrcode-frontend/app/design/molecules/Box/Box.stories.tsx
@@ -19,6 +19,8 @@ import {
} from '../../atoms/Link/Link.stories';
import { Button } from '../../atoms/Button/Button';
import { MainFormButton } from '../../atoms/Button/Button.stories';
+import { DropDown } from '../DropDown/DropDown';
+import { MainDropDown } from '../DropDown/DropDown.stories';
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
@@ -50,7 +52,7 @@ export const MainBox: Story = {
},
};
-export const MainBottomBox: Story = {
+export const MainBottomSearchBox: Story = {
args: {
flexDirection: 'row',
children: (
@@ -62,6 +64,20 @@ export const MainBottomBox: Story = {
},
};
+export const MainBottomBox: Story = {
+ args: {
+ flexDirection: 'row',
+ justifyContent: 'center',
+ gap: '10px',
+ children: (
+ <>
+
+
+
+ ),
+ },
+};
+
export const MainNavbarBox: Story = {
args: {
flexDirection: 'row',
diff --git a/apps/pwrcode-frontend/app/design/molecules/Card/Card.stories.tsx b/apps/pwrcode-frontend/app/design/molecules/Card/Card.stories.tsx
index abb9578..d3fe819 100755
--- a/apps/pwrcode-frontend/app/design/molecules/Card/Card.stories.tsx
+++ b/apps/pwrcode-frontend/app/design/molecules/Card/Card.stories.tsx
@@ -39,7 +39,7 @@ export const MainCard: Story = {
justifyContent: 'space-between',
alignItems: 'center',
width: '30vmax',
- height: '40vmax',
+ height: '50vmax',
border: '10px solid rgba(176, 166, 149, 0.50)',
padding: '1.19rem 1.75rem 3.25rem 1.75rem',
animation: '15s linear 1s infinite running slideintest',
@@ -75,7 +75,7 @@ export const SearchCardStory: Story = {
justifyContent: 'space-between',
alignItems: 'center',
width: '75vmax',
- height: '40vmax',
+ height: '50vmax',
gap: '10px',
border: '10px solid rgba(176, 166, 149, 0.50)',
// padding: '1.19rem 0 3.25rem 0',
diff --git a/apps/pwrcode-frontend/app/design/organisms/Collection/Collection.stories.tsx b/apps/pwrcode-frontend/app/design/organisms/Collection/Collection.stories.tsx
index 3bc67d8..eb4afa1 100755
--- a/apps/pwrcode-frontend/app/design/organisms/Collection/Collection.stories.tsx
+++ b/apps/pwrcode-frontend/app/design/organisms/Collection/Collection.stories.tsx
@@ -39,18 +39,16 @@ type Story = StoryObj;
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const MainCollection: Story = {
args: {
- display: 'grid',
- justifyContent: 'stretch',
+ display: 'flex',
+ justifyContent: 'center',
alignContent: 'center',
- // gridTemplateColumns: 'repeat(auto-fill,1fr)',
flexDirection: 'column',
width: '45vmax',
- gap: '2vmax',
+ gap: '3vmax',
component: 'MainCollection',
children: (
<>
-
),
@@ -67,6 +65,16 @@ export const MainNavBarCollection: Story = {
},
};
+export const ComputerScienceNavBarCollection: Story = {
+ args: {
+ flexDirection: 'column',
+ position: '',
+ zIndex: '3',
+ width: '100vmax',
+ children: ,
+ },
+};
+
export const SearchLogoAndFormCollection: Story = {
args: {
display: 'flex',
diff --git a/apps/pwrcode-frontend/package.json b/apps/pwrcode-frontend/package.json
index c423c0d..810d223 100755
--- a/apps/pwrcode-frontend/package.json
+++ b/apps/pwrcode-frontend/package.json
@@ -37,7 +37,8 @@
"remark-breaks": "^4.0.0",
"remark-gfm": "3.0.1",
"remark-lint": "^9.1.2",
- "remark-mdx": "^3.0.0"
+ "remark-mdx": "^3.0.0",
+ "sass": "^1.69.5"
},
"devDependencies": {
"@storybook/addon-essentials": "^7.5.3",
diff --git a/yarn.lock b/yarn.lock
index df28104..1268530 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -7326,7 +7326,7 @@ __metadata:
languageName: node
linkType: hard
-"chokidar@npm:3.5.3, chokidar@npm:^3.5.3":
+"chokidar@npm:3.5.3, chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.5.3":
version: 3.5.3
resolution: "chokidar@npm:3.5.3"
dependencies:
@@ -10822,6 +10822,13 @@ __metadata:
languageName: node
linkType: hard
+"immutable@npm:^4.0.0":
+ version: 4.3.4
+ resolution: "immutable@npm:4.3.4"
+ checksum: c15b9f0fa7b3c9315725cb00704fddad59f0e668a7379c39b9a528a8386140ee9effb015ae51a5b423e05c59d15fc0b38c970db6964ad6b3e05d0761db68441f
+ languageName: node
+ linkType: hard
+
"import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
version: 3.3.0
resolution: "import-fresh@npm:3.3.0"
@@ -15554,6 +15561,7 @@ __metadata:
remark-gfm: "npm:3.0.1"
remark-lint: "npm:^9.1.2"
remark-mdx: "npm:^3.0.0"
+ sass: "npm:^1.69.5"
storybook: "npm:^7.5.3"
typescript: "npm:^5"
webpack: "npm:^5.89.0"
@@ -16550,6 +16558,19 @@ __metadata:
languageName: node
linkType: hard
+"sass@npm:^1.69.5":
+ version: 1.69.5
+ resolution: "sass@npm:1.69.5"
+ dependencies:
+ chokidar: "npm:>=3.0.0 <4.0.0"
+ immutable: "npm:^4.0.0"
+ source-map-js: "npm:>=0.6.2 <2.0.0"
+ bin:
+ sass: sass.js
+ checksum: a9003a9482f2e467fc412cfe58ba4fa14fb78bef7e1283ce5d64a065f8a31114ec3bbf5d4e724f94eb8512c32c768a6f91f228c7f16a26a300bbf4db293b5608
+ languageName: node
+ linkType: hard
+
"scheduler@npm:^0.23.0":
version: 0.23.0
resolution: "scheduler@npm:0.23.0"
@@ -16830,7 +16851,7 @@ __metadata:
languageName: node
linkType: hard
-"source-map-js@npm:^1.0.2":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2":
version: 1.0.2
resolution: "source-map-js@npm:1.0.2"
checksum: 32f2dfd1e9b7168f9a9715eb1b4e21905850f3b50cf02cf476e47e4eebe8e6b762b63a64357896aa29b37e24922b4282df0f492e0d2ace572b43d15525976ff8