‰PNG  IHDR!@õ PLTE>O`jqv‚‚ €ÄDótEXtPage
style.scm - metalympiada
git clone git://metalympiada.org/
Log | Files | README | LICENSE

style.scm (4013B)


   1 (define-module (style)
   2     #:export (stylesheet
   3               background-color foreground-color
   4               logo-ratio))
   5 
   6 (define background-color #x153e4f)
   7 (define foreground-color #x118282)
   8 (define error-color #xcc2936)
   9 (define peach-color #xf1bf98)
  10 (define bright-color #xf9fbf2)
  11 (define logo-ratio 0.618034)
  12 
  13 (define (color->string color)
  14   (let ((str (number->string color 16)))
  15        (string-append "#" (make-string (- 6 (string-length str)) #\0) str)))
  16 
  17 (define stylesheet `(
  18   (body
  19     (font-size 0)
  20     (font-family "monospace")
  21     (margin 0)
  22     (visibility "hidden"))
  23 
  24   (rect
  25     (transform-origin "50%" ,(string-append (number->string (* 50 logo-ratio)) "%"))
  26     (animation "zoom 1.5s linear infinite"))
  27 
  28   (rect (: (nth-of-type "odd"))
  29     (fill ,(color->string foreground-color)))
  30 
  31   (rect (: (nth-of-type "even"))
  32     (fill ,(color->string bright-color)))
  33 
  34   (@ (keyframes "zoom")
  35     (from (transform (scale ,(/ 1 logo-ratio))))
  36     (to (transform (scale ,logo-ratio))))
  37 
  38   (.logo
  39     (width "7rem"))
  40                      
  41   (.meta 
  42     (position "fixed")
  43     (visibility "visible")
  44     (top 0)
  45     (left 0)
  46     (width "100vw")
  47     (height "100vh")
  48     (z-index 1)
  49     (object-fit "fill"))
  50 
  51   (main
  52     (visibility "visible")
  53     (font-size "1.1rem")
  54     (position "relative")
  55     (padding "2rem")
  56     (margin "1em auto")
  57     (max-width "45rem")
  58     (line-height "1.5")
  59     (background ,(color->string bright-color))
  60     (z-index 2)
  61     (overflow-x "hidden")
  62     (mix-blend-mode "lighten"))
  63  
  64   (header
  65     (display "flex")
  66     (flex-wrap "wrap")
  67     (justify-content "space-around")
  68     (align-items "center"))
  69 
  70   (footer
  71     (font-size "1rem")
  72     (text-align "center"))
  73   
  74   (table
  75     (min-width "50%"))
  76 
  77   (.textlogo
  78     (font-size (min "2.2vw" "0.795rem")))
  79 
  80   (nav
  81     (margin "1rem 0"))
  82   
  83   (a
  84     (color ,(color->string foreground-color)))
  85                      
  86   (a (: "visited")
  87     (color ,(color->string foreground-color)))
  88                      
  89   (h1
  90     (margin "2rem 0 0.8rem"))
  91   
  92   (.navlink
  93     (margin-right "1rem"))
  94                      
  95   (.text
  96     (font-size "1rem")
  97     (white-space "pre-wrap"))
  98                      
  99   (.problem-num
 100     (font-size "2.5rem")
 101     (float "left")
 102     (line-height 1.1))
 103   
 104   (.button
 105     (cursor "pointer")
 106     (padding "0.5rem 0.7rem")
 107     (margin "0.2rem 1rem 0.2rem 0.5rem")
 108     (background ,(color->string foreground-color))
 109     (box-shadow ,(string-append (color->string foreground-color) "a0") "0.2rem" "0.2rem"))
 110                      
 111   (.block
 112     (display "block")
 113     (margin "auto"))
 114  
 115   (.short
 116     (width "9.5rem"))
 117   
 118   (.small
 119     (margin "1rem 0")
 120     (font-size "0.8rem"))
 121                      
 122   (.error
 123     (display "inline-block")
 124     (color ,(color->string error-color))
 125     (border "0.1rem solid")
 126     (padding "0 1rem")
 127     (margin "1rem 0")
 128     (line-height "3rem"))
 129                      
 130   (.login
 131     (display "flex")
 132     (flex-wrap "wrap")
 133     (align-items "center"))
 134                     
 135   (input
 136     (border "none")
 137     (font "inherit")
 138     (font-size "1.2rem")
 139     (padding "0.2rem 0.5rem")
 140     (margin "0.2rem 0.5rem")
 141     (background "#000")
 142     (color ,(color->string bright-color)))
 143                      
 144   (.stagit
 145     (overflow-x "scroll")
 146     (margin-bottom "2rem"))
 147                      
 148   (.line
 149     (text-decoration "none"))
 150                      
 151   (.blob
 152     (font-size "0.765rem"))
 153                      
 154   (.d
 155     (color ,(color->string error-color))
 156     (text-decoration "none"))
 157                      
 158   (.d (: "visited")
 159     (color ,(color->string error-color)))
 160                      
 161   (.i
 162     (color ,(color->string foreground-color))
 163     (text-decoration "none"))
 164                      
 165   (.h
 166     (color "#aaa")
 167     (text-decoration "none"))
 168                       
 169   (.start
 170     (margin "0.5em"))
 171                     
 172   (.good
 173     (color ,(color->string foreground-color)))
 174                     
 175   (.bad
 176     (color ,(color->string error-color)))
 177   
 178   (.ghost
 179     (visibility "hidden"))))
