diff --git a/web/assets/css/index.css b/web/assets/css/index.css index 674f8ca..c42cb5c 100755 --- a/web/assets/css/index.css +++ b/web/assets/css/index.css @@ -2,21 +2,21 @@ body { margin-top: 25vh; min-height: 75vh; } -header { position: relative; } +header.main { + align-items: center; + flex-direction: column; } -#logo { width: 100%; } +header.main svg { width: 100%; } -nav, #services { text-align: center; width: 100%; } -nav a:last-child { margin-left: .6rem; } - - #services :is(a, span) { margin: .3rem; } #services span a { margin: 0; } @media screen and (max-width: 640px) { - #services { display: flex; flex-direction: column; } } \ No newline at end of file + #services { + display: flex; + flex-direction: column; } } \ No newline at end of file diff --git a/web/assets/css/main.css b/web/assets/css/main.css index ba1a222..151e33b 100755 --- a/web/assets/css/main.css +++ b/web/assets/css/main.css @@ -5,6 +5,7 @@ src: local('RobotoCondensed'), local('RobotoCondensed-Regular'), url(/assets/fonts/RobotoCondensed-Regular.ttf); } + :root { --background-color: #0a0a0a; --background-image: url('/assets/img/alpha1918_z.webp'); @@ -21,12 +22,15 @@ --secondary-color: #cd2682; --text-color: #0a0a0a; } } + * { margin: 0; } + ::selection { background-color: var(--secondary-color); color: var(--background-color); } + a, button { color: var(--primary-color); @@ -45,6 +49,7 @@ button { font: inherit; padding: 0; } + p { text-align: justify; line-height: var(--text-indent); @@ -56,6 +61,7 @@ p.center { text-align: center; text-indent: 0; } + h1 { font-size: 1.8rem; text-align: center; @@ -87,8 +93,10 @@ tr :is(th, td):not(:last-child) { padding-right: .5rem; } tr a:not(:last-child) { margin-right: .25rem; } + .highlighted { color: var(--primary-color); } + html { margin-left: calc(100vw - 100%); margin-right: 0; } @@ -108,39 +116,37 @@ body { background-image: var(--background-image); background-size: min(calc((100vw - 960px)/2), 25vw); background-repeat: no-repeat; - background-position: bottom left; - } -} + background-position: bottom left; } } -header { +header.main { display: flex; - flex-wrap: wrap; justify-content: space-between; } -#logo { - display: block; - width: 360px; } +header.main svg { width: 360px; } -#logo text { fill: var(--text-color); } +header.main svg text { fill: var(--text-color); } -#logo .logo { - font-size: 2rem; +header.main svg text:first-child { + font-size: 3.55rem; font-variant-caps: small-caps; font-weight: bold; } -@media screen and (-webkit-min-device-pixel-ratio:0) { - #logo .logo { font-size: 2.082rem; } } +header.main svg text:last-child { font-size: 1.5rem; } -@-moz-document url-prefix() { - #logo .logo { font-size: 2rem; } } +@supports (-moz-appearance: none) { + header.main svg text:last-child { transform: scale(.993, 1); } } -#logo .under { font-size: .88rem; } +header.main nav { + align-items: center; + display: flex; + flex-direction: column; + font-variant: small-caps; + width: 360px; } -nav { margin-top: .5rem; } - -nav a { font-variant: small-caps; } - -nav a:not(:first-child) { margin-left: .6rem; } +header.main nav div { + display: flex; + justify-content: space-evenly; + width: 100%; } section { margin-top: 1rem; @@ -151,9 +157,9 @@ footer { text-align: center; padding: 1rem 0; } -@media screen and (max-width: 640px) { - body > header { display: block; } +@media screen and (max-width: 740px) { + header.main { + align-items: center; + flex-direction: column; } - #logo { width: 100%; } - - body > header nav { text-align: center; } } \ No newline at end of file + header.main svg { width: 100%; } } \ No newline at end of file