Przeglądaj źródła

Use CSS3 media queries to position the navbar fixed when the display is high enough

Thomas Buck 8 lat temu
rodzic
commit
ccf9d36162
3 zmienionych plików z 70 dodań i 27 usunięć
  1. 2
    2
      input/index.md
  2. 3
    2
      page.html
  3. 65
    23
      static/css/style.css

+ 2
- 2
input/index.md Wyświetl plik

@@ -5,7 +5,7 @@ flattr: true
5 5
 compat: home
6 6
 ---
7 7
 
8
-<div style="width: 150px; height: 150px; float: right; border: 2px, solid, #000000; border-radius: 10px; background-image: url(http://www.gravatar.com/avatar/8d18fec40a74782052fb4c007d212475?s=150); margin-left: 2em; margin-bottom: 1em;"></div>
8
+<div id="index-avatar"></div>
9 9
 
10 10
 I'm a <!--%
11 11
 from datetime import datetime
@@ -44,7 +44,7 @@ for p in posts[0:5]:
44 44
 
45 45
 ### Tweets
46 46
 
47
-<div style="width: 100%; margin-left: auto; margin-right: auto;">
47
+<div id="index-twitter-page">
48 48
 <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/xythobuz" data-widget-id="318732638158471170" data-chrome="noheader nofooter">Tweets by @xythobuz</a>
49 49
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
50 50
 </div>

+ 3
- 2
page.html Wyświetl plik

@@ -50,6 +50,7 @@
50 50
                 for p in mpages[1:]:
51 51
                     print(entry % (htmlspecialchars(p["url"]), htmlspecialchars(p["title"])))
52 52
             %-->
53
+            <li><a href="https://github.com/xythobuz">GitHub</a></li>
53 54
             <li><a href="http://xythobuz.de/git/">Git</a></li>
54 55
             <li><a href="http://xythobuz.de/lastmusic">♫</a></li>
55 56
             <!--%
@@ -61,7 +62,7 @@
61 62
             %-->
62 63
         </ul>
63 64
     </div>
64
-    <div style="width: 75%; margin-left: auto; margin-right: auto;">
65
+    <div id="content">
65 66
         {{ __content__ }}
66 67
         <!--%
67 68
             import sys
@@ -110,7 +111,7 @@
110 111
         &middot;
111 112
         <a href="https://github.com/sachinchoolur/lightGallery">lightGallery</a>
112 113
         &middot;
113
-        <a rel="license" href="http://creativecommons.org/licenses/by/3.0/de/deed.en">CC-BY</a>
114
+        <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC-BY</a>
114 115
         &middot;
115 116
         <a href="http://www.amazon.de/?_encoding=UTF8&amp;camp=1638&amp;creative=19454&amp;linkCode=ur2&amp;site-redirect=de&amp;tag=xythobuzorg-21">Amazon.de Affiliate</a>
116 117
         &middot;

+ 65
- 23
static/css/style.css Wyświetl plik

@@ -1,22 +1,50 @@
1 1
 body {
2 2
     font-size: 1.2em;
3 3
     font-family: 'Droid Sans', sans-serif;
4
+    margin: 0px;
5
+    padding: 0px;
4 6
 }
5 7
 
6 8
 #nav {
7 9
     border-bottom-style: solid;
8 10
     border-bottom-width: 2px;
9 11
     border-bottom-color: orange;
10
-    margin-bottom: 2em;
12
+    background-color: white;
13
+    width: 100%;
11 14
 }
12 15
 
13
-#nav ul {
14
-    list-style-type: none;
16
+#content {
17
+    width: 75%;
18
+    margin-left: auto;
19
+    margin-right: auto;
15 20
 }
16 21
 
17
-#nav ul li {
18
-    display: inline;
19
-    margin-right: 0.5em;
22
+@media (min-height: 750px) {
23
+    #nav {
24
+        position: fixed;
25
+        top: 0;
26
+        left: 0;
27
+    }
28
+
29
+    #content {
30
+        padding-top: 5em;
31
+    }
32
+
33
+    #index-avatar {
34
+        margin-top: 1.5em;
35
+    }
36
+}
37
+
38
+pre {
39
+    max-height: 300px;
40
+    overflow: scroll;
41
+    font-size: 0.9em;
42
+    padding: 10px;
43
+    margin: 1em;
44
+    border-style: solid;
45
+    border-width: 2px;
46
+    border-color: orange;
47
+    border-radius: 10px;
20 48
 }
21 49
 
22 50
 #home {
@@ -24,6 +52,15 @@ body {
24 52
     margin-right: 0.5em;
25 53
 }
26 54
 
55
+#nav ul {
56
+    list-style-type: none;
57
+}
58
+
59
+#nav ul li {
60
+    display: inline;
61
+    margin-right: 0.5em;
62
+}
63
+
27 64
 #nav a:link {
28 65
     color: black;
29 66
     font-weight: bold;
@@ -36,22 +73,6 @@ body {
36 73
     text-decoration: none;
37 74
 }
38 75
 
39
-pre {
40
-    max-height: 300px;
41
-    overflow: scroll;
42
-    font-size: 0.9em;
43
-    padding: 10px;
44
-    margin: 1em;
45
-    border-style: solid;
46
-    border-width: 2px;
47
-    border-color: orange;
48
-    border-radius: 10px;
49
-}
50
-
51
-iframe[id^='twitter-widget-'] {
52
-    width: 100%;
53
-}
54
-
55 76
 #footer {
56 77
     color: gray;
57 78
     text-align: center;
@@ -65,4 +86,25 @@ iframe[id^='twitter-widget-'] {
65 86
 
66 87
 #footer a:visited {
67 88
     color: gray;
68
-}
89
+}
90
+
91
+#index-avatar {
92
+    width: 150px;
93
+    height: 150px;
94
+    float: right; border: 2px, solid, #000000;
95
+    border-radius: 10px;
96
+    background-image: url(http://www.gravatar.com/avatar/8d18fec40a74782052fb4c007d212475?s=150);
97
+    margin-left: 2em;
98
+    margin-bottom: 1em;
99
+}
100
+
101
+#index-twitter-page {
102
+    width: 100%;
103
+    margin-left: auto;
104
+    margin-right: auto;
105
+}
106
+
107
+iframe[id^='twitter-widget-'] {
108
+    width: 100%;
109
+}
110
+

Ładowanie…
Anuluj
Zapisz