…©¤ZøIDATxÚí[OlgvŸj¸Ø1Ê)‡Ûe{) {öà^zÙ-Ê‘ˆ. óq¡é!AQeÅñÁ—Þ5vW>°@× Lµe©"3óT˜¾´@�TÔ"H‹ °M ¸— Yl¼Ê"Rvkס(~}ïRâH¤øïض¥Hœ¿yï÷~ï÷¾ù"Iÿÿú¿ðòfðg¼^™ ˜@ƒYª30c®ÂŒQwV€Ê•ÙêÌHF€ÙÒ Ua¶4h5€™Èl„/Î ÀŠ0“™¥ÍEÊ�æÏ`Ì „X Æê,<’\Å,z„3lÝi2k°U½ýh[[0ƒ´V#Ü™žÌPY$„é£5Fk(O¯G!– š¢`)§u˜^SPÐT¦3gjiÇÕW€ýÍ´Ò®Õþd�1†Áœ–�âë¦4h‚Cr}Ê4€ÙeÚ4ô8¤L«ÌàÍ „]a{™’GºøÓI»ØUhñZ�� Z1 ˜NÚ Z`uz\¼;¥¦¨‚CàL€×©‚07�¦€gx@…]÷§¡Áºá¡$HJݟʵãí#Àx‡ädÖêB “xZ0• � �ñ6´ò4YÄ—á"D¥,e§Hƒ±!ļil¿±^„.„áSH;ö5öº€XEoò(B`ÍÜhWÜÉM·:+`[ÁæÄAÀ¾†M‰1["eƒ°>€§2l+2«–?9�¢Kd\… “»v­ö:ò–Ì$¦–꾨Œå_VE(XiÒ4`gI§ Î#„…?˜0Š!PcÄ5HòËâ„à–Eê)â5!™1‹åxSvƒIΘ« Ó :kÿ%ò„Ò®Õ˜»D®Oè¶©õý@ o2A;“¹$$'JƒA– ¿)+ÕòDQ„²Ol<ýAf«êNæ�¨«öYÔì„-ZäŒ8ÀQTêôyý—d+¹v,e—Øè÷Ãö'Ñ#†½½Ò@ &À‹qì>¹DÆŒÈ0 �<Næ\ƒ&áñª~=“ï xÉ-o‚l`8wNÒ bF’¤A´#¨–ïô.‘qÎL Ð×N.ƒd6‚ñåd9êí'š¢"€ã__Ш«±>‹ªÂ]XôÇVfTtìØ›�²×“ƒz¹¸ãà;™øîc ¥q£¨�D¿§)‘±¥ÝØŠÞ)ŸhJf#Ó1ŒºøÊÌ£U_Sºï´ fOSh?k.=?îðÈ|jÍÌìiJ6ZɘJ(ÞIƒ÷ @´’¬?&�äE¿×ÐÄ7¦eƒ1i�ïOÙŒ$¡àŒGæpX�®6йM^ˆFPœ¿Æ[Á†ßMX2ÒY6ÄJdwOý›$…$X ü7‰x5*sØÛ£wûgZüç@Bq�>>AÕ`ž–RûµãVOÎq€\‹7°†Å.ËÚ1‚ãU§i(®3±Çv¢§ò™}j,À&?Tį×èD[ŠïɧiP3ü�þÒê €¶"¸ØüŸîcO>�¢ž¬Ø²Ø§íÑ'¹œ1™ÇMÎ (·ÈdxÿP5O¢¨+÷$Õì÷6™âf|_ d,o·*V<F÷ñEõõ$‹7<2i}"PtÎs~”þiÍ„{I~ŒÉÄ&­N¢¨ßðɾžî ÈŽÆö¡¨Õ~«Z`}ƒÌšŒ7¤ž’YGýÐÓ}£ ÄÎcO«%x¸ö¥ç€dú€Î@tkѹOÃÜ©«n|Ÿ;Ñyû¿µà�ø/—¶m,…}.}Åzi�ÓÎ2vŒ¾³»úb\—Ñ'�â�—Bê Ï|õXJv™�γÊéÃèbá@Û€WŸ>+‡2¹$;Þµöé!ŠB¶fêÑno×3ÚœõÉW׎�¡f!§ŽÃoqÿ¶ëB@/ÉØ3O¸` í¸ã&€Ç¥5~ìÖÌ5þg?àOšT Ý4äÕÖÍ«§DvX|S,Ç?xí[ãÜAÔÿø%ø1VCE³à®Ûi3tƒà`1ëkO+Ñ ‹üãïð§ÍÆ¡lF¦ÛdnžÙ&¸½gɺcÇû3߯­³Gïcäe¾ÿ~xëÇÍ/%w«ÁÒW+Œ¡Åí{åÌÁþ‹�wæ;¾D­·xûÖçX\mŠœðWj ´Uˆ¸`l–¯ÇdÓ%ŽmýE»}ëˆtQµ Và¢Èc[¬EQ$€Ø °•„�¿üsTf¾‡ß¿ýœ¯Ñõ~ Žòà +×lqŽ¡^¢.±ìœØéìþ*3ß»ÄùÛ­È®^û‡¨ÐtÖzÏ^ƒÈ�-±bBö¾ÃwÏsØTSØVº²ž{È$2 ª-ÓÊk'ÛºL_†¥Í¸¨Î[ TæÃvªÕk RóIDfÙ–ïÓ#x÷QW’Y¾Îݸ¨sÞz»Ãm~Mô%r¼Ên;"³ú²\¡g¡X��×(׬êÖûyD1o5IX¹ðÌÑæ!?À³È;& ‰bˆ£Ih^tˆ)’¸hO(soùT½�k{Eg^ì1:ØAt4Ig6�ŠoDþ«nõÈrÓuIšÃ’Y5‹¸�,?‰N‘•sÏü¾m’9˽ßÝ’ÄëÍ,®EFÀLÜ@€"ŸHIpýÛyS‹SYØÒ¾V&†ï—8O¶°Mér‘¡ÅÁ F�nØÕRâØ4æú��˜W~Èù5ÙžGwAÜäߨ÷�L¾j¯ >Æ {z˜‚-ÉD›îŠ~ȥݟ¼œ¦xæM[-n#ÎK¾ÌVð=qAùf€‚óÍ¢M§ñDØÈçî<—v½¦CBÑÑ(« î<ß¿žg6v7÷-ÀË+uŸ>".(hm6m+´�óCaHcô&ü宕ÅÐ*gÝ·<ôxuHKRœHÈŠÐ^B  À‹Í×Z�†‰ª©Z:Ô\Ò[˜•8€Á–s4‡™´Ñš,˜ÒRbçA«´¤o/º;›’M$ÿw5 AÁ¨\‡ †ùdê Ø<àï>/º‰Õð®ÃÈå"ç•RLÒ´Šeøj®»)¬³ä"çG\y—~�οP³ÂF(&OÇ#g½`{|m#@ž.àݦ)Ïò ‹Ò!Z` ÅšYmD¢>ÃFáVúyT߆@£ó*�j©¶Mb¬n�0iGž(µèÏÄNž ³2%w#æÑêu ßz Úiq¼SJÖøGhX÷FOÑ×µÐ}Œ´*A-P‰�u»;(dÞ¡-Öï¶þ^èº^ ò׈öŽýe^fuè×D§+ùp[�º‘”ùëcŸ›¿&Æ^¶ôb-/=ôÍ’¦ØP c4(G×+°©w=Aæ­6ìqa}é~&�Š.¶€Lg æÌm»ùAfÕÚ!Ãßé4=µ�û °³ÿlîáÜ�¸Õ>\I ìÆ�u^´oq¼ÎJJ…Ô¶“îÍýju3oi@»ªwãkshîê¹¢IEND®B`‚