Anderson Robotics Theme

Link to article: Anderson Robotics Theme.

@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aar/2);

.colors-container .colors .color:nth-of-type(1) {
    background: var(--light-accent) !important;
}
.colors-container .colors .color:nth-of-type(2) {
    background: var(--dark-accent) !important;
}
.colors-container .colors .color:nth-of-type(3) {
    background: var(--hyperlink) !important;
}
.colors-container .colors .color:nth-of-type(4) {
    background: var(--border-colour) !important;
}

.faces-holder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.face {
  box-sizing: border-box;
  width: 7.5rem;
  border: 0.0625rem solid rgba(0,0,0,0.2);
  margin: 0.25rem;
  padding: 0.25rem;
}
.face img {
  max-width: 5rem;
  max-height: 5rem;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}
.face hr {
  margin: 0.25rem;
  background-color: rgba(0,0,0,0.2);
}
.face p {
  text-align: center;
  margin: 0.25rem 0;
}

```
display: none;
```

margin-top: 4rem; margin-bottom: -7rem; transform: scale(2) rotate(20deg);

```
code
```
```
speech
```
```
speech-bubble
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
code
```
```
terminal
```
```
faces-holder
```
```
face
```
```
face
```
```
face
```
```
face
```
```
face
```
```
face
```
```
face
```
```
face
```

[[module CSS]]
@import url(https://scp-wiki.wdfiles.com/local--code/theme%3Aar/2);
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Aar/2
]]

[[iftags +theme]]
[[include :scp-wiki:component:croqstyle]]
[[div style="display: none;"]]
[[code type="css"]]
/* CSS that appears when someone tries to import via @import instead of [[include]] */
/* If you really want, you can get around this by just importing /code/2 instead of /code/1. But DON'T */
#page-content::before {
  content: "Please import the Anderson Robotics CSS theme via [[include :scp-wiki:theme:ar]] - please do not attempt to import the theme via @import. Thank you!";
  padding: 2em;
  border: 1px solid red;
  color: red;
  display: block;
}
[[/code]]
[[/div]]

This is the CSS theme for Anderson Robotics, made by [[*user Croquembouche]], with help from [[*user Jacob Conwell]] and [[*user OthellotheCat]].

The first section of an AR document should have an introduction, followed by a horizontal rule, followed by the rating module, followed by whatever.

This is optional of course, but it means the rating module sits on top of the horizontal rule and it looks slick as hell.

-----

[[>]]
[[module Rate]]
[[/>]]

[[include component:image-block name= ar_logo_blue.png|caption=Anderson Robotics trade logo, circa 1998.|width=200px]]

+ Usage

To add this theme to your page, put the following anywhere inside it:

[[div class="code"]]
@@[[include :scp-wiki:theme:ar]]@@
[[/div]]

If using on a page with the Sigma-9 [[[component:toggle-sidebar | Toggle Sidebar]]] component, include this theme just after it.

+ Examples

This is some more text to show you what a paragraph looks like when using this theme. It's not terribly important, so I'm going to keep typing until I run out of things to say. Oh, that was quick.

[[tabview]]
[[tab First Tab]]
This is a tab view.

The Anderson theme features animated tabs. Click another tab to see the slick, smooth action.
[[/tab]]
[[tab A Second Tab]]
= [[image finn_shock_left.png width="200px" style="margin-top: 4rem; margin-bottom: -7rem; transform: scale(2) rotate(20deg);"]]
[[/tab]]
[[tab Long Tab]]
This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.
[[/tab]]
[[/tabview]]

-----

+ Colours

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Burgundy in Blue
| color1-variable=--light-accent
| color1-info=#295183
| color1-has-light-text=1
| color2-name=Squid Ink Soup
| color2-variable=--dark-accent
| color2-info=#1e3c62
| color2-has-light-text=1
| color3-name=Windows 8 Has Crashed :(
| color3-variable=--hyperlink
| color3-info=#0366d6
| color3-has-light-text=1
| color4-name=Steel Plate
| color4-variable=--border-colour
| color4-info=rgba(0, 0, 0, 0.12)
]]
[[module CSS]]
.colors-container .colors .color:nth-of-type(1) {
    background: var(--light-accent) !important;
}
.colors-container .colors .color:nth-of-type(2) {
    background: var(--dark-accent) !important;
}
.colors-container .colors .color:nth-of-type(3) {
    background: var(--hyperlink) !important;
}
.colors-container .colors .color:nth-of-type(4) {
    background: var(--border-colour) !important;
}
[[/module]]

