matteioo / fet-webpage-redesign Goto Github PK

View Code? Open in Web Editor NEW

2.0 1.0 0.0 49.47 MB

Redesign of the FET-webpage

Home Page: https://fet-at.netlify.app

CSS 24.62% HTML 54.42% JavaScript 20.96%

fet-webpage-redesign's Introduction

FET-webpage redesign

Redesign of the FET-webpage.

Installation process

This project uses npm and every change of TailwindCSS' preset classes requires a recompilation in order to only ship the used CSS classes.

NodeJS

For the recompilation process it is required to have installed NodeJS on your local machine where you want execute the compilation command.

Commands

There are different commands implemented which are located in the file package.json. All of those can be executed using npm run <command_name> where <command_name> is one of the commands listed below.

command name	description
`build`	Searches for all used TailwindCSS-classes inside of the html, css and js-files and puts them into one single css-file. The resulting file is then placed inside `build/styles.css`. After compilation it watches the files and recompiles if one of them changed.
`build-once`	Does the same as `build` only once.
`bundle`	Bundles all, via npm imported, js-files and scripts specified inside `dev/bundle.jsx` into one js-file and places it inside `build/vendor.js`. It uses esbuild under the hood.

Be aware that after changing a css-class inside of a html-file you must recompile the css, otherwise there might be no changes if the class was not used anywhere else before. That's the result of bundling the js for minimal file-size.

Finished pages

fet-webpage-redesign's People

Contributors

Stargazers

Watchers

fet-webpage-redesign's Issues

[posts.html] animate month-selector dropdown

Animate month-selector dropdown in posts.html.

[member-details.html] merge classes

Regarding member-details.html:

Merge classes in tailwindcss of:

dynamic text (h1, h2, p, ...)
"Ehrenamtliche Tätigkeiten"

Default text styling missing

In the following list you will find html-tags which need to be styled in order not to appear fully reset by tailwind normalize. Inspiration can be found here: Tailwindcss Typography.

Note: ul and ol color lighter than font-color of the text.

[index.html] realign pulsing notification bubble in Discord-popup

Regarding index.html

Due to FontAwesome updated to v6, Discord logo is new. Pulsing blue bubble is therefore not aligned correctly anymore.

showModal: updating x-data on wrong html-tag

When resizing the screen, javascript updates the x-data="{ showModal: true | false }" on the wrong html-tag: <main> instead of <body>.

[blackboard.html] hover bg-color decision-making

caused by the general pages-bg-color (currently gray-100), the defined hover bg-color is the same as the general page bg-color. Consider switching the color tom something lighter (white or gray-50) or to something darker for example gray-200. Keep contrast ratio in mind -> preferring to not choosing a gray shade darker than 200.