Merge pull request #442 from ACCESS-Hive/310-write-content-for-how-to…

…-run-access-om

Fixed

docs/about/policies.md

@@ -1,4 +1,4 @@
-# <div class="center-icons highlight-bg"> Policies  </div>
+# <div class="highlight-bg">Policies</div>
 
 - [Procedures and Practices][pandp]: Contains documents outlining how ACCESS-NRI will function. These documents describe what users can expect and justifications for the decisions against criteria that are based on the values of the organisation.
 

docs/community_resources/training/ACCESS_training.md

@@ -6,8 +6,6 @@ This page is intended to provide access to training material directly related to
  - how to modify a model configuration
  - how to test a model modification or validate a model run
 
-## <div class="center-icons"> [JULES tutorials][jules-tutorials]  </div>
+## JULES tutorials
 
-The JULES tutorials explain how to use FCM, Rose and Cylc both for using the model and for development work. They can be useful to ACCESS users as practical demonstrations of the Rose and Cylc infrastructure.
-
-[jules-tutorials]: https://jules-lsm.github.io/tutorial/bg_info/tutorial_julesrose/index.html
+The <a href="https://jules-lsm.github.io/tutorial/bg_info/tutorial_julesrose/index.html" target="_blank">JULES tutorials</a> explain how to use FCM, Rose and Cylc both for using the model and for development work. They can be useful to ACCESS users as practical demonstrations of the Rose and Cylc infrastructure.

docs/css/access-nri.css

@@ -75,7 +75,8 @@
   --terminal-animation-directory: var(--nri-green);
   --terminal-animation-buttons: var(--nri-orange);
   --terminal-animation-buttons-hover: var(--nri-dark-blue);
-
+  --note: var(--nri-orange);
+  --note-bg: var(--md-accent-fg-color--transparent);
 }
 
 [data-md-color-scheme="custom-light"] {
@@ -148,6 +149,8 @@
   --terminal-animation-directory: var(--nri-blue);
   --terminal-animation-buttons: var(--nri-dark-blue);
   --terminal-animation-buttons-hover: var(--nri-orange);
+  --note: var(--nri-blue);
+  --note-bg: var(--md-accent-fg-color--transparent);
 }
 
 
@@ -316,57 +319,6 @@ h3 {
   color: var(--md-typeset-color);
 }
 
-
-/* =============================================================== 
-  Support icons
-*/
-/* heart animation */
-@keyframes heart {
-  0%, 40%, 80%, 100% {
-    transform: scale(1);
-  }
-  20%, 60% {
-    transform: scale(1.15);
-  }
-}
-
-.heart {
-  animation: heart 1000ms infinite;
-  color: #F82464;
-  font-size: medium;
-  margin: 0 0.2em;
-}
-
-.heart:hover {
-  color: #f82464c9;
-}
-
-.icon-supported {
-  color: var(--nri-green);
-  font-size: medium;
-  margin: 0 0.2em;
-}
-
-.icon-supported:hover {
-  color: var(--nri-green);
-}
-
-.icon-recommended {
-  color: var(--nri-orange);
-  font-size: medium;
-  margin: 0 0.2em;
-}
-
-.icon-recommended:hover {
-  color: var(--nri-orange);
-}
-
-/* Vertically center the icons */
-.center-icons {
-  vertical-align: middle;
-}
-
-
 /* =============================================================== 
   How to contribute image
 */
@@ -624,6 +576,39 @@ pre>code {
   word-break: normal;
 }
 
+/* =============================================================== 
+  Notes (!! icon marks)
+*/
+.note {
+  position: relative;
+  border: solid 0.01em var(--note);
+  background-color: var(--note-bg);
+  border-radius: 0.3em;
+  padding: 0.2em 0.3em 0.2em 1.5em;
+}
+
+.note::before {
+  position: absolute;
+  left: 0.3em;
+  font-family: "fontello";
+  content: '\e800';
+  color: var(--note);
+}
+
+/* =============================================================== 
+  External links
+*/
+.external-link::after {
+  font-family: "fontello";
+  content: '\e803';
+  vertical-align: super;
+  font-size: 0.5em;
+  margin-left: 0.3em;
+  display: inline-block;
+  transform: rotate(-45deg);
+}
+
+
 /* =============================================================== 
   Miscellaneous
 */
@@ -684,4 +669,8 @@ pre>code {
 /* image cover */
 .img-cover {
   object-fit: cover;
-}
+}
+
+.img-contain {
+  object-fit: contain;
+}