-----

+ Finn the Falcon

[[div class="speech"]]
[[image https://scp-wiki.wdfiles.com/local--files/theme:ar/finn_friendly_right.png]]
[[div class="speech-bubble"]]
+++ Hi!

I'm Finn the Falcon, Anderson Robotics' friendly mascot!
[[/div]]
[[/div]]

The Anderson theme comes with a built-in GoI format for Anderson Robotics instruction manuals, as seen in [[[new-buteo-series-mechanical-exoskeleton|]]]. Finn was created by [[*user OthellotheCat]]. ([[[othello-makes-some-drawings | see more art by Othello]]])

[[collapsible show="+ Show instructions for Finn the Falcon" hide="- Hide instructions for Finn the Falcon"]]
To add Finn to your page, copy the following and change the text/image as required:

[[div class="code terminal"]]
##var(--c-keyword)|[[####var(--c-builtin)|div## ##var(--c-symbol)|class##=##var(--c-string)|@@"speech"@@####var(--c-keyword)|]]##
##var(--c-keyword)|[[####var(--c-builtin)|image## ##var(--c-string)|@@https://scp-wiki.wdfiles.com/local--files/theme:ar/finn_friendly_right.png@@####var(--c-keyword)|]]##

##var(--c-keyword)|[[####var(--c-builtin)|div## ##var(--c-symbol)|class##=##var(--c-string)|@@"speech-bubble"@@####var(--c-keyword)|]]##
##var(--c-builtin)|+++## Hi!

I'm Finn the Falcon, Anderson Robotics' friendly mascot!
##var(--c-keyword)|[[/####var(--c-builtin)|div####var(--c-keyword)|]]##
##var(--c-keyword)|[[/####var(--c-builtin)|div####var(--c-keyword)|]]##
[[/div]]

Finn is on the left by default. To put Finn on the right, add {{.speech@@--@@reverse}} to {{.speech}}:

[[div class="code terminal"]]
##var(--c-keyword)|[[####var(--c-builtin)|div## ##var(--c-symbol)|class##=##var(--c-string)|@@"speech speech--reverse"@@####var(--c-keyword)|]]##
##var(--c-keyword)|[[####var(--c-builtin)|image## @@. . .@@
[[/div]]

If there's a lot of text (more than 1-2 lines), add class {{.speech-bubble@@--@@long}} to {{.speech-bubble}}, which changes the layout to free up more vertical space:

[[div class="code terminal"]]
##var(--c-keyword)|[[####var(--c-builtin)|div## ##var(--c-symbol)|class##=##var(--c-string)|@@"speech-bubble speech-bubble--long"@@####var(--c-keyword)|]]##
##var(--c-builtin)|+++## Hi! @@. . .@@
[[/div]]

You can use any image you like. The Anderson theme provides a few to get you started - you can hotlink these images directly from this theme, like the example above.

[[module css]]
.faces-holder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.face {
  box-sizing: border-box;
  width: 7.5rem;
  border: 0.0625rem solid rgba(0,0,0,0.2);
  margin: 0.25rem;
  padding: 0.25rem;
}
.face img {
  max-width: 5rem;
  max-height: 5rem;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}
.face hr {
  margin: 0.25rem;
  background-color: rgba(0,0,0,0.2);
}
.face p {
  text-align: center;
  margin: 0.25rem 0;
}
[[/module]]
[[div class="faces-holder"]]
[[div class="face"]]
[[image finn_friendly_right.png]]
-----
friendly_right
[[/div]]
[[div class="face"]]
[[image finn_friendly_left.png]]
-----
friendly_left
[[/div]]
[[div class="face"]]
[[image finn_shock_right.png]]
-----
shock_right
[[/div]]
[[div class="face"]]
[[image finn_shock_left.png]]
-----
shock_left
[[/div]]
[[div class="face"]]
[[image finn_threat_right.png]]
-----
threat_right
[[/div]]
[[div class="face"]]
[[image finn_threat_left.png]]
-----
threat_left
[[/div]]
[[div class="face"]]
[[image finn_sunglasses_right.png]]
-----
sunglasses_right
[[/div]]
[[div class="face"]]
[[image finn_sunglasses_left.png]]
-----
sunglasses_left
[[/div]]
[[/div]]

[[/collapsible]]

-----

+ Source code

[[collapsible show="+ Show source code"]]

[[code type="css"]]

/*-------------------------------------*\
 *       ANDERSON ROBOTICS THEME       *
 *           by Croquembouche          *
 *             Sep 2018                 *
\*-------------------------------------*/


/*-----------------------*\
 *   Fonts and Colours   * 
\*-----------------------*/

@import url('https://fonts.bunny.net/css?family=Montserrat:400,600|Raleway|Roboto+Mono');

:root {
  --light-accent: #295183;
  --dark-accent: #1e3c62;
  --hyperlink: #0366d6;
  --hyperlink-visited: #0361cc;
  --border-colour: rgba(0,0,0,0.12);
}

body {
  font-family: Montserrat, RedactRect, sans-serif;
}
textarea[name=source] {
  font-family: 'Roboto Mono',monospace;
}

a {
  color: var(--hyperlink);
}
a:visited {
  color: var(--hyperlink-visited);
}

/*--------------------*\
 *   Titles/Headers   * 
\*--------------------*/

h1, h2, h3, h4, h5, h6, #page-title {
  font-family: Raleway,sans-serif;
  font-variant-numeric: lining-nums;
}
h1, #page-title {
  color: var(--light-accent);
}
#page-title {
  font-size: 3em;
  border: none;
  padding: 0;
  margin: 0.5em 0 0.3em 0;
}
#breadcrumbs {
  position: absolute;
  top: 1.5em;
  opacity: 0.6;
}

