M-Labs
/
web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Compare commits

base: M-Labs:0b35dc8c4d041e1df6a8acb2f4c962e2352f8d4a
Branches Tags
M-Labs:master
...
compare: M-Labs:3084e84924c0f042c192a3877055f0e74c4a87cb
Branches Tags
M-Labs:master

3 Commits
0b35dc8c4d ... 3084e84924

Author SHA1 Message Date
sovanna 3084e84924 refactor(website): Updates milkymist 2019-08-01 14:05:15 +02:00
sovanna b7dee72e43 refactor(website): Updates 2019-08-01 11:53:36 +02:00
sovanna 21d5cb806b feat(website): Adds bg for section 
Uses new bg to fit layout
 2019-08-01 10:18:38 +02:00
21 changed files with 167 additions and 90 deletions
Show Stats Expand all files Collapse all files

2
content/about-us/company.md
View File

@ -21,4 +21,4 @@ The company's current main project is <a href="/experiment-control/artiq/">ARTIQ
{% end %}
{{ layout_separator(separator_title="Contact us") }}
{{ layout_separator(separator_title="Contact us", separator_bg="true") }}

6
content/about-us/office.md
View File

@ -34,14 +34,14 @@ Those transportation options take you to King's Road, then see the directions be
<div class="row">
{% layout_card(src="images/directions_1@2x.png", imgbottom=true) %}
{% layout_card(src="images/directions_1@2x.png", imgbottom=true, rmcard=true) %}
<span class="badge badge-primary">1</span> When entering from King's Road, Pan Hoi Street looks like this. Go to the location of the red arrow:
{% end %}
{% layout_card(src="images/directions_2@2x.png", imgbottom=true) %}
{% layout_card(src="images/directions_2@2x.png", imgbottom=true, rmcard=true) %}
<p style="padding-bottom: 46px;">
<span class="badge badge-primary">2</span> Enter here:
@ -50,7 +50,7 @@ Those transportation options take you to King's Road, then see the directions be
{% end %}
{% layout_card(src="images/directions_3@2x.png", imgbottom=true) %}
{% layout_card(src="images/directions_3@2x.png", imgbottom=true, rmcard=true) %}
<p style="padding-bottom: 21px;">
<span class="badge badge-primary">3</span> Turn right here, walk a little bit, and M-Labs will be on your left:

2
content/experiment-control/artiq.md
View File

@ -57,7 +57,7 @@ Technologies employed include <a href="http://python.org/" target="_blank" rel="
{{ layout_separator(separator_title="Partners") }}
{{ layout_separator(separator_title="Partners", separator_bg="true") }}

2
content/experiment-control/control-loops.md
View File

@ -93,7 +93,7 @@ This module is still in development and is not currently available.
{% layout_text_img(textleft=true, shadow=false) %}
{% layout_text_img(src="images/side-min.png", textleft=true, shadow=false) %}
##### SU-Servo

4
content/experiment-control/resources.md
View File

@ -49,6 +49,10 @@ template = "page.html"
{{ layout_separator_empty(style="margin-top: -200px;") }}
{{ layout_separator(separator_title="Announcements, community support and discussions") }}

10
content/experiment-control/sinara-core.md
View File

@ -166,11 +166,15 @@ A low-noise clock distribution module that can be used to distribute low jitter
{{ layout_separator(separator_title="Purchasing Sinara hardware") }}
{{ layout_separator_empty() }}
{% layout_centered_content(min_width=true) %}
{{ layout_separator(separator_title="Purchasing Sinara hardware", css="col-12 text-center mt-2 mb-2 mb-lg-5") }}
{% layout_centered_content(min_width=true, css="row d-flex align-items-center mt-5") %}
##### Kasli and EEMs can be ordered now
@ -181,6 +185,8 @@ Contact sales@m-***s.hk with your requirements and we will establish a quote.
{% end %}
{{ layout_separator_empty(inverted="true") }}
{% layout_centered_content(min_width=true) %}

168
content/gateware/m1.md
View File

