From: elektrischerwalfisch Date: Fri, 11 Apr 2025 20:03:58 +0000 (+0200) Subject: change text X-Git-Url: https://skyeroc.xyz/gitweb/?a=commitdiff_plain;h=f96f7ee949fc8b910a734c1b51b3fd1ecf398398;p=flatmark change text --- diff --git a/README.md b/README.md index 0023e3f..8f93129 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ - Auto-parses **Markdown** to HTML using [Parsedown](https://parsedown.org/) - **Custom meta fields** for title, description, and robots meta tag for each site - Provides simple **Shortcodes** to arrange and style your content (e.g. columns, different backgrounds) -- Basic **Theme** which you can customize and enhance +- Basic, responsive **Theme** which you can customize and enhance ## How It Works FlatMark dynamically converts Markdown files in the folder `/pages` (or `/pages-XX` for multilingual sites) into HTML pages. @@ -36,11 +36,6 @@ Find the full markdown-syntax here: [www.markdownguide.org/basic-syntax](https:/ │── .htaccess # URL rewriting │── README.md # Documentation - -## Requirements -- PHP 7.4+ -- Apache/Nginx with mod_rewrite enabled - ## Installation 1. **Download** the latest release of flatMark which contains a simple example-page 2. **Upload** the files to your web server. @@ -48,7 +43,11 @@ Find the full markdown-syntax here: [www.markdownguide.org/basic-syntax](https:/ 4. **Edit content** inside `/pages` (or `/pages-XX` for multilingual sites). 5. Done! Your site is ready. -## Configuration +### Requirements +- PHP 7.4+ +- Apache/Nginx with mod_rewrite enabled + +### Configuration Set up **single** or **multi-language setup** in `index.php`: ```php @@ -58,7 +57,7 @@ require 'config-multilang.php'; ``` After that you can also delete the config-file which you are not using - only one of the two config-files is needed. -## Defaults: Header, Footer, Homepage, 404-page +### Defaults: Header, Footer, Homepage, 404-page Each pages-folder must contain at least these files for the website to function: @@ -75,7 +74,7 @@ This file is the default startpoint of your website. Edit this file to change the error-message which is shown if a page is not found. -## Meta Information (Title, Description & Robots) +## Meta information (Title, Description & Robots) Each Markdown page can include optional meta information using HTML comments at the top of the file. These values will be automatically extracted and used in the section of the generated HTML page. @@ -112,12 +111,11 @@ An example-page with all shortcodes is provided with the installation: `/pages-e ## Customization -- Themes: Modify /theme/css/style.css for styling. -- Header/Footer: Edit 01-header.md and 02-footer.md in each language folder. +All customizable parts of flatMark are located in the `theme/` folder. This includes the main stylesheet (`theme/css/style.css`), a JavaScript file for interactive behavior (`theme/js/presets.js`), and the `theme/shortcodes.php` file where custom shortcodes can be defined. You can freely modify these files to match your design and functionality needs. Additional assets like images, fonts, or scripts can also be placed in this folder to keep everything neatly organized in one place. -## flatmark as CMS -Lets first define the requirements for a simple Content-Management-System (CMS). -**You would like to do the following directly in your Browser:** + +## flatMark as CMS +If you are not a programmer and used to work with FTP-client and texteditor you might prefer a Content-Management-System (CMS) to edit your website. So how would you define a simple CMS? Basically it would allow you to do the following directly in your Browser: - Login via username & password - Edit website content in a text-editor - Upload/Manage files @@ -133,7 +131,9 @@ Website: [Nextcloud](https://nextcloud.com/) - **Tinyfilemanager** If you do not have none of the options above, you still can install this simple file-manager which is actually just one single php-file. Just upload it to the root-folder of your flatMark-Installation and acces it via your browser! (Do not forget to change the password in that file before you upload it) -Website: [tinyfilemanager](https://tinyfilemanager.github.io/) +Website: [tinyfilemanager](https://tinyfilemanager.github.io/) + +These are only 3 options how you can access your flatMark-Installation, but there might be more. ## License FlatMark is released under the MIT License. \ No newline at end of file diff --git a/pages-en/home.md b/pages-en/home.md index 2cdfcb2..b9a47d0 100644 --- a/pages-en/home.md +++ b/pages-en/home.md @@ -8,7 +8,7 @@ {/img-rounded} {columns-seperator} # flatMark -A minimal PHP-based flat-file CMS that gives developers full control. Content is written in Markdown, enhanced with flexible shortcodes for layouts, styling, and dynamic elements. No database, no build step — just Markdown, HTML, and your creativity. +No database required, no overhead in sight — just Markdown and a sprinkle of PHP. Ideal for small websites, portfolios, or documentation, it delivers content directly from the filesystem. Just edit your Markdown files and go. {/background}{/columns} {columns 33-66} diff --git a/pages-en/shortcode-examples.md b/pages-en/shortcode-examples.md new file mode 100644 index 0000000..0c18d76 --- /dev/null +++ b/pages-en/shortcode-examples.md @@ -0,0 +1,100 @@ +# Shortcodes + +These shortcodes are available by default in the flatMark-theme: + +{code} +{columns} + Content of first column +{columns-seperator} + Content of second column +{/columns} + +{background} + Content with backgrond-color +{/background} + +{img-rounded} + Picture with rounded border +{/img-rounded} + +{extras} + Extra content in 01-header.md (e. g. language-switch, phone, e-mail etc.) +{/extras} + +{year} + Output of the current year (Can be used for copyright in 02-footer.md) + +{/code} + +### Additional values +The shortcodes for columns and background accept additional values which are rendered as classes so that the output can be styled directly by css. In the default flatMark-theme these additional values are already styled: +{code} +{columns 50-50} +{columns 33-66} +{columns 66-33} +{columns 33-33-33} + +{background color-01} +{background color-02} +{/code} +
+ +### Shortcode-Examples + +{columns 50-50} +**columns 50-50** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +{columns-seperator} +Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +{/columns} +
+ +{columns 33-66} +**columns 33-66** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +{columns-seperator} +![Pic](/files/example-pic-03.jpg) +{/columns} +
+ +{columns 66-33} +**columns 66-33** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. + +Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +{columns-seperator} +![Pic](/files/example-pic-02.jpg) +{/columns} +
+ +{columns 33-33-33} +**columns 33-33-33** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. +{columns-seperator} +![Pic](/files/example-pic-01.jpg) +{columns-seperator} +![Pic](/files/example-pic-01.jpg) +{/columns} +
+ +{columns 33-66} +{img-rounded} +![Pic](/files/example-pic-01.jpg) +{/img-rounded} +{columns-seperator} +**img-rounded** inside **columns 33-66** +Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +{/columns} +
+ +{background color-01} +**background color-01** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. +{/background} +
+ +{background color-02} +**background color-02** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. +{/background} + + + + + + + diff --git a/pages-en/shortcodes.md b/pages-en/shortcodes.md deleted file mode 100644 index 0c18d76..0000000 --- a/pages-en/shortcodes.md +++ /dev/null @@ -1,100 +0,0 @@ -# Shortcodes - -These shortcodes are available by default in the flatMark-theme: - -{code} -{columns} - Content of first column -{columns-seperator} - Content of second column -{/columns} - -{background} - Content with backgrond-color -{/background} - -{img-rounded} - Picture with rounded border -{/img-rounded} - -{extras} - Extra content in 01-header.md (e. g. language-switch, phone, e-mail etc.) -{/extras} - -{year} - Output of the current year (Can be used for copyright in 02-footer.md) - -{/code} - -### Additional values -The shortcodes for columns and background accept additional values which are rendered as classes so that the output can be styled directly by css. In the default flatMark-theme these additional values are already styled: -{code} -{columns 50-50} -{columns 33-66} -{columns 66-33} -{columns 33-33-33} - -{background color-01} -{background color-02} -{/code} -
- -### Shortcode-Examples - -{columns 50-50} -**columns 50-50** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -{columns-seperator} -Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -{/columns} -
- -{columns 33-66} -**columns 33-66** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -{columns-seperator} -![Pic](/files/example-pic-03.jpg) -{/columns} -
- -{columns 66-33} -**columns 66-33** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - -Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -{columns-seperator} -![Pic](/files/example-pic-02.jpg) -{/columns} -
- -{columns 33-33-33} -**columns 33-33-33** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. -{columns-seperator} -![Pic](/files/example-pic-01.jpg) -{columns-seperator} -![Pic](/files/example-pic-01.jpg) -{/columns} -
- -{columns 33-66} -{img-rounded} -![Pic](/files/example-pic-01.jpg) -{/img-rounded} -{columns-seperator} -**img-rounded** inside **columns 33-66** -Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -{/columns} -
- -{background color-01} -**background color-01** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. -{/background} -
- -{background color-02} -**background color-02** Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren. -{/background} - - - - - - - diff --git a/theme/css/style.css b/theme/css/style.css index 7add5f6..19e56a9 100644 --- a/theme/css/style.css +++ b/theme/css/style.css @@ -111,7 +111,7 @@ :root { --color-gray-01: #E6E6E6;} :root { --fontsize-s: 12px;} -:root { --fontsize-m: 14px;} /* Font Size Default */ +:root { --fontsize-m: 16px;} /* Font Size Default */ :root { --fontsize-l: 24px;} :root { --fontsize-xl: 34px;} :root { --fontsize-xxl: 64px;} @@ -157,7 +157,7 @@ header > p > a {color: var(--colorblack);display: block;text-decoration: none;fo header .extras {position: absolute;top: var(--space-below-02);right: var(--side-space-02);} header .extras ul {display: block;text-align: right;} -header .extras li a {color: var(--color-01);font-size: var(--fontsize-s);font-weight: 600;text-decoration: none;text-transform: uppercase;} +header .extras li a {color: var(--color-01);font-size: var(--fontsize-s);line-height: 1.6;font-weight: 600;text-decoration: none;text-transform: uppercase;} header .extras li a:hover {text-decoration: underline;} header .extras li a.active {color: var(--colorblack);} diff --git a/theme/fonts/opensans/License.txt b/theme/fonts/opensans/License.txt new file mode 100644 index 0000000..1298efd --- /dev/null +++ b/theme/fonts/opensans/License.txt @@ -0,0 +1,2 @@ +Open Sans is licensed under the Apache License, Version 2.0. +You can find the license here: http://www.apache.org/licenses/LICENSE-2.0 \ No newline at end of file