#main-content {
  border-left: 1px solid var(--border-colour);
  padding: 2em 2em 2em 4em;
}

/*------------------*\
 *    Top Header    * 
\*------------------*/

div#container-wrap {
  background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aar/ar_bg.png) top left repeat-x;
}
#header {
  background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aar/ar_circle.png);
}

#header h1 a {
  background: transparent;
  font-family: 'Roboto Mono',sans-serif;
  text-decoration: none;
  text-shadow: none;
  letter-spacing: -0.05em;
  font-weight: 400;
  /* hide real header */
  line-height: 0px;
  max-height: 0px;
  color: transparent;
}
#header h1 a::before {
  content: "Anderson Robotics";
  color: #fff;
}
#header h2 span {
  background: transparent;
  font-family: 'Roboto Mono',sans-serif;
  text-shadow: none;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: #eee;
  /* hide real header */
  line-height: 0px;
  max-height: 0px;
  color: transparent;
}
#header h2 span::before {
  content: "More than Human";
  color: #eee;
}

#search-top-box-input {
  background-color: var(--dark-accent);
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-family: 'Roboto Mono',monospace;
}
#search-top-box-input:hover, #search-top-box-input:focus {
  background-color: var(--dark-accent);
  border: none;
  box-shadow: none;
}
#search-top-box-form input[type=submit] {
  padding: 0 0.5em;
  border: 1px solid var(--dark-accent);
  border-radius: 0;
  color: #fff;
  background: var(--light-accent);
  font-family: 'Roboto Mono',monospace;
}
#search-top-box-form input[type=submit]:hover {
  border: 1px solid var(--dark-accent);
  border-radius: 0;
  background: var(--light-accent);
}

#top-bar ul li ul a, #top-bar a:hover, #top-bar ul li.sfhover a, #top-bar ul li:hover a {
  color: var(--light-accent);
}

/*----------------------------------------*\
 *  Height Adjustment for central border  * 
\*----------------------------------------*/

