diff --git a/.github/workflows/prepare_pages.yml b/.github/workflows/prepare_pages.yml new file mode 100644 index 00000000..fdedf92b --- /dev/null +++ b/.github/workflows/prepare_pages.yml @@ -0,0 +1,52 @@ +# (c) https://github.com/MontiCore/monticore + +# .github/workflows/prepare_pages.yml +name: Prepare and deploy pages + +# Preprocess the docs, build a site directory and push its contents to the gh-pages branch + +concurrency: # run this test workflow only once per branch + group: ${{ github.repository }}-${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + +on: + push: + branches: + - master + paths: + - docs/** + - mkdocs.yml + workflow_dispatch: + +jobs: + build: + runs-on: ubuntu-latest + env: + GITLAB_TOKEN: ${{ secrets.GITLAB_TOKEN }} + name: Build and Push + steps: + - name: Checkout repo + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup python + uses: actions/setup-python@v4 + with: + python-version: '3.9' + + - name: Install python packages + run: | + python -m pip install --upgrade pip + pip install mkdocs mkdocs-material mike + git clone https://monticore:$GITLAB_TOKEN@git.rwth-aachen.de/se/infrastructure/monticore-pygments-highlighting.git + pip install -r ./monticore-pygments-highlighting/requirements.txt + pip install ./monticore-pygments-highlighting + + - name: Configure Git user + run: | + git config --local user.email "github-actions[bot]@users.noreply.github.com" + git config --local user.name "github-actions[bot]" + + - name: Build and deploy pages + run: mkdocs gh-deploy --force diff --git a/docs/GettingStarted/Editor.md b/docs/GettingStarted/Editor.md new file mode 100644 index 00000000..52e42d34 --- /dev/null +++ b/docs/GettingStarted/Editor.md @@ -0,0 +1,21 @@ +--- +hide: + - toc +--- + +# Tools & Editors + +You have multiple options to choose from for working with MontiArc. +You can build MontiArc models with any text editor or integrated development environment (IDE) in combination with the [CLI](./Setup.md#run-the-cli). + +Though there are some editors that provide a better experience for SysML. + + +## Visual Studio Code + +1. To install VS Code, follow their [instructions](https://code.visualstudio.com/docs/setup/setup-overview). +2. Install the MontiArc extension. + 1. [Download](https://github-registry-files.githubusercontent.com/758456656/1b847700-819d-11f0-8dad-cb32a1bfe312?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20250916%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250916T120634Z&X-Amz-Expires=300&X-Amz-Signature=8856e041f06680f48963357fe24467e82f549ab877f3902d9bbe5dc381c649c8&X-Amz-SignedHeaders=host&response-content-disposition=filename%3Dlanguage-server-7.6.1-10-vscode.vsix&response-content-type=application%2Foctet-stream) the `.vsix` extension. + 2. Start VS Code. + 3. Go to the extension tab → Click `...` → Install from VSIX → Select the previously downloaded extension. + diff --git a/docs/GettingStarted/HelloWorld.md b/docs/GettingStarted/HelloWorld.md new file mode 100644 index 00000000..9d3cf517 --- /dev/null +++ b/docs/GettingStarted/HelloWorld.md @@ -0,0 +1,3 @@ + +# Hello, World! +You're now ready to start with your first system. diff --git a/docs/GettingStarted/Setup.md b/docs/GettingStarted/Setup.md new file mode 100644 index 00000000..52c2f3f9 --- /dev/null +++ b/docs/GettingStarted/Setup.md @@ -0,0 +1,27 @@ + +# Setup SysML v2 + +SysML v2 runs on any platform. In the following tutorials, we will use the CLI. + + +#### Run the CLI + +To run the CLI manually, you need to have [Java 21](https://www.oracle.com/de/java/technologies/downloads/#java21) installed. +Next, download the [SysML v2 Tool jar](https://www.monticore.de/download/MCSysMLv2.jar). + +You can then run the tool with: + +```bash +java -jar MCSysMLv2.jar +``` + +exemplary usage: + +``` +java -jar MCSysMLv2.jar -h +java -jar MCSysMLv2.jar -i Car.sysml -pp +``` + +--- + +You can find detailed descriptions and available parameters in the [usage](../Usage/index.md) section. diff --git a/docs/GettingStarted/index.md b/docs/GettingStarted/index.md new file mode 100644 index 00000000..bce121f5 --- /dev/null +++ b/docs/GettingStarted/index.md @@ -0,0 +1,17 @@ +--- +icon: material/rocket-launch +hide: + - toc +--- + +# Getting Started + +Let's start your SysML journey! In this chapter, we will show you how to start your first Project and introduce you to the basic concepts of SysML. + + +!!! info "Tip" + Simply click on *next (Setup)* on the bottom right to go to the next step of installing our SysML tooling. + +!!! question "Found a problem with the documentation?" + If you find an error or something is not understandable, please file an [issue](../index.md#found-an-issue) for it. + This will help others reading the documentation in the future. \ No newline at end of file diff --git a/docs/Usage/error.md b/docs/Usage/error.md new file mode 100644 index 00000000..ad7c1610 --- /dev/null +++ b/docs/Usage/error.md @@ -0,0 +1,12 @@ +**Note**: These codes are preliminary for now. + +| Code | Reason | +|---------|----------------------------------------------------| +| 0x00xxx | CLI Tool | +| 0x10xxx | CoCos | +| 0xD0xxx | ST serialization | +| 0x80xxx | Type Check (CoCo) | +| 0x81xxx | Type Derivation (might happen while ST completion) | +| 0x90xxx | Refinement related | +| 0xFFxxx | Verification-specific | +| 0xA0xxx | Internal error | diff --git a/docs/Usage/index.md b/docs/Usage/index.md new file mode 100644 index 00000000..336a8d3c --- /dev/null +++ b/docs/Usage/index.md @@ -0,0 +1,20 @@ +--- +hide: + - toc +--- + + +# Usage + +`java -jar MCSysMLv2.jar [-h] -i [-path

] [-pp []] [-s []]` + +| Option | Explanation | +|--------------------------|--------------------------------------------------------------------------------------------| +| -ex,--extended | Runs additional checks assuring models are fit for semantic analysis using [MontiBelle][https://www.se-rwth.de/projects/#MontiBelle] | +| -h,--help | Prints this help dialog | +| -i,--input | Reads the source file (mandatory) and parses the contents | +| -path | Sets the artifact path for imported symbols, space separated. | +| -pp,--prettyprint | Prints the AST to stdout or the specified file (optional) | +| -r,--report

| Prints reports of the artifact to the specified directory. | +| -s,--symboltable | Serialized the Symbol table of the given artifact. | +| -v,--version | Prints version information | \ No newline at end of file diff --git a/docs/assets/images/icon-mono.png b/docs/assets/images/icon-mono.png new file mode 100644 index 00000000..9e735d09 Binary files /dev/null and b/docs/assets/images/icon-mono.png differ diff --git a/docs/assets/images/icon.png b/docs/assets/images/icon.png new file mode 100644 index 00000000..bfdb22a3 Binary files /dev/null and b/docs/assets/images/icon.png differ diff --git a/docs/assets/images/waves.svg b/docs/assets/images/waves.svg new file mode 100644 index 00000000..b3eaa79d --- /dev/null +++ b/docs/assets/images/waves.svg @@ -0,0 +1,55 @@ + + + + + + + + diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 00000000..01990ede --- /dev/null +++ b/docs/index.md @@ -0,0 +1,146 @@ +--- +template: landingpage.html +title: Modeling Systems +hide: + - navigation + - toc +--- + + +

+ + SysMLv2 + +

+ +# The Systems Modeling Language v2 + +One of the interesting new capabilities is the exchange of models +between tools using a really human readable textual form of the SysML +language in the spirit of a modern programming language (even though it +has a number of special constructs that resemble modelling concepts). + +```sysmlv2 +standard library package 'Vehicles' { + import ISQ::TorqueValue; + import ScalarValues::*; + part def Automobile; + alias Car for Automobile; + alias Torque for ISQ::TorqueValue; +} +``` + +This textual form will play a major role in the exchange of models +between tools thus allowing to build toolchains, as well as in the +versioning of models, e.g., in Github, and also in the efficient +definition of models by people who prepare textual notations. + +It is therefore highly relevant to have consistent parsing mechanisms +available. The [SysML v2 +Pilot-Implementation](https://github.com/Systems-Modeling/SysML-v2-Pilot-Implementation) +contains a parser for this textual notation. + +We know from the definition of programming languages, that it is, +however, helpful to provide a second source parser, such that parsing +results can be compared and therefore compilers, linters, checkers of +context conditions and other advanced tooling, receive the level of +quality desired for industrial use. + +
+ +- :material-rocket-launch:   + __Getting Started__ + + --- + + Is this your first time using SysML? Set up a project and start modeling. + + --- + + [:octicons-arrow-right-24: Take the Tour](./GettingStarted/index.md)
+ [:octicons-arrow-right-24: Installation & Setup](./GettingStarted/Setup.md) + +- :material-tools:   + __Usage__ + + --- + + Learn how to use the tooling.

+ + --- + + [:octicons-arrow-right-24: Read more](./Usage/index.md) + +- :material-license:   + __License__ + + --- + + Learn about the license and how you can use the generated code. + + --- + + [:octicons-arrow-right-24: Read more](https://monticore.github.io/monticore/00.org/Licenses/LICENSE-MONTICORE-3-LEVEL/) + +
+ +
+
+

Get Started with SysML Today!

+Discover Component-Based Modeling + + + Take the Tour + + + + +
+
+ +## Found an issue? + +This SysML v2 tooling is actively maintained by the [Chair of Software Engineering](https://www.se-rwth.de/). +There are multiple ways in which you can improve it to help you and others who might encounter the same issues in the future. + +
+ +- :material-lightbulb-on-20:   + __Want to submit an idea?__ + + --- + + Propose a change, feature request, or suggest an improvement + + --- + + [:octicons-arrow-right-24: Request a change](https://github.com/MontiCore/sysmlv2/issues/new) + +- :material-source-pull:   + __Want to create a pull request?__ + + --- + + Open an issue first and then create a comprehensive and useful pull request + + --- + + [:octicons-arrow-right-24: Set up your development environment](https://github.com/MontiCore/sysmlv2/blob/dev/README.md)
+ [:octicons-arrow-right-24: Create a pull request](https://github.com/MontiCore/sysmlv2/pulls) +
+ +!!! info "Hint" + Before submitting an issue, make sure to: + + - Check that no similar issue already exists [here](https://github.com/MontiCore/sysmlv2/issues) + - You provided all the information needed to understand the issue + +## Further Information + +Find more information about MontiArc and other projects and publications by the Chair of Software Engineering under the following links: + +* [Setup](./GettingStarted/Setup.md) +* [Publications](https://www.se-rwth.de/publications/) +* [SysML v2](https://www.omg.org/sysml/sysmlv2/) +* [MontiArc](https://github.com/MontiCore/montiarc) +* [License](https://github.com/MontiCore/monticore/blob/HEAD/00.org/Licenses/LICENSE-MONTICORE-3-LEVEL.md) diff --git a/docs/overrides/landingpage.html b/docs/overrides/landingpage.html new file mode 100644 index 00000000..e77aec5b --- /dev/null +++ b/docs/overrides/landingpage.html @@ -0,0 +1,107 @@ +{% extends "main.html" %} + + +{% block tabs %} +{{ super() }} + + + +
+
+
+
+

+ Modeling Systems with SysML v2 +

+ +

+ A standard compliant SysML v2 parser and model checker with a strong type system and semantic + foundation. +

+ +
+
+ + + + + Model validation +
+
+ + + + + Simulation Framework +
+
+ +
+ + Read More + + + + + + Reference + +
+
+ +
+
+
+
+ + + +
+
Door.arc
+
+
+ 
package elevator;
+
+component Door {
+  port in boolean shouldOpen;
+
+  automaton {
+    initial state Closed;
+    state Open;
+
+    Closed -> Open [shouldOpen == true] shouldOpen / {
+      System.out.println("Door has opened");
+    }
+    Open -> Closed [shouldOpen == false] shouldOpen / {
+      System.out.println("Door has closed");
+    }
+  }
+}
+
+
+ +
+
+
+
+
+
+
+
+
+ + + + + + +
+
+{% endblock %} + +{% block footer %} + +{{ super() }} +{% endblock %} diff --git a/docs/overrides/main.html b/docs/overrides/main.html new file mode 100644 index 00000000..11db0eec --- /dev/null +++ b/docs/overrides/main.html @@ -0,0 +1,24 @@ + +{% extends "base.html" %} + +{% block extrahead %} + {{ super() }} + + + +{% endblock %} + + diff --git a/docs/overrides/partials/tabs-item.html b/docs/overrides/partials/tabs-item.html new file mode 100644 index 00000000..4228f564 --- /dev/null +++ b/docs/overrides/partials/tabs-item.html @@ -0,0 +1,43 @@ + +{% macro render_content(nav_item, ref = nav_item) %} + + + + {{ ref.title }} +{% endmacro %} + + +{% macro render(nav_item, ref = nav_item) %} + + + {% set class = "md-tabs__item" %} + {% if ref.active %} + {% set class = class ~ " md-tabs__item--active" %} + {% endif %} + + + {% if nav_item.children %} + {% set first = nav_item.children | first %} + + + {% if first.children %} + {{ render(first, ref) }} + + + {% else %} +
  • + + {{ render_content(first, ref) }} + +
    • + {% endif %} + + + {% else %} +
  • + + {{ render_content(nav_item) }} + +
    • + {% endif %} +{% endmacro %} diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css new file mode 100644 index 00000000..189af426 --- /dev/null +++ b/docs/stylesheets/extra.css @@ -0,0 +1,103 @@ +html { + scroll-behavior: smooth; +} + +:root { + --rwth-blau: #00549F; + --rwth-blau-50: #8EBAE5; + --rwth-blau-10: #E8F1FA; + --rwth-magenta: #E30066; + --rwth-gelb: #FFED00; + --rwth-petrol: #006165; + --rwth-tuerkis: #0098A1; + --rwth-gruen: #57AB27; + --rwth-maigruen: #BDCD00; + --rwth-orange: #F6A800; + --rwth-rot: #CC071E; + --rwth-bordeaux: #A11035; + --rwth-violet: #612158; + --rwth-lila: #7A6FAC; + + --md-primary-fg-color: var(--rwth-blau); + --md-primary-fg-color--light: var(--rwth-blau); + --md-primary-fg-color--dark: var(--rwth-blau); + --md-accent-fg-color: var(--rwth-blau-50); + --md-accent-fg-color--transparent: #00549F25; + + --md-code-hl-color: var(--rwth-blau-50); + --md-code-hl-color--light: var(--rwth-blau-50); + --md-code-hl-number-color: var(--rwth-rot); + --md-code-hl-special-color: var(--rwth-bordeaux); + --md-code-hl-function-color: var(--rwth-violet); + --md-code-hl-constant-color: var(--rwth-lila); + --md-code-hl-keyword-color: var(--rwth-blau); + --md-code-hl-string-color: var(--rwth-gruen); +} + +.md-main { + overflow-x: hidden; +} + +.md-typeset .admonition.info, +.md-typeset details.info { + border-color: var(--md-accent-fg-color); +} + +.md-typeset .info>.admonition-title, +.md-typeset .info>summary { + background-color: var(--rwth-blau-10); +} + +.md-typeset .info>.admonition-title::before, +.md-typeset .info>summary::before { + background-color: var(--md-accent-fg-color); +} + +.md-header__topic { + height: inherit; +} + +@media screen and (min-width:60em) { + .md-search__form { + border-radius: 500px; + } +} + +.full-width { + width: 100vw; + max-width: 100vw; + left: 50%; + position: relative; + margin-left: -50vw; + margin-top: 3rem; + margin-bottom: 3rem; + padding: 1.5rem 0.8rem; +} + +.bg-primary { + background-color: var(--md-primary-fg-color); + color: #fffffff0; + --md-default-fg-color--lightest: #ffffff12; + --md-admonition-bg-color: #ffffff08; + --md-admonition-fg-color: #fffffff0; + --md-typeset-a-color: var(--rwth-orange); +} + +.section-card { + margin-left: -5%; + margin-right: -5%; + padding: 5px 5% 1em 5%; + border-radius: 20px; + background-color: var(--md-primary-fg-color); + box-shadow: 10px 10px 10px #5a5a5a22, 0px 0px 10px #5a5a5a22; + color: #fffffff0; + --md-default-fg-color--lightest: #ffffff12; + --md-admonition-bg-color: #ffffff08; + --md-admonition-fg-color: #fffffff0; + --md-typeset-a-color: var(--rwth-orange); +} + +.section-card a:hover, +.section-card a:focus { + color: var(--rwth-gelb); +} \ No newline at end of file diff --git a/docs/stylesheets/landingpage.css b/docs/stylesheets/landingpage.css new file mode 100644 index 00000000..fa47ba16 --- /dev/null +++ b/docs/stylesheets/landingpage.css @@ -0,0 +1,420 @@ +/* Root styles for proper mobile handling */ +.hero-section { + background: linear-gradient(var(--rwth-blau), var(--rwth-blau-50)); + width: 100%; + overflow-x: hidden; + display: flex; + flex-direction: column; +} + +.hero-container { + max-width: 100%; + margin: auto; + padding: 0 1rem 1rem; + box-sizing: border-box; +} + +.hero-content { + display: grid; + grid-template-columns: 4fr 3fr; + gap: 3rem; + align-items: center; + max-width: 61rem; + margin: 0 auto; + box-sizing: border-box; +} + +.hero-text { + width: 100%; + min-width: 0; + box-sizing: border-box; +} + +.hero-title { + font-size: clamp(1.75rem, 4vw, 3.5rem); + font-weight: 700; + line-height: 1.1; + color: white; + margin-bottom: 1.5rem; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; +} + +.hero-title-highlight { + background: linear-gradient(45deg, var(--rwth-gelb) 0%, var(--rwth-orange) 90%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + word-wrap: break-word; +} + +.hero-subtitle { + font-size: clamp(1rem, 2.5vw, 1.25rem); + line-height: 1.6; + color: rgba(255, 255, 255, 0.9); + margin-bottom: 2rem; + word-wrap: break-word; + overflow-wrap: break-word; +} + +.hero-features { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-bottom: 2.5rem; +} + +.hero-feature { + display: flex; + align-items: center; + gap: 0.75rem; + color: rgba(255, 255, 255, 0.9); + font-size: clamp(0.875rem, 2vw, 1rem); + word-wrap: break-word; + overflow-wrap: break-word; +} + +.hero-feature-icon { + width: 1.25rem; + height: 1.25rem; + color: var(--rwth-gelb); + flex-shrink: 0; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; +} + +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.875rem 1.5rem; + border-radius: 8px; + font-weight: 600; + text-decoration: none; + transition: all 0.3s ease; + border: none; + cursor: pointer; + font-size: clamp(0.875rem, 2vw, 1rem); + white-space: nowrap; + min-width: 0; +} + +.btn-primary { + background: linear-gradient(45deg, var(--rwth-gelb), var(--rwth-orange)); + color: #333 !important; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3); +} + +.btn-secondary { + background: rgba(255, 255, 255, 0.1); + color: white; + border: 1px solid rgba(255, 255, 255, 0.3); + backdrop-filter: blur(10px); +} + +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); +} + +.btn-icon { + width: 1rem; + height: 1rem; + flex-shrink: 0; +} + +.hero-stats { + display: flex; + flex-wrap: wrap; + gap: 2rem; + justify-content: center; + margin-top: 2rem; +} + +.hero-stat { + text-align: center; + min-width: 0; +} + +.hero-stat-number { + font-size: clamp(1.5rem, 3vw, 2rem); + font-weight: 700; + color: #fff; + margin-bottom: 0.25rem; +} + +.hero-stat-label { + font-size: clamp(0.75rem, 1.5vw, 0.875rem); + color: rgba(255, 255, 255, 0.8); + word-wrap: break-word; +} + +.hero-visual { + position: relative; + width: 140%; + min-width: 0; + box-sizing: border-box; + perspective: 1000px; +} + +.hero-scroll-indicator { + display: flex; + margin: 0 auto; +} + +.hero-code-sample { + background: rgba(0, 0, 0, 0.8); + border-radius: 12px; + overflow: hidden; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); + backdrop-filter: blur(10px); + width: 100%; + box-sizing: border-box; + max-width: 100%; +} + +.code-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem; + background: rgba(255, 255, 255, 0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + box-sizing: border-box; +} + +.code-dots { + display: flex; + gap: 0.5rem; +} + +.code-dot { + width: 12px; + height: 12px; + border-radius: 50%; + flex-shrink: 0; +} + +.code-dot-red { + background: #ff5f56; +} + +.code-dot-yellow { + background: var(--rwth-orange); +} + +.code-dot-green { + background: var(--rwth-gruen); +} + +.code-filename { + color: rgba(255, 255, 255, 0.8); + font-size: clamp(0.75rem, 1.5vw, 0.875rem); + font-family: 'Monaco', 'Consolas', monospace; + word-wrap: break-word; +} + +.code-content { + padding: 1.5rem; + box-sizing: border-box; + overflow-x: auto; + /* Allow horizontal scrolling for code */ + overflow-y: hidden; + max-width: 100%; + --md-code-hl-keyword-color: var(--rwth-blau-50); + --md-code-hl-name-color: #bdbdbd; + --md-code-hl-variable-color: #e6e6e6; + --md-code-hl-operator-color: #e6e6e6; + --md-code-hl-punctuation-color: #e6e6e6; + --md-code-hl-function-color: var(--rwth-orange); + --md-code-hl-string-color: var(--rwth-maigruen); +} + +.code-content pre { + margin: 0; + font-family: 'Monaco', 'Consolas', monospace; + font-size: clamp(0.7rem, 1.5vw, 0.875rem); + line-height: 1.5; + white-space: pre; + /* Prevent code wrapping */ + overflow-x: visible; + min-width: max-content; + /* Ensure content doesn't compress */ +} + +.code-content code { + white-space: pre; + /* Prevent code wrapping */ + display: block; + min-width: max-content; +} + +.hero-decorations { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; +} + +.decoration { + position: absolute; + border-radius: 50%; + background: rgba(255, 255, 255, 0.1); + animation: float 6s ease-in-out infinite; +} + +.decoration-1 { + width: 60px; + height: 60px; + top: 20%; + right: 10%; + animation-delay: 0s; +} + +.decoration-2 { + width: 80px; + height: 80px; + top: 60%; + right: 20%; + animation-delay: 2s; +} + +.decoration-3 { + width: 40px; + height: 40px; + top: 40%; + right: 5%; + animation-delay: 4s; +} + +@keyframes float { + + 0%, + 100% { + transform: translateY(0px); + } + + 50% { + transform: translateY(-20px); + } +} + +/* Large Desktop breakpoint */ +@media (max-width: 1600px) { + .hero-stats { + justify-content: flex-start; + } +} + +/* Tablet breakpoint */ +@media (max-width: 1200px) { + .hero-content { + grid-template-columns: 1fr 1fr; + /* Equal columns on medium screens */ + gap: 2rem; + } +} + +/* Mobile breakpoint */ +@media (max-width: 968px) { + .hero-content { + grid-template-columns: 1fr; + /* Single column on mobile */ + gap: 2rem; + } + + .hero-container { + padding: 0 1rem 2rem; + } + + .hero-actions { + justify-content: flex-start; + } + + .hero-stats { + justify-content: center; + } + + .code-content { + padding: 1rem; + } + + .hero-visual { + width: 100%; + } +} + +/* Small mobile breakpoint */ +@media (max-width: 640px) { + .hero-section { + padding: 1.5rem 0 0; + } + + .hero-container { + padding: 0 0.75rem 2rem; + } + + .hero-content { + gap: 1.5rem; + } + + .hero-actions { + flex-direction: column; + align-items: stretch; + } + + .btn { + justify-content: center; + text-align: center; + } + + .hero-stats { + gap: 1rem; + justify-content: space-between; + } + + .hero-stat { + flex: 1; + min-width: 0; + } + + .code-content { + padding: 0.75rem; + } + + .hero-decorations { + display: none; + } +} + +/* Extra small mobile devices */ +@media (max-width: 480px) { + .hero-container { + padding: 0 0.5rem; + } + + .hero-content { + gap: 1rem; + } + + .hero-stats { + flex-direction: column; + gap: 0.75rem; + align-items: center; + } + + .hero-stat { + width: 100%; + } +} \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml new file mode 100644 index 00000000..9fbd13b0 --- /dev/null +++ b/mkdocs.yml @@ -0,0 +1,75 @@ +site_name: SysMLv2 +theme: + pallete: + primary: custom + accent: custom + name: 'material' + custom_dir: docs/overrides + features: + - navigation.tabs + - navigation.sections + - navigation.footer + - navigation.instant + - navigation.instant.progress + - navigation.indexes + - toc.follow + - content.tabs.link + - social + - content.code.copy + - content.code.annotate + logo: assets/images/icon-mono.png + favicon: assets/images/icon.png + icon: + annotation: material/help-circle + +site_url: https://monticore.github.io/sysml/ +repo_url: https://github.com/MontiCore/sysmlv2/ + +copyright: "© https://github.com/MontiCore/monticore" + +extra: + social: + - icon: fontawesome/brands/github + link: https://github.com/MontiCore/sysmlv2 + - icon: fontawesome/solid/paper-plane + link: mailto:webmaster@se-rwth.de + +extra_css: + - stylesheets/extra.css + +markdown_extensions: + - def_list + - attr_list + - md_in_html + - admonition + - footnotes + - pymdownx.blocks.caption + - pymdownx.extra + - pymdownx.tasklist: + custom_checkbox: true + - pymdownx.highlight + - pymdownx.inlinehilite + - pymdownx.details + - pymdownx.superfences: + custom_fences: + - name: mermaid + class: mermaid + format: !!python/name:pymdownx.superfences.fence_code_format + - pymdownx.snippets + - pymdownx.tabbed: + alternate_style: true + - pymdownx.emoji: + emoji_index: !!python/name:material.extensions.emoji.twemoji + emoji_generator: !!python/name:material.extensions.emoji.to_svg + +nav: + - Home: 'index.md' + - Getting Started: + - Getting Started: 'GettingStarted/index.md' + - Setup: 'GettingStarted/Setup.md' + - Tools & Editors: 'GettingStarted/Editor.md' + - Hello World!: 'GettingStarted/HelloWorld.md' + - Usage: + - Usage: 'Usage/index.md' + - Errors: 'Usage/error.md' + - License: https://monticore.github.io/monticore/00.org/Licenses/LICENSE-MONTICORE-3-LEVEL/