diff --git a/resources/public/css/spinner.css b/resources/public/css/spinner.css new file mode 100644 index 0000000..66bc787 --- /dev/null +++ b/resources/public/css/spinner.css @@ -0,0 +1,141 @@ +/* + * Cribbed from http://tobiasahlin.com/spinkit/ + * (source here https://github.com/tobiasahlin/SpinKit) + * Thanks Tobias! + */ + +.sk-fading-circle { + margin: 100px auto; + width: 40px; + height: 40px; + position: relative; +} + +.sk-fading-circle .sk-circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} + +.sk-fading-circle .sk-circle:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: white; + border-radius: 100%; + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; +} +.sk-fading-circle .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); +} +.sk-fading-circle .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); +} +.sk-fading-circle .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.sk-fading-circle .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); +} +.sk-fading-circle .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); +} +.sk-fading-circle .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.sk-fading-circle .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); +} +.sk-fading-circle .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); +} +.sk-fading-circle .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} +.sk-fading-circle .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); +} +.sk-fading-circle .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); +} +.sk-fading-circle .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} +.sk-fading-circle .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; +} +.sk-fading-circle .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} +.sk-fading-circle .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} +.sk-fading-circle .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; +} +.sk-fading-circle .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; +} +.sk-fading-circle .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; +} +.sk-fading-circle .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; +} +.sk-fading-circle .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; +} +.sk-fading-circle .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; +} +.sk-fading-circle .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; +} + +@-webkit-keyframes sk-circleFadeDelay { + 0%, 39%, 100% { opacity: 0; } + 40% { opacity: 1; } +} + +@keyframes sk-circleFadeDelay { + 0%, 39%, 100% { opacity: 0; } + 40% { opacity: 1; } +} diff --git a/resources/public/css/yyy-static.css b/resources/public/css/yyy-static.css index 0587468..515088f 100644 --- a/resources/public/css/yyy-static.css +++ b/resources/public/css/yyy-static.css @@ -23,6 +23,14 @@ * ## html elements generally in alphabetic order */ +a { + color: silver; +} + +a:hover, a:active { + color: white; +} + body { font-family: "Archivo Narrow", "Helvetica", "Sans", sans-serif; background-color: rgb( 50, 109, 177); @@ -160,7 +168,7 @@ th { #main-container{ } -#back-link { +#back-link, .back-link { min-width: 8em; padding: 0.25em 1em; background-color: gray; @@ -170,7 +178,7 @@ th { border-bottom-right-radius: 0.5em; } -#back-link:hover, #back-link:active { +#back-link:hover, #back-link:active, .back-link:hover, .back-link:active, { text-decoration: none; background-color: rgb(160, 160, 160); } @@ -308,6 +316,9 @@ th { color: white; } +.splash-screen { +} + .warn { color: maroon; } @@ -430,7 +441,7 @@ th { } #nav menu li { - padding: 0.5em; + padding: 0.5em 2em 0.5em 0.5em; margin: 0.5 em; font-size: 150%; } @@ -463,6 +474,14 @@ th { text-align: right; } + .hidden { + display: none; + } + + .shown { + display: block; + } + /* content of the current in the Wiki - editable, provided by users. Within main-container */ #content { border: thin solid silver; @@ -496,22 +515,16 @@ th { font-weight: bold; } - #nav:hover #nav-menu, #nav:hover #phone-side-bar { - display: block; - list-style-type: none; - width: 100%; - } - #nav-icon { padding: 0; } - #nav-menu, #phone-side-bar { - display: none; + #nav-menu { + list-style-type: none; } #nav menu li { - padding: 0.5em; + padding: 0.5em 2em 0.5em 0.5em; margin: 0.5 em; font-size: 150%; } diff --git a/resources/templates/home.html b/resources/templates/home.html index 31a313d..c0b6d43 100644 --- a/resources/templates/home.html +++ b/resources/templates/home.html @@ -1,38 +1,39 @@ - - - Welcome to YouYesYet + + + + + + You Yes Yet?
-
-
-
-

Welcome to YouYesYet

-

If you're seeing this message, that means you haven't yet compiled your ClojureScript!

-

Please run lein figwheel to start the ClojureScript compiler and reload the page.

-

For better ClojureScript development experience in Chrome follow these steps:

-
    -
  • Open DevTools -
  • Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1 > General > Console) -
  • Check-in "Enable custom formatters" -
  • Close DevTools -
  • Open DevTools -
-

See ClojureScript documentation for further details.

-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ You Yes Yet is loading. + You must enable JavaScript to use the You Yes Yet app. +

- {% script "/vendor/leaflet/dist/leaflet.js" %} - {% style "/assets/bootstrap/css/bootstrap.min.css" %} - {% style "/assets/font-awesome/css/font-awesome.min.css" %} - {% style "/css/screen.css" %}