init

site/css/default.css

@@ -0,0 +1,142 @@
+body {
+    color: white;
+    background-color: black;
+    background-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.9) 100%), url(/images/Chaoszone.svg);
+    background-size: contain;
+    background-attachment:fixed;
+    background-repeat:no-repeat;
+    background-position: center;
+    font-family: 'Xolonium';
+    font-size: 16px;
+    font-weight: normal;
+    font-style: normal;
+    margin: 0 50px 0;
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+header {
+    border-bottom: 2px solid white;
+    margin-bottom: 30px;
+    padding: 12px 0px 12px 0px;
+}
+
+a {
+    color: #ccc000;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #34c300;
+    text-decoration: underline
+}
+
+div#logo a {
+    color: white;
+    /*float: left;*/
+    font-size: 18px;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+nav {
+    position: relative;
+    float: left;
+}
+
+nav ul{
+    text-align: left;
+    list-style: none;
+    display: inline-block;
+    margin: 0;
+}
+
+nav li a {
+    color: white;
+    font-size: 18px;
+    font-weight: bold;
+    margin-left: 12px;
+    text-decoration: none;
+    text-transform: uppercase;
+}
+
+article {
+    margin-left: 200px;
+}
+
+footer {
+    border-top: solid 2px white;
+    color: #555;
+    font-size: 12px;
+    margin-top: 30px;
+    padding: 12px 0px 12px 0px;
+    text-align: right;
+}
+
+h1 {
+    font-size: 24px;
+}
+
+h2 {
+    font-size: 20px;
+}
+
+div.info {
+    color: #555;
+    font-size: 14px;
+    font-style: italic;
+}
+
+.pagination {
+    display: inline-block;
+    width: 100%
+}
+
+.wrapper {
+    flex: 1;
+}
+
+.left, .right {
+    display: inline-block;
+    fill: curentColor;
+}
+
+.left {
+    float: left;
+    margin-left: 10%;
+}
+
+.right {
+    float: right;
+    margin-right: 10%;
+}
+
+.left svg, .right svg {
+    margin-bottom: -3px;
+    margin-left: 0.8ex;
+    margin-right: 0.8ex;
+}
+
+#yacs {
+    width: 100%
+}
+
+.page img {
+    width: 100%
+}
+
+.authors_comments {
+    border: 1px solid white;
+    border-radius: 5px;
+    padding: 0 1em 0;
+    background-color: #454545;
+    box-shadow: 5px 5px 5px #ffffff;
+    margin: 2em 0 2em;
+}
+
+@media screen and (max-width: 600px){
+  article {
+    margin: 120px 0 0 0;
+  }
+}

site/css/font.css

