From 37ea2122b063fe5edced8b04e4cae5ae39c1656b Mon Sep 17 00:00:00 2001 From: ChronosX88 Date: Sun, 9 Jan 2022 18:28:10 +0300 Subject: [PATCH] Make links box as flex box --- index.html | 20 +++---- style.css | 165 ++++++++++++++++++++++++++++++----------------------- 2 files changed, 102 insertions(+), 83 deletions(-) diff --git a/index.html b/index.html index 219ba1f..0d51723 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ Amalthea - + @@ -13,18 +13,12 @@

mc.amalthea.one

Java + Bedrock
- - - - - - - - - - - -
Telegram chatDiscord
Support usServer map
+
+ Telegram chat + Discord + Support us + Server map +
diff --git a/style.css b/style.css index 53cce65..08296a4 100644 --- a/style.css +++ b/style.css @@ -1,70 +1,95 @@ -@font-face { - font-family: "PRegular"; - src: url("8bitOperatorPlus8-Regular.ttf"); -} -@font-face { - font-family: "PBold"; - src: url("8bitOperatorPlus8-Bold.ttf"); /* see /license.txt */ -} -::selection { - background-color: beige; - color: black; -} -body { - padding: 0px; - margin: 0px; - display: table; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: black; - color: beige; - text-shadow: 1px 1px black; - font-family: PRegular; -} -td { - padding: 10px; -} -a { - color: beige; -} -a:hover { - background-color: beige; - color: midnightblue; -} -a:focus-visible { - background-color: beige; - color: midnightblue; - outline: none; -} -.card { - display: table-cell; - vertical-align: middle; -} -.content { - padding: 20px 50px; - margin-left: auto; - margin-right: auto; - width: 400px; - background-color: midnightblue; - border: 5px solid beige; -} -.address { - text-align: center; - margin: 0px; - text-shadow: 3px 3px black; - font-family: PBold; -} -.address-desc { - text-align: center; - text-shadow: 2px 2px black; - font-size: 24px; -} -.links { - width: 100%; - margin: auto; - margin-top: 10px; - font-size: 24px; -} +@font-face { + font-family: "PRegular"; + src: url("8bitOperatorPlus8-Regular.ttf"); +} +@font-face { + font-family: "PBold"; + src: url("8bitOperatorPlus8-Bold.ttf"); /* see /license.txt */ +} +::selection { + background-color: beige; + color: black; +} + +body { + display: flex; + align-items: center; + justify-content: center; + left: 0; + top: 0; + height: 100%; + width: 100%; + position: fixed; + background-color: black; + color: beige; + text-shadow: 1px 1px black; + font-family: PRegular; +} + +@media only screen and (max-width: 768px) { + .content { + width: 100vw; + + } + + .address { + font-size: 160%; + + } + + .address-desc { + font-size: 140%; + } + + .links { + margin-top: 10px; + font-size: 140%; + } +} + +a { + color: beige; +} +a:hover { + background-color: beige; + color: midnightblue; +} +a:focus-visible { + background-color: beige; + color: midnightblue; + outline: none; +} + +.content { + padding: 20px 50px; + margin-left: auto; + margin-right: auto; + width: 400px; + background-color: midnightblue; + border: 5px solid beige; +} +.address { + text-align: center; + margin: 0px; + text-shadow: 3px 3px black; + font-family: PBold; +} +.address-desc { + text-align: center; + text-shadow: 2px 2px black; + font-size: 24px; +} +.links { + width: 100%; + margin: auto; + display: flex; + flex-wrap: wrap; + margin-top: 10px; + margin-bottom: 10px; + font-size: 24px; + justify-content: space-between; +} + +.links > a { + margin: 10px; +}