@ -5,13 +5,9 @@ template = "page.html"
+++
{% layout_centered_content() %}
{% layout_text_img(src="images/m1.jpg", popup="images/m1_large.jpg", alt="", textleft=true) %}
<a href="/images/m1_large.jpg"><img src="/images/m1.jpg"></a>
{% end %}
The Milkymist One is an experimental hardware appliance for live video effects.
##### The Milkymist One is an experimental hardware appliance for live video effects.
The small 172x145x45mm device creates visualizations similar to those generated by the <a href="http://www.geisswerks.com/milkdrop/" target="_blank" rel="noopener noreferrer">MilkDrop</a> software, and enables you to mix them with live footage from a camera and interact using MIDI and DMX controllers.
@ -25,10 +21,12 @@ Under the hood, the Milkymist One is like a mini-computer running our Flickernoi
But we did not stop at open source <em>software</em>. As a matter of fact, when this project started in August 2007, one of the goals was to open up <em>chip design</em>. Inside the device, which was launched in September 2011, the Flickernoise software is actually running on an open source CPU part of our own system-on-chip.
{% end %}
## Detailed specifications
<img src="/images/m1_board.jpg">
{% layout_text_img(src="images/m1_board.jpg", alt="") %}
##### Detailed specifications
- Multi-standard video input (PAL/SECAM/NTSC)
- Two DMX512 (RS485) ports
@ -44,7 +42,12 @@ But we did not stop at open source <em>software</em>. As a matter of fact, when
- RC-5 compatible infrared receiver
- RS232 debug port
## Press
{% end %}
{% layout_centered_content(min_width=true, force_left=true, bg="background-image: url(/images/stripe.svg); background-repeat: no-repeat; background-size: auto 100%; padding-left: 40px;") %}
##### Press
- Create Digital Motion (10/02/2012): <a href="http://createdigitalmotion.com/2012/02/milkymist-is-digital-visual-synthesizer-and-processor-built-on-sophisticated-open-source-hardware/">Milkymist is Digital Visual Synthesizer and Processor, Built as Sophisticated Open Source Hardware</a>
- MikroBitti (03/2012): <a href="http://www.mbnet.fi/artikkeli/lehti/avointa_vj_rautaa_3_2012">Milkymist One -visualisaattori: Avointa vj-rautaa</a> [FI]
@ -56,80 +59,89 @@ But we did not stop at open source <em>software</em>. As a matter of fact, when
- Create Digital Motion (16/08/2010): <a href="http://createdigitalmotion.com/2010/08/milkymist-one-all-in-one-open-source-vj-workstation/">Milkymist One, All-in-One Open Source VJ Workstation</a>
- Linux-Magazin (29/12/2009): <a href="http://www.linux-magazin.de/NEWS/26c3-Bewegtbildgenerator-Milkymist-bald-mit-Ethernet-und-USB">26c3: Bewegtbildgenerator Milkymist bald mit Ethernet und USB</a> [DE]
{% end %}
## Buy a Milkymist One
We are no longer selling Milkymist One. If you want one, you can ask about buying a second-hand unit on the <a href="https://ssl.serverraum.org/lists/listinfo/devel/listinfo.cgi/devel-milkymist.org">mailing list</a>, or take the open source design files and manufacture it yourself.
{{ layout_separator_empty() }}
## Video
{{ layout_separator(separator_title="Buy a Milkymist One", css="col-12 text-center mt-2 mb-2 mb-lg-5") }}
{% layout_centered_content(min_width=true, css="row d-flex align-items-center mt-5") %}
##### We are no longer selling Milkymist One.
If you want one, you can ask about buying a second-hand unit on the <a href="https://ssl.serverraum.org/lists/listinfo/devel/listinfo.cgi/devel-milkymist.org">mailing list</a>, or take the open source design files and manufacture it yourself.
##### Video
<a href="https://www.youtube.com/watch?v=0k080nzA_z4" target="_blank" rel="noopener noreferrer">Unboxing the Milkymist One video synthesizer</a> (YouTube)
## Screenshots
##### Screenshots
<a href="/fnscreenshots/pdf.png"><img src="/fnscreenshots/pdf_small.jpg"></a>
<a href="/fnscreenshots/darkblue.png"><img src="/fnscreenshots/darkblue_small.jpg"></a>
<a href="/fnscreenshots/sailing1.png"><img src="/fnscreenshots/sailing1_small.jpg"></a>
<a href="/fnscreenshots/sailing2.png"><img src="/fnscreenshots/sailing2_small.jpg"></a>
<a href="/fnscreenshots/sailing3.png"><img src="/fnscreenshots/sailing3_small.jpg"></a>
<a href="/fnscreenshots/sailing4.png"><img src="/fnscreenshots/sailing4_small.jpg"></a>
<a href="/fnscreenshots/sailing5.png"><img src="/fnscreenshots/sailing5_small.jpg"></a>
<a href="/fnscreenshots/starballet1.png"><img src="/fnscreenshots/starballet1_small.jpg"></a>
<a href="/fnscreenshots/starballet2.png"><img src="/fnscreenshots/starballet2_small.jpg"></a>
<a href="/fnscreenshots/starballet3.png"><img src="/fnscreenshots/starballet3_small.jpg"></a>
<a href="/fnscreenshots/starballet4.png"><img src="/fnscreenshots/starballet4_small.jpg"></a>
<a href="/fnscreenshots/starballet5.png"><img src="/fnscreenshots/starballet5_small.jpg"></a>
<a href="/fnscreenshots/starballet6.png"><img src="/fnscreenshots/starballet6_small.jpg"></a>
<a href="/fnscreenshots/starballet7.png"><img src="/fnscreenshots/starballet7_small.jpg"></a>
<a href="/fnscreenshots/starpainter1.png"><img src="/fnscreenshots/starpainter1_small.jpg"></a>
<a href="/fnscreenshots/starpainter2.png"><img src="/fnscreenshots/starpainter2_small.jpg"></a>
<a href="/fnscreenshots/starpainter3.png"><img src="/fnscreenshots/starpainter3_small.jpg"></a>
<a href="/fnscreenshots/plasmastreams.png"><img src="/fnscreenshots/plasmastreams_small.jpg"></a>
<a href="/fnscreenshots/pshroomery.png"><img src="/fnscreenshots/pshroomery_small.jpg"></a>
<a href="/fnscreenshots/pshroomery2.png"><img src="/fnscreenshots/pshroomery2_small.jpg"></a>
<a href="/fnscreenshots/pshroomery3.png"><img src="/fnscreenshots/pshroomery3_small.jpg"></a>
<a href="/fnscreenshots/pshroomery4.png"><img src="/fnscreenshots/pshroomery4_small.jpg"></a>
<a href="/fnscreenshots/eerieberi.png"><img src="/fnscreenshots/eerieberi_small.jpg"></a>
<a href="/fnscreenshots/pdb1.png"><img src="/fnscreenshots/pdb1_small.jpg"></a>
<a href="/fnscreenshots/pdb2.png"><img src="/fnscreenshots/pdb2_small.jpg"></a>
<a href="/fnscreenshots/kalei.png"><img src="/fnscreenshots/kalei_small.jpg"></a>
<a href="/fnscreenshots/torridtales3.png"><img src="/fnscreenshots/torridtales3_small.jpg"></a>
<a href="/fnscreenshots/torridtales.png"><img src="/fnscreenshots/torridtales_small.jpg"></a>
<a href="/fnscreenshots/burningdisc.png"><img src="/fnscreenshots/burningdisc_small.jpg"></a>
<a href="/fnscreenshots/burningdisc2.png"><img src="/fnscreenshots/burningdisc2_small.jpg"></a>
<a href="/fnscreenshots/burningpanel.png"><img src="/fnscreenshots/burningpanel_small.jpg"></a>
<a href="/fnscreenshots/crazyface.png"><img src="/fnscreenshots/crazyface_small.jpg"></a>
<a href="/fnscreenshots/crazyface2.png"><img src="/fnscreenshots/crazyface2_small.jpg"></a>
<a href="/fnscreenshots/mateball.png"><img src="/fnscreenshots/mateball_small.jpg"></a>
<a href="/fnscreenshots/pyramids.png"><img src="/fnscreenshots/pyramids_small.jpg"></a>
<a href="/fnscreenshots/madness.png"><img src="/fnscreenshots/madness_small.jpg"></a>
<a href="/fnscreenshots/explosiveminds.png"><img src="/fnscreenshots/explosiveminds_small.jpg"></a>
<a href="/fnscreenshots/torridtales2.png"><img src="/fnscreenshots/torridtales2_small.jpg"></a>
<a href="/fnscreenshots/8bitstarfield.png"><img src="/fnscreenshots/8bitstarfield_small.jpg"></a>
<a href="/fnscreenshots/airs.png"><img src="/fnscreenshots/airs_small.jpg"></a>
<a href="/fnscreenshots/aqualung.png"><img src="/fnscreenshots/aqualung_small.jpg"></a>
<a href="/fnscreenshots/balkacid.png"><img src="/fnscreenshots/balkacid_small.jpg"></a>
<a href="/fnscreenshots/cloudedbottle.png"><img src="/fnscreenshots/cloudedbottle_small.jpg"></a>
<a href="/fnscreenshots/cosmicechoes.png"><img src="/fnscreenshots/cosmicechoes_small.jpg"></a>
<a href="/fnscreenshots/digitalflame.png"><img src="/fnscreenshots/digitalflame_small.jpg"></a>
<a href="/fnscreenshots/drunkenboat.png"><img src="/fnscreenshots/drunkenboat_small.jpg"></a>
<a href="/fnscreenshots/eerieberi2.png"><img src="/fnscreenshots/eerieberi2_small.jpg"></a>
<a href="/fnscreenshots/interwoven.png"><img src="/fnscreenshots/interwoven_small.jpg"></a>
<a href="/fnscreenshots/madness2.png"><img src="/fnscreenshots/madness2_small.jpg"></a>
<a href="/fnscreenshots/shaking.png"><img src="/fnscreenshots/shaking_small.jpg"></a>
<a href="/fnscreenshots/ssmatrix.png"><img src="/fnscreenshots/ssmatrix_small.jpg"></a>
<a href="/fnscreenshots/patcheditor2.png"><img src="/fnscreenshots/patcheditor2_small.jpg"></a>
<a href="/fnscreenshots/glass.png"><img src="/fnscreenshots/glass_small.jpg"></a>
<a href="/fnscreenshots/glass2.png"><img src="/fnscreenshots/glass2_small.jpg"></a>
<a href="/fnscreenshots/face.png"><img src="/fnscreenshots/face_small.jpg"></a>
<img data-popup="true" data-nsrc="/fnscreenshots/pdf.png" src="/fnscreenshots/pdf_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/darkblue.png" src="/fnscreenshots/darkblue_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/sailing1.png" src="/fnscreenshots/sailing1_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/sailing2.png" src="/fnscreenshots/sailing2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/sailing3.png" src="/fnscreenshots/sailing3_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/sailing4.png" src="/fnscreenshots/sailing4_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/sailing5.png" src="/fnscreenshots/sailing5_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet1.png" src="/fnscreenshots/starballet1_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet2.png" src="/fnscreenshots/starballet2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet3.png" src="/fnscreenshots/starballet3_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet4.png" src="/fnscreenshots/starballet4_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet5.png" src="/fnscreenshots/starballet5_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet6.png" src="/fnscreenshots/starballet6_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starballet7.png" src="/fnscreenshots/starballet7_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starpainter1.png" src="/fnscreenshots/starpainter1_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starpainter2.png" src="/fnscreenshots/starpainter2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/starpainter3.png" src="/fnscreenshots/starpainter3_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/plasmastreams.png" src="/fnscreenshots/plasmastreams_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pshroomery.png" src="/fnscreenshots/pshroomery_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pshroomery2.png" src="/fnscreenshots/pshroomery2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pshroomery3.png" src="/fnscreenshots/pshroomery3_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pshroomery4.png" src="/fnscreenshots/pshroomery4_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/eerieberi.png" src="/fnscreenshots/eerieberi_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pdb1.png" src="/fnscreenshots/pdb1_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pdb2.png" src="/fnscreenshots/pdb2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/kalei.png" src="/fnscreenshots/kalei_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/torridtales3.png" src="/fnscreenshots/torridtales3_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/torridtales.png" src="/fnscreenshots/torridtales_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/burningdisc.png" src="/fnscreenshots/burningdisc_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/burningdisc2.png" src="/fnscreenshots/burningdisc2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/burningpanel.png" src="/fnscreenshots/burningpanel_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/crazyface.png" src="/fnscreenshots/crazyface_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/crazyface2.png" src="/fnscreenshots/crazyface2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/mateball.png" src="/fnscreenshots/mateball_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/pyramids.png" src="/fnscreenshots/pyramids_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/madness.png" src="/fnscreenshots/madness_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/explosiveminds.png" src="/fnscreenshots/explosiveminds_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/torridtales2.png" src="/fnscreenshots/torridtales2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/8bitstarfield.png" src="/fnscreenshots/8bitstarfield_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/airs.png" src="/fnscreenshots/airs_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/aqualung.png" src="/fnscreenshots/aqualung_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/balkacid.png" src="/fnscreenshots/balkacid_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/cloudedbottle.png" src="/fnscreenshots/cloudedbottle_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/cosmicechoes.png" src="/fnscreenshots/cosmicechoes_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/digitalflame.png" src="/fnscreenshots/digitalflame_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/drunkenboat.png" src="/fnscreenshots/drunkenboat_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/eerieberi2.png" src="/fnscreenshots/eerieberi2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/interwoven.png" src="/fnscreenshots/interwoven_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/madness2.png" src="/fnscreenshots/madness2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/shaking.png" src="/fnscreenshots/shaking_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/ssmatrix.png" src="/fnscreenshots/ssmatrix_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/patcheditor2.png" src="/fnscreenshots/patcheditor2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/glass.png" src="/fnscreenshots/glass_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/glass2.png" src="/fnscreenshots/glass2_small.jpg">
<img data-popup="true" data-nsrc="/fnscreenshots/face.png" src="/fnscreenshots/face_small.jpg">
{% end %}
## Milkymist SoC
{% layout_text_img(src="images/jtagserialb.jpg", src2="images/jtagserialt.jpg", alt="", textleft=true) %}
<img src="/images/jtagserialb.jpg">
<img src="/images/jtagserialt.jpg">
##### Milkymist SoC
The Milkymist SoC is at the core of the Milkymist One, implemented in the Spartan-6 FPGA.
@ -145,8 +157,12 @@ The SoC source distribution includes software libraries, the BIOS and the demons
Milkymist SoC is phased out in favor of the more powerful [MiSoC](@/gateware/migen.md).
{% end %}
## Flickernoise
{% layout_centered_content(min_width=true, force_left=true, css="row d-flex align-items-center mt-5 mb-5 hkstyleh5") %}
##### Flickernoise
Flickernoise is the video synthesis application developed for the Milkymist One and the Milkymist SoC. It renders hardware-accelerated visual effects comparable (and, to some extent, compatible) with those of <a href="http://www.nullsoft.com/free/milkdrop">MilkDrop</a> 1.x, the popular audio visualization plug-in for Winamp.
@ -163,10 +179,12 @@ Flickernoise uses:
- <a href="http://www.github.com/m-labs/liboscparse">liboscparse</a>, a variant of <a href="http://liblo.sourceforge.net/">liblo</a>, for <a href="http://www.opensoundcontrol.org">OpenSoundControl</a> communications.
## Credits
##### Credits
Thanks to the many people who made Milkymist One possible - in no particular order:
Sebastien Bourdeauducq (founder), Michael Walle (software), Adam Wang (production engineering), Uwe Bonnes, Werner Almesberger, Jon Phillips (evangelist), Yi Zhang (operations), Christophe Devine, Don Miller, John Lejeune, Wim Vandeputte, Xiangfu Liu (software), Wolfgang Spraul, Joachim roh Steiger (mechanical), Yanjun Luo (jtag-serial design), Lars-Peter Clausen, Cristian Paul (early adopter), Christopher Adams (logo design), Christiaan Virant (advice), Takeshi Matsuya (Linux port), Akuei Chen (smt), Anson Lin (layout), Vera Cheng (layout), Terry (pcb), Nick Chen (remote control), Eva Su (sourcing), Sean Xiao (sourcing), Elisha Tseng (xilinx fae), Henry de Beauchesne, Philip Sheu (nor flash), Arno Lin (vga connector), Sun Hung Kuang (jtag-serial smt), Aaron Lee (usb connector), Ruby Su (sourcing), Yunchao Xie (ccd camera), Xiaochun Lu (power supply), Cailin Dai (box design), Mr. Zhang (box making), Xianke Zhang (eva), Xin Cai (label printing), Ting Jiang (sticker making), Xiaopeng Li (silicone keyboard), Mr. Ba (audio, video cables), Dehua Xiao (ethernet cable), Miss Zhao (usb cable), Shen Chun Yi (package pickup Taipei)...
Plus countless workers at dozens of suppliers and many more who created the free technology we were able to build upon.
{% end %}