#content-wrap {
  margin-top: 0;
  min-height: 1660px;
}

/*------------------*\
 *     Side Bar     * 
\*------------------*/

:is(#side-bar, #interwiki) {
  background-color: white;
}

:is(#side-bar, #interwiki) .side-block {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent !important;
  padding: 0;
}
:is(#side-bar, #interwiki) .heading {
  border: none;
  border-radius: 0;
  color: #202124;
  font-size: 1.2em;
  padding: 1em 1em 0 0;
  border-top: 1px solid rgba(0,0,0,.12);
  margin: 1em calc(-1em + 2px) 1em 0;
  font-weight: normal;
}
#interwiki .heading {
  margin-inline: 0;
}
:is(#side-bar, #interwiki) div.menu-item {
  margin: 0;
  font-size: 0 !important; /* Override .small */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
:is(#side-bar, #interwiki) div.menu-item a {
  font-weight: normal;
  flex: 1;
}
:is(#side-bar, #interwiki) .menu-item > img {
  display: none;
}
:is(#side-bar, #interwiki) .menu-item > a {
  transition: all 0.1s ease-in-out;
  display: block;
  color: #5f6368;
  margin: 0;
  padding: 0.4em 0;
  font-size: 12.8px;
}
:is(#side-bar, #interwiki) .menu-item > a:hover {
  background-color: rgba(0,0,0,0.04);
  color: #202124;
  text-decoration: none;
}

/*--------------------*\
 *  Horizontal Rules  * 
\*--------------------*/

hr {
  background-color: var(--border-colour);
}
#page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
  margin: 3em -2em 3em -4em;
}

/*-------------------*\
 *    Blockquotes    * 
\*-------------------*/

blockquote,
div.blockquote {
  border: 1px solid var(--border-colour);
  background-color: transparent;
}

/*-----------------------*\
 *     Rating & Tags     * 
\*-----------------------*/

hr + div[style="text-align: right;"] {
  position: relative;
}
hr + div[style="text-align: right;"] .page-rate-widget-box {
  top: calc(-3em - 8px);
  right: 0;
  position: absolute;
}

.page-rate-widget-box {
  border-radius: 0;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
div.page-rate-widget-box .rate-points {
  background-color: var(--light-accent);
  border-color: var(--dark-accent);
  border-radius: 0;
}
.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown {
  background-color: #fff;
  border-color: var(--dark-accent);
}
.page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a {
  color: var(--dark-accent);
}
.page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover {
  color: #fff;
  background-color: var(--light-accent);
}
.page-rate-widget-box .cancel {
  background-color: var(--light-accent);
  border-color: var(--dark-accent);
  border-radius: 0;
}
.page-rate-widget-box .cancel a {
  color: #fff;
}
.page-rate-widget-box .cancel a:hover {
  border-radius: 0;
  color: var(--dark-accent);
  background-color: var(--light-accent);
}

.rate-box-with-credit-button {
  background-color: var(--light-accent);
  border: 1px solid var(--dark-accent);
  border-radius: 0;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
.creditButton p a {
  border-left-color: #fff;
}

#main-content .page-tags {
  margin-top: 3em;
}
#main-content .page-tags span {
  border-color: var(--border-colour);
  margin-left: -4.7em;
  padding-left: 4.7em;
}

/*------------------*\
 *       Tabs       * 
\*------------------*/

