summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorKlara Modin <kasm@kasm.eu>2019-04-22 16:15:59 +0200
committerKlara Modin <kasm@kasm.eu>2019-04-22 16:15:59 +0200
commit7ad97f051c51b0d110cce79ce709ec9e8a3b1db1 (patch)
tree3913bacc5d8889e8ca8ba7ffc4b2d9cd6a04cfa0
parentf9ccf1ce2d56b00cac60b2e911eef1b82158ed53 (diff)
fancier transitions and flexbox
-rw-r--r--html/default.css37
-rw-r--r--html/index.html5
-rwxr-xr-xupdate2
3 files changed, 32 insertions, 12 deletions
diff --git a/html/default.css b/html/default.css
index 02425da..d17d150 100644
--- a/html/default.css
+++ b/html/default.css
@@ -5,11 +5,12 @@ div#title {
}
section.menu {
- float: left;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
background: #de3163;
padding-left: 5%;
padding-right: 5%;
- width: 90%;
}
span.menuhead {
@@ -17,6 +18,7 @@ span.menuhead {
background: #ee4173;
padding: 0.5em;
float: left;
+ box-shadow: 0px -1.5px 3px 0px #ce2153;
}
span.menuitem {
@@ -24,35 +26,47 @@ span.menuitem {
background: #ce2153;
padding: 0.5em;
float: left;
+ transition: box-shadow 1s;
+ transition: background 0.2s;
}
span.menuitem:hover {
background: #ee4173;
+ box-shadow: 0px -1.5px 3px 0px #ce2153;
+ transition: box-shadow 1s;
+ transition: background 0.2s;
}
section.submenu {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
background: #ee4173;
- float: left;
- clear: left;
+ padding-top: 1%;
+ padding-left: 5%;
+ padding-right: 5%;
}
span.submenuhead {
background: #ee4173;
padding: 0.2em;
- float: left;
margin: 0.2em;
}
span.submenuitem {
- border-radius: 0.8em;
+ border-radius: 0.5em;
background: #de3163;
padding: 0.2em;
- float: left;
margin: 0.2em;
+ box-shadow: 0px 0px 2px 2px #ce2153;
+ transition: box-shadow 1s;
+ transition: background 0.2s;
}
span.submenuitem:hover {
background: #ee4173;
- float: left;
+ box-shadow: 0px 0px 0px 0px #ce2153;
+ transition: box-shadow 1s;
+ transition: background 0.2s;
}
header {
@@ -73,6 +87,8 @@ footer {
}
section#content {
+ display: flex;
+ flex-direction: column;
padding-top: 2%;
padding-bottom: 2%;
width: 100%;
@@ -87,10 +103,13 @@ article {
margin-left: 3%;
margin-right: 3%;
width: 92%;
- float: left;
+ border-radius: 0.5em 0.5em 0.5em 0.5em;
+ box-shadow: 0px 0px 3px 3px #de3163;
}
body {
+ display: flex;
+ flex-direction: column;
background: lightgrey;
padding: 1em;
font-family: serif;
diff --git a/html/index.html b/html/index.html
index fc46bb8..cff3f94 100644
--- a/html/index.html
+++ b/html/index.html
@@ -13,16 +13,17 @@
<span class="menuhead">Start</span>
<a href="https://git.kasm.eu/"><span class="menuitem">Git</span></a>
</section>
+ <section class="submenu">
+ </section>
<section id="content">
<article>
<a id="welcome" />
- <!--<h6 style="margin: 0">[Datum]</h6>-->
+ <!--<h6 style="margin: 0">[Datum]</h6>-->
<h4>Välkommen</h4>
<p>
Välkommen till min Webbsida. Jag har inte särskilt mycket på den just nu.
</p>
</article>
-
</section>
<footer>
<section id="contact">
diff --git a/update b/update
index cbe2a9b..db8fe4a 100755
--- a/update
+++ b/update
@@ -1,2 +1,2 @@
#!/bin/sh
-rsync -rLuzv --delete html klara@doa.kasm.eu:/srv/http/kasm.eu
+rsync -rLzv --delete html klara@doa.kasm.eu:/srv/http/kasm.eu