2
content/gateware/migen.md
View File

@ -41,7 +41,7 @@ Migen is the foundation for MiSoC.
{% end %}
{% layout_centered_content(min_width=true, force_left=true, card=true) %}
{% layout_centered_content(min_width=true, force_left=true, bg="background-image: url(/images/stripe.svg); background-repeat: no-repeat; background-size: auto 100%; padding-left: 40px;") %}
##### More...

4
sass/css/_base.scss
View File

@ -220,3 +220,7 @@ ul:not(.navbar-nav) li {
a[aria-expanded='true']:after {
transform: rotate(-180deg);
}
.hkstyleh5 h5 {
text-align: center;
}

18
sass/css/_layout.scss
View File

@ -98,6 +98,24 @@ p ~ h5 {
background-size: contain;
}
.hero5 {
height: 380px;
background: url("../images/bottom-graphic-min@2x.png") no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.hero6 {
height: 380px;
background: url("../images/top-graphic-min@2x.png") no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.hero + main {
margin-top: -150px;
}

BIN
static/images/bottom-graphic-min@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
static/images/side-graphic-min.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 56 KiB

BIN
static/images/side-min.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 309 KiB

19
static/images/stripe.svg Normal file
View File

@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="6" height="336" viewBox="0 0 6 336">
<defs>
<style>
.cls-2 {
fill: url(#linear-gradient-1);
stroke: #ffffff;
}
</style>
<linearGradient id="linear-gradient-1" gradientUnits="userSpaceOnUse" x1="3" y1="336" x2="3" y2="0">
<stop offset="0" stop-color="#76c5d2"/>
<stop offset="0.32" stop-color="#1a6d93"/>
<stop offset="0.66" stop-color="#715ec7"/>
<stop offset="1" stop-color="#a88cfd"/>
</linearGradient>
</defs>
<rect id="rect-1" class="cls-2" width="6" height="336"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 674 B

BIN
static/images/top-graphic-min@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 477 KiB

4
templates/includes/separator_design.html
View File

@ -1,10 +1,10 @@
<div class="container-fluid {% if not separator_rm_bg %}hero3{% else %}{% endif %} d-flex flex-column justify-content-center">
<div class="container-fluid {% if not separator_rm_bg %}hero5{% else %}{% endif %} d-flex flex-column justify-content-center">
<div class="container">
<div class="row">
<div class="col-12 text-center mt-2 mt-lg-5 mb-2 mb-lg-5">
<div class="{% if not css %}col-12 text-center mt-2 mt-lg-5 mb-2 mb-lg-5{% else %}{{ css }}{% endif %}">
{% if separator_title %}

2
templates/shortcodes/layout_card.html
View File

@ -1,6 +1,6 @@
<div class="{% if css %}{{ css }}{% else %}col-12 col-md-4{% endif %}">
<div class="card shadow mb-4">
<div class="{% if not rmcard %}card shadow{% endif %} mb-4">
{% if not imgbottom %}

4
templates/shortcodes/layout_centered_content.html
View File

@ -1,13 +1,15 @@
<div class="{% if css %}{{ css }}{% else %}row d-flex align-items-center mt-5 mb-5{% endif %}">
<div class="{% if min_width %}col-12 col-md-8 mx-auto{% else %}col-12{% endif %} {% if not force_left %}text-center{% endif %}">
<div class="{% if min_width %}col-12 col-md-8 mx-auto{% else %}col-12{% endif %} {% if not force_left %}text-center{% endif %}" style="{% if bg %}{{ bg }}{% endif %}">
{% if card %}
<div class="card shadow py-4 px-3">
{{ body | markdown | safe }}
</div>
{% else %}
<div>
{{ body | markdown | safe }}
</div>
{% endif %}
</div>

2
templates/shortcodes/layout_separator.html
View File

@ -1,6 +1,6 @@
{% if separator_title %}
{% set separator_rm_bg = true %}
{% set separator_rm_bg = not separator_bg %}
{% include "includes/separator_design.html" %}

2
templates/shortcodes/layout_separator_empty.html Normal file
View File

@ -0,0 +1,2 @@
<div class="container-fluid {% if not inverted %}hero5{% else %}hero6{% endif %} d-flex flex-column justify-content-center" style="{% if style %}{{ style }}{% endif %}">
</div>

4
templates/shortcodes/layout_text_img.html
View File

@ -16,6 +16,10 @@
<img {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=popup, cachebust=true) }}"{% endif %} src="{{ get_url(path=src, cachebust=true) }}" alt="{% if alt %}{{ alt }}{% endif %}" width="100%" class="card-img-top img-fluid">
{% endif %}
{% if src2 %}
<img {% if popup2 %}data-popup="true" data-nsrc="{{ get_url(path=popup2, cachebust=true) }}"{% endif %} src="{{ get_url(path=src2, cachebust=true) }}" alt="{% if alt %}{{ alt2 }}{% endif %}" width="100%" class="card-img-top img-fluid">
{% endif %}
</div>
</div>