.yui-navset.yui-navset-top {
  border-left: 3px solid var(--light-accent);
}
.yui-navset .yui-nav {
  position: relative;
  z-index: 0;
  border: none;
  padding-left: 0.2em;
}
.yui-navset .yui-nav li {
  padding: 0;
  margin: 0.2em 0.3em;
  transition: transform 0.2s ease-in-out;
}
.yui-navset .yui-nav li a {
  background: transparent;
  color: #5f6368;
  border: 1px solid var(--border-colour);
  transition: background 0.1s ease-in-out,
        color 0.1s ease-in-out,
        border 0.1s ease-in-out;
}
.yui-navset .yui-nav li a:hover {
  background: rgba(0,0,0,0.04);
  color: #202124;
  border: 1px solid var(--border-colour);
}
.yui-navset .yui-nav li a em {
  border: none;
  padding: 0.5em 0.5em calc(0.5em - 2px) 0.5em;
}
.yui-navset .yui-nav .selected {
  padding: 0;
  margin: 0.2em 0.3em;
  transform: scale(1.1);
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover {
  padding: 0;
  border: 1px solid var(--dark-accent);
  background: var(--light-accent);
}
.yui-navset .yui-nav .selected a em {
  padding: 0.5em 0.5em calc(0.5em - 2px) 0.5em;
  border: none;
}

.yui-navset .yui-content {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: none;
  padding: 0;
  position: relative;
  margin-top: 0.2em;
  transform-origin: 0 0;
}
.yui-navset .yui-content > div {
  border: 1px solid var(--border-colour);
  border-left: none;
  background-color: #f5f5f5;
  padding: 0.25em 0.5em;
  display: block;
  top: 0;
  overflow: hidden;
  transform-origin: 0 0;
}
#page-content .yui-navset .yui-content > div > * {
  transform-origin: 0 0;
}
#page-content .yui-navset .yui-content > div[style*="none"] {
  display: block !important;
  flex: 0;
  max-height: 0;
  padding: 0 0.5em;
  border-width: 0;
  /* The following transition affects the one that DISAPPEARS */
  transition: padding 0s linear 0.5s,
        border-width 0s linear 0.5s,
        flex 0.5s cubic-bezier(.0,1.27,.0,.89) 0s;
  animation: tab-disappear 0.5s ease-in-out 0s 1 both;
}
#page-content .yui-navset .yui-content > div[style*="block"] {
  display: block !important;
  flex: 1;
  max-height: 9999rem;
  /* The following transition affects the one that APPEARS */
  transition: padding 0s linear 0.5s,
        border-width 0s linear 0.5s,
        flex 0.5s cubic-bezier(.99,.0,.99,.0) 0.5s;
  animation: tab-appear 0.5s ease-in-out 0.5s 1 both;
}

@keyframes tab-disappear {
  0% { max-height: 9999rem; }
  1% { max-height: 100vh; }
  100% { max-height: 0; }
}
@keyframes tab-appear {
  0% { max-height: 0; }
  99% { max-height: 100vh; }
  100% { max-height: 9999rem; }
}

/*--------------------*\
 *       Tables       * 
\*--------------------*/

table.wiki-content-table td {
  border-color: var(--border-colour);
}
table.wiki-content-table th {
  border-color: var(--border-colour);
  background-color: #f5f5f5;
}

/*------------------*\
 *      Images      * 
\*------------------*/

#page-content .scp-image-block {
  border-color: var(--border-colour);
  box-shadow: none;
}
#page-content .scp-image-block .scp-image-caption {
  border-color: var(--border-colour);
  background-color: #f5f5f5;
}

/*-------------------*\
 *     Animation     * 
\*-------------------*/

#header::before {
  content: "";
  background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aar/ar_logo_blue.png);
  position: absolute;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: translate (0,0) scale(1,1);
  animation-fill-mode: forwards;
  zoom: 1;
}

/*------------------*\
 *      Mobile      * 
\*------------------*/

#side-bar .close-menu {
  transition: width 0.5s ease-in-out 0.1s,
              opacity 1s ease-in-out 0s;
  background: rgba(0,0,0,0.3);
  background-position: 19em 50%;
  opacity: 0;
}

#side-bar:target .close-menu {
  width: calc(100% - 17rem);
  right: 0;
  opacity: 1;
  pointer-events: auto;
}

.open-menu a {
  border-radius: 0;
  border: none !important;
  padding: 0.1em;
  box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2), 0px 3px 10px 0 rgba(0, 0, 0, 0.19);
  color: #295183 !important;
  color: var(--light-accent) !important;
}