@@ -0,0 +1,6 @@
+@font-face {
+    font-family: 'Xolonium'
+    src: url('/fonts/Xolononiu-Regular.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}

site/css/hover.scss

@@ -0,0 +1,56 @@
+.tooltip-toggle {
+  cursor: pointer;
+  //position: relative;
+
+  //Tooltip text container
+  &::before {
+    position: absolute;
+    top: -30px;
+    //left: -80px;
+    background-color: #00ff00;
+    border-radius: 5px;
+    color: #fff;
+    content: attr(aria-label); //This pulls in the text from the element with the tooltip
+    padding: 1ex;
+    text-transform: none;
+    font-weight: bold;
+    transition: all 0.5s ease;
+    width: 160px;
+    line-height: 16px;
+  }
+
+  //Tooltip arrow
+  //&::after {
+  //  position: absolute;
+  //  top: -12px;
+  //  left: 9px;
+  //  border-left: 5px solid transparent;
+  //  border-right: 5px solid transparent;
+  //  border-top: 5px solid #2B222A;
+  //  content: " ";
+  //  font-size: 0;
+  //  line-height: 0;
+  //  margin-left: -5px;
+  //  width: 0;
+  //}
+  
+  //Setting up the transition
+  &::before,
+  &::after {
+    color: #efefef;
+    font-family: monospace;
+    font-size: 16px;
+    opacity: 0;
+    pointer-events: none;
+    text-align: center;
+  }
+  
+  //Triggering the transition
+  &:focus::before,
+  &:focus::after,
+  &:hover::before,
+  &:hover::after {
+    opacity: 1;
+    transition: all 0.75s ease;
+  }
+}

site/css/math.scss

@@ -0,0 +1,58 @@
+@function fact($number) {
+  $value: 1;
+  @if $number > 0 {
+    @for $i from 1 through $number {
+      $value: $value * $i;
+    }
+  }
+  @return $value;
+}
+
+@function pow($number, $exp) {
+  $value: 1;
+  @if $exp > 0 {
+    @for $i from 1 through $exp {
+      $value: $value * $number;
+    }
+  }
+  @else if $exp < 0 {
+    @for $i from 1 through -$exp {
+      $value: $value / $number;
+    }
+  }
+  @return $value;
+}
+
+@function pi() {
+  @return 3.14159265359;
+}
+
+@function rad($angle) {
+  $unit: unit($angle);
+  $unitless: $angle / ($angle * 0 + 1);
+  // If the angle has 'deg' as unit, convert to radians.
+  @if $unit == deg {
+    $unitless: $unitless / 180 * pi();
+  }
+  @return $unitless;
+}
+
+@function sin($angle) {
+  $sin: 0;
+  $angle: rad($angle);
+  // Iterate a bunch of times.
+  @for $i from 0 through 10 {
+    $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
+  }
+  @return $sin;
+}
+
+@function cos($angle) {
+  $cos: 0;
+  $angle: rad($angle);
+  // Iterate a bunch of times.
+  @for $i from 0 through 10 {
+    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
+  }
+  @return $cos;
+}

site/css/menu.scss

@@ -0,0 +1,183 @@
+@import "math";
+
+// vars
+$fg:#ff0000;
+$bg:#00ff00;
+
+// config
+$menu-items: 5;
+$open-distance: 110px;
+$start-angle: (0 - pi()) / 2;
+$opening-angle: pi() + 0;
+
+.menu {
+  //@extend %goo;
+  $width:300px;
+  $height:300px;
+  //$width: 250px + (150px * abs(cos($start-angle)));
+  //$height: 250px + (150px * abs(sin($start-angle)));
+  position:fixed;
+  //left:50%;
+  display: inline-block;
+  margin-left:-$width/2;
+  padding-top:$height/2;
+  padding-left:$width/2;
+  padding-bottom:-$height/2;
+  width:$width;
+  height:$height;
+  box-sizing:border-box;
+  font-size:20px;
+  text-align:left;
+}
+
+%ball {
+  background: $bg;
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+  margin-left: -40px;
+  margin-top: -40px;
+  position: absolute;
+  top: 50%;
+  color: white;
+  text-align:center;
+  line-height: 80px;
+  transform: translate3d(0,0,0);
+  transition:transform ease-out 200ms;
+
+  svg {
+    padding-top: 10px;
+    width: 60px;
+    height: 60px;
+  }
+}
+
+.menu-open {
+  display: none;
+}
+
+.menu-item {
+  @extend %ball;
+}
+
+.hamburger {
+  $width: 25px;
+  $height: 3px;
+  width: $width;
+  height: $height;
+  background: white;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -$width/2;
+  margin-top: -$height/2;
+  transition: transform 200ms;
+}
+
+$hamburger-spacing:8px;
+
+.hamburger-1 {
+  transform:translate3d(0,-$hamburger-spacing,0);
+}
+
+.hamburger-2 {
+  transform:translate3d(0,0,0);
+}
+
+.hamburger-3 {
+  transform:translate3d(0,$hamburger-spacing,0);
+}
+
+.menu-open:checked + .menu-open-button {
+  .hamburger-1 {
+    transform:translate3d(0,0,0) rotate(45deg); 
+  }
+
+  .hamburger-2 {
+    transform:translate3d(0,0,0) scale(0.1,1);
+  }
+
+  .hamburger-3 {
+    transform:translate3d(0,0,0) rotate(-45deg); 
+  }
+}
+
+.menu-item {
+  &:hover {
+    background:#acffac;
+    color:$fg;
+  }
+  @for $i from 1 through $menu-items {
+    &:nth-child(#{$i+2}) {
+      transition-duration:10ms+(60ms*($i));
+    }
+  }
+}
+
+.menu-open-button {
+  @extend %ball;
+  z-index:2;
+  //transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.275);
+  transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.0);
+  transition-duration:400ms;
+  transform:scale(1.1,1.1) translate3d(0,0,0);
+  cursor:pointer;
+}
+
+.menu-open-button:hover {
+  transform:scale(1.2,1.2) translate3d(0,0,0);
+}
+
+.menu-open:checked + .menu-open-button {
+  transition-timing-function:linear;
+  transition-duration:200ms;
+  transform:scale(0.8,0.8) translate3d(0,0,0);
+}
+
+.menu-open:checked ~ .menu-item {
+  transition-timing-function:cubic-bezier(0.935, 0.000, 0.340, 1.330);
+  @for $i from 1 through $menu-items {
+    $angle:((pi() - pi())/2)+((pi()/($menu-items - 1))*($i - 1) + $start-angle);
+    
+    &:nth-child(#{$i+2}) {
+      transition-duration:80ms+(80ms*$i);
+      transform:translate3d(cos($angle)*$open-distance,sin($angle)*$open-distance,0);
+    }
+  }
+}
+
+@media screen and (max-width: 600px){
+  .menu {
+    position: relative;
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 80px;
+    width: 100%;
+  }
+
+  %ball {
+    $dim: 1.4cm;
+    width: $dim;
+    height: $dim;
+    line-height: $dim;
+
+    svg {
+      $dim: 1.2cm;
+      padding-top: 0.1cm;
+      width: $dim;
+      height: $dim;
+    }
+  }
+    
+
+  .menu-open:checked~.menu-item{
+    transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
+    @for $i from 1 through $menu-items{
+      &:nth-child(#{$i+2}){
+        transition-duration:90ms+(100ms*$i);
+        transform:translate3d(1.4cm*$i,0,0);
+      }
+    }
+  }
+}