Releases: matteioo/fet-webpage-redesign
v2.0.1 - Updated dependencies and added dynamic logo/favicon
General Changes
- This release updated the dependencies in order to fix known security vulnerabilities.
- The favicon and logos (csv files) were updated to dynamically change based on the active theme of the browser. The new dynamic csv favicon was added in the
<head>
of each page and therefore changing all.html
pages. - Switched from the manually built alpine CSP version to the pre-built CSP module which can now be installed directly via
npm
. Finally 🎉 !
Changed files since last Release
- [build/img/*.svg] added new dynamic version of light/dark themed svg's.
- [build/*.html] linked the new dynamic
favicon.csv
file in the<head>
of each page. The browser now picks the dynamic csv if that file is supported as a favicon: Progressive Enhancement. - [build/favicon.svg] added dynamic favicon automatically switching between light and dark theme of the browser.
- [build/vendor.js] updated compiled javascript taking the updated dependencies as well as the new CSP module into consideration.
- [/package.json] removed deprecated custom
postinstall
andupdate
npm-scripts because alpine CSP is no longer included as manually built module but rather as regular NPM module.
Full Changelog: v2.0.0...v2.0.1
v2.0.0 - Switched to CSP safe Alpine.js
Changes since last Release
Pages added
- 404.html
- suche.html
- social-media.html Fully responsive and minimal - ideally linked via a QR-code.
Dependencies
- Switched from Alpine.js to the csp safe version of Alpine.js
Other changes
- Added dark mode support for all input elements such as
<input>
,<select>
,<textarea>
, etc. - Refined style variants of buttons and implemented button colors applied via css-classes: (green:
btn-success
, red:btn-error
). Now labels and many other elements are not styled using css classes anymore. Such stylings are applied globally via thedev/tailwind.css
file (and used from the compiled css file). - Added more complex overlay shadow for text above article-preview image with the help of Easing Gradients
- Certain page names got updated to reflect the new paths on fet.at Further details: commit 1 and commit 2
- Updated FontAwesome icons to the free ones #
Changed files since last Release
- [build/fonts/*] Changed font files - replace files to reflect all changes
- [build/form-test.html] Added form test page which displays the styling of all input field types (incl. buttons) as well as their disabled state.
- [build/fotos.html] Added 'Ordner hinzufügen' button
- [build/fotos-details.html] Added 'Album bearbeiten' button
- [build/index.html]
- [build/member.html] Added class
sm:dark:bg-transparent
to fix the issue with the wrong background color of the modal on screen-sizes where the modal is always shown as a sidebar # - [build/members.html] Added class
sm:dark:bg-transparent
to fix the issue with the wrong background color of the modal on screen-sizes where the modal is always shown as a sidebar # - [build/post.html]
- [build/section.html] Added class
sm:dark:bg-transparent
to fix the issue with the wrong background color of the modal on screen-sizes where the modal is always shown as a sidebar # - [build/social-media.html] Added social media page
- [build/suche.html]
- [build/404.html] Added new 404 page - including a svg displayed on that page
Changes due to CSP safe Alpine.js
<html>
The <html>
is now switched to this tag on every page:
<html lang="de" x-data="bodyData" x-bind="documentRoot">
<body>
The <body>
is now switched to this tag on every page:
<body x-bind="documentBody">
Search feature (Commit with changes: #)
Above the navBar (<!-- NAVBAR -->
) is now the following search code snippet:
<!-- SEARCH-BAR -->
<div class="fixed w-screen h-screen z-30 backdrop-blur-sm backdrop-saturate-50"
x-show="showSearch"
x-cloak
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="transform backdrop-blur-none backdrop-saturate-100"
x-transition:enter-end="transform backdrop-blur-sm backdrop-saturate-50"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="transform backdrop-blur-sm backdrop-saturate-50"
x-transition:leave-end="transform backdrop-blur-none backdrop-saturate-100"
>
<form action="suche.html" @click.outside="closeSearch" class="flex items-center opacity-90 gap-x-4 mt-[33vh] sm:max-w-md lg:max-w-lg xl:max-w-xl mx-4 sm:mx-auto py-2 px-4 shadow-lg dark:shadow-none bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg dark:border-2 dark:border-gray-700"
x-show="showSearch"
x-transition:enter="transition transform ease-out duration-300"
x-transition:enter-start="scale-0 opacity-0"
x-transition:enter-end="scale-100 opacity-90"
x-transition:leave="transition transform ease-in duration-150"
x-transition:leave-start="scale-100 opacity-90"
x-transition:leave-end="scale-0 opacity-0"
>
<input class="flex-grow bg-inherit text-inherit h-10 p-0 border-0 focus:outline-none focus:border-transparent focus:ring-0" type="search" name="search" placeholder="Nach Person, Artikel oder Fotoalbum suchen...">
<button type="submit" class="flex-none">
<i class="fa-solid fa-magnifying-glass text-gray-500 dark:text-gray-600"></i>
</button>
</form>
</div>
Note
The search bar is currently placed on each page except the search results page, as there is already a search bar.
Theme switcher
Inside the navBar is now a theme switcher which needs two additional containers inside the navBar. This is the same for the navBar in admin pages.
NavBar
The navBar got updated #.
Modal
Changes in the modal can be viewed here. This is the same for the modal on other pages.
Full Changelog: v1.1.0...v2.0.0
v1.1.0 - Added internal pages and corresponding sub-pages
Changes since last Release
- Added npm-scrollspy and bundled using esbuild #
- Aminated Discord-Infobox in [build/index.html] #
- Changed
Inter
fontface toInter var
# - Store AlpineJS states of the expandable lists in [build/admin-intern.html] using the AlpineJS Persist-Plugin #
Changed files since last Release
- [build/fotos-details.html] Added detailed 'fotos'-page
- [build/admin-intern.html] Added page
- [build/admin-intern-sub1.html] Added page
- [build/admin-intern-sub2.html] Added page
- [build/admin-tasks.html] Added page
- [build/admin-tasks-add.html] Added page
- [build/admin-tasks-details.html] Added page
- [build/index.html] Changed in-class bg-image reference, Added Discord-Infobox animation
- [build/jobs.html] Changed scrollspy functionality
- [index.html] Removed page because not needed anymore using Netlify #
- [build/js/vendor.js] Added npm packages
- [dev/bundle.jsx] Added npm packages
- [build/styles.css] Changed stylings
- [dev/tailwind.css] Changed stylings
Full Changelog: v1.0.0...v1.1.0
v1.0.0 - Added big initial letter in articles and default image-backgrounds in article-previews
Changes since last Release
- Fixed default text-color issue in [build/post.html] #
- Added default backgrounds for images in the article-preview #
- Changed background-image location to inline #
- Added big initial letter in paragraphs in [build/post.html] #
- Split [build/members.html] into [build/members.html] and [build/jobs.html] #
Changed files since last Release
- [build/index.html] Changed inline-css background-image location to in-class declaration using TailwindCSS arbitrary values
- [build/post.html] Added class for styling the first letter in the first paragraph
- [build/jobs.html] Added page
- [build/members.html] Decremented header-hierarchy (
h2
->h3
, etc.) - [build/styles.css] Changed stylings
- [dev/tailwind.css] Changed stylings
Full Changelog: v0.5.3-beta...v1.0.0
- Merge: Dev by @M00nD3v in #15
Issues with previous two releases
Issues with previous two releases. This release contains the source code from the last two releases. (v0.5.0-beta and v0.5.1-beta). This release also contains the latest accepted pull request:
- Dev by @M00nD3v in #14
Full Changelog: v0.5.1-beta...v0.5.3-beta
Added "location"-strings, file-links, pinned posts and local fonts
Changes since last Release
- Added links to the Etherpad and PDF Version of certain posts (within the post itself)
- Added Location-strings
- Added pinned-badge on first article-preview in [build/index.html] in order to mark a post as pinned and out of order
- Changed height of article-previews to video-like aspect ratio (16:9)
- Changed Post-Image size on bigger screens
- Added local fonts (Inter, Poppins, Besley, Fira Code) in order to break free from CDNs
- Added local stylesheet for code-blocks in [build/post.html]
Changed files since last Release
- [build/index.html] Added styling and hover-functionality of pinned posts
- [build/post.html] Changed banner image size, added location-strings, added file-link section, added aspect-ratio of other linked posts
- [build/posts.html] Changed rounded corners from
rounded
torounded-md
- [build/styles.css] Changed stylings
- [dev/tailwind.css] Changed stylings
- [build/*.html] Added font dependencies in the
<head>
of every page - [build/fonts/*] Added fonts directory storing the local fonts
- [build/css/prism-one-dark.min.css] Added local PrismJS theme "One Dark"
Full Changelog: v0.5.0-beta...v0.5.2-beta
- Merge: Dev by @M00nD3v in #13
Added DarkMode version and simplified Modal functionality
Changes since last Release
- Added DarkMode of every page
- Simplified modal functionality in order to make it equally on every page that currently uses it
- Added various favicons for different browser vendors
- [build/post.html] added "place"-strings where needed in order to match the currently used design
- [build/blackboard.html] tiny tweaks in the jobs-list styling (corners of top and last item rounded)
Changed files since last Release
- [build/*.html] got changed due to DarkMode and diversified favicon-support implementation
- [dev/tailwind.css] styling implementation
- [build/styles.css] compiled file changed because of changes in [dev/tailwind.css]
Full Changelog: v0.5.0-beta...v0.5.1-beta
- Merge: Dev by @M00nD3v in #13
Added esbuild as js-bundler and updated tailwind to v3
Changes since last Release
- [dev/bundle.jsx] this file will be used by esbuild in order to bundle multiple npm-modules into one combined javascript-file
- [build/vendor.js] this file is the bundled output-file of esbuild
- [package.json] added new
bundle
command executing the esbuild bundling process and compiling a new [build/vendor.js]-file
Changed files since last Release
- changed file structure: dev | build
- [build/post.html] added first DarkMode stylings (WIP)
- [package.json] updated
build
command to reflect the commands used by the new tailwindcss version. Old version renamed `build-old"
Others
In this release tailwindcss got updated to the fresh and new version 3 - this doesn't use PostCSS anymore and therefore the [postcss.config.js] is deprecated. Some commands changed too, in order to reflect the new Tailwind JIT engine, which only places the used CSS classes in the output file. YAY!
Full Changelog: v0.4.0-beta...v0.4.1-beta
v0.4.1-beta
Changes since last Release
- [post.html] added
<blockquote>
styling - [post.html] added code styling using Prism.js
- added monospace font for code-styling
- changed default theme to One Dark
Changed files since last Release
- post.html
- tailwind.css
- styles.css
- tailwind.config.js
Full Changelog: v0.4.0-beta...v0.4.1-beta
Added [fotos.html] and edit-buttons as well as new stylings
Changes since last Release
- added edit buttons for logged-in users
- added alignment for
.db-page-content
-class as a suffix: left, right and justify by default - [post.html] added
<mark>
styling - [posts.html] animated showing/hiding month selector
- renamed tailwind.css directory from
css/tailwind.css
todev/tailwind.css
to get a better visual understanding of it being a developer only file - added [fotos.html]-page
Changed files since last Release
- README.md
- admin.html
- blackboard.html
- fotos.html
- impressum.html
- member-details.html
- members.html
- post.html
- posts.html
- tailwind.css
- styles.css
- scripts.js (removed almost entire code because of transition to Alpine.js)
- package.json
- README.md