diff options
| author | Harald Eilertsen <haraldei@anduin.net> | 2023-12-26 17:23:58 +0100 |
|---|---|---|
| committer | Harald Eilertsen <haraldei@anduin.net> | 2023-12-26 17:23:58 +0100 |
| commit | cc9cf903313e44b8d83dc6354a21dfe5b693e618 (patch) | |
| tree | 8c48a38309abfb2af71300693d2680bce0ae0fc5 | |
| parent | 9ab32d6c1229cbedb3c644c92d205531bfa28495 (diff) | |
| download | yggdrasilweb-bruk-css-styling.tar.gz yggdrasilweb-bruk-css-styling.tar.bz2 yggdrasilweb-bruk-css-styling.zip | |
Forenkle HTML og flytt layout til CSS.bruk-css-styling
Flyttet alt som handler om layout og utseende til style.css, og
forenklet HTML koden ved å fjerne ting som har med dette å gjøre.
Endret også standard tegnkoding i html filene til UTF-8, slik at man
slipper å bruke HTML entiteter (æ og venner) for å skrive danske
tegn.
Omsluttet navigasjonslenkene med <nav>-tagger, for å gjøre disse mer
tilgjengelige for folk som bruker skjermlesere og annen
hjelpeprogramvare for å lese sidene.
Endret også kontaktsiden til å bruke tekst heller enn et bilde som
inneholder tekst. Bildet skal ligge under teksten omtrent som før, selc
om det kan se litt annerledes ut avhengig av størrelse på skjerm og
skrifter osv.
La inn brytningspunkter (soft hyphens) i overskriftene, siden det kan
bli kluss på enkelte mobiler om ikke "Asatrofællesskabed" kan brytes
over flere linjer.
Har sikkert gjort litt annet småplukk også...
| -rw-r--r-- | 1.html | 69 | ||||
| -rw-r--r-- | 2.html | 65 | ||||
| -rw-r--r-- | 3.html | 75 | ||||
| -rw-r--r-- | 4.html | 58 | ||||
| -rw-r--r-- | index.html | 55 | ||||
| -rw-r--r-- | news.html | 76 | ||||
| -rw-r--r-- | pics/logosten.jpg | bin | 0 -> 593147 bytes | |||
| -rw-r--r-- | style.css | 53 |
8 files changed, 264 insertions, 187 deletions
@@ -1,38 +1,33 @@ -<HTML> -<HEAD> -<!-- Minus AutoDato --> -<TITLE>Asatrofællesskabet Yggdrasil</TITLE> +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="stylesheet" href="style.css" /> + <meta charset="utf-8" /> + <title>Asatrofællesskabet Yggdrasil</title> + <script> + <!-- + if (top.frames.length != 0) top.location = self.document.location; + // --> + </script> + </head> + <body lang="dk"> + <h1>Asatro­fælles­skabet Yggdrasil</h1> -<meta name="Generator" content="Stone's WebWriter 4"> -<SCRIPT LANGUAGE=JAVASCRIPT> -<!-- -if (top.frames.length!=0) - top.location=self.document.location; -// --> -</SCRIPT> -</HEAD> -<body bgcolor="#000000" text="#FFFFFF" vlink="#FFFFFF" link="#FFFFFF"> -<CENTER><FONT SIZE="+6">Asatrofællesskabet Yggdrasil</FONT></CENTER> -<br> -<br> -<CENTER> -<br><br> -<IMG SRC="pics/IMG_3598.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMG_3589.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMG_3590.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMG_3587.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMG_3574.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMG_3575.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMG_3576.jpg" WIDTH="" HEIGHT="" BORDER="0"></A> -<br> -<br> -<FONT SIZE="+6"><A HREF="index.html"><----</A>                 <A HREF="3.html">Kontakt</A>                 <A HREF="2.html">----></A></FONT> -</CENTER> -</body> -</HTML>
\ No newline at end of file + <img src="pics/IMG_3598.jpg" alt="" /> + <img src="pics/IMG_3589.jpg" alt="" /> + <img src="pics/IMG_3590.jpg" alt="" /> + <img src="pics/IMG_3587.jpg" alt="" /> + <img src="pics/IMG_3574.jpg" alt="" /> + <img src="pics/IMG_3575.jpg" alt="" /> + <img src="pics/IMG_3576.jpg" alt="" /> + + <nav> + <ul> + <li><a href="index.html"><----</a></li> + <li><a href="3.html">Kontakt</a></li> + <li><a href="2.html">----></a></li> + </ul> + </nav> + </body> +</html> @@ -1,36 +1,33 @@ -<HTML> -<HEAD> -<!-- Minus AutoDato --> -<TITLE>Asatrofællesskabet Yggdrasil</TITLE> +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="stylesheet" href="style.css" /> + <meta charset="utf-8" /> + <title>Asatrofællesskabet Yggdrasil</title> + <script> + <!-- + if (top.frames.length != 0) top.location = self.document.location; + // --> + </script> + </head> + <body lang="dk"> + <h1>Asatro­fælles­skabet Yggdrasil</h1> -<meta name="Generator" content="Stone's WebWriter 4"> -<SCRIPT LANGUAGE=JAVASCRIPT> -<!-- -if (top.frames.length!=0) - top.location=self.document.location; -// --> -</SCRIPT> -</HEAD> -<body bgcolor="#000000" text="#FFFFFF" vlink="#FFFFFF" link="#FFFFFF"> -<CENTER><FONT SIZE="+6">Asatrofællesskabet Yggdrasil</FONT> -<br> -<br> -<IMG SRC="pics/pano6.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/pano1.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMG_3563.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMG_3564.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMG_3565.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMG_3567.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/HPIM1958.jpg" WIDTH="" HEIGHT="" BORDER="0"> + <img src="pics/pano6.jpg" alt="" /> + <img src="pics/pano1.jpg" alt="" /> + <img src="pics/IMG_3563.jpg" alt="" /> + <img src="pics/IMG_3564.jpg" alt="" /> + <img src="pics/IMG_3565.jpg" alt="" /> + <img src="pics/IMG_3567.jpg" alt="" /> + <img src="pics/HPIM1958.jpg" alt="" /> -<br><br> -<FONT SIZE="+6"><A HREF="1.html"><----</A>                 <A HREF="3.html">Kontakt</A>                 <A HREF="4.html">----></A></FONT> -</CENTER> -</body> -</HTML> + <nav> + <ul> + <li><a href="1.html"><----</a></li> + <li><a href="3.html">Kontakt</a></li> + <li><a href="4.html">----></a></li> + </ul> + </nav> + </body> +</html> @@ -1,25 +1,54 @@ -<!-- Minus AutoDato --> -<TITLE>Asatrofællesskabet Yggdrasil</TITLE> +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="stylesheet" href="style.css" /> + <meta charset="utf-8" /> + <title>Asatrofællesskabet Yggdrasil</title> + <script> + <!-- + if (top.frames.length != 0) top.location = self.document.location; + // --> + </script> + </head> + <body lang="dk"> + <h1>Asatro­fælles­skabet Yggdrasil</h1> -<meta name="Generator" content="Stone's WebWriter 4"> -<SCRIPT LANGUAGE=JAVASCRIPT> -<!-- -if (top.frames.length!=0) - top.location=self.document.location; -// --> -</SCRIPT> -<body bgcolor="#000000" text="#FFFFFF" vlink="#FFFFFF" link="#FFFFFF"> -</HEAD> -<CENTER> -<br> -<br> -<br> -<br> -<IMG SRC="pics/yggdrasiltekst.jpg" WIDTH="" HEIGHT=""> -<br> -<br> -<FONT SIZE="+6"><A HREF="index.html"><----</A>                 <A HREF="https://www.facebook.com/profile.php?id=100089179794220">Facebook</A>                 <A HREF="4.html">----></A></FONT> -</FONT> -</CENTER> + <div class="contact"> + <p>Asatrofællesskabet Yggdrasil - ikke kun et asatrofællesskab, men også et + skovfællesskab.</p> + + <p>Asatrofællesskabet Yggdrasil (ATF) blev stiftet i 2003 af fem familier, som + ønskede sig et varigt sted, hvor de kunne samles om den gamle nordiske skik. + Siden er der kommet flere gode folk til med samme ønske. + Stedet/skoven, som ligger i Silkeborg kommune går i dag under navnet + Yggdrasilskoven.</p> + + <p>Asatrofællesskabet Yggdrasil er ikke kun et asatrofællesskab, men også et + skovfællesskab. Derfor mødes alle fra fællesskabet til minimum en årlig + arbejdsdag hvor der hugges brænde, plejes skov og venskab, materiel + opdateres og der hygges. Vi samles altid om et godt måltid i de smukke + omgivelser.</p> + + <p>Der søges ikke aktivt efter nye medlemmer. Men har man interesse i + ovenstående, kan man søge om medlemskab. Det kræver at man aktivt og + socialt, deltager i mindst en arbejdsdag samt deltager i andre aktiviteter + som fx blot.</p> + + <p>Skoven danner rammen om fællesskab, hygge, åndelighed i bred forstand, de + gode historier og venskaber. Filosofien er at skoven skal vokse sundt sammen + med de mennesker der kommer på stedet og glædes.</p> + + <p>Kontakt: yggdrasilskoven(@)gmail.com<br> + facbook: https://www.facebook.com/profile.php?id=100089179794220</p> + </div> + + <nav> + <ul> + <li><A HREF="index.html"><----</A></li> + <li><A HREF="https://www.facebook.com/profile.php?id=100089179794220">Facebook</A></li> + <li><A HREF="4.html">----></A></li> + </ul> + </nav> </body> -</HTML>
\ No newline at end of file +</HTML> @@ -1,30 +1,30 @@ -<HTML> -<HEAD> -<!-- Minus AutoDato --> -<TITLE>Asatrofællesskabet Yggdrasil</TITLE> +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="stylesheet" href="style.css" /> + <meta charset="utf-8" /> + <title>Asatrofællesskabet Yggdrasil</title> + <script> + <!-- + if (top.frames.length != 0) top.location = self.document.location; + // --> + </script> + </head> + <body lang="dk"> + <h1>Asatro­fælles­skabet Yggdrasil</h1> -<meta name="Generator" content="Stone's WebWriter 4"> -<SCRIPT LANGUAGE=JAVASCRIPT> -<!-- -if (top.frames.length!=0) - top.location=self.document.location; -// --> -</SCRIPT> -<body bgcolor="#000000" text="#FFFFFF" vlink="#FFFFFF" link="#FFFFFF"> -</HEAD> -<CENTER><FONT SIZE="+6">Asatrofællesskabet Yggdrasil</FONT></CENTER> -<br> -<br> -<CENTER><IMG SRC="pics/2006_03_25-238.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/728_n.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMG_0667.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMGP2760.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br> -<br> -<FONT SIZE="+6"><A HREF="3.html"><----</A>                 <A HREF="3.html">Kontakt</A>                 <A HREF="news.html">Presse</A></FONT> -</CENTER> -</body> -</HTML>
\ No newline at end of file + <img src="pics/2006_03_25-238.jpg" alt="" /> + <img src="pics/728_n.jpg" alt="" /> + <img src="pics/IMG_0667.jpg" alt="" /> + <img src="pics/IMGP2760.jpg" alt="" /> + + <nav> + <ul> + <li><a href="3.html"><----</a></li> + <li><a href="3.html">Kontakt</a></li> + <li><a href="news.html">Presse</a></li> + </ul> + </nav> + </body> +</html> @@ -1,25 +1,32 @@ -<HTML> -<HEAD> -<!-- Minus AutoDato --> -<TITLE>Asatrofællesskabet Yggdrasil</TITLE> +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="stylesheet" href="style.css" /> + <meta charset="utf-8" /> + <title>Asatrofællesskabet Yggdrasil</title> + <script> + <!-- + if (top.frames.length != 0) top.location = self.document.location; + // --> + </script> + </head> + <body lang="dk"> + <h1>Asatro­fælles­skabet Yggdrasil</h1> -<meta name="Generator" content="Stone's WebWriter 4"> -<SCRIPT LANGUAGE=JAVASCRIPT> -<!-- -if (top.frames.length!=0) - top.location=self.document.location; -// --> -</SCRIPT> -<body bgcolor="#000000" text="#FFFFFF" vlink="#FFFFFF" link="#FFFFFF"> -</HEAD> -<CENTER><FONT SIZE="+6">Asatrofællesskabet Yggdrasil</FONT> -<br><br> -<IMG SRC="pics/pano6 copy.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/IMGP8514.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br> -<br> -<FONT SIZE="+6"><A HREF="https://www.facebook.com/profile.php?id=100089179794220Facebook">Facebook</A>                 <A HREF="3.html">Kontakt</A>                 <A HREF="1.html">----></A></FONT> -</CENTER> -</body> -</HTML>
\ No newline at end of file + <img src="pics/pano6%20copy.jpg" alt="" /> + <img src="pics/IMGP8514.jpg" alt="" /> + + <nav> + <ul> + <li> + <a href="https://www.facebook.com/profile.php?id=100089179794220Facebook"> + Facebook + </a> + </li> + <li><a href="3.html">Kontakt</a></li> + <li><a href="1.html">----></a></li> + </ul> + </nav> + </body> +</html> @@ -1,41 +1,37 @@ -<!-- Minus AutoDato --> -<TITLE>Asatrofællesskabet Yggdrasil</TITLE> +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="stylesheet" href="style.css" /> + <meta charset="utf-8" /> + <title>Asatrofællesskabet Yggdrasil</title> + <script> + <!-- + if (top.frames.length != 0) top.location = self.document.location; + // --> + </script> + </head> + <body lang="dk"> + <h1>Asatro­fælles­skabet Yggdrasil</h1> -<meta name="Generator" content="Stone's WebWriter 4"> -<SCRIPT LANGUAGE=JAVASCRIPT> -<!-- -if (top.frames.length!=0) - top.location=self.document.location; -// --> -</SCRIPT> -</HEAD> -<BODY bgcolor="#000000" text="#FFFFFF" vlink="#FFFFFF" link="#FFFFFF"> -<CENTER><FONT SIZE="+6">Asatrofællesskabet Yggdrasil</FONT> -<br> -<br> -<IMG SRC="pics/bt_26_forbagside.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/bt_26_side8.jpg" WIDTH="" HEIGHT="" BORDER="0">> -<br><br> -<IMG SRC="pics/bt_26_side9.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/bt_26_side10.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/bt_26_side11.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/ma_270304_1.gif" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/ma_270304_2.gif" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/ma_270304_3.gif" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/ma_270304_4.gif" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/mja_03_juli_2009_side3.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<IMG SRC="pics/mja_09_juni_2009.jpg" WIDTH="" HEIGHT="" BORDER="0"> -<br><br> -<FONT SIZE="+6"><A HREF="4.html"><----</A>                 <A HREF="3.html">Kontakt</A>                 <A HREF="index.html">----></A></FONT> -</CENTER> -</BODY> -</HTML>
\ No newline at end of file + <img src="pics/bt_26_forbagside.jpg" alt="" /> + <img src="pics/bt_26_side8.jpg" alt="" />> + <img src="pics/bt_26_side9.jpg" alt="" /> + <img src="pics/bt_26_side10.jpg" alt="" /> + <img src="pics/bt_26_side11.jpg" alt="" /> + <img src="pics/ma_270304_1.gif" alt="" /> + <img src="pics/ma_270304_2.gif" alt="" /> + <img src="pics/ma_270304_3.gif" alt="" /> + <img src="pics/ma_270304_4.gif" alt="" /> + <img src="pics/mja_03_juli_2009_side3.jpg" alt="" /> + <img src="pics/mja_09_juni_2009.jpg" alt="" /> + + <nav> + <ul> + <li><a href="4.html"><----</a></li> + <li><a href="3.html">Kontakt</a></li> + <li><a href="index.html">----></a></li> + </ul> + </nav> + </body> +</html> diff --git a/pics/logosten.jpg b/pics/logosten.jpg Binary files differnew file mode 100644 index 0000000..863cde1 --- /dev/null +++ b/pics/logosten.jpg diff --git a/style.css b/style.css new file mode 100644 index 0000000..bef9b66 --- /dev/null +++ b/style.css @@ -0,0 +1,53 @@ +body { + background-color: black; + color: white; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + hyphens: auto; +} + +a, a:visited, a:hover { + color: white; +} + +h1 { + font-size: 300%; + margin-bottom: 2em; +} + +img { + margin-bottom: 1em; + width: 1024px; +} + +nav { + width: 1024px; +} + +nav ul { + display: flex; + justify-content: space-between; + padding: 0; + font-size: 300%; +} + +nav li { + list-style: none; +} + +.contact { + background-image: url("pics/logosten.jpg"); + background-size: cover; + background-position: center; + width: 1024px; + font-size: xx-large; + text-shadow: 2px 2px 4px black; + padding: 0.5em; +} + +@media screen and (max-width: 1024px) { + nav, img, .contact { width: 100%; } + nav ul { flex-direction: column } +} |