@media (max-width: 767px) {
  #main-content {
    padding: 0;
    margin: 0 5%;
    border-left: none;
  }
  #page-title {
    margin-top: 0.7em;
  }
  #side-bar {
    background-color: #fff;
    left: -19em;
  }
  #side-bar:target {
    border: none;
    box-shadow: 3px 0 1px -2px rgba(0,0,0,0.04), 1px 0 5px 0 rgba(0,0,0,0.2);
  }
  #side-bar .close-menu {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: auto;
    background-position: 19em 50%;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
  }
  #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr {
    margin: 3em -5.5%;
  }
  #breadcrumbs {
    position: relative;
    top: 0;
    font-style: italic;
  }
  #side-bar {
    top: 0;
  }
  #side-bar .heading {
    padding-left: 1em;
    margin-left: -1em;
  }
  #search-top-box {
    top: 107px;
  }
}

/*--------------------*\
 *    Responsivity    * 
\*--------------------*/

@media (max-width: 479px) {
  #header::before {
    animation: logo-expand-479 3s ease-in-out 0s 1 forwards;
    background-size: 55px;
  }
  #search-top-box {
    display: none;
  }
}
@media (max-width: 580px) and (min-width: 480px) {
  #header::before {
    animation: logo-expand-580-480 3s ease-in-out 0s 1 forwards;
    background-size: 66px;
  }
}
@media (max-width: 767px) and (min-width: 581px) {
  #header {
    background-position: 1em 4.3em;
    background-size: 70px;
  }
  #header::before {
    animation: logo-expand-767-581 3s ease-in-out 0s 1 forwards;
    background-size: 70px;
  }
  #search-top-box-input.empty {
    width: initial;
  }
}
@media (max-width: 979px) and (min-width: 768px) {
  #header {
    background-position: 1.8em 4em;
    background-size: 70px;
  }
  #header::before {
    animation: logo-expand-979-768 3s ease-in-out 0s 1 forwards;
    animation-fill-mode: forwards;
    background-size: 70px;
  }
}
@media (min-width: 980px) {
  #header {
    background-position: 1.8em 3.7em;
    background-size: 80px;
  }
  #header::before {
    animation: logo-expand-980 3s ease-in-out 0s 1 forwards;
    animation-fill-mode: forwards;
    background-size: 80px;
  }
}

/*------------------*\
 *     Keyframes    * 
\*------------------*/

@media screen and (prefers-reduced-motion: reduce) {
  #header::before {
    animation: none;
  }
}

@keyframes logo-expand-980 {
  0%, 74% {
    background-size: 80px 80px;
    top: 3.7em;
    left: 1.8em;
    height: 80px;
    width: 80px;
    transform: translate(0px,16.31px) scale(0.43,0.43);
    opacity: 0;
  }
  75% {
    background-size: 80px 80px;
    top: 3.7em;
    left: 1.8em;
    height: 80px;
    width: 80px;
    transform: translate(0px,16.31px) scale(0.43,0.43);
    opacity: 1;
  }
  100% {
    background-size: 80px 80px;
    top: 3.7em;
    left: 1.8em;
    height: 80px;
    width: 80px;
    transform: translate(0,0) scale(1,1);
    opacity: 1;
  }
}
@keyframes logo-expand-979-768 {
  0%, 74% {
    background-size: 70px 70px;
    top: 4em;
    left: 1.8em;
    height: 70px;
    width: 70px;
    transform: translate(0px,14.15px) scale(0.43,0.43);
    opacity: 0;
  }
  75% {
    background-size: 70px 70px;
    top: 4em;
    left: 1.8em;
    height: 70px;
    width: 70px;
    transform: translate(0px,14.15px) scale(0.43,0.43);
    opacity: 1;
  }
  100% {
    background-size: 70px 70px;
    top: 4em;
    left: 1.8em;
    height: 70px;
    width: 70px;
    transform: translate(0,0) scale(1,1);
    opacity: 1;
  }
}
@keyframes logo-expand-767-581 {
  0%, 74% {
    background-size: 70px 70px;
    top: 4.3em;
    left: 1em;
    height: 70px;
    width: 70px;
    transform: translate(0px,14.15px) scale(0.43,0.43);
    opacity: 0;
  }
  75% {
    background-size: 70px 70px;
    top: 4.3em;
    left: 1em;
    height: 70px;
    width: 70px;
    transform: translate(0px,14.15px) scale(0.43,0.43);
    opacity: 1;
  }
  100% {
    background-size: 70px 70px;
    top: 4.3em;
    left: 1em;
    height: 70px;
    width: 70px;
    transform: translate(0,0) scale(1,1);
    opacity: 1;
  }
}
@keyframes logo-expand-580-480 {
  0%, 74% {
    background-size: 66px 66px;
    top: 4.5em;
    left: 0.5em;
    height: 66px;
    width: 66px;
    transform: translate(0px,13.28px) scale(0.43,0.43);
    opacity: 0;
  }
  75% {
    background-size: 66px 66px;
    top: 4.5em;
    left: 0.5em;
    height: 66px;
    width: 66px;
    transform: translate(0px,13.28px) scale(0.43,0.43);
    opacity: 1;
  }
  100% {
    background-size: 66px 66px;
    top: 4.5em;
    left: 0.5em;
    height: 66px;
    width: 66px;
    transform: translate(0,0) scale(1,1);
    opacity: 1;
  }
}
@keyframes logo-expand-479 {
  0%, 74% {
    background-size: 55px 55px;
    top: 5.5em;
    left: 0em;
    height: 55px;
    width: 55px;
    transform: translate(0px,10.9px) scale(0.43,0.43);
    opacity: 0;
  }
  75% {
    background-size: 55px 55px;
    top: 5.5em;
    left: 0em;
    height: 55px;
    width: 55px;
    transform: translate(0px,10.9px) scale(0.43,0.43);
    opacity: 1;
  }
  100% {
    background-size: 55px 55px;
    top: 5.5em;
    left: 0em;
    height: 55px;
    width: 55px;
    transform: translate(0,0) scale(1,1);
    opacity: 1;
  }
}

