cyberweb 0.4.174 → 0.5.225

data/lib/cyberweb/toplevel_methods/css.rb

@@ -9,28 +9,680 @@ module Cyberweb
 
   require 'cyberweb/toplevel_methods/html_mode.rb'
   require 'cyberweb/project/project.rb'
-  require 'cyberweb/constants/standalone_constants.rb'
-  require 'cyberweb/constants/project_constants.rb'
-  require 'cyberweb/colours/sanitize_for_colours.rb'
+  require 'cyberweb/constants/constants.rb'
+  require 'cyberweb/constants/constants.rb'
   require 'cyberweb/encoding/encoding.rb'
 
   # ========================================================================= #
-  # === Cyberweb.return_content_of_all_the_CSS_files
+  # === Cyberweb.return_css_for_the_simple_calculator
+  # ========================================================================= #
+  def self.return_css_for_the_simple_calculator(
+      font_size_to_use         = '16px',
+      background_colour_to_use = '#538fbe'
+    )
+    return '
+/*
+ * This here is for the default CSS calculator.
+ *
+ * It is part of the .css file here because we may want to
+ * easily re-use this in sinatra as well.
+ */
+.input_for_the_calculator
+{
+  display: inline-block;
+  text-decoration: none;
+  color: #fff;
+  font-weight: bold;
+  margin: 12px;
+  padding: 12px;
+  width: 60px;
+  text-align: center;
+  background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
+  box-shadow: 12px 5px 0px #2b638f, 0px 3px 10px rgba(0,0,0,.2);
+  border: 2px dotted #2d6898;
+  font-size: '+font_size_to_use.to_s+';
+  background-color: '+background_colour_to_use.to_s+';
+}
+     '
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.css_rules_for_the_polaroid_card_effect
+  # ========================================================================= #
+  def self.css_rules_for_the_polaroid_card_effect(
+      width      = '300px',
+      min_height = '240px'
+    )
+    return '
+    .polaroid_card {
+  background-color: var(--background);
+  display:    block;
+  width:      '+width.to_s+';
+  min-height: '+min_height.to_s+';
+  cursor: pointer;
+  padding: 15px;
+  border: 3px solid var(--primary);
+  box-shadow:
+    10px -10px 0 -3px var(--background), 10px -10px var(--green),
+    20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
+    30px -30px 0 -3px var(--background), 30px -30px var(--orange),
+    40px -40px 0 -3px var(--background), 40px -40px var(--red);
+}
+
+.polaroid_card:hover {
+  animation: shadow_wave_animation 1s ease infinite;
+}
+
+@keyframes shadow_wave_animation {
+  0% {
+    border: 3px solid var(--primary);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green),
+      20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
+      30px -30px 0 -3px var(--background), 30px -30px var(--orange),
+      40px -40px 0 -3px var(--background), 40px -40px var(--red);
+  }
+  20% {
+    border: 3px solid var(--red);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--primary),
+      20px -20px 0 -3px var(--background), 20px -20px var(--green),
+      30px -30px 0 -3px var(--background), 30px -30px var(--yellow),
+      40px -40px 0 -3px var(--background), 40px -40px var(--orange);
+  }
+  40% {
+    border: 3px solid var(--orange);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--red),
+      20px -20px 0 -3px var(--background), 20px -20px var(--primary),
+      30px -30px 0 -3px var(--background), 30px -30px var(--green),
+      40px -40px 0 -3px var(--background), 40px -40px var(--yellow);
+  }
+  60% {
+    border: 3px solid var(--yellow);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--orange),
+      20px -20px 0 -3px var(--background), 20px -20px var(--red),
+      30px -30px 0 -3px var(--background), 30px -30px var(--primary),
+      40px -40px 0 -3px var(--background), 40px -40px var(--green);
+  }
+  80% {
+    border: 3px solid var(--green);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--yellow),
+      20px -20px 0 -3px var(--background), 20px -20px var(--orange),
+      30px -30px 0 -3px var(--background), 30px -30px var(--red),
+      40px -40px 0 -3px var(--background), 40px -40px var(--primary);
+  }
+  100% {
+    border: 3px solid var(--primary);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green),
+      20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
+      30px -30px 0 -3px var(--background), 30px -30px var(--orange),
+      40px -40px 0 -3px var(--background), 40px -40px var(--red);
+  }
+  
+}
+
+:root {
+  --primary:    #22D2A0;
+  --secondary:  #192824;
+  --background: #192824;
+  --green:      #1FC11B;
+  --yellow:     #FFD913;
+  --orange:     #FF9C55;
+  --red:        #FF5555;
+}
+
+.polaroid_card p {
+  font-family: "Archivo", sans-serif;
+  font-size: 25px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+  color: var(--primary);
+  box-sizing: border-box;
+}
+
+.polaroid_card h2 {
+  font-size: 14px;
+  font-family: "Archivo Black", "Archivo", sans-serif;
+  font-weight: normal;
+  color: var(--primary);
+  box-sizing: border-box;
+}
+
+'
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.css_rules_for_the_submarine_component
+  # ========================================================================= #
+  def self.css_rules_for_the_submarine_component
+    return '.outer_container_for_the_submarine {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  background: #130560;
+  overflow: hidden;
+}
+.submarine__container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  height: 200px;
+  transform: translate(-50%, -50%);
+}
+.submarine__body {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 250px;
+  height: 80px;
+  background: #e30449;
+  border-radius: 50px;
+  transform: translate(-50%, -50%);
+}
+.submarine__propeller {
+  position: absolute;
+  left: 80%;
+  top: 50%;
+  width: 30px;
+  height: 50px;
+  transform: translate(0%, -50%);
+  perspective: 600px;
+}
+.propeller__perspective {
+  width: 100%;
+  height: 100%;
+  transition: transform 1s;
+  transform-style: preserve-3d;
+  animation: rotateInfinite 1s linear infinite;
+  cursor: pointer;
+}
+.submarine__propeller-parts {
+  position: absolute;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  top: 0%;
+  perspective: 1000px;
+  transform-style: preserve-3d;
+}
+.darkOne {
+  top: 0%;
+  background: #f7ac08;
+  transform: rotateY(180deg) rotateX(225deg);
+}
+.lightOne {
+  top: 0%;
+  background: #f7e349;
+  transform: rotateX(45deg);
+}
+.submarine__sail {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  width: 90px;
+  height: 50px;
+  transform: translate(-50%, -100%);
+  background: #c6003d;
+  clip-path: polygon(0% 0%, 70% 0%, 100% 100%, 0% 100%);
+}
+.submarine__sail-shadow {
+  position: absolute;
+  width: 160%;
+  height: 10%;
+  background: #a10532;
+  border-radius: 5px;
+}
+.dark1 {
+  left: 0%;
+  top: 0%;
+  transform: translate(0%, -33%);
+}
+.dark2 {
+  left: 0%;
+  top: 50%;
+}
+.light1 {
+  left: 20%;
+  top: 20%;
+  width: 50%;
+  background: #ef689e;
+}
+.submarine__window {
+  width: 25px;
+  height: 25px;
+  border-radius: 100%;
+  background-image: linear-gradient(45deg, #c9e5d9, #fff);
+  border: 8px solid #a10532;
+  z-index: 10;
+  animation: shadow-change 1s linear infinite;
+}
+.one, 
+.two {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.one {
+  left: 40%;
+}
+.two {
+  left: 20%;
+}
+.submarine__shadow-dark {
+  position: absolute;
+  left: 70%;
+  top: 50%;
+  width: 70px;
+  height: 10px;
+  border-radius: 5px;
+  transform: translate(-50%, -50%);
+  background: #a10532;
+}
+.submarine__shadow-light {
+  position: absolute;
+  left: 35%;
+  top: 13%;
+  width: 100px;
+  height: 6px;
+  border-radius: 5px;
+  transform: translate(-50%, -50%);
+  background: #ef689e;
+}
+.submarine__shadow-arcLight {
+  position: absolute;
+  top: 65%;
+  left: 80%;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #ef689e;
+}
+.submarine__periscope {
+  position: absolute;
+  top: 0%;
+  left: 40%;
+  width: 20px;
+  height: 50px;
+  border-right: 10px solid #e92d77;
+  border-top: 10px solid #c6003d;
+  border-left: 0px solid transparent;
+  border-bottom: 0px solid transparent;
+  border-top-right-radius: 10px;
+}
+.submarine__periscope-glass {
+  position: absolute;
+  left: 40%;
+  top: 0%;
+  width: 5px;
+  height: 15px;
+  background: #f7ac08;
+  transform: translate(-50%, -15%);
+}
+.light {
+  position: absolute;
+  top: 0%;
+  left: 0%;
+  width: 500px;
+  height: 100px;
+  background: linear-gradient(to left, #817e97, #130560);
+	/* The points are: centered top, left bottom, right bottom */
+  clip-path: polygon(0% 0%, 50% 45%, 50% 55%, 0% 100%);
+  transform: translate(-18%, -45%);
+}
+
+.bubbles__container {
+  position: absolute;
+  top: 50%;
+  left: 55%;
+  width: 100px;
+  height: 50px;
+  transform: translate(100%, -50%);
+}
+.bubbles {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  left: 5%;
+  top:  5%;
+  background: #fff;
+  opacity: 0.8;
+}
+.bubble-1 {
+  top: 15%;
+  left: 1%;
+  opacity: 0;
+  animation: move-right 1s infinite linear;
+  animation-delay: 0.25s;
+}
+.bubble-2 {
+  top: 30%;
+  left: 1%;
+  opacity: 0;
+  animation: move-right 1s infinite linear;
+  animation-delay: 0.5s;
+}
+.bubble-3 {
+  top: 45%;
+  left: 1%;
+  opacity: 0;
+  animation: move-right 1s infinite linear;
+  animation-delay: 0.75s;
+}
+.bubble-4 {
+  top: 60%;
+  left: 1%;
+  opacity: 0;
+  animation: move-right 1s infinite linear;
+  animation-delay: 1s;
+}
+.ground__container {
+  position: absolute;
+  top: 75%;
+  left: 0%;
+  width: 100%;
+  height: 25%;
+  background: #08003b;
+  margin-top: 20px;
+}
+.ground1 {
+  top: 75%;
+  height: 100%;
+  background: #0c0051;
+}
+.ground2 {
+  position: absolute;
+  top: 35%;
+  width: 100%;
+  height: 100%;
+  background: #08003b;
+}
+.ground span {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  border-radius: 100%;
+}
+.ground1 span {
+  background: #0c0051;
+}
+.ground2 span {
+  background: #08003b;
+  width: 80px;
+  height: 80px;
+  border-radius: 100%;
+  transform: translateY(30%);
+}
+.up-1 {
+  left: 0%;
+  top: -2px;
+  animation: moveThegroundRight 3s infinite linear;
+}
+.up-2 {
+  left: -10%;
+  top: -4px;
+  animation: moveThegroundRight 4s infinite linear;
+}
+.up-3 {
+  left: -20%;
+  top: -6px;
+  animation: moveThegroundRight 5s infinite linear;
+}
+.up-4 {
+  left: -30%;
+  top: -8px;
+  animation: moveThegroundRight 6s infinite linear;
+}
+.up-5 {
+  left: -40%;
+  top: -10px;
+  animation: moveThegroundRight 7s infinite linear;
+}
+.up-6 {
+  left: -50%;
+  top: -12px;
+  animation: moveThegroundRight 8s infinite linear;
+}
+.up-7 {
+  left: -60%;
+  top: -14px;
+  animation: moveThegroundRight 9s infinite linear;
+}
+.up-8 {
+  left: -70%;
+  top: -16px;
+  animation: moveThegroundRight 10s infinite linear;
+}
+.up-9 {
+  left: -80%;
+  top: -18px;
+  animation: moveThegroundRight 11s infinite linear;
+}
+.up-10 {
+  left: -90%;
+  top: -20px;
+  animation: moveThegroundRight 12s infinite linear;
+}
+.up-11 {
+  left: -100%;
+  top: -22px;
+  animation: moveThegroundRight 13s infinite linear;
+}
+.up-12 {
+  left: -110%;
+  top: -24px;
+  animation: moveThegroundRight 14s infinite linear;
+}
+.up-13 {
+  left: -120%;
+  top: -26px;
+  animation: moveThegroundRight 15s infinite linear;
+}
+.up-14 {
+  left: -130%;
+  top: -28px;
+  animation: moveThegroundRight 16s infinite linear;
+}
+.up-15 {
+  left: -140%;
+  top: -30px;
+  animation: moveThegroundRight 17s infinite linear;
+}
+.up-16 {
+  left: -150%;
+  top: -32px;
+  animation: moveThegroundRight 18s infinite linear;
+}
+.up-17 {
+  left: -160%;
+  top: -34px;
+  animation: moveThegroundRight 19s infinite linear;
+}
+.up-18 {
+  left: -170%;
+  top: -36px;
+  animation: moveThegroundRight 20s infinite linear;
+}
+.up-19 {
+  left: -180%;
+  top: -38px;
+  animation: moveThegroundRight 21s infinite linear;
+}
+.up-20 {
+  left: -190%;
+  top: -40px;
+  animation: moveThegroundRight 22s infinite linear;
+}
+
+@keyframes shadow-change {
+  0%, 100% {
+	  background-image: linear-gradient(45deg, #c9e5d9 0%, #c9e5d9 20%, #fff 21%, #fff 39%, #c9e5d9 40%, #fff 41%, #fff 59%, #c9e5d9 60%);
+	}
+  20% {
+	  background-image: linear-gradient(45deg, #c9e5d9 20%, #c9e5d9 40%, #fff 41%, #fff 59%, #c9e5d9 60%, #fff 61%, #fff 79%, #c9e5d9 80%);
+	}
+  40% {
+	  background-image: linear-gradient(45deg, #c9e5d9 40%, #c9e5d9 60%, #fff 61%, #fff 79%, #c9e5d9 80%, #fff 81%, #fff 99%, #c9e5d9 0%);
+	}
+  60% {
+	  background-image: linear-gradient(45deg, #c9e5d9 60%, #c9e5d9 80%, #fff 81%, #fff 99%, #c9e5d9 0%, #fff 1%, #fff 19%, #c9e5d9 20%);
+	}
+  80% {
+	  background-image: linear-gradient(45deg, #c9e5d9 80%, #c9e5d9 0%, #fff 1%, #fff 19%, #c9e5d9 20%, #fff 21%, #fff 39%, #c9e5d9 40%);
+	}
+}
+
+@keyframes move-right {
+  0% {
+	  opacity: 0;
+	}
+  10% {
+	  opacity: 0.4;
+	  transform: translate(10%, 10%);
+	}
+  50% {
+	  opacity: 0.2;
+	  transform: translate(450%, 25%);
+	}
+  80% {
+	  opacity: 0;
+	  transform: translateX(555%);
+	}
+  100% {
+	  opacity: 0;
+	  left: 0%;
+	  top: 0%;
+	}
+}
+
+@keyframes rotateInfinite {
+  0% {
+	  transform: rotateX(0deg);
+	}
+  50% {
+	  transform: rotateX(180deg);
+	}
+  100% {
+	  transform: rotateX(360deg);
+	}
+}
+ @keyframes moveThegroundRight {
+  90% {
+	  opacity: 1;
+	  left: 100%;
+	}
+  95%, 100% {
+	  left: 1050%;
+	  opacity: 0;
+	}
+}
+'
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_css_for_sunny_weather
+  # ========================================================================= #
+  def self.return_css_for_sunny_weather
+    return '
+/* Weather: SUNNY */
+.weather_sunny { 
+  animation:  animation_sunny 15s linear infinite;
+  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
+  height: 140px;
+  width: 20px; 
+  margin-left: -15px;
+  position: absolute;
+  left: 90px;  
+  top: 20px;
+}
+.weather_sunny:before {
+  background-color: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
+  content: ''; 
+  height: 140px; 
+  width: 20px;
+  opacity: 1; 
+  position: absolute;
+  bottom: 0px;
+  left: 0px; 
+  transform: rotate(90deg);
+}
+.weather_sunny:after {
+  background-color: #FFEE44; 
+  border-radius: 50%; 
+  box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
+  content: '';  
+  height: 80px;
+  width: 80px;  
+  position: absolute; 
+  left: -30px; 
+  top: 30px;
+}
+
+.weather_container {
+  background-color: linear-gradient(left, #00BBFF, #00BBFF 14.3%, #2EB5E5 14.3%, #2EB5E5 28.6%, #E6E6E6 28.6%, #E6E6E6 42.9%, #F3D166 42.9%, #F3D166 57.2%, #222233 57.2%, #222233 71.5%, #444444 71.5%, #444444 85.8%, #85DB8C 85.8%);
+  transform: scale(.9);
+  width: 1200px;
+  position: absolute;
+  height: 210px;
+  left: 50%;
+  top: 50%;
+  margin: -65px -600px;
+}
+
+@keyframes animation_sunny { 
+  0%    { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+'
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_css_for_tetris
   #
-  # This method will return, as a String, the content of all .css files
-  # distributed within the Cyberweb project. (Or, more accurately, those
-  # that are registered to be distributed.)
+  # This is the CSS that will be returned when we want to enable the small
+  # tetris-game that is distributed with the cyberweb project.
   # ========================================================================= #
-  def self.return_content_of_all_the_CSS_files
-    _ = ''.dup
-    Cyberweb::ARRAY_LOCAL_CSS_FILES.each {|this_css_file|
-      target_file = DIRECTORY_WITH_CSS_FILES+this_css_file+'.css'
-      if File.exist? target_file
-        _ << File.read(target_file)
-        _ << "\n"
-      end
-    }
-    return _
+  def self.return_css_for_tetris
+    return 'canvas#tetris {
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  width: 640px;
+  height: 640px;
+  margin: -320px 0 0 -320px;
+}
+    '
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_this_css_component
+  # ========================================================================= #
+  def self.return_this_css_component(
+      i = :animated_bike
+    )
+    i = i.to_s.dup
+    unless i.end_with? '.css'
+      i << '.css'
+    end
+    unless i.include? '/'
+      i.prepend(
+        Cyberweb.project_base_directory?+
+        'cascading_style_sheets/custom/'
+      )
+    end
+    # ======================================================================= #
+    # i will now be something like:
+    #
+    #   /usr/lib/ruby/site_ruby/3.1.0/cyberweb/cascading_style_sheets/custom/animated_bike.css
+    #
+    # ======================================================================= #
+    if File.exist? i
+      i = File.read(i)
+    end
+    return i
   end
 
   # ========================================================================= #
@@ -38,6 +690,11 @@ module Cyberweb
   #
   # This method will take CSS classes, find the corresponding rule for
   # them and then return this rule as a String.
+  #
+  # Usage example:
+  #
+  #   x = Cyberweb.return_the_content_of_these_css_classes('input_for_the_calculator')
+  #
   # ========================================================================= #
   def self.return_the_content_of_these_css_classes(
       these_css_classes = 'BG_BLACK pad0_4em'
@@ -66,7 +723,43 @@ module Cyberweb
   end; self.instance_eval { alias embed_these_css_classes return_the_content_of_these_css_classes } # === Cyberweb.embed_these_css_classes
 
   # ========================================================================= #
-  # === Cyberweb.return_this_css_style                           (style tag)
+  # === Cyberweb.return_content_of_all_the_CSS_files
+  #
+  # This method will return, as a String, the content of all .css files
+  # distributed within the Cyberweb project. (Or, more accurately, those
+  # that are registered to be distributed.)
+  #
+  # The method can only return the content of just one .css file too;
+  # simply pass it in as the argument to the method, as the following
+  # example showcases.
+  #
+  # Usage example:
+  #
+  #   x = Cyberweb.return_this_internal_css_file_as_a_string('misc.css')
+  #
+  # ========================================================================= #
+  def self.return_content_of_all_the_CSS_files(
+      array = Cyberweb::ARRAY_LOCAL_CSS_FILES
+    )
+    _ = ''.dup
+    # ======================================================================= #
+    # The next [] is necessary because the input may also be a String,
+    # yet we must use .each on the input.
+    # ======================================================================= #
+    [array].flatten.compact.each {|this_css_file|
+      target_file = DIRECTORY_WITH_CSS_FILES+
+                    this_css_file
+      target_file << '.css' unless target_file.end_with? '.css'
+      if File.exist? target_file
+        _ << File.read(target_file)
+        _ << "\n"
+      end
+    }
+    return _
+  end; self.instance_eval { alias return_this_internal_css_file_as_a_string return_content_of_all_the_CSS_files } # === Cyberweb.return_this_internal_css_file_as_a_string
+
+  # ========================================================================= #
+  # === Cyberweb.return_this_css_style                            (style tag)
   #
   # This method returns a proper CSS <style> tag, that is one that
   # starts with <style> and ends with </style>.
@@ -142,7 +835,7 @@ module Cyberweb
       # ===================================================================== #
       # === Handle colour-input next
       # ===================================================================== #
-      i = ::Cyberweb.sanitize_for_colours(i) # Since as of Jul 2011. bl $CYBERWEB/colours/sanitize_for_colours.rb
+      i = ::Cyberweb.sanitize_for_colours(i) # Since as of Jul 2011. bl $CYBERWEB/colours/colours.rb
       # ===================================================================== #
       # RANDOM_BORDER
       # ===================================================================== #
@@ -293,7 +986,9 @@ module Cyberweb
     if block_given?
       yielded = yield
       if yielded.is_a? Hash
+        # =================================================================== #
         # === :width
+        # =================================================================== #
         if yielded.has_key? :width
           box_width = yielded.delete(:width).to_s
         end
@@ -357,8 +1052,7 @@ module Cyberweb
   right: 0;
   transform: rotate(45deg);
 }'.dup
-    return addnl(
-    return_this_css_style(
+    return return_this_css_style(
       css_style_to_use.to_s
     ).to_s+
     div('cap_box_wrapper', id: 'drag_cap_box_wrapper') {
@@ -378,7 +1072,6 @@ module Cyberweb
         }
       }
     }
-    )
   end
 
   # ========================================================================= #
@@ -434,12 +1127,12 @@ img {
 </style>
 <div id="infobox">
 <a href="beispiel3b.htm">
-<img src="http://aktuell.de.selfhtml.org/artikel/css/infobox/schmetterling.png" width="80" height="80" alt="schmetterling">
+<img src="https://i.imgur.com/nSuF9W9.png" width="80" height="80" alt="schmetterling">
 </a>
 
 <div><p><strong>INFO</strong></p>
  <p>'+text_to_be_shown_on_the_popup_box+'</p>
- <p><img src="http://aktuell.de.selfhtml.org/artikel/css/infobox/schmetterling.png" width="150" height="150" alt=""></p>
+ <p><img src="https://i.imgur.com/nSuF9W9.png" height="150" alt=""></p>
  <ul>
   <li>Lorem ipsum dolor sit amet</li>
   <li>Lorem ipsum dolor sit amet</li>
@@ -525,7 +1218,7 @@ img {
     )
     output = ''
     _ = '<link rel="stylesheet" type="text/css" href="'
-    input << 'DATA/cascading_style_sheets/'
+    input << 'cyberweb/cascading_style_sheets/'
     use_these_css_files.each {|css_file|
       output << (
         _+input+css_file+'.css" />' + NL
@@ -594,6 +1287,7 @@ img {
     _
   end
 
+  require 'cyberweb/colours/colours.rb'
   # ========================================================================= #
   # === Cyberweb.return_css_class
   #