diff --git a/404.html b/404.html new file mode 100644 index 0000000..ed7450f --- /dev/null +++ b/404.html @@ -0,0 +1,190 @@ + + + + + + + + +Not Found | TOSCA Modelling Tool + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + TOSCA Modelling Tool + +
+ + +
+
+
+
+
+ +

Not Found

+ + +

This does not exist

+ + +
+
+
+ + + + + diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..a4de04d --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2016-2020 CloudCannon + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..65b56de Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/css/screen.css b/css/screen.css new file mode 100644 index 0000000..85fb3ce --- /dev/null +++ b/css/screen.css @@ -0,0 +1,526 @@ +@charset "UTF-8"; +footer .footer-columns { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} + +html { + background: #2b2b40; +} + +html, body { + margin: 0; + padding: 0; +} + +body { + font-family: "San Francisco", "Helvetica Neue", "Helvetica", "Arial"; +} + +a { + color: #00a4ca; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +img { + width: 100%; +} + +h1 strong, h2 strong { + font-weight: 700; +} + +h1 { + font-weight: 300; + font-size: 2.3em; + margin: 0; +} + +h2 { + font-weight: 300; + font-size: 2.2em; + margin: 0 0 30px 0; +} + +h3 { + margin: 20px 0 10px 0; +} + +p, address { + font-size: 1.38em; + color: #666; + margin-bottom: 20px; + font-weight: 300; + line-height: 1.4em; +} + +ul { + padding: 0; +} + +.bottom-cta { + background: linear-gradient(to bottom, #4182e4 0%, #4182e4 100%); + color: #fff; + text-align: center; + margin: 0; + padding: 100px 0; +} +.bottom-cta h2 { + margin-bottom: 50px; +} + +.testimonial { + background: #f5f5f5; + margin: 0; + padding: 100px 0; +} +.testimonial .testimonial-block { + max-width: 750px; + width: 98%; + margin: 0 auto; +} +@media (min-width: 450px) { + .testimonial .testimonial-block { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + } + .testimonial .testimonial-block blockquote { + -webkit-flex: 1; + flex: 1; + } +} + +.hero { + color: #ffffff; + text-align: center; + background: linear-gradient(to bottom, #4182e4 0%, #4182e4 100%) no-repeat #a05fb7; + padding-top: 50px; +} +.hero p { + color: #fff; +} + +@media (min-width: 768px) { + .flex { + display: -webkit-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; + align-items: center; + flex-direction: row; + } + .flex .text, .flex .image { + -webkit-flex: 1; + flex: 1; + padding: 0 20px; + } + .content section:nth-child(even) .flex { + flex-direction: row-reverse; + } +} +.container, .text-container { + margin: 0 auto; + position: relative; + padding: 0 20px; +} + +.text-container { + max-width: 750px; +} + +.container { + max-width: 1140px; +} +.container.max-container { + max-width: 100%; + padding: 0; +} + +header { + position: sticky; + top: 0; + z-index: 1000; + height: 33px; + color: #fff; + padding: 20px 0; + background: #4182e4; /* Old browsers */ + background: linear-gradient(to bottom, #4182e4 0%, #4182e4 100%) no-repeat #4182e4; +} +header a { + color: #fff; + text-decoration: none; + z-index: 1; + position: relative; +} +header a:hover { + text-decoration: none; +} +header .company-name { + font-size: 1.7em; + line-height: 33px; +} +header .company-name a { + display: inline-block; +} +header .company-name img { + display: block; + width: auto; +} + +.content { + background: #fff; + padding: 1px 0 0 0; + position: relative; +} + +.screenshot { + max-width: 100%; + height: auto; + display: block; + margin-left: auto; + margin-right: auto; + position: relative; +} + +section { + padding: 100px 0; +} + +section + section { + padding-top: 0; +} + +.subtext { + margin-top: 10px; + text-align: center; +} + +.cta { + margin: 60px 0; +} + +.page h2 { + text-align: center; +} + +blockquote { + padding: 18px 25px; + margin: 0; + quotes: "“" "”" "‘" "’"; + font-style: italic; +} +blockquote .author { + display: block; + font-weight: bold; + margin: 10px 0 0 0; + font-size: 0.85em; + font-style: normal; +} +blockquote p { + display: inline; +} + +blockquote:before { + color: #ccc; + content: open-quote; + font-size: 4em; + line-height: 0.1em; + margin-right: 0.25em; + vertical-align: -0.4em; +} + +.square-image { + width: 150px; + height: 150px; + overflow: hidden; + margin: 25px auto 0 auto; + position: relative; + border-radius: 200px; +} +.square-image img { + position: absolute; + left: -1000%; + right: -1000%; + top: -1000%; + bottom: -1000%; + margin: auto; + width: 300px; +} + +.page { + margin-bottom: 0; + padding-bottom: 80px; +} + +.center-text { + text-align: center; +} + +.button a, input[type=submit] { + color: #fff; + text-decoration: none; + padding: 10px 30px; + background: #4182e4; + border-radius: 3px; + border: 1px solid rgba(255, 255, 255, 0.5); + transition: 0.2s ease-in-out; +} + +.button a:hover, input[type=submit]:hover { + border: 1px solid #fff; + background: #4182e4; + cursor: pointer; +} + +.button.alt a { + background: rgba(255, 255, 255, 0.15); + border-radius: 3px; + border: 1px solid rgba(255, 255, 255, 0.3); + padding: 16px 50px; +} + +.button.alt a:hover { + background: #fff; + color: #4182e4; +} + +textarea, input, button, select { + font-family: inherit; + font-size: inherit; +} + +input[type=submit] { + margin: 20px 0 0 0; +} + +label, input, textarea { + display: block; + width: 100%; + box-sizing: border-box; +} + +textarea { + resize: vertical; + height: 150px; +} + +label { + margin: 20px 0 5px 0; +} + +input, textarea { + padding: 10px; + font-size: 1em; +} + +input, textarea { + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + outline: none; + border: 1px solid #DDDDDD; +} + +input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus { + box-shadow: 0 0 5px rgb(81, 203, 238); + border: 1px solid rgb(81, 203, 238); +} + +.nav-open nav { + border-bottom: 1px dotted rgba(255, 255, 255, 0.2); + padding: 10px 0; +} +.nav-open nav a { + display: block; +} +@media (min-width: 620px) { + .nav-open nav { + border: 0; + padding: 0 20px; + } + .nav-open nav a { + display: inline; + } +} + +nav { + text-transform: uppercase; + font-size: 0.8em; + width: 100%; +} +@media (min-width: 620px) { + nav { + text-align: right; + position: absolute; + top: 13px; + right: 0; + padding: 0 20px; + } +} +nav a { + margin: 0 3px; + padding: 20px 10px; + border-bottom: 1px solid rgba(255, 255, 255, 0); + color: rgba(255, 255, 255, 0.8); + transition: 0.2s ease-in-out; + display: none; +} +@media (min-width: 620px) { + nav a { + display: inline; + padding: 10px; + } +} +nav a.nav-toggle { + display: inline; + position: absolute; + right: 10px; + top: -22px; + font-size: 1.9em; + border: 0; +} +@media (min-width: 620px) { + nav a.nav-toggle { + display: none; + } +} +nav a.nav-toggle:hover { + border: 0; +} +nav a:hover { + border-bottom: 1px solid rgba(255, 255, 255, 0.3); + color: #fff; +} +@media (min-width: 620px) { + nav a.highlight { + border: 1px #ccc solid; + border-radius: 5px; + } + nav a.highlight:hover { + background: #fff; + color: #4182e4; + } +} +nav a.active { + color: #fff; +} + +.footer-links { + width: 100%; + margin: 10px; + padding: 0; +} +@media (min-width: 450px) { + .footer-links { + -webkit-flex: 1 0 180px; + flex: 1 0 180px; + } +} +.footer-links li { + list-style: none; + margin: 15px auto; +} +@media (min-width: 450px) { + .footer-links li { + max-width: 150px; + } +} +.footer-links li a:hover { + text-decoration: none; +} +.footer-links li a svg { + fill: #999; + margin-right: 10px; + transition: fill 0.2s ease; + vertical-align: middle; + position: relative; + top: -2px; + width: 22px; + height: 22px; +} +.footer-links li a:hover svg { + fill: #fff; +} +.footer-links li a.twitter-icon:hover svg { + fill: #55acee; +} +.footer-links li a.google-plus-icon:hover svg { + fill: #db4437; +} +.footer-links li a.youtube-icon:hover svg { + fill: #cd201f; +} +.footer-links li a.instagram-icon:hover svg { + fill: #f167f5; +} +.footer-links li a.linkedin-icon:hover svg { + fill: #0077b5; +} +.footer-links li a.pinterest-icon:hover svg { + fill: #bd081c; +} +.footer-links li a.rss-icon:hover svg { + fill: #f26522; +} + +footer { + padding: 50px 0 50px 0; + font-size: 1.1em; + position: relative; + background: #2b2b40; + color: #fff; +} +footer .copyright { + font-size: 0.8em; + margin: 0 auto; +} +@media (min-width: 450px) { + footer .copyright { + text-align: center; + } +} +footer, +footer a { + color: #999; +} +footer h2 { + font-size: 1.4em; + margin: 30px 0; + color: #ccc; +} +footer .footer-columns { + -webkit-flex-flow: wrap; + -moz-flex-flow: wrap; + -ms-flex-flow: wrap; + flex-flow: wrap; + margin: -10px -10px 10px -10px; +} +footer a { + text-decoration: none; +} +footer a:hover { + color: #fff; +} +footer .legal-line { + width: 100%; + padding: 30px 0; + margin: 0; + background-color: #222527; +} +footer .legal-line a { + font-weight: 600; +} + +/*# sourceMappingURL=screen.css.map */ \ No newline at end of file diff --git a/css/screen.css.map b/css/screen.css.map new file mode 100644 index 0000000..adca11a --- /dev/null +++ b/css/screen.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../_sass/mixins/flexbox.scss","../_sass/elements.scss","../_sass/landing-page.scss","../_sass/layout.scss","../_sass/variables.scss","../_sass/forms.scss","../_sass/navigation.scss","../_sass/footer.scss"],"names":[],"mappings":";AAqEA;EAPC;EACA;EACA;EACA;EACA;;;AClED;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;ACxDD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EALD;IF6CA;IACA;IACA;IACA;IACA;;EEzCE;IACC;IACA;;;;AAMJ;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAKF;EACC;IFgBA;IACA;IACA;IACA;IACA;IElBC;IACA;;EAEA;IACC;IACA;IACA;;EAIF;IACC;;;AC3DF;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;EAGA;EAEA;EACA;EACA,YC7Ba,SD6Ba;EAC1B;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EAGA;EACA;EAGA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAID;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;;;AExJD;EACC;EACA;EACA;EACA,YDJa;ECKb;EACA;EACA;;;AAGD;EACC;EACA,YDXuB;ECYvB;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA,ODzBa;;;AC4Bd;EAAkC;EAAsB;;;AAExD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;ACjED;EACC;EACA;;AACA;EACC;;AAGD;EAPD;IAQE;IACA;;EAEA;IACC;;;;AAKH;EACC;EACA;EACA;;AAEA;EALD;IAME;IACA;IACA;IACA;IACA;;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EARD;IASE;IACA;;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EARD;IASE;;;AAGD;EACC;;AAKH;EAEC;EACA;;AAGD;EACC;IACC;IACA;;EAEA;IACC;IACA,OF5EU;;;AEiFb;EACC;;;AClFF;EACC;EACA;EACA;;AAEA;EALD;IAME;IACA;;;AAGD;EACC;EACA;;AAEA;EAJD;IAKE;;;AAIA;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAMJ;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EAJD;IAKE;;;AAKF;AAAA;EAEC;;AAGD;EACC;EACA;EACA;;AAGD;EP8DA,mBO5DoB;EP6DpB,gBO7DoB;EP8DpB,eO9DoB;EP+DpB,WO/DoB;EACnB;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC","sourcesContent":["// Flexbox Mixins\n// http://philipwalton.github.io/solved-by-flexbox/\n// https://github.com/philipwalton/solved-by-flexbox\n//\n// Copyright (c) 2013 Brian Franco\n//\n// Permission is hereby granted, free of charge, to any person obtaining a\n// copy of this software and associated documentation files (the\n// \"Software\"), to deal in the Software without restriction, including\n// without limitation the rights to use, copy, modify, merge, publish,\n// distribute, sublicense, and/or sell copies of the Software, and to\n// permit persons to whom the Software is furnished to do so, subject to\n// the following conditions:\n// The above copyright notice and this permission notice shall be included\n// in all copies or substantial portions of the Software.\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\n// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY\n// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,\n// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\n// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n//\n// This is a set of mixins for those who want to mess around with flexbox\n// using the native support of current browsers. For full support table\n// check: http://caniuse.com/flexbox\n//\n// Basically this will use:\n//\n// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)\n// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)\n//\n// This was inspired by:\n//\n// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/\n//\n// With help from:\n//\n// * http://w3.org/tr/css3-flexbox/\n// * http://the-echoplex.net/flexyboxes/\n// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx\n// * http://css-tricks.com/using-flexbox/\n// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/\n// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes\n\n//----------------------------------------------------------------------\n\n// Flexbox Containers\n//\n// The 'flex' value causes an element to generate a block-level flex\n// container box.\n//\n// The 'inline-flex' value causes an element to generate a inline-level\n// flex container box.\n//\n// display: flex | inline-flex\n//\n// http://w3.org/tr/css3-flexbox/#flex-containers\n//\n// (Placeholder selectors for each type, for those who rather @extend)\n\n@mixin flexbox {\n\tdisplay: -webkit-box;\n\tdisplay: -webkit-flex;\n\tdisplay: -moz-flex;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}\n\n%flexbox { @include flexbox; }\n\n//----------------------------------\n\n@mixin inline-flex {\n\tdisplay: -webkit-inline-box;\n\tdisplay: -webkit-inline-flex;\n\tdisplay: -moz-inline-flex;\n\tdisplay: -ms-inline-flexbox;\n\tdisplay: inline-flex;\n}\n\n%inline-flex { @include inline-flex; }\n\n//----------------------------------------------------------------------\n\n// Flexbox Direction\n//\n// The 'flex-direction' property specifies how flex items are placed in\n// the flex container, by setting the direction of the flex container's\n// main axis. This determines the direction that flex items are laid out in.\n//\n// Values: row | row-reverse | column | column-reverse\n// Default: row\n//\n// http://w3.org/tr/css3-flexbox/#flex-direction-property\n\n@mixin flex-direction($value: row) {\n\t@if $value == row-reverse {\n\t\t-webkit-box-direction: reverse;\n\t\t-webkit-box-orient: horizontal;\n\t} @else if $value == column {\n\t\t-webkit-box-direction: normal;\n\t\t-webkit-box-orient: vertical;\n\t} @else if $value == column-reverse {\n\t\t-webkit-box-direction: reverse;\n\t\t-webkit-box-orient: vertical;\n\t} @else {\n\t\t-webkit-box-direction: normal;\n\t\t-webkit-box-orient: horizontal;\n\t}\n\t-webkit-flex-direction: $value;\n\t-moz-flex-direction: $value;\n\t-ms-flex-direction: $value;\n\tflex-direction: $value;\n}\n\t// Shorter version:\n\t@mixin flex-dir($args...) { @include flex-direction($args...); }\n\n//----------------------------------------------------------------------\n\n// Flexbox Wrap\n//\n// The 'flex-wrap' property controls whether the flex container is single-line\n// or multi-line, and the direction of the cross-axis, which determines\n// the direction new lines are stacked in.\n//\n// Values: nowrap | wrap | wrap-reverse\n// Default: nowrap\n//\n// http://w3.org/tr/css3-flexbox/#flex-wrap-property\n\n@mixin flex-wrap($value: nowrap) {\n\t// No Webkit Box fallback.\n\t-webkit-flex-wrap: $value;\n\t-moz-flex-wrap: $value;\n\t@if $value == nowrap {\n\t\t-ms-flex-wrap: none;\n\t} @else {\n\t\t-ms-flex-wrap: $value;\n\t}\n\tflex-wrap: $value;\n}\n\n//----------------------------------------------------------------------\n\n// Flexbox Flow (shorthand)\n//\n// The 'flex-flow' property is a shorthand for setting the 'flex-direction'\n// and 'flex-wrap' properties, which together define the flex container's\n// main and cross axes.\n//\n// Values: | \n// Default: row nowrap\n//\n// http://w3.org/tr/css3-flexbox/#flex-flow-property\n\n@mixin flex-flow($values: (row nowrap)) {\n\t// No Webkit Box fallback.\n\t-webkit-flex-flow: $values;\n\t-moz-flex-flow: $values;\n\t-ms-flex-flow: $values;\n\tflex-flow: $values;\n}\n\n//----------------------------------------------------------------------\n\n// Flexbox Order\n//\n// The 'order' property controls the order in which flex items appear within\n// their flex container, by assigning them to ordinal groups.\n//\n// Default: 0\n//\n// http://w3.org/tr/css3-flexbox/#order-property\n\n@mixin order($int: 0) {\n\t-webkit-box-ordinal-group: $int + 1;\n\t-webkit-order: $int;\n\t-moz-order: $int;\n\t-ms-flex-order: $int;\n\torder: $int;\n}\n\n//----------------------------------------------------------------------\n\n// Flexbox Grow\n//\n// The 'flex-grow' property sets the flex grow factor. Negative numbers\n// are invalid.\n//\n// Default: 0\n//\n// http://w3.org/tr/css3-flexbox/#flex-grow-property\n\n@mixin flex-grow($int: 0) {\n\t-webkit-box-flex: $int;\n\t-webkit-flex-grow: $int;\n\t-moz-flex-grow: $int;\n\t-ms-flex-positive: $int;\n\tflex-grow: $int;\n}\n\n//----------------------------------------------------------------------\n\n// Flexbox Shrink\n//\n// The 'flex-shrink' property sets the flex shrink factor. Negative numbers\n// are invalid.\n//\n// Default: 1\n//\n// http://w3.org/tr/css3-flexbox/#flex-shrink-property\n\n@mixin flex-shrink($int: 1) {\n\t-webkit-flex-shrink: $int;\n\t-moz-flex-shrink: $int;\n\t-ms-flex-negative: $int;\n\tflex-shrink: $int;\n}\n\n//----------------------------------------------------------------------\n\n// Flexbox Basis\n//\n// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.\n//\n// Values: Like \"width\"\n// Default: auto\n//\n// http://www.w3.org/TR/css3-flexbox/#flex-basis-property\n\n@mixin flex-basis($value: auto) {\n\t-webkit-flex-basis: $value;\n\t-moz-flex-basis: $value;\n\t-ms-flex-preferred-size: $value;\n\tflex-basis: $value;\n}\n\n//----------------------------------------------------------------------\n\n// Flexbox \"Flex\" (shorthand)\n//\n// The 'flex' property specifies the components of a flexible length: the\n// flex grow factor and flex shrink factor, and the flex basis. When an\n// element is a flex item, 'flex' is consulted instead of the main size\n// property to determine the main size of the element. If an element is\n// not a flex item, 'flex' has no effect.\n//\n// Values: none | || \n// Default: See individual properties (1 1 0).\n//\n// http://w3.org/tr/css3-flexbox/#flex-property\n\n@mixin flex($fg: 1, $fs: null, $fb: null) {\n\n\t// Set a variable to be used by box-flex properties\n\t$fg-boxflex: $fg;\n\n\t// Box-Flex only supports a flex-grow value so let's grab the\n\t// first item in the list and just return that.\n\t@if type-of($fg) == 'list' {\n\t\t$fg-boxflex: nth($fg, 1);\n\t}\n\n\t-webkit-box-flex: $fg-boxflex;\n\t-webkit-flex: $fg $fs $fb;\n\t-moz-box-flex: $fg-boxflex;\n\t-moz-flex: $fg $fs $fb;\n\t-ms-flex: $fg $fs $fb;\n\tflex: $fg $fs $fb;\n}\n\n//----------------------------------------------------------------------\n\n// Flexbox Justify Content\n//\n// The 'justify-content' property aligns flex items along the main axis\n// of the current line of the flex container. This is done after any flexible\n// lengths and any auto margins have been resolved. Typically it helps distribute\n// extra free space leftover when either all the flex items on a line are\n// inflexible, or are flexible but have reached their maximum size. It also\n// exerts some control over the alignment of items when they overflow the line.\n//\n// Note: 'space-*' values not supported in older syntaxes.\n//\n// Values: flex-start | flex-end | center | space-between | space-around\n// Default: flex-start\n//\n// http://w3.org/tr/css3-flexbox/#justify-content-property\n\n@mixin justify-content($value: flex-start) {\n\t@if $value == flex-start {\n\t\t-webkit-box-pack: start;\n\t\t-ms-flex-pack: start;\n\t} @else if $value == flex-end {\n\t\t-webkit-box-pack: end;\n\t\t-ms-flex-pack: end;\n\t} @else if $value == space-between {\n\t\t-webkit-box-pack: justify;\n\t\t-ms-flex-pack: justify;\n\t} @else if $value == space-around {\n\t\t-ms-flex-pack: distribute;\n\t} @else {\n\t\t-webkit-box-pack: $value;\n\t\t-ms-flex-pack: $value;\n\t}\n\t-webkit-justify-content: $value;\n\t-moz-justify-content: $value;\n\tjustify-content: $value;\n}\n\t// Shorter version:\n\t@mixin flex-just($args...) { @include justify-content($args...); }\n\n//----------------------------------------------------------------------\n\n// Flexbox Align Items\n//\n// Flex items can be aligned in the cross axis of the current line of the\n// flex container, similar to 'justify-content' but in the perpendicular\n// direction. 'align-items' sets the default alignment for all of the flex\n// container's items, including anonymous flex items. 'align-self' allows\n// this default alignment to be overridden for individual flex items. (For\n// anonymous flex items, 'align-self' always matches the value of 'align-items'\n// on their associated flex container.)\n//\n// Values: flex-start | flex-end | center | baseline | stretch\n// Default: stretch\n//\n// http://w3.org/tr/css3-flexbox/#align-items-property\n\n@mixin align-items($value: stretch) {\n\t@if $value == flex-start {\n\t\t-webkit-box-align: start;\n\t\t-ms-flex-align: start;\n\t} @else if $value == flex-end {\n\t\t-webkit-box-align: end;\n\t\t-ms-flex-align: end;\n\t} @else {\n\t\t-webkit-box-align: $value;\n\t\t-ms-flex-align: $value;\n\t}\n\t-webkit-align-items: $value;\n\t-moz-align-items: $value;\n\talign-items: $value;\n}\n\n//----------------------------------\n\n// Flexbox Align Self\n//\n// Values: auto | flex-start | flex-end | center | baseline | stretch\n// Default: auto\n\n@mixin align-self($value: auto) {\n\t// No Webkit Box Fallback.\n\t-webkit-align-self: $value;\n\t-moz-align-self: $value;\n\t@if $value == flex-start {\n\t\t-ms-flex-item-align: start;\n\t} @else if $value == flex-end {\n\t\t-ms-flex-item-align: end;\n\t} @else {\n\t\t-ms-flex-item-align: $value;\n\t}\n\talign-self: $value;\n}\n\n//----------------------------------------------------------------------\n\n// Flexbox Align Content\n//\n// The 'align-content' property aligns a flex container's lines within the\n// flex container when there is extra space in the cross-axis, similar to\n// how 'justify-content' aligns individual items within the main-axis. Note,\n// this property has no effect when the flexbox has only a single line.\n//\n// Values: flex-start | flex-end | center | space-between | space-around | stretch\n// Default: stretch\n//\n// http://w3.org/tr/css3-flexbox/#align-content-property\n\n@mixin align-content($value: stretch) {\n\t// No Webkit Box Fallback.\n\t-webkit-align-content: $value;\n\t-moz-align-content: $value;\n\t@if $value == flex-start {\n\t\t-ms-flex-line-pack: start;\n\t} @else if $value == flex-end {\n\t\t-ms-flex-line-pack: end;\n\t} @else {\n\t\t-ms-flex-line-pack: $value;\n\t}\n\talign-content: $value;\n}\n","html {\n\tbackground: #2b2b40;\n}\n\nhtml, body {\n\tmargin: 0;\n\tpadding: 0;\n}\n\nbody {\n\tfont-family: \"San Francisco\", \"Helvetica Neue\", \"Helvetica\", \"Arial\";\n}\n\na {\n\tcolor: #00a4ca;\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n}\n\nimg {\n\twidth: 100%;\n}\n\nh1 strong, h2 strong {\n\tfont-weight: 700;\n}\n\nh1 {\n\tfont-weight: 300;\n\tfont-size: 2.3em;\n\tmargin: 0;\n}\n\nh2 {\n\tfont-weight: 300;\n\tfont-size: 2.2em;\n\tmargin: 0 0 30px 0;\n}\n\nh3 {\n\tmargin: 20px 0 10px 0;\n}\n\n\np, address {\n\tfont-size: 1.38em;\n\tcolor: #666;\n\tmargin-bottom: 20px;\n\tfont-weight: 300;\n\tline-height: 1.4em;\n}\n\nul {\n\tpadding: 0;\n}",".bottom-cta {\n\tbackground: linear-gradient(to bottom, $brand-color 0%, $middle-gradient-color 100%);\n\tcolor: #fff;\n\ttext-align: center;\n\tmargin: 0;\n\tpadding: 100px 0;\n\n\th2 {\n\t\tmargin-bottom: 50px;\n\t}\n}\n\n.testimonial {\n\tbackground: #f5f5f5;\n\tmargin: 0;\n\tpadding: 100px 0;\n\n\t.testimonial-block {\n\t\tmax-width: 750px;\n\t\twidth: 98%;\n\t\tmargin: 0 auto;\n\n\t\t@media #{$tablet} {\n\t\t\t@include flexbox;\n\n\t\t\tblockquote {\n\t\t\t\t-webkit-flex: 1;\n\t\t\t\tflex: 1;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.hero {\n\tcolor: #ffffff;\n\ttext-align: center;\n\tbackground: linear-gradient(to bottom, $middle-gradient-color 0%, $secondary-brand-color 100%) no-repeat #a05fb7;\n\tpadding-top: 50px;\n\n\tp {\n\t\tcolor: #fff;\n\t}\n}\n\n\n@media #{$desktop} {\n\t.flex {\n\t\t@include flexbox;\n\t\talign-items: center;\n\t\tflex-direction: row;\n\n\t\t.text, .image {\n\t\t\t-webkit-flex: 1;\n\t\t\tflex: 1;\n\t\t\tpadding: 0 20px;\n\t\t}\n\t}\n\n\t.content section:nth-child(even) .flex {\n\t\tflex-direction: row-reverse;\n\t}\n}\n",".container, .text-container {\n\tmargin: 0 auto;\n\tposition: relative;\n\tpadding: 0 20px;\n}\n\n.text-container {\n\tmax-width: 750px;\n}\n\n.container {\n\tmax-width: 1140px;\n\n\t&.max-container {\n\t\tmax-width: 100%;\n\t\tpadding: 0;\n\t}\n}\n\nheader {\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 1000;\n\n\n\theight: 33px;\n\n\tcolor: #fff;\n\tpadding: 20px 0;\n\tbackground: $brand-color; /* Old browsers */\n\tbackground: linear-gradient(to bottom, $brand-color 0%, $middle-gradient-color 100%) no-repeat $brand-color;\n\n\ta {\n\t\tcolor: #fff;\n\t\ttext-decoration: none;\n\t\tz-index: 1;\n\t\tposition: relative;\n\n\t\t&:hover {\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n\n\t.company-name {\n\t\tfont-size: 1.7em;\n\t\tline-height: 33px;\n\n\t\ta {\n\t\t\tdisplay: inline-block;\n\t\t}\n\n\t\timg {\n\t\t\tdisplay: block;\n\t\t\twidth: auto;\n\t\t}\n\t}\n}\n\n.content {\n\tbackground: #fff;\n\tpadding: 1px 0 0 0;\n\tposition: relative;\n}\n\n.screenshot{\n\tmax-width: 100%;\n\theight: auto;\n\tdisplay: block;\n\t// box-shadow: 0 1px 0 #ccc, 0 1px 0 1px #eee;\n\t// border-radius: 2px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\t// background: #DDD url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2212%22%20viewBox%3D%220%200%2044%2012%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%224%22%20fill%3D%22%23eee%22%20%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%226%22%20r%3D%224%22%20fill%3D%22%23eee%22%20%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%226%22%20r%3D%224%22%20fill%3D%22%23eee%22%20%2F%3E%3C%2Fsvg%3E') 4px 4px no-repeat;\n\t// padding: 20px 0 0 0;\n\tposition: relative;\n}\n\nsection {\n\tpadding: 100px 0;\n}\n\nsection + section {\n\tpadding-top: 0;\n}\n\n.subtext {\n\tmargin-top: 10px;\n\ttext-align: center;\n}\n\n\n.cta {\n\tmargin: 60px 0;\n}\n\n.page h2 {\n\ttext-align: center;\n}\n\nblockquote {\n\tpadding: 18px 25px;\n\tmargin: 0;\n\tquotes: \"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\";\n\tfont-style: italic;\n\n\t.author {\n\t\tdisplay: block;\n\t\tfont-weight: bold;\n\t\tmargin: 10px 0 0 0;\n\t\tfont-size: .85em;\n\t\tfont-style: normal;\n\t}\n\n\tp {\n\t\tdisplay: inline;\n\t}\n}\n\nblockquote:before {\n\tcolor: #ccc;\n\tcontent: open-quote;\n\tfont-size: 4em;\n\tline-height: 0.1em;\n\tmargin-right: 0.25em;\n\tvertical-align: -0.4em;\n}\n\n.square-image {\n\twidth: 150px;\n\theight: 150px;\n\toverflow: hidden;\n\tmargin: 25px auto 0 auto;\n\tposition: relative;\n\tborder-radius: 200px;\n\n\timg {\n\t\tposition: absolute;\n\t\tleft: -1000%;\n\t\tright: -1000%;\n\t\ttop: -1000%;\n\t\tbottom: -1000%;\n\t\tmargin: auto;\n\t\twidth: 300px;\n\t}\n}\n\n.page {\n\tmargin-bottom: 0;\n\tpadding-bottom: 80px;\n}\n\n.center-text {\n\ttext-align: center;\n}\n","$brand-color: #4182e4;\n$secondary-brand-color: #4182e4;\n$middle-gradient-color: mix($brand-color, $secondary-brand-color, 95%);\n\n// Breakpoints\n$tablet: \"(min-width: 450px)\";\n$mid-point: \"(min-width: 620px)\";\n$desktop: \"(min-width: 768px)\";\n",".button a, input[type=submit] {\n\tcolor: #fff;\n\ttext-decoration: none;\n\tpadding: 10px 30px;\n\tbackground: $brand-color;\n\tborder-radius: 3px;\n\tborder: 1px solid rgba(255,255,255,.5);\n\ttransition: .2s ease-in-out;\n}\n\n.button a:hover, input[type=submit]:hover {\n\tborder: 1px solid #fff;\n\tbackground: $secondary-brand-color;\n\tcursor: pointer;\n}\n\n.button.alt a {\n\tbackground: rgba(255,255,255,0.15);\n\tborder-radius: 3px;\n\tborder: 1px solid rgba(255, 255, 255, 0.3);\n\tpadding: 16px 50px;\n}\n\n.button.alt a:hover {\n\tbackground: #fff;\n\tcolor: $brand-color;\n}\n\ntextarea, input, button, select { font-family: inherit; font-size: inherit; }\n\ninput[type=submit] {\n\tmargin: 20px 0 0 0;\n}\n\nlabel, input, textarea {\n\tdisplay: block;\n\twidth: 100%;\n\tbox-sizing: border-box;\n}\n\ntextarea {\n\tresize: vertical;\n\theight: 150px;\n}\n\nlabel {\n\tmargin: 20px 0 5px 0;\n}\n\ninput, textarea {\n\tpadding: 10px;\n\tfont-size: 1em;\n}\n\ninput, textarea {\n\t-webkit-transition: all 0.30s ease-in-out;\n\t-moz-transition: all 0.30s ease-in-out;\n\t-ms-transition: all 0.30s ease-in-out;\n\t-o-transition: all 0.30s ease-in-out;\n\toutline: none;\n\tborder: 1px solid #DDDDDD;\n}\n\ninput[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus {\n\tbox-shadow: 0 0 5px rgba(81, 203, 238, 1);\n\tborder: 1px solid rgba(81, 203, 238, 1);\n}\n",".nav-open nav {\n\tborder-bottom: 1px dotted rgba(255, 255, 255, .2);\n\tpadding: 10px 0;\n\ta {\n\t\tdisplay: block;\n\t}\n\n\t@media #{$mid-point} {\n\t\tborder: 0;\n\t\tpadding: 0 20px;\n\n\t\ta {\n\t\t\tdisplay: inline;\n\t\t}\n\t}\n}\n\nnav {\n\ttext-transform: uppercase;\n\tfont-size: .8em;\n\twidth: 100%;\n\n\t@media #{$mid-point} {\n\t\ttext-align: right;\n\t\tposition: absolute;\n\t\ttop: 13px;\n\t\tright: 0;\n\t\tpadding: 0 20px;\n\t}\n\n\n\ta {\n\t\tmargin: 0 3px;\n\t\tpadding: 20px 10px;\n\t\tborder-bottom: 1px solid rgba(255,255,255,0);\n\t\tcolor: rgba(255,255,255,.8);\n\t\ttransition: .2s ease-in-out;\n\t\tdisplay: none;\n\n\t\t@media #{$mid-point} {\n\t\t\tdisplay: inline;\n\t\t\tpadding: 10px;\n\t\t}\n\n\n\t\t&.nav-toggle {\n\t\t\tdisplay: inline;\n\t\t\tposition: absolute;\n\t\t\tright: 10px;\n\t\t\ttop: -22px;\n\t\t\tfont-size: 1.9em;\n\t\t\tborder: 0;\n\n\t\t\t@media #{$mid-point} {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tborder: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\ta:hover {\n\n\t\tborder-bottom: 1px solid rgba(255,255,255,.3);\n\t\tcolor: #fff;\n\t}\n\n\t@media #{$mid-point} {\n\t\ta.highlight {\n\t\t\tborder: 1px #ccc solid;\n\t\t\tborder-radius: 5px;\n\n\t\t\t&:hover {\n\t\t\t\tbackground: #fff;\n\t\t\t\tcolor: $brand-color;\n\t\t\t}\n\t\t}\n\t}\n\n\ta.active {\n\t\tcolor: #fff;\n\t}\n\n}\n",".footer-links {\n\twidth: 100%;\n\tmargin: 10px;\n\tpadding: 0;\n\n\t@media #{$tablet} {\n\t\t-webkit-flex: 1 0 180px;\n\t\tflex: 1 0 180px;\n\t}\n\n\tli {\n\t\tlist-style: none;\n\t\tmargin: 15px auto;\n\n\t\t@media #{$tablet} {\n\t\t\tmax-width: 150px;\n\t\t}\n\t\ta {\n\n\t\t\t&:hover {\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t\tsvg {\n\t\t\t\tfill: #999;\n\t\t\t\tmargin-right: 10px;\n\t\t\t\ttransition: fill 0.2s ease;\n\t\t\t\tvertical-align: middle;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -2px;\n\t\t\t\twidth: 22px;\n\t\t\t\theight: 22px;\n\t\t\t}\n\n\t\t\t&:hover svg {\n\t\t\t\tfill: #fff;\n\t\t\t}\n\n\t\t\t&.twitter-icon:hover svg {\n\t\t\t\tfill: #55acee;\n\t\t\t}\n\n\t\t\t&.google-plus-icon:hover svg {\n\t\t\t\tfill: #db4437;\n\t\t\t}\n\n\t\t\t&.youtube-icon:hover svg {\n\t\t\t\tfill: #cd201f;\n\t\t\t}\n\n\t\t\t&.instagram-icon:hover svg {\n\t\t\t\tfill: #f167f5;\n\t\t\t}\n\n\t\t\t&.linkedin-icon:hover svg {\n\t\t\t\tfill: #0077b5;\n\t\t\t}\n\n\t\t\t&.pinterest-icon:hover svg {\n\t\t\t\tfill: #bd081c;\n\t\t\t}\n\n\t\t\t&.rss-icon:hover svg {\n\t\t\t\tfill: #f26522;\n\t\t\t}\n\t\t}\n\t}\n}\n\nfooter {\n\tpadding: 50px 0 50px 0;\n\tfont-size: 1.1em;\n\tposition: relative;\n\tbackground: #2b2b40;\n\tcolor: #fff;\n\n\t.copyright {\n\t\tfont-size: .8em;\n\t\tmargin: 0 auto;\n\t\t\n\t\t@media #{$tablet} {\n\t\t\ttext-align: center;\n\t\t}\n\n\t}\n\t\n\t&,\n\ta {\n\t\tcolor: #999;\n\t}\n\n\th2 {\n\t\tfont-size: 1.4em;\n\t\tmargin: 30px 0;\n\t\tcolor: #ccc;\n\t}\n\n\t.footer-columns {\n\t\t@extend %flexbox;\n\t\t@include flex-flow(wrap);\n\t\tmargin: -10px -10px 10px -10px;\n\t}\n\n\ta {\n\t\ttext-decoration: none;\n\n\t\t&:hover {\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\n\t.legal-line {\n\t\twidth: 100%;\n\t\tpadding: 30px 0;\n\t\tmargin: 0;\n\t\tbackground-color: #222527;\n\n\t\ta {\n\t\t\tfont-weight: 600;\n\t\t}\n\t}\n}\n"],"file":"screen.css"} \ No newline at end of file diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..24d6132 Binary files /dev/null and b/favicon.png differ diff --git a/feed.xml b/feed.xml new file mode 100644 index 0000000..95db2f1 --- /dev/null +++ b/feed.xml @@ -0,0 +1 @@ +Jekyll2023-09-21T14:48:01+00:00https://cceh.github.io/tosca-modelling-tool/feed.xmlTOSCA Modelling ToolA desktop distribution for the TOSCA Winery.{"name"=>nil, "email"=>nil, "twitter"=>nil} \ No newline at end of file diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..23689a1 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/main_ui.png b/images/main_ui.png new file mode 100644 index 0000000..89dfc24 Binary files /dev/null and b/images/main_ui.png differ diff --git a/images/topologymodeler.png b/images/topologymodeler.png new file mode 100644 index 0000000..49e27fa Binary files /dev/null and b/images/topologymodeler.png differ diff --git a/images/toscamanagement.png b/images/toscamanagement.png new file mode 100644 index 0000000..ee27046 Binary files /dev/null and b/images/toscamanagement.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0004b07 --- /dev/null +++ b/index.html @@ -0,0 +1,257 @@ + + + + + + + + +TOSCA Modelling Tool | A desktop distribution for the TOSCA Winery. + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + TOSCA Modelling Tool + +
+ + +
+
+
+
+

Model your application's requirements and dependencies using TOSCA

+

in an easy-to-use desktop application

+ +
+ Screenshot +
+
+
+ +
+ + +
+
+
+

Manage and edit TOSCA service templates

+

Define components, services and environments required for your application to run.

+
+
+ Screenshot +
+
+
+ +
+
+
+

Graphically model TOSCA topologies

+

Define how the components, services and environments for your application depend on each other.

+
+
+ Screenshot +
+
+
+ + + + + + + + + + + + + + + +
+
+
+

Contact

+

The TOSCA Modelling Tool is developed at the Cologne Center for eHumanities (CCeH).

+
+
+
+ + +
+
+

Download the latest release for your platform

+
+
+ + + +
+
+
+ + + + + diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..3784c04 --- /dev/null +++ b/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Sitemap: https://cceh.github.io/sitemap.xml diff --git a/siteicon.png b/siteicon.png new file mode 100644 index 0000000..b9fe6a5 Binary files /dev/null and b/siteicon.png differ diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000..62cf852 --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,6 @@ + + + +https://cceh.github.io/tosca-modelling-tool/ + + diff --git a/touch-icon.png b/touch-icon.png new file mode 100644 index 0000000..5af55cd Binary files /dev/null and b/touch-icon.png differ