/*------------------*\
 *  Finn the Falcon * 
\*------------------*/

.speech {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 2em 0;
  font-size: 1.3em;
}

.speech > img {
  margin-block: -2em;
  height: 200px;
}

.speech--reverse {
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  .speech {
    flex-direction: column;
  }
}

.speech-bubble {
  padding: 0.2em 2em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.14)) drop-shadow(0 3px 1px rgba(0,0,0,0.12));

  /* Max height enforces using --long */
  max-height: 150px;

  /* Speech bubble border */
  z-index: 0;
  position: relative;
  background-color: #ddd;
  border: 5px solid #eee;
  border-radius: calc(3em + 5px);
}

.speech-bubble::before {
  /* Speech bubble tail, covering border */
  z-index: 1;
  content: "";
  position: absolute;
  top: 2rem;
  left: -4rem;
  height: 50px;
  width: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='35'%3E%3Cpath fill='%23fff' stroke='%23eee' stroke-linejoin='round' stroke-width='4' d='M100 2.5 2.5 15 100 27.5Z'/%3E%3C/svg%3E");
  background-size: cover;
  transform: rotate(15deg);
}

.speech-bubble::after {
  /* Speech bubble background, covering tail */
  z-index: 2;
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  border-radius: 3em;
}

.speech-bubble > * {
  /* Speech bubble content */
  z-index: 3;
}

.speech-bubble h3 {
  margin: 1rem;
  font-size: 2em;
  font-weight: 600;
}

.speech-bubble--long {
  max-height: none;
  flex-direction: column;
}
.speech-bubble--long::before {
  top: 50%;
}
.speech-bubble--long h3 {
  margin-bottom: 0;
}

.speech--reverse .speech-bubble::before,
.speech-bubble--reverse::before {
  right: -4rem;
  left: auto;
  transform: rotate(-15deg) scaleX(-1);
}

@media (max-width: 767px) {
  .speech-bubble::before {
    top: -2rem;
    left: calc(30% - 4rem);
    transform: rotate(-60deg) scaleX(-1);
  }

  .speech--reverse .speech-bubble::before,
  .speech-bubble--reverse::before {
    left: calc(70% - 2rem);
    transform: rotate(60deg);
  }
}
[[/code]]

[[/collapsible]]

[[/iftags]]

Anderson